Ticket #27941: 27941.4.patch

src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

@@ -1 +1 @@
 /* global tinymce */
 tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
-        var toolbarActive = false;
+        var ghostObject, resizeHelper,
+                toolbarActive = false;
 
         function parseShortcode( content ) {
                 return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {
@@ -963 +964 @@
                 }
         });
 
+        // Resize helper. Note: not used in IE < 11
+        function resizing( event ) {
+                editor.dom.setStyles( resizeHelper, { top: event.pageY, left: event.pageX, display: 'block' } );
+                editor.dom.setHTML( resizeHelper, ghostObject.clientWidth + ' &times; ' + ghostObject.clientHeight );
+        }
+
+        editor.on( 'ObjectResizeStart', function( event ) {
+                resizeHelper = editor.dom.create( 'DIV', { 'class': 'mce-resize-helper', 'data-mce-bogus': 1 }, event.width + ' &times; ' + event.height );
+                ghostObject = editor.dom.select( '.mce-clonedresizable' )[0];
+                editor.getBody().appendChild( resizeHelper );
+                editor.on( 'mousemove', resizing );
+        });
+
+        editor.on( 'ObjectResized', function( event ) {
+                editor.off( 'mousemove', resizing );
+                editor.dom.remove( resizeHelper );
+                resizeHelper = null;
+        });
+
         return {
                 _do_shcode: parseShortcode,
                 _get_shcode: getShortcode

src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -476 +476 @@
         margin-right: 7px;
 }
 
+/* Resize helper. */
+.mce-resize-helper {
+        background-color: #555;
+        background-color: rgba( 0, 0, 0, 0.75 );
+        border-radius: 3px;
+        color: white;
+        display: none;
+        font-family: sans-serif;
+        font-size: 14px;
+        line-height: 14px;
+        margin: 5px 10px;
+        padding: 5px;
+        position: absolute;
+}
+
 @media print,
         (-o-min-device-pixel-ratio: 5/4),
         (-webkit-min-device-pixel-ratio: 1.25),