Changeset 44695

Timestamp:

01/24/2019 11:10:34 AM (6 years ago)

Author:

azaozz

Message:

TinyMCE Classic Block: fix the Edit Image modal to work as in the Classic Editor.

Fixes #46085.

Location:

trunk/src

Files:

• js/_enqueues/vendor/tinymce/plugins/wpeditimage/plugin.js (modified) (7 diffs)
• wp-includes/css/editor.css (modified) (1 diff)

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

@@ -348 +348 @@
     }
 
-    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 || ! $imageNode.length ) {
+            return;
+        }
+
+        imageNode = $imageNode[0];
         classes = tinymce.explode( imageData.extraClasses, ' ' );
 
@@ -390 +395 @@
 
         // Preserve empty alt attributes.
-        editor.$( imageNode ).attr( 'alt', imageData.alt || '' );
+        $imageNode.attr( 'alt', imageData.alt || '' );
 
         linkAttrs = {
@@ -514 +519 @@
 
     function editImage( img ) {
-        var frame, callback, metadata;
+        var frame, callback, metadata, imageNode;
 
         if ( typeof wp === 'undefined' || ! wp.media ) {
@@ -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
@@ -539 +547 @@
 
         callback = function( imageData ) {
-            editor.focus();
             editor.undoManager.transact( function() {
-                updateImage( img, imageData );
+                updateImage( imageNode, imageData );
             } );
             frame.detach();
@@ -551 +558 @@
             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' );
         });
 
@@ -811 +824 @@
     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' );
         }
     });

trunk/src/wp-includes/css/editor.css

@@ -1212 +1212 @@
 }
 
+.mce-content-body dl.wp-caption {
+    max-width: 100%;
+}
+
 /* Quicktags */
 .quicktags-toolbar {