WordPress.org

Make WordPress Core

Ticket #28328: 28328.19.patch

File 28328.19.patch, 8.2 KB (added by iseulde, 3 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;