Changeset 37596

Timestamp:

05/30/2016 08:31:57 PM (10 years ago)

Author:

iseulde

Message:

Editor: better resizing for text editor

• Use scrollHeight to resize the text editor.
• Don't scroll the cursor into view when under the text editor's toolbar, it involves cloning the content which is quite slow.

Props iseulde, azaozz.

See #36482.

Location:

trunk/src/wp-admin

Files:

• css/edit.css (modified) (1 diff)
• js/editor-expand.js (modified) (6 diffs)

trunk/src/wp-admin/css/edit.css

@@ -376 +376 @@
 #wp-content-editor-container {
     position: relative;
-}
-
-#content-textarea-clone {
-    z-index: -1;
-    position: absolute;
-    top: 0;
-    visibility: hidden;
-    overflow: hidden;
-    max-width: 100%;
-    border: 1px solid transparent;
 }
 

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

@@ -16 +16 @@
             $textTop = $( '#ed_toolbar' ),
             $textEditor = $( '#content' ),
-            $textEditorClone = $( '<div id="content-textarea-clone" class="wp-exclude-emoji"></div>' ),
+            textEditor = $textEditor[0],
+            textEditorLength = 0,
             $bottom = $( '#post-status-info' ),
             $menuBar = $(),
@@ -53 +54 @@
             };
 
-        $textEditorClone.insertAfter( $textEditor );
-
-        $textEditorClone.css( {
-            'font-family': $textEditor.css( 'font-family' ),
-            'font-size': $textEditor.css( 'font-size' ),
-            'line-height': $textEditor.css( 'line-height' ),
-            'white-space': 'pre-wrap',
-            'word-wrap': 'break-word'
-        } );
-
         function getHeights() {
             var windowWidth = $window.width();
@@ -85 +76 @@
         }
 
-        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;
-
-            if ( selStart && selEnd && selStart !== selEnd ) {
+        function textEditorResize() {
+            var reduce, scrollHeight;
+
+            if ( mceEditor && ! mceEditor.isHidden() ) {
                 return;
             }
 
-            // These are not TinyMCE ranges.
-            try {
-                range.setStart( textNode, selStart );
-                range.setEnd( textNode, selEnd + 1 );
-            } catch ( ex ) {}
-
-            offset = range.getBoundingClientRect();
-
-            if ( ! offset.height ) {
+            if ( ! mceEditor && initialMode === 'tinymce' ) {
                 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 );
-            }
-        }
-
-        function textEditorResize() {
-            if ( ( mceEditor && ! mceEditor.isHidden() ) || ( ! mceEditor && initialMode === 'tinymce' ) ) {
-                return;
-            }
-
-            var textEditorHeight = $textEditor.height(),
-                hiddenHeight;
-
-            $textEditorClone.width( $textEditor.width() - 22 );
-            $textEditorClone.text( $textEditor.val() + '&nbsp;' );
-
-            hiddenHeight = $textEditorClone.height();
-
-            if ( hiddenHeight < autoresizeMinHeight ) {
-                hiddenHeight = autoresizeMinHeight;
-            }
-
-            if ( hiddenHeight === textEditorHeight ) {
-                return;
-            }
-
-            $textEditor.height( hiddenHeight );
-
-            adjust();
+            reduce = textEditorLength > ( textEditorLength = textEditor.value.length );
+            scrollHeight = textEditor.scrollHeight;
+
+            if ( reduce ) {
+                textEditor.style.height = 'auto';
+                textEditor.style.height = scrollHeight + 'px';
+                adjust();
+            } else if ( parseInt( textEditor.style.height, 10 ) < scrollHeight ) {
+                textEditor.style.height = scrollHeight + 'px';
+                adjust();
+            }
         }
 
@@ -475 +426 @@
                     if ( event && event.deltaHeight > 0 && event.deltaHeight < 100 ) {
                         window.scrollBy( 0, event.deltaHeight );
-                    } else if ( advanced ) {
+                    } else if ( visual && advanced ) {
                         fixedBottom = true;
 
@@ -604 +555 @@
                         marginTop: heights.textTopHeight
                     } );
-
-                    $textEditorClone.width( contentWrapWidth - 20 - ( borderWidth * 2 ) );
                 }
             }
@@ -661 +610 @@
 
             $textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
-            $textEditor.on( 'keyup.editor-expand', textEditorKeyup );
             mceBind();