sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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.



git-svn-id: https://develop.svn.wordpress.org/trunk@37596 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Ella Iseulde Van Dorpe 2016-05-30 20:31:57 +00:00
parent 8f06d6678b
commit 9e9aeac12b
2 changed files with 17 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/wp-admin/css/edit.css
View File

@ -377,16 +377,6 @@ form#tags-filter {
position: relative;
}
#content-textarea-clone {
z-index: -1;
position: absolute;
top: 0;
visibility: hidden;
overflow: hidden;
max-width: 100%;
border: 1px solid transparent;
}
.wp-editor-expand #wp-content-editor-tools {
z-index: 1000;
border-bottom: 1px solid #e5e5e5;

86
src/wp-admin/js/editor-expand.js
View File

@ -15,7 +15,8 @@
$visualEditor = $(),
$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 = $(),
$statusBar = $(),
@ -52,16 +53,6 @@
sideSortablesHeight: 0
};
$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();
@ -84,68 +75,28 @@
}
}
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 ) {
return;
}
// These are not TinyMCE ranges.
try {
range.setStart( textNode, selStart );
range.setEnd( textNode, selEnd + 1 );
} catch ( ex ) {}
offset = range.getBoundingClientRect();
if ( ! offset.height ) {
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' ) ) {
var reduce, scrollHeight;
if ( mceEditor && ! mceEditor.isHidden() ) {
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 ) {
if ( ! mceEditor && initialMode === 'tinymce' ) {
return;
}
$textEditor.height( hiddenHeight );
reduce = textEditorLength > ( textEditorLength = textEditor.value.length );
scrollHeight = textEditor.scrollHeight;
adjust();
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();
}
}
// We need to wait for TinyMCE to initialize.
@ -474,7 +425,7 @@
if ( event && event.deltaHeight > 0 && event.deltaHeight < 100 ) {
window.scrollBy( 0, event.deltaHeight );
} else if ( advanced ) {
} else if ( visual && advanced ) {
fixedBottom = true;
$statusBar.css( {
@ -603,8 +554,6 @@
$textEditor.css( {
marginTop: heights.textTopHeight
} );
$textEditorClone.width( contentWrapWidth - 20 - ( borderWidth * 2 ) );
}
}
}
@ -660,7 +609,6 @@
});
$textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
$textEditor.on( 'keyup.editor-expand', textEditorKeyup );
mceBind();
// Adjust when entering/exiting fullscreen mode.