: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
editorRect, x, y, mouseY, scrollY,
focusLostTimer, overlayTimer, editorHasFocus;
$body.append( $overlay );
$window.on( 'mousemove.focus', function( event ) {
* Recalculates the bottom and right position of the editor in the DOM.
function recalcEditorRect() {
editorRect = $editor.offset();
editorRect.right = editorRect.left + $editor.outerWidth();
editorRect.bottom = editorRect.top + $editor.outerHeight();
* Activates the distraction free writing mode.
$document.trigger( 'dfw-activate' );
$content.on( 'keydown.focus-shortcut', toggleViaKeyboard );
* Deactivates the distraction free writing mode.
$document.trigger( 'dfw-deactivate' );
$content.off( 'keydown.focus-shortcut' );
* @return {boolean} Returns true is _isActive is true.
* Binds events on the editor for distraction free writing.
if ( ! _isOn && _isActive ) {
$content.on( 'keydown.focus', fadeOut );
$title.add( $content ).on( 'blur.focus', maybeFadeIn );
window.setUserSetting( 'post_dfw', 'on' );
$document.trigger( 'dfw-on' );
* Unbinds events on the editor for distraction free writing.
$title.add( $content ).off( '.focus' );
window.setUserSetting( 'post_dfw', 'off' );
$document.trigger( 'dfw-off' );
* Binds or unbinds the editor expand events.
* Returns the value of _isOn.
* @return {boolean} Returns true if _isOn is true.
* Fades out all elements except for the editor.
* The fading is done based on key presses and mouse movements.
* Also calls the fadeIn on certain key presses
* or if the mouse leaves the editor.
* @param event The event that triggers this function.
function fadeOut( event ) {
key = event && event.keyCode;
if ( window.navigator.platform ) {
isMac = ( window.navigator.platform.indexOf( 'Mac' ) > -1 );
// Fade in and returns on Escape and keyboard shortcut Alt+Shift+W and Ctrl+Opt+W.
if ( key === 27 || ( key === 87 && event.altKey && ( ( ! isMac && event.shiftKey ) || ( isMac && event.ctrlKey ) ) ) ) {
// Return if any of the following keys or combinations of keys is pressed.
if ( event && ( event.metaKey || ( event.ctrlKey && ! event.altKey ) || ( event.altKey && event.shiftKey ) || ( key && (
// Special keys ( tab, ctrl, alt, esc, arrow keys... ).
( key <= 47 && key !== 8 && key !== 13 && key !== 32 && key !== 46 ) ||
( key >= 91 && key <= 93 ) ||
( key >= 112 && key <= 135 ) ||
// Num Lock, Scroll Lock, OEM.
( key >= 144 && key <= 150 ) ||
clearTimeout( overlayTimer );
overlayTimer = setTimeout( function() {
$editor.css( 'z-index', 9998 );
// Always recalculate the editor area when entering the overlay with the mouse.
.on( 'mouseenter.focus', function() {
$window.on( 'scroll.focus', function() {
var nScrollY = window.pageYOffset;
mouseY < editorRect.top - buffer ||
mouseY > editorRect.bottom + buffer
.on( 'mouseleave.focus', function() {
traveledX = traveledY = 0;
$window.off( 'scroll.focus' );
// Fade in when the mouse moves away form the editor area.
.on( 'mousemove.focus', function( event ) {
pageYOffset = window.pageYOffset,
pageXOffset = window.pageXOffset;
if ( x && y && ( nx !== x || ny !== y ) ) {
( ny <= y && ny < editorRect.top - pageYOffset ) ||
( ny >= y && ny > editorRect.bottom - pageYOffset ) ||
( nx <= x && nx < editorRect.left - pageXOffset ) ||
( nx >= x && nx > editorRect.right - pageXOffset )
traveledX += Math.abs( x - nx );
traveledY += Math.abs( y - ny );
ny <= editorRect.top - buffer - pageYOffset ||
ny >= editorRect.bottom + buffer - pageYOffset ||
nx <= editorRect.left - buffer - pageXOffset ||
nx >= editorRect.right + buffer - pageXOffset
traveledX = traveledY = 0;
traveledX = traveledY = 0;
// When the overlay is touched, fade in and cancel the event.
.on( 'touchstart.focus', function( event ) {
$editor.off( 'mouseenter.focus' );
clearTimeout( focusLostTimer );
$body.addClass( 'focus-on' ).removeClass( 'focus-off' );
* Fades all elements back in.
* @param event The event that triggers this function.
function fadeIn( event ) {
clearTimeout( overlayTimer );
overlayTimer = setTimeout( function() {
$editor.css( 'z-index', '' );
$overlay.off( 'mouseenter.focus mouseleave.focus mousemove.focus touchstart.focus' );
* When fading in, temporarily watch for refocus and fade back out - helps
* with 'accidental' editor exits with the mouse. When fading in and the event
* is a key event (Escape or Alt+Shift+W) don't watch for refocus.
if ( 'undefined' === typeof event ) {
$editor.on( 'mouseenter.focus', function() {
if ( $.contains( $editor.get( 0 ), document.activeElement ) || editorHasFocus ) {
focusLostTimer = setTimeout( function() {
$editor.off( 'mouseenter.focus' );
$body.addClass( 'focus-off' ).removeClass( 'focus-on' );
* Fades in if the focused element based on it position.
var position = document.activeElement.compareDocumentPosition( $editor.get( 0 ) );
function hasFocus( $el ) {
return $.contains( $el.get( 0 ), document.activeElement );
// The focused node is before or behind the editor area, and not outside the wrap.
if ( ( position === 2 || position === 4 ) && ( hasFocus( $menuWrap ) || hasFocus( $wrap ) || hasFocus( $footer ) ) ) {
* Fades out the admin bar based on focus on the admin bar.
function fadeOutAdminBar() {
if ( ! fadedAdminBar && faded ) {
.on( 'mouseenter.focus', function() {
$adminBar.addClass( 'focus-off' );
.on( 'mouseleave.focus', function() {
$adminBar.removeClass( 'focus-off' );
* Fades in the admin bar.
function fadeInAdminBar() {
$adminBar.off( '.focus' );
* Fades out the edit slug box.
if ( ! fadedSlug && faded && ! $slug.find( ':focus').length ) {
$slug.stop().fadeTo( 'fast', 0.3 ).on( 'mouseenter.focus', fadeInSlug ).off( 'mouseleave.focus' );
$slugFocusEl.on( 'focus.focus', fadeInSlug ).off( 'blur.focus' );
* Fades in the edit slug box.
$slug.stop().fadeTo( 'fast', 1 ).on( 'mouseleave.focus', fadeOutSlug ).off( 'mouseenter.focus' );
$slugFocusEl.on( 'blur.focus', fadeOutSlug ).off( 'focus.focus' );
* Triggers the toggle on Alt + Shift + W.
* @param {event} event The event to trigger the toggle.
function toggleViaKeyboard( event ) {
if ( event.altKey && event.shiftKey && 87 === event.keyCode ) {
if ( $( '#postdivrich' ).hasClass( 'wp-editor-expand' ) ) {
$content.on( 'keydown.focus-shortcut', toggleViaKeyboard );
* Adds the distraction free writing button when setting up TinyMCE.
* @param {event} event The TinyMCE editor setup event.
* @param {object} editor The editor to add the button to.
$document.on( 'tinymce-editor-setup.focus', function( event, editor ) {
editor.addButton( 'dfw', {
classes: 'wp-dfw btn widget',
onPostRender: function() {
editor.on( 'init', function() {
if ( button.disabled() ) {
.on( 'dfw-activate.focus', function() {
button.disabled( false );
.on( 'dfw-deactivate.focus', function() {
.on( 'dfw-on.focus', function() {
.on( 'dfw-off.focus', function() {
tooltip: 'Distraction-free writing mode',