diff --git a/src/wp-admin/js/editor-expand.js b/src/wp-admin/js/editor-expand.js index e3260a71e6..bf4ce56dc3 100644 --- a/src/wp-admin/js/editor-expand.js +++ b/src/wp-admin/js/editor-expand.js @@ -117,14 +117,23 @@ jQuery( document ).ready( function($) { // Adjust when switching editor modes. editor.on( 'show', function() { setTimeout( function() { - editor.execCommand( 'mceAutoResize' ); + editor.execCommand( 'wpAutoResize' ); adjust( 'resize' ); }, 200 ); } ); - editor.on( 'keyup', function() { - var offset = getCursorOffset(), + // Make sure the cursor is always visible. + // This is not only necessary to keep the cursor between the toolbars, + // but also to scroll the window when the cursor moves out of the viewport to a wpview. + // Setting a buffer > 0 will prevent the browser default. + // Some browsers will scroll to the middle, + // others to the top/bottom of the *window* when moving the cursor out of the viewport. + editor.on( 'keyup', function( event ) { + var VK = tinymce.util.VK, + key = event.keyCode, + offset = getCursorOffset(), windowHeight = $window.height(), + buffer = 10, cursorTop, cursorBottom, editorTop, editorBottom; if ( ! offset ) { @@ -133,11 +142,15 @@ jQuery( document ).ready( function($) { cursorTop = offset.top + editor.getContentAreaContainer().getElementsByTagName( 'iframe' )[0].getBoundingClientRect().top; cursorBottom = cursorTop + offset.height; + cursorTop = cursorTop - buffer; + cursorBottom = cursorBottom + buffer; editorTop = $adminBar.outerHeight() + $tools.outerHeight() + $visualTop.outerHeight(); - editorBottom = $window.height() - $bottom.outerHeight(); + editorBottom = windowHeight - $bottom.outerHeight(); - if ( cursorTop < editorTop || cursorBottom > editorBottom ) { - window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - windowHeight / 2 ); + 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 ); } } ); @@ -145,7 +158,7 @@ jQuery( document ).ready( function($) { var selection = editor.selection, node = selection.getNode(), range = selection.getRng(), - view, clone, right, offset; + view, clone, offset; if ( tinymce.Env.ie && tinymce.Env.ie < 9 ) { return; @@ -159,7 +172,6 @@ jQuery( document ).ready( function($) { if ( clone.startContainer.length > 1 ) { if ( clone.startContainer.length > clone.endOffset ) { clone.setEnd( clone.startContainer, clone.endOffset + 1 ); - right = true; } else { clone.setStart( clone.startContainer, clone.endOffset - 1 ); } @@ -175,7 +187,7 @@ jQuery( document ).ready( function($) { } if ( ! offset.height ) { - return false; + return; } return offset; diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css index b1dcbed849..87bdacf62c 100644 --- a/src/wp-includes/css/editor.css +++ b/src/wp-includes/css/editor.css @@ -181,11 +181,6 @@ div.mce-path { line-height: 18px; } -.mce-path-item:focus { - background: none; - color: inherit; -} - .mce-toolbar .mce-btn, .qt-fullscreen { border-color: transparent;