WordPress.org

Make WordPress Core

Changeset 37596


Ignore:
Timestamp:
05/30/2016 08:31:57 PM (4 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/edit.css

    r37439 r37596  
    376376#wp-content-editor-container {
    377377    position: relative;
    378 }
    379 
    380 #content-textarea-clone {
    381     z-index: -1;
    382     position: absolute;
    383     top: 0;
    384     visibility: hidden;
    385     overflow: hidden;
    386     max-width: 100%;
    387     border: 1px solid transparent;
    388378}
    389379
  • trunk/src/wp-admin/js/editor-expand.js

    r37003 r37596  
    1616            $textTop = $( '#ed_toolbar' ),
    1717            $textEditor = $( '#content' ),
    18             $textEditorClone = $( '<div id="content-textarea-clone" class="wp-exclude-emoji"></div>' ),
     18            textEditor = $textEditor[0],
     19            textEditorLength = 0,
    1920            $bottom = $( '#post-status-info' ),
    2021            $menuBar = $(),
     
    5354            };
    5455
    55         $textEditorClone.insertAfter( $textEditor );
    56 
    57         $textEditorClone.css( {
    58             'font-family': $textEditor.css( 'font-family' ),
    59             'font-size': $textEditor.css( 'font-size' ),
    60             'line-height': $textEditor.css( 'line-height' ),
    61             'white-space': 'pre-wrap',
    62             'word-wrap': 'break-word'
    63         } );
    64 
    6556        function getHeights() {
    6657            var windowWidth = $window.width();
     
    8576        }
    8677
    87         function textEditorKeyup( event ) {
    88             var VK = jQuery.ui.keyCode,
    89                 key = event.keyCode,
    90                 range = document.createRange(),
    91                 selStart = $textEditor[0].selectionStart,
    92                 selEnd = $textEditor[0].selectionEnd,
    93                 textNode = $textEditorClone[0].firstChild,
    94                 buffer = 10,
    95                 offset, cursorTop, cursorBottom, editorTop, editorBottom;
    96 
    97             if ( selStart && selEnd && selStart !== selEnd ) {
     78        function textEditorResize() {
     79            var reduce, scrollHeight;
     80
     81            if ( mceEditor && ! mceEditor.isHidden() ) {
    9882                return;
    9983            }
    10084
    101             // These are not TinyMCE ranges.
    102             try {
    103                 range.setStart( textNode, selStart );
    104                 range.setEnd( textNode, selEnd + 1 );
    105             } catch ( ex ) {}
    106 
    107             offset = range.getBoundingClientRect();
    108 
    109             if ( ! offset.height ) {
     85            if ( ! mceEditor && initialMode === 'tinymce' ) {
    11086                return;
    11187            }
    11288
    113             cursorTop = offset.top - buffer;
    114             cursorBottom = cursorTop + offset.height + buffer;
    115             editorTop = heights.adminBarHeight + heights.toolsHeight + heights.textTopHeight;
    116             editorBottom = heights.windowHeight - heights.bottomHeight;
    117 
    118             if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
    119                 window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
    120             } else if ( cursorBottom > editorBottom ) {
    121                 window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
    122             }
    123         }
    124 
    125         function textEditorResize() {
    126             if ( ( mceEditor && ! mceEditor.isHidden() ) || ( ! mceEditor && initialMode === 'tinymce' ) ) {
    127                 return;
    128             }
    129 
    130             var textEditorHeight = $textEditor.height(),
    131                 hiddenHeight;
    132 
    133             $textEditorClone.width( $textEditor.width() - 22 );
    134             $textEditorClone.text( $textEditor.val() + '&nbsp;' );
    135 
    136             hiddenHeight = $textEditorClone.height();
    137 
    138             if ( hiddenHeight < autoresizeMinHeight ) {
    139                 hiddenHeight = autoresizeMinHeight;
    140             }
    141 
    142             if ( hiddenHeight === textEditorHeight ) {
    143                 return;
    144             }
    145 
    146             $textEditor.height( hiddenHeight );
    147 
    148             adjust();
     89            reduce = textEditorLength > ( textEditorLength = textEditor.value.length );
     90            scrollHeight = textEditor.scrollHeight;
     91
     92            if ( reduce ) {
     93                textEditor.style.height = 'auto';
     94                textEditor.style.height = scrollHeight + 'px';
     95                adjust();
     96            } else if ( parseInt( textEditor.style.height, 10 ) < scrollHeight ) {
     97                textEditor.style.height = scrollHeight + 'px';
     98                adjust();
     99            }
    149100        }
    150101
     
    475426                    if ( event && event.deltaHeight > 0 && event.deltaHeight < 100 ) {
    476427                        window.scrollBy( 0, event.deltaHeight );
    477                     } else if ( advanced ) {
     428                    } else if ( visual && advanced ) {
    478429                        fixedBottom = true;
    479430
     
    604555                        marginTop: heights.textTopHeight
    605556                    } );
    606 
    607                     $textEditorClone.width( contentWrapWidth - 20 - ( borderWidth * 2 ) );
    608557                }
    609558            }
     
    661610
    662611            $textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
    663             $textEditor.on( 'keyup.editor-expand', textEditorKeyup );
    664612            mceBind();
    665613
Note: See TracChangeset for help on using the changeset viewer.