Ticket #46085: 46085.diff

src/js/_enqueues/vendor/tinymce/plugins/wpeditimage/plugin.js

@@ -347 +347 @@
                 return serializer.serialize( editor.parser.parse( caption, { forced_root_block: false } ) );
         }
 
-        function updateImage( imageNode, imageData ) {
-                var classes, className, node, html, parent, wrap, linkNode,
+        function updateImage( $imageNode, imageData ) {
+                var classes, className, node, html, parent, wrap, linkNode, imageNode,
                         captionNode, dd, dl, id, attrs, linkAttrs, width, height, align,
                         $imageNode, srcset, src,
                         dom = editor.dom;
 
+                if ( ! $imageNode.length ) {
+                        return;
+                }
+
+                imageNode = $imageNode[0];
                 classes = tinymce.explode( imageData.extraClasses, ' ' );
 
                 if ( ! classes ) {
@@ -373 +378 @@
                 width = imageData.width;
                 height = imageData.height;
 
+                if ( editor.settings.classic_block_editor ) {
+                        // The width coming from the media modal is wrong.
+                        // It is the "old" `$content_width` from the theme.
+                        var editorBody = editor.getBody();
+                        var maxWidth = editorBody.clientWidth;
+
+                        if ( width && maxWidth && width > maxWidth ) {
+                                if ( height ) {
+                                        var ratio = maxWidth / width;
+                                        height = parseInt( height * ratio, 10 );
+                                }
+
+                                width = maxWidth;
+                        }
+                }
+
                 if ( imageData.size === 'custom' ) {
                         width = imageData.customWidth;
                         height = imageData.customHeight;
@@ -389 +410 @@
                 dom.setAttribs( imageNode, attrs );
 
                 // Preserve empty alt attributes.
-                editor.$( imageNode ).attr( 'alt', imageData.alt || '' );
+                $imageNode.attr( 'alt', imageData.alt || '' );
 
                 linkAttrs = {
                         href: imageData.linkUrl,
@@ -513 +534 @@
         }
 
         function editImage( img ) {
-                var frame, callback, metadata;
+                var frame, callback, metadata, imageNode;
 
                 if ( typeof wp === 'undefined' || ! wp.media ) {
                         editor.execCommand( 'mceImage' );
@@ -522 +543 @@
 
                 metadata = extractImageData( img );
 
+                // Mark the image node so we can select it later.
+                editor.$( img ).attr( 'data-wp-editing', 1 );
+
                 // Manipulate the metadata by reference that is fed into the PostImage model used in the media modal
                 wp.media.events.trigger( 'editor:image-edit', {
                         editor: editor,
@@ -538 +562 @@
                 wp.media.events.trigger( 'editor:frame-create', { frame: frame } );
 
                 callback = function( imageData ) {
-                        editor.focus();
                         editor.undoManager.transact( function() {
-                                updateImage( img, imageData );
+                                updateImage( imageNode, imageData );
                         } );
                         frame.detach();
                 };
@@ -550 +573 @@
                 frame.on( 'close', function() {
                         editor.focus();
                         frame.detach();
+
+                        // `close` fires first...
+                        // To be able to update the image node, we need to select it here first,
+                        // and pass it to the callback.
+                        imageNode = editor.$( 'img[data-wp-editing]' )
+                        imageNode.removeAttr( 'data-wp-editing' );
                 });
 
                 frame.open();
@@ -810 +839 @@
 
         editor.on( 'beforeGetContent', function( event ) {
                 if ( event.format !== 'raw' ) {
-                        editor.$( 'img[id="__wp-temp-img-id"]' ).attr( 'id', null );
+                        editor.$( 'img[id="__wp-temp-img-id"]' ).removeAttr( 'id' );
                 }
         });