Ticket #36482: 36482.2.patch

src/wp-admin/css/edit.css

@@ -383 +383 @@
         top: 0;
         visibility: hidden;
         overflow: hidden;
-        max-width: 100%;
-        border: 1px solid transparent;
 }
 
 .wp-editor-expand #wp-content-editor-tools {

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

@@ -15 +15 @@
                         $visualEditor = $(),
                         $textTop = $( '#ed_toolbar' ),
                         $textEditor = $( '#content' ),
+                        textEditor = $textEditor[0],
+                        textEditorLength = 0,
                         $textEditorClone = $( '<div id="content-textarea-clone" class="wp-exclude-emoji"></div>' ),
+                        textEditorClonelineHeight = parseInt( $textEditor.css( 'line-height' ), 10 ),
                         $bottom = $( '#post-status-info' ),
                         $menuBar = $(),
                         $statusBar = $(),
@@ -87 +90 @@
                 function textEditorKeyup( event ) {
                         var VK = jQuery.ui.keyCode,
                                 key = event.keyCode,
-                                range = document.createRange(),
-                                selStart = $textEditor[0].selectionStart,
-                                selEnd = $textEditor[0].selectionEnd,
-                                textNode = $textEditorClone[0].firstChild,
                                 buffer = 10,
-                                offset, cursorTop, cursorBottom, editorTop, editorBottom;
+                                offset;
 
-                        if ( selStart && selEnd && selStart !== selEnd ) {
+                        if ( key !== VK.UP && key !== VK.LEFT && key !== VK.BACKSPACE ) {
                                 return;
                         }
 
-                        // These are not TinyMCE ranges.
-                        try {
-                                range.setStart( textNode, selStart );
-                                range.setEnd( textNode, selEnd + 1 );
-                        } catch ( ex ) {}
+                        $textEditorClone.text( $textEditor.val().substring( 0, $textEditor[0].selectionStart ) || '.' );
 
-                        offset = range.getBoundingClientRect();
+                        offset =
+                                $textEditor.offset().top +
+                                $textEditorClone.height() -
+                                textEditorClonelineHeight -
+                                window.pageYOffset -
+                                heights.adminBarHeight -
+                                heights.toolsHeight -
+                                heights.textTopHeight;
 
-                        if ( ! offset.height ) {
-                                return;
-                        }
-
-                        cursorTop = offset.top - buffer;
-                        cursorBottom = cursorTop + offset.height + buffer;
-                        editorTop = heights.adminBarHeight + heights.toolsHeight + heights.textTopHeight;
-                        editorBottom = heights.windowHeight - heights.bottomHeight;
-
-                        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 );
+                        if ( offset < buffer ) {
+                                window.scrollTo( window.pageXOffset, window.pageYOffset + offset );
                         }
                 }
 
                 function textEditorResize() {
+                        var pageYOffset, height,
+                                reduce = textEditorLength && textEditorLength > textEditor.value.length;
+
                         if ( ( mceEditor && ! mceEditor.isHidden() ) || ( ! mceEditor && initialMode === 'tinymce' ) ) {
                                 return;
                         }
 
-                        var textEditorHeight = $textEditor.height(),
-                                hiddenHeight;
+                        textEditorLength = textEditor.value.length;
+                        height = textEditor.style.height;
 
-                        $textEditorClone.width( $textEditor.width() - 22 );
-                        $textEditorClone.text( $textEditor.val() + '&nbsp;' );
+                        if ( reduce ) {
+                                pageYOffset = window.pageYOffset;
 
-                        hiddenHeight = $textEditorClone.height();
+                                textEditor.style.height = 'auto';
+                                textEditor.style.height = textEditor.scrollHeight + 'px';
 
-                        if ( hiddenHeight < autoresizeMinHeight ) {
-                                hiddenHeight = autoresizeMinHeight;
+                                window.scrollTo( window.pageXOffset, pageYOffset );
+                        } else if ( parseInt( textEditor.style.height, 10 ) < textEditor.scrollHeight ) {
+                                textEditor.style.height = textEditor.scrollHeight + 'px';
                         }
 
-                        if ( hiddenHeight === textEditorHeight ) {
-                                return;
+                        if ( height !== textEditor.style.height ) {
+                                adjust();
                         }
-
-                        $textEditor.height( hiddenHeight );
-
-                        adjust();
                 }
 
                 // We need to wait for TinyMCE to initialize.
@@ -474 +466 @@
 
                                         if ( event && event.deltaHeight > 0 && event.deltaHeight < 100 ) {
                                                 window.scrollBy( 0, event.deltaHeight );
-                                        } else if ( advanced ) {
+                                        } else if ( visual && advanced ) {
                                                 fixedBottom = true;
 
                                                 $statusBar.css( {
@@ -604 +596 @@
                                                 marginTop: heights.textTopHeight
                                         } );
 
-                                        $textEditorClone.width( contentWrapWidth - 20 - ( borderWidth * 2 ) );
+                                        $textEditorClone.width( $textEditor.width() );
                                 }
                         }
                 }
@@ -660 +652 @@
                                 });
 
                         $textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
-                        $textEditor.on( 'keyup.editor-expand', textEditorKeyup );
+                        $textEditor.on( 'keyup.editor-expand', _.debounce( textEditorKeyup, 500 ) );
                         mceBind();
 
                         // Adjust when entering/exiting fullscreen mode.