Ticket #27941: 27941.patch

src/wp-includes/css/editor.css

@@ -1782 +1782 @@
         height: 30px;
 }
 
+/* Resize helper. */
+
+.mce-resize-helper {
+        background-color: rgba( 0, 0, 0, 0.75 );
+        border-radius: 3px;
+        color: white;
+        margin: 5px;
+        padding: 5px;
+        position: absolute;
+}
+
 @media screen and ( max-width: 782px ) {
         #wp-fullscreen-close,
         #wp-fullscreen-central-toolbar,

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

@@ -963 +963 @@
                 }
         });
 
+        // Resize helper.
+
+        editor.on( 'init', function() {
+                var ghostObject, iFramePos, resizeHelper;
+
+                editor.on( 'ObjectResizeStart', function( event ) {
+                        resizeHelper = tinymce.DOM.create( 'DIV', { 'class': 'mce-resize-helper' }, event.width + ' × ' + event.height );
+                        ghostObject = editor.dom.select( '.mce-clonedresizable' )[0];
+                        iFramePos = tinymce.DOM.getPos( editor.getContentAreaContainer().querySelector( 'iframe' ) );
+                        document.body.appendChild( resizeHelper );
+                        editor.on( 'mousemove', resizing );
+                } );
+
+                editor.on( 'ObjectResized', function() {
+                        editor.off( 'mousemove', resizing );
+                        tinymce.DOM.remove( resizeHelper );
+                } );
+
+                function resizing( event ) {
+                        tinymce.DOM.setStyles( resizeHelper, { 'top': event.clientY + iFramePos.y, 'left': event.clientX + iFramePos.x } );
+                        tinymce.DOM.setHTML( resizeHelper, ghostObject.width + ' × ' + ghostObject.height );
+                }
+        } );
+
         return {
                 _do_shcode: parseShortcode,
                 _get_shcode: getShortcode