WordPress.org

Make WordPress Core

Ticket #28328: 28328.19.patch

File 28328.19.patch, 8.2 KB (added by iseulde, 4 years ago)
  • src/wp-admin/css/edit.css

     
    378378        overflow: hidden;
    379379}
    380380
     381.wp-fullscreen-wrap #content-textarea-clone {
     382        display: none;
     383}
     384
    381385#timestampdiv select {
    382386        height: 21px;
    383387        line-height: 14px;
  • src/wp-admin/js/editor-expand.js

     
    1 /* global tinymce */
     1/* global tinymce, console */
    22
    33window.wp = window.wp || {};
    44
     
    1212                $visualEditor,
    1313                $textTop = $( '#ed_toolbar' ),
    1414                $textEditor = $( '#content' ),
     15                textEditorPaddingTop = parseInt( $textEditor.css( 'padding-top' ), 10 ),
    1516                $textEditorClone = $( '<div id="content-textarea-clone"></div>' ),
    1617                $bottom = $( '#post-status-info' ),
    1718                $statusBar,
     
    4243        } );
    4344
    4445        $textEditor.on( 'keyup', function() {
    45                 var range = document.createRange(),
     46                var VK = tinymce.util.VK,
     47                        key = event.keyCode,
     48                        range = document.createRange(),
    4649                        start = $textEditor[0].selectionStart,
    4750                        end = $textEditor[0].selectionEnd,
    4851                        textNode = $textEditorClone[0].firstChild,
    4952                        windowHeight = $window.height(),
     53                        buffer = 10,
    5054                        offset, cursorTop, cursorBottom, editorTop, editorBottom;
    5155
    5256                if ( start && end && start !== end ) {
    5357                        return;
    5458                }
    5559
    56                 range.setStart( textNode, start );
    57                 range.setEnd( textNode, end + 1 );
     60                // These are not TinyMCE ranges.
     61                try {
     62                        range.setStart( textNode, start );
     63                        range.setEnd( textNode, end + 1 );
     64                } catch ( e ) {
     65                        console.log( e );
     66                }
    5867
    5968                offset = range.getBoundingClientRect();
    6069
     
    6271                        return;
    6372                }
    6473
    65                 cursorTop = offset.top;
    66                 cursorBottom = cursorTop + offset.height;
    67                 editorTop = $adminBar.outerHeight() + $textTop.outerHeight();
     74                cursorTop = offset.top - buffer;
     75                cursorBottom = cursorTop + offset.height + buffer;
     76                editorTop = $adminBar.outerHeight() + $tools.outerHeight() + $textTop.outerHeight();
    6877                editorBottom = windowHeight - $bottom.outerHeight();
    6978
    70                 if ( cursorTop < editorTop || cursorBottom > editorBottom ) {
    71                         window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - windowHeight / 2 );
     79                if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
     80                        window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
     81                } else if ( cursorBottom > editorBottom ) {
     82                        window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
    7283                }
    7384        } );
    7485
     
    7788                        return;
    7889                }
    7990
    80                 var hiddenHeight = $textEditorClone.width( $textEditor.width() ).text( $textEditor.val() + '&nbsp;' ).height(),
    81                         textEditorHeight = $textEditor.height();
     91                var textEditorHeight = $textEditor.height(),
     92                        hiddenHeight;
     93
     94                $textEditorClone.width( $textEditor.width() );
     95                $textEditorClone.text( $textEditor.val() + '&nbsp;' );
     96
     97                hiddenHeight = $textEditorClone.height();
    8298
    8399                if ( hiddenHeight < 300 ) {
    84100                        hiddenHeight = 300;
     
    90106
    91107                $textEditor.height( hiddenHeight );
    92108
    93                 adjust( 'resize' );
     109                adjust( true );
    94110        }
    95111
    96112        // We need to wait for TinyMCE to initialize.
     
    118134                editor.on( 'show', function() {
    119135                        setTimeout( function() {
    120136                                editor.execCommand( 'wpAutoResize' );
    121                                 adjust( 'resize' );
     137                                adjust( true );
    122138                        }, 200 );
    123139                } );
    124140
     
    195211
    196212                editor.on( 'hide', function() {
    197213                        textEditorResize();
    198                         adjust( 'resize' );
     214                        adjust( true );
    199215                } );
    200216
    201217                // Adjust when the editor resizes.
    202                 editor.on( 'nodechange setcontent keyup FullscreenStateChanged', function() {
    203                         adjust( 'resize' );
    204                 } );
    205 
    206                 editor.on( 'wp-toolbar-toggle', function() {
    207                         $visualEditor.css( {
    208                                 paddingTop: $visualTop.outerHeight()
    209                         } );
     218                editor.on( 'nodechange setcontent keyup FullscreenStateChanged wp-toolbar-toggle', function() {
     219                        adjust( true );
    210220                } );
    211221
    212222                // And adjust "immediately".
    213223                // Allow some time to load CSS etc.
    214224                setTimeout( function() {
    215                         $visualEditor.css( {
    216                                 paddingTop: $visualTop.outerHeight()
    217                         } );
    218 
    219                         adjust( 'resize' );
     225                        adjust( true );
    220226                }, 500 );
    221227        } );
    222228
    223229        // Adjust when the window is scrolled or resized.
    224230        $window.on( 'scroll resize', function( event ) {
    225                 adjust( event.type );
     231                adjust( event.type === 'resize' );
    226232        } );
    227233
    228         // Adjust when exiting fullscreen mode.
     234        // Adjust when entering/exiting fullscreen mode.
    229235        fullscreen && fullscreen.pubsub.subscribe( 'hidden', function() {
    230                 adjust( 'resize' );
     236                textEditorResize();
     237                adjust( true );
    231238        } );
    232239
    233240        // Adjust when collapsing the menu.
    234241        $document.on( 'wp-collapse-menu.editor-expand', function() {
    235                 adjust( 'resize' );
     242                adjust( true );
    236243        } )
    237244
    238245        // Adjust when changing the columns.
    239246        .on( 'postboxes-columnchange.editor-expand', function() {
    240                 adjust( 'resize' );
     247                adjust( true );
    241248        } )
    242249
    243250        // Adjust when changing the body class.
    244251        .on( 'editor-classchange.editor-expand', function() {
    245                 adjust( 'resize' );
     252                adjust( true );
    246253        } );
    247254
    248255        // Adjust the toolbars based on the active editor mode.
    249         function adjust( eventType ) {
     256        function adjust( resize ) {
    250257                // Make sure we're not in fullscreen mode.
    251258                if ( fullscreen && fullscreen.settings.visible ) {
    252259                        return;
     
    287294                statusBarHeight = visual ? $statusBar.outerHeight() : 0;
    288295
    289296                // Maybe pin the top.
    290                 if ( ( ! fixedTop || eventType === 'resize' ) &&
     297                if ( ( ! fixedTop || resize ) &&
    291298                                // Handle scrolling down.
    292299                                ( windowPos >= ( topPos - toolsHeight - adminBarHeight ) &&
    293300                                // Handle scrolling up.
     
    307314                                width: editorWidth + 2
    308315                        } );
    309316                // Maybe unpin the top.
    310                 } else if ( fixedTop || eventType === 'resize' ) {
     317                } else if ( fixedTop || resize ) {
    311318                        // Handle scrolling up.
    312319                        if ( windowPos <= ( topPos - toolsHeight -  adminBarHeight ) ) {
    313320                                fixedTop = false;
     
    342349                }
    343350
    344351                // Maybe adjust the bottom bar.
    345                 if ( ( ! fixedBottom || eventType === 'resize' ) &&
     352                if ( ( ! fixedBottom || resize ) &&
    346353                                // + 1 for the border around the .wp-editor-container.
    347354                                ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + 1 ) ) {
    348355                        fixedBottom = true;
     
    353360                                width: editorWidth + 2,
    354361                                borderTop: '1px solid #dedede'
    355362                        } );
    356                 } else if ( fixedBottom &&
     363                } else if ( ( fixedBottom || resize ) &&
    357364                                ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - 1 ) ) {
    358365                        fixedBottom = false;
    359366
     
    364371                                borderTop: 'none'
    365372                        } );
    366373                }
     374
     375                if ( resize ) {
     376                        $contentWrap.css( {
     377                                paddingTop: $tools.outerHeight()
     378                        } );
     379
     380                        if ( visual ) {
     381                                $visualEditor.css( {
     382                                        paddingTop: $visualTop.outerHeight()
     383                                } );
     384                        } else {
     385                                $textEditor.add( $textEditorClone ).css( {
     386                                        paddingTop: $textTop.outerHeight() + textEditorPaddingTop
     387                                } );
     388                                $textEditorClone.width( $textEditor.width() );
     389                        }
     390                }
    367391        }
    368392
    369393        textEditorResize();
    370394
    371         $tools.css( {
    372                 position: 'absolute',
    373                 top: 0,
    374                 width: $contentWrap.width()
    375         } );
     395        adjust( true );
    376396
    377         $contentWrap.css( {
    378                 paddingTop: $tools.outerHeight()
    379         } );
    380 
    381         // This needs to execute after quicktags is ready or a button is added...
     397        // Ideally we need to resize just after QuickTags is ready.
    382398        setTimeout( function() {
    383                 $textEditor.css( {
    384                         paddingTop: $textTop.outerHeight() + parseInt( $textEditor.css( 'padding-top' ), 10 )
    385                 } );
     399                adjust( true );
    386400        }, 500 );
    387401});
  • src/wp-includes/css/editor.css

     
    757757        position: relative;
    758758}
    759759
     760/* editor-expand.js override */
     761.wp-fullscreen-wrap {
     762        padding-top: 0 !important;
     763}
     764
    760765#wp-content-editor-tools {
    761766        background-color: #f1f1f1;
    762767        padding-top: 20px;
     
    789794        box-sizing: border-box;
    790795}
    791796
     797/* editor-expand.js override */
     798.wp-fullscreen-wrap .wp-editor-area {
     799        padding-top: 10px !important;
     800}
     801
     802/* editor-expand.js override */
     803.wp-fullscreen-wrap .mce-edit-area {
     804        padding-top: 0 !important;
     805}
     806
    792807.wp-editor-container textarea.wp-editor-area {
    793808        width: 100%;
    794809        margin: 0;