* @output wp-admin/js/editor-expand.js
( function( window, $, undefined ) {
var $window = $( window ),
$document = $( document ),
$adminBar = $( '#wpadminbar' ),
$footer = $( '#wpfooter' );
* Handles the resizing of the editor.
var $wrap = $( '#postdivrich' ),
$contentWrap = $( '#wp-content-wrap' ),
$tools = $( '#wp-content-editor-tools' ),
$textTop = $( '#ed_toolbar' ),
$textEditor = $( '#content' ),
textEditor = $textEditor[0],
$bottom = $( '#post-status-info' ),
$sideSortables = $( '#side-sortables' ),
$postboxContainer = $( '#postbox-container-1' ),
$postBody = $('#post-body'),
fullscreen = window.wp.editor && window.wp.editor.fullscreen,
mceUnbind = function(){},
autoresizeMinHeight = 300,
initialMode = $contentWrap.hasClass( 'tmce-active' ) ? 'tinymce' : 'html',
advanced = !! parseInt( window.getUserSetting( 'hidetb' ), 10 ),
// These are corrected when adjust() runs, except on scrolling if already set.
* Resizes textarea based on scroll height and width.
* Doesn't shrink the editor size below the 300px auto resize minimum height.
var shrinkTextarea = window._.throttle( function() {
var x = window.scrollX || document.documentElement.scrollLeft;
var y = window.scrollY || document.documentElement.scrollTop;
var height = parseInt( textEditor.style.height, 10 );
textEditor.style.height = autoresizeMinHeight + 'px';
if ( textEditor.scrollHeight > autoresizeMinHeight ) {
textEditor.style.height = textEditor.scrollHeight + 'px';
if ( typeof x !== 'undefined' ) {
if ( textEditor.scrollHeight < height ) {
* Resizes the text editor depending on the old text length.
* If there is an mceEditor and it is hidden, it resizes the editor depending
* on the old text length. If the current length of the text is smaller than
* the old text length, it shrinks the text area. Otherwise it resizes the editor to
function textEditorResize() {
var length = textEditor.value.length;
if ( mceEditor && ! mceEditor.isHidden() ) {
if ( ! mceEditor && initialMode === 'tinymce' ) {
if ( length < oldTextLength ) {
} else if ( parseInt( textEditor.style.height, 10 ) < textEditor.scrollHeight ) {
textEditor.style.height = Math.ceil( textEditor.scrollHeight ) + 'px';
* Gets the height and widths of elements.
* Gets the heights of the window, the adminbar, the tools, the menu,
* the visualTop, the textTop, the bottom, the statusbar and sideSortables
* and stores these in the heights object. Defaults to 0.
* Gets the width of the window and stores this in the heights object.
var windowWidth = $window.width();
windowHeight: $window.height(),
windowWidth: windowWidth,
adminBarHeight: ( windowWidth > 600 ? $adminBar.outerHeight() : 0 ),
toolsHeight: $tools.outerHeight() || 0,
menuBarHeight: $menuBar.outerHeight() || 0,
visualTopHeight: $visualTop.outerHeight() || 0,
textTopHeight: $textTop.outerHeight() || 0,
bottomHeight: $bottom.outerHeight() || 0,
statusBarHeight: $statusBar.outerHeight() || 0,
sideSortablesHeight: $sideSortables.height() || 0
// Adjust for hidden menubar.
if ( heights.menuBarHeight < 3 ) {
heights.menuBarHeight = 0;
// We need to wait for TinyMCE to initialize.
* Binds all necessary functions for editor expand to the editor when the editor
* @param {event} event The TinyMCE editor init event.
* @param {object} editor The editor to bind the vents on.
$document.on( 'tinymce-editor-init.editor-expand', function( event, editor ) {
// VK contains the type of key pressed. VK = virtual keyboard.
var VK = window.tinymce.util.VK,
* Hides any float panel with a hover state. Additionally hides tooltips.
hideFloatPanels = _.debounce( function() {
! $( '.mce-floatpanel:hover' ).length && window.tinymce.ui.FloatPanel.hideAll();
$( '.mce-tooltip' ).hide();
// Make sure it's the main editor.
if ( editor.id !== 'content' ) {
// Copy the editor instance.
// Set the minimum height to the initial viewport height.
editor.settings.autoresize_min_height = autoresizeMinHeight;
// Get the necessary UI elements.
$visualTop = $contentWrap.find( '.mce-toolbar-grp' );
$visualEditor = $contentWrap.find( '.mce-edit-area' );
$statusBar = $contentWrap.find( '.mce-statusbar' );
$menuBar = $contentWrap.find( '.mce-menubar' );
* Gets the offset of the editor.
* @return {number|boolean} Returns the offset of the editor
* or false if there is no offset height.
function mceGetCursorOffset() {
var node = editor.selection.getNode(),
* If editor.wp.getView and the selection node from the editor selection
* are defined, use this as a view for the offset.
if ( editor.wp && editor.wp.getView && ( view = editor.wp.getView( node ) ) ) {
offset = view.getBoundingClientRect();
range = editor.selection.getRng();
// Try to get the offset from a range.
offset = range.getClientRects()[0];
// Get the offset from the bounding client rectangle of the node.
offset = node.getBoundingClientRect();
return offset.height ? offset : false;
* Filters the special keys that should not be used for scrolling.
* @param {event} event The event to get the key code from.
function mceKeyup( event ) {
// Bail on special keys. Key code 47 is a '/'.
if ( key <= 47 && ! ( key === VK.SPACEBAR || key === VK.ENTER || key === VK.DELETE || key === VK.BACKSPACE || key === VK.UP || key === VK.LEFT || key === VK.DOWN || key === VK.UP ) ) {
// OS keys, function keys, num lock, scroll lock. Key code 91-93 are OS keys.
// Key code 112-123 are F1 to F12. Key code 144 is num lock. Key code 145 is scroll lock.
} else if ( ( key >= 91 && key <= 93 ) || ( key >= 112 && key <= 123 ) || key === 144 || key === 145 ) {
* Makes sure the cursor is always visible in the editor.
* Makes sure the cursor is kept between the toolbars of the editor and scrolls
* 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.
* @param {string} key The key code of the pressed key.
function mceScroll( key ) {
var offset = mceGetCursorOffset(),
cursorTop, cursorBottom, editorTop, editorBottom;
// Don't scroll if there is no offset.
// Determine the cursorTop based on the offset and the top of the editor iframe.
cursorTop = offset.top + editor.iframeElement.getBoundingClientRect().top;
// Determine the cursorBottom based on the cursorTop and offset height.
cursorBottom = cursorTop + offset.height;
// Subtract the buffer from the cursorTop.
cursorTop = cursorTop - buffer;
// Add the buffer to the cursorBottom.
cursorBottom = cursorBottom + buffer;
editorTop = heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight + heights.visualTopHeight;
* Set the editorBottom based on the window Height, and add the bottomHeight and statusBarHeight if the
* advanced editor is enabled.
editorBottom = heights.windowHeight - ( advanced ? heights.bottomHeight + heights.statusBarHeight : 0 );
// Don't scroll if the node is taller than the visible part of the editor.
if ( editorBottom - editorTop < offset.height ) {
* If the cursorTop is smaller than the editorTop and the up, left
* or backspace key is pressed, scroll the editor to the position defined
* by the cursorTop, pageYOffset and editorTop.
if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
* If any other key is pressed or the cursorTop is bigger than the editorTop,
* scroll the editor to the position defined by the cursorBottom,
* pageYOffset and editorBottom.
} else if ( cursorBottom > editorBottom ) {
window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
* If the editor is fullscreen, calls adjust.
* @param {event} event The FullscreenStateChanged event.
function mceFullscreenToggled( event ) {
// event.state is true if the editor is fullscreen.
* Shows the editor when scrolled.
* Binds the hideFloatPanels function on the window scroll.mce-float-panels event.
* Executes the wpAutoResize on the active editor.
$window.on( 'scroll.mce-float-panels', hideFloatPanels );
editor.execCommand( 'wpAutoResize' );
* Removes all functions from the window scroll.mce-float-panels event.
* Resizes the text editor and scrolls to a position based on the pageXOffset and adminBarHeight.
$window.off( 'scroll.mce-float-panels' );
var top = $contentWrap.offset().top;
if ( window.pageYOffset > top ) {
window.scrollTo( window.pageXOffset, top - heights.adminBarHeight );
* Toggles advanced states.
function toggleAdvanced() {
* Binds events of the editor and window.
editor.on( 'keyup', mceKeyup );
editor.on( 'show', mceShow );
editor.on( 'hide', mceHide );
editor.on( 'wp-toolbar-toggle', toggleAdvanced );
// Adjust when the editor resizes.
editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
// Don't hide the caret after undo/redo.
editor.on( 'undo redo', mceScroll );
// Adjust when exiting TinyMCE's fullscreen mode.
editor.on( 'FullscreenStateChanged', mceFullscreenToggled );
$window.off( 'scroll.mce-float-panels' ).on( 'scroll.mce-float-panels', hideFloatPanels );
* Unbinds the events of the editor and window.
editor.off( 'keyup', mceKeyup );
editor.off( 'show', mceShow );
editor.off( 'hide', mceHide );
editor.off( 'wp-toolbar-toggle', toggleAdvanced );
editor.off( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
editor.off( 'undo redo', mceScroll );
editor.off( 'FullscreenStateChanged', mceFullscreenToggled );
$window.off( 'scroll.mce-float-panels' );
if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
* Adjusts the toolbars heights and positions.
* Adjusts the toolbars heights and positions based on the scroll position on
* the page, the active editor mode and the heights of the editor, admin bar and
* @param {event} event The event that calls this function.
function adjust( event ) {
// Makes sure we're not in fullscreen mode.
if ( fullscreen && fullscreen.settings.visible ) {
var windowPos = $window.scrollTop(),
type = event && event.type,
resize = type !== 'scroll',
visual = mceEditor && ! mceEditor.isHidden(),
buffer = autoresizeMinHeight,
postBodyTop = $postBody.offset().top,
contentWrapWidth = $contentWrap.width(),
$top, $editor, sidebarTop, footerTop, canPin,
topPos, topHeight, editorPos, editorHeight;
* Refresh the heights if type isn't 'scroll'
* or heights.windowHeight isn't set.
if ( resize || ! heights.windowHeight ) {
// Resize on resize event when the editor is in text mode.
if ( ! visual && type === 'resize' ) {
topHeight = heights.visualTopHeight;