Ticket #28328: 28328.19.patch

src/wp-admin/css/edit.css

@@ -378 +378 @@
         overflow: hidden;
 }
 
+.wp-fullscreen-wrap #content-textarea-clone {
+        display: none;
+}
+
 #timestampdiv select {
         height: 21px;
         line-height: 14px;

src/wp-admin/js/editor-expand.js

@@ -1 @@
-/* global tinymce */
+/* global tinymce, console */
 
 window.wp = window.wp || {};
 
@@ -12 +12 @@
                 $visualEditor,
                 $textTop = $( '#ed_toolbar' ),
                 $textEditor = $( '#content' ),
+                textEditorPaddingTop = parseInt( $textEditor.css( 'padding-top' ), 10 ),
                 $textEditorClone = $( '<div id="content-textarea-clone"></div>' ),
                 $bottom = $( '#post-status-info' ),
                 $statusBar,
@@ -42 +43 @@
         } );
 
         $textEditor.on( 'keyup', function() {
-                var range = document.createRange(),
+                var VK = tinymce.util.VK,
+                        key = event.keyCode,
+                        range = document.createRange(),
                         start = $textEditor[0].selectionStart,
                         end = $textEditor[0].selectionEnd,
                         textNode = $textEditorClone[0].firstChild,
                         windowHeight = $window.height(),
+                        buffer = 10,
                         offset, cursorTop, cursorBottom, editorTop, editorBottom;
 
                 if ( start && end && start !== end ) {
                         return;
                 }
 
-                range.setStart( textNode, start );
-                range.setEnd( textNode, end + 1 );
+                // These are not TinyMCE ranges.
+                try {
+                        range.setStart( textNode, start );
+                        range.setEnd( textNode, end + 1 );
+                } catch ( e ) {
+                        console.log( e );
+                }
 
                 offset = range.getBoundingClientRect();
 
@@ -62 +71 @@
                         return;
                 }
 
-                cursorTop = offset.top;
-                cursorBottom = cursorTop + offset.height;
-                editorTop = $adminBar.outerHeight() + $textTop.outerHeight();
+                cursorTop = offset.top - buffer;
+                cursorBottom = cursorTop + offset.height + buffer;
+                editorTop = $adminBar.outerHeight() + $tools.outerHeight() + $textTop.outerHeight();
                 editorBottom = windowHeight - $bottom.outerHeight();
 
-                if ( cursorTop < editorTop || cursorBottom > editorBottom ) {
-                        window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - windowHeight / 2 );
+                if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
+                        window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
+                } else if ( cursorBottom > editorBottom ) {
+                        window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
                 }
         } );
 
@@ -77 +88 @@
                         return;
                 }
 
-                var hiddenHeight = $textEditorClone.width( $textEditor.width() ).text( $textEditor.val() + '&nbsp;' ).height(),
-                        textEditorHeight = $textEditor.height();
+                var textEditorHeight = $textEditor.height(),
+                        hiddenHeight;
+
+                $textEditorClone.width( $textEditor.width() );
+                $textEditorClone.text( $textEditor.val() + '&nbsp;' );
+
+                hiddenHeight = $textEditorClone.height();
 
                 if ( hiddenHeight < 300 ) {
                         hiddenHeight = 300;
@@ -90 +106 @@
 
                 $textEditor.height( hiddenHeight );
 
-                adjust( 'resize' );
+                adjust( true );
         }
 
         // We need to wait for TinyMCE to initialize.
@@ -118 +134 @@
                 editor.on( 'show', function() {
                         setTimeout( function() {
                                 editor.execCommand( 'wpAutoResize' );
-                                adjust( 'resize' );
+                                adjust( true );
                         }, 200 );
                 } );
 
@@ -195 +211 @@
 
                 editor.on( 'hide', function() {
                         textEditorResize();
-                        adjust( 'resize' );
+                        adjust( true );
                 } );
 
                 // Adjust when the editor resizes.
-                editor.on( 'nodechange setcontent keyup FullscreenStateChanged', function() {
-                        adjust( 'resize' );
-                } );
-
-                editor.on( 'wp-toolbar-toggle', function() {
-                        $visualEditor.css( {
-                                paddingTop: $visualTop.outerHeight()
-                        } );
+                editor.on( 'nodechange setcontent keyup FullscreenStateChanged wp-toolbar-toggle', function() {
+                        adjust( true );
                 } );
 
                 // And adjust "immediately".
                 // Allow some time to load CSS etc.
                 setTimeout( function() {
-                        $visualEditor.css( {
-                                paddingTop: $visualTop.outerHeight()
-                        } );
-
-                        adjust( 'resize' );
+                        adjust( true );
                 }, 500 );
         } );
 
         // Adjust when the window is scrolled or resized.
         $window.on( 'scroll resize', function( event ) {
-                adjust( event.type );
+                adjust( event.type === 'resize' );
         } );
 
-        // Adjust when exiting fullscreen mode.
+        // Adjust when entering/exiting fullscreen mode.
         fullscreen && fullscreen.pubsub.subscribe( 'hidden', function() {
-                adjust( 'resize' );
+                textEditorResize();
+                adjust( true );
         } );
 
         // Adjust when collapsing the menu.
         $document.on( 'wp-collapse-menu.editor-expand', function() {
-                adjust( 'resize' );
+                adjust( true );
         } )
 
         // Adjust when changing the columns.
         .on( 'postboxes-columnchange.editor-expand', function() {
-                adjust( 'resize' );
+                adjust( true );
         } )
 
         // Adjust when changing the body class.
         .on( 'editor-classchange.editor-expand', function() {
-                adjust( 'resize' );
+                adjust( true );
         } );
 
         // Adjust the toolbars based on the active editor mode.
-        function adjust( eventType ) {
+        function adjust( resize ) {
                 // Make sure we're not in fullscreen mode.
                 if ( fullscreen && fullscreen.settings.visible ) {
                         return;
@@ -287 +294 @@
                 statusBarHeight = visual ? $statusBar.outerHeight() : 0;
 
                 // Maybe pin the top.
-                if ( ( ! fixedTop || eventType === 'resize' ) &&
+                if ( ( ! fixedTop || resize ) &&
                                 // Handle scrolling down.
                                 ( windowPos >= ( topPos - toolsHeight - adminBarHeight ) &&
                                 // Handle scrolling up.
@@ -307 +314 @@
                                 width: editorWidth + 2
                         } );
                 // Maybe unpin the top.
-                } else if ( fixedTop || eventType === 'resize' ) {
+                } else if ( fixedTop || resize ) {
                         // Handle scrolling up.
                         if ( windowPos <= ( topPos - toolsHeight -  adminBarHeight ) ) {
                                 fixedTop = false;
@@ -342 +349 @@
                 }
 
                 // Maybe adjust the bottom bar.
-                if ( ( ! fixedBottom || eventType === 'resize' ) &&
+                if ( ( ! fixedBottom || resize ) &&
                                 // + 1 for the border around the .wp-editor-container.
                                 ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + 1 ) ) {
                         fixedBottom = true;
@@ -353 +360 @@
                                 width: editorWidth + 2,
                                 borderTop: '1px solid #dedede'
                         } );
-                } else if ( fixedBottom &&
+                } else if ( ( fixedBottom || resize ) &&
                                 ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - 1 ) ) {
                         fixedBottom = false;
 
@@ -364 +371 @@
                                 borderTop: 'none'
                         } );
                 }
+
+                if ( resize ) {
+                        $contentWrap.css( {
+                                paddingTop: $tools.outerHeight()
+                        } );
+
+                        if ( visual ) {
+                                $visualEditor.css( {
+                                        paddingTop: $visualTop.outerHeight()
+                                } );
+                        } else {
+                                $textEditor.add( $textEditorClone ).css( {
+                                        paddingTop: $textTop.outerHeight() + textEditorPaddingTop
+                                } );
+                                $textEditorClone.width( $textEditor.width() );
+                        }
+                }
         }
 
         textEditorResize();
 
-        $tools.css( {
-                position: 'absolute',
-                top: 0,
-                width: $contentWrap.width()
-        } );
+        adjust( true );
 
-        $contentWrap.css( {
-                paddingTop: $tools.outerHeight()
-        } );
-
-        // This needs to execute after quicktags is ready or a button is added...
+        // Ideally we need to resize just after QuickTags is ready.
         setTimeout( function() {
-                $textEditor.css( {
-                        paddingTop: $textTop.outerHeight() + parseInt( $textEditor.css( 'padding-top' ), 10 )
-                } );
+                adjust( true );
         }, 500 );
 });

src/wp-includes/css/editor.css

@@ -757 +757 @@
         position: relative;
 }
 
+/* editor-expand.js override */
+.wp-fullscreen-wrap {
+        padding-top: 0 !important;
+}
+
 #wp-content-editor-tools {
         background-color: #f1f1f1;
         padding-top: 20px;
@@ -789 +794 @@
         box-sizing: border-box;
 }
 
+/* editor-expand.js override */
+.wp-fullscreen-wrap .wp-editor-area {
+        padding-top: 10px !important;
+}
+
+/* editor-expand.js override */
+.wp-fullscreen-wrap .mce-edit-area {
+        padding-top: 0 !important;
+}
+
 .wp-editor-container textarea.wp-editor-area {
         width: 100%;
         margin: 0;