TinyMCE: fix problems with undo/redo after resizing an image several times. Fixes #28389.

Built from https://develop.svn.wordpress.org/trunk@28614


git-svn-id: http://core.svn.wordpress.org/trunk@28438 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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,11 +753,13 @@ 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' ) {
+			editor.undoManager.transact( function() {
+				var parent, width,
+					dom = editor.dom;
+
 				node.className = node.className.replace( /\bsize-[^ ]+/, '' );
 
 				if ( parent = dom.getParent( node, '.wp-caption' ) ) {
@@ -775,6 +777,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 				}
 				// 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 ) {
+		if ( event.format !== 'raw' ) {
 			event.content = editor.wpSetImgCaption( event.content );
+		}
 	});
 
 	editor.on( 'PostProcess', function( event ) {

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;
 }