From 8f5ea4bacd06360f4b0c6a3de95e3ca75026f429 Mon Sep 17 00:00:00 2001
From: Andrew Ozz <azaozz@git.wordpress.org>
Date: Thu, 29 May 2014 07:50:35 +0000
Subject: [PATCH] TinyMCE: fix problems with undo/redo after resizing an image
 several times. Fixes #28389.

git-svn-id: https://develop.svn.wordpress.org/trunk@28614 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../js/tinymce/plugins/wpeditimage/plugin.js  | 50 +++++++++++--------
 .../js/tinymce/skins/wordpress/wp-content.css | 10 ++--
 2 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js b/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js
index 8894cd8f57..0b9d2a0140 100644
--- a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js
+++ b/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js
@@ -435,10 +435,10 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		dom.setAttrib( node, 'data-wp-imgselect', 1 );
 		rectangle = dom.getRect( node );
 
-		toolbarHtml = '<div class="dashicons dashicons-edit edit" data-mce-bogus="1"></div>' +
-			'<div class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></div>';
+		toolbarHtml = '<i class="dashicons dashicons-edit edit" data-mce-bogus="1"></i>' +
+			'<i class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></i>';
 
-		toolbar = dom.create( 'div', {
+		toolbar = dom.create( 'p', {
 			'id': 'wp-image-toolbar',
 			'data-mce-bogus': '1',
 			'contenteditable': false
@@ -753,28 +753,31 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 	});
 
 	editor.on( 'ObjectResized', function( event ) {
-        var parent, width,
-			node = event.target,
-			dom = editor.dom;
+		var node = event.target;
 
 		if ( node.nodeName === 'IMG' ) {
-			node.className = node.className.replace( /\bsize-[^ ]+/, '' );
+			editor.undoManager.transact( function() {
+				var parent, width,
+					dom = editor.dom;
 
-			if ( parent = dom.getParent( node, '.wp-caption' ) ) {
-				width = event.width || dom.getAttrib( node, 'width' );
+				node.className = node.className.replace( /\bsize-[^ ]+/, '' );
 
-				if ( width ) {
-					width = parseInt( width, 10 );
+				if ( parent = dom.getParent( node, '.wp-caption' ) ) {
+					width = event.width || dom.getAttrib( node, 'width' );
 
-					if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
-						width += 10;
+					if ( width ) {
+						width = parseInt( width, 10 );
+
+						if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
+							width += 10;
+						}
+
+						dom.setStyle( parent, 'width', width + 'px' );
 					}
-
-					dom.setStyle( parent, 'width', width + 'px' );
 				}
-			}
-			// refresh toolbar
-			addToolbar( node );
+				// refresh toolbar
+				addToolbar( node );
+			});
 		}
     });
 
@@ -921,7 +924,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 			return;
 		}
 
-		if ( node.nodeName === 'DIV' && dom.getParent( node, '#wp-image-toolbar' ) ) {
+		if ( node.nodeName === 'I' && dom.getParent( node, '#wp-image-toolbar' ) ) {
 			image = dom.select( 'img[data-wp-imgselect]' )[0];
 
 			if ( image ) {
@@ -940,6 +943,11 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		}
 	});
 
+	// Remove toolbar from undo levels
+	editor.on( 'BeforeAddUndo', function( event ) {
+		event.level.content = event.level.content.replace( /<p [^>]*data-mce-bogus[^>]+>[\s\S]*<\/p>/g, '' );
+	});
+
 	editor.on( 'cut', function() {
 		removeToolbar();
 	});
@@ -953,7 +961,9 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 	};
 
 	editor.on( 'BeforeSetContent', function( event ) {
-		event.content = editor.wpSetImgCaption( event.content );
+		if ( event.format !== 'raw' ) {
+			event.content = editor.wpSetImgCaption( event.content );
+		}
 	});
 
 	editor.on( 'PostProcess', function( event ) {
diff --git a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css
index 8fceb8ef63..972c07f330 100644
--- a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css
+++ b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css
@@ -261,7 +261,7 @@ audio {
 }
 
 .wpview-wrap .toolbar div,
-#wp-image-toolbar div {
+#wp-image-toolbar i {
 	margin-top: 7px;
 	margin-left: 7px;
 	padding: 2px;
@@ -277,8 +277,8 @@ audio {
 
 .ie8 .wpview-wrap .toolbar div,
 .ie7 .wpview-wrap .toolbar div,
-.ie8 #wp-image-toolbar div,
-.ie7 #wp-image-toolbar div {
+.ie8 #wp-image-toolbar i,
+.ie7 #wp-image-toolbar i {
 	display: inline;
 	padding: 0;
 }
@@ -319,7 +319,7 @@ audio {
 
 
 .wpview-wrap .toolbar div:hover,
-#wp-image-toolbar div:hover {
+#wp-image-toolbar i:hover {
 	box-shadow: 0 1px 3px rgba(0,0,0,0.8);
 	background-color: #000;
 	color: #2ea2cc;
@@ -471,7 +471,7 @@ img.wp-oembed {
 }
 
 .rtl .wpview-wrap .toolbar div,
-.rtl #wp-image-toolbar div {
+.rtl #wp-image-toolbar i {
 	margin-left: auto;
 	margin-right: 7px;
 }