From 86d04a546f08bd603ca108dcc73cae5f74dda3c6 Mon Sep 17 00:00:00 2001
From: Andrew Ozz <azaozz@git.wordpress.org>
Date: Thu, 24 Jan 2019 11:10:34 +0000
Subject: [PATCH] TinyMCE Classic Block: fix the Edit Image modal to work as in
 the Classic Editor.

Fixes #46085.

git-svn-id: https://develop.svn.wordpress.org/trunk@44695 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../tinymce/plugins/wpeditimage/plugin.js     | 27 ++++++++++++++-----
 src/wp-includes/css/editor.css                |  4 +++
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/js/_enqueues/vendor/tinymce/plugins/wpeditimage/plugin.js b/src/js/_enqueues/vendor/tinymce/plugins/wpeditimage/plugin.js
index 0f0a5daf45..9142ed5717 100644
--- a/src/js/_enqueues/vendor/tinymce/plugins/wpeditimage/plugin.js
+++ b/src/js/_enqueues/vendor/tinymce/plugins/wpeditimage/plugin.js
@@ -347,12 +347,17 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		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 || ! $imageNode.length ) {
+			return;
+		}
+
+		imageNode = $imageNode[0];
 		classes = tinymce.explode( imageData.extraClasses, ' ' );
 
 		if ( ! classes ) {
@@ -389,7 +394,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		dom.setAttribs( imageNode, attrs );
 
 		// Preserve empty alt attributes.
-		editor.$( imageNode ).attr( 'alt', imageData.alt || '' );
+		$imageNode.attr( 'alt', imageData.alt || '' );
 
 		linkAttrs = {
 			href: imageData.linkUrl,
@@ -513,7 +518,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 	}
 
 	function editImage( img ) {
-		var frame, callback, metadata;
+		var frame, callback, metadata, imageNode;
 
 		if ( typeof wp === 'undefined' || ! wp.media ) {
 			editor.execCommand( 'mceImage' );
@@ -522,6 +527,9 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 
 		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,9 +546,8 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		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,6 +557,12 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		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,7 +823,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 
 	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' );
 		}
 	});
 
diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css
index 2c7de53faf..9184bc9d8d 100644
--- a/src/wp-includes/css/editor.css
+++ b/src/wp-includes/css/editor.css
@@ -1211,6 +1211,10 @@ i.mce-i-wp_code:before {
 	content: "\f104";
 }
 
+.mce-content-body dl.wp-caption {
+	max-width: 100%;
+}
+
 /* Quicktags */
 .quicktags-toolbar {
 	padding: 3px;