Ticket #46085: 46085.1.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 ) {
@@ -389 +394 @@
                 dom.setAttribs( imageNode, attrs );
 
                 // Preserve empty alt attributes.
-                editor.$( imageNode ).attr( 'alt', imageData.alt || '' );
+                $imageNode.attr( 'alt', imageData.alt || '' );
 
                 linkAttrs = {
                         href: imageData.linkUrl,
@@ -513 +518 @@
         }
 
         function editImage( img ) {
-                var frame, callback, metadata;
+                var frame, callback, metadata, imageNode;
 
                 if ( typeof wp === 'undefined' || ! wp.media ) {
                         editor.execCommand( 'mceImage' );
@@ -522 +527 @@
 
                 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 +546 @@
                 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 +557 @@
                 frame.on( 'close', function() {
                         editor.focus();
                         frame.detach();
+
+                        // `close` fires first...
+                        // To be able to update the image node, we need to find it here,
+                        // and use it in the callback.
+                        imageNode = editor.$( 'img[data-wp-editing]' )
+                        imageNode.removeAttr( 'data-wp-editing' );
                 });
 
                 frame.open();
@@ -810 +823 @@
 
         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' );
                 }
         });
 

src/wp-includes/css/editor.css

@@ -1211 +1211 @@
         content: "\f104";
 }
 
+.mce-content-body dl.wp-caption {
+        max-width: 100%;
+}
+
 /* Quicktags */
 .quicktags-toolbar {
         padding: 3px;