--- a/wp/wp-admin/js/editor.js Tue Jun 09 11:14:17 2015 +0000
+++ b/wp/wp-admin/js/editor.js Mon Oct 14 17:39:30 2019 +0200
@@ -1,38 +1,53 @@
-/* global tinymce, tinyMCEPreInit, QTags, setUserSetting */
+window.wp = window.wp || {};
-window.switchEditors = {
+( function( $, wp ) {
+ wp.editor = wp.editor || {};
- switchto: function( el ) {
- var aid = el.id,
- l = aid.length,
- id = aid.substr( 0, l - 5 ),
- mode = aid.substr( l - 4 );
-
- this.go( id, mode );
- },
+ /**
+ * @summary Utility functions for the editor.
+ *
+ * @since 2.5.0
+ */
+ function SwitchEditors() {
+ var tinymce, $$,
+ exports = {};
- // mode can be 'html', 'tmce', or 'toggle'; 'html' is used for the 'Text' editor tab.
- go: function( id, mode ) {
- var t = this, ed, wrap_id, txtarea_el, iframe, editorHeight, toolbarHeight,
- DOM = tinymce.DOM; //DOMUtils outside the editor iframe
-
- id = id || 'content';
- mode = mode || 'toggle';
+ function init() {
+ if ( ! tinymce && window.tinymce ) {
+ tinymce = window.tinymce;
+ $$ = tinymce.$;
- ed = tinymce.get( id );
- wrap_id = 'wp-' + id + '-wrap';
- txtarea_el = DOM.get( id );
+ /**
+ * @summary Handles onclick events for the Visual/Text tabs.
+ *
+ * @since 4.3.0
+ *
+ * @returns {void}
+ */
+ $$( document ).on( 'click', function( event ) {
+ var id, mode,
+ target = $$( event.target );
- if ( 'toggle' === mode ) {
- if ( ed && ! ed.isHidden() ) {
- mode = 'html';
- } else {
- mode = 'tmce';
+ if ( target.hasClass( 'wp-switch-editor' ) ) {
+ id = target.attr( 'data-wp-editor-id' );
+ mode = target.hasClass( 'switch-tmce' ) ? 'tmce' : 'html';
+ switchEditor( id, mode );
+ }
+ });
}
}
- function getToolbarHeight() {
- var node = DOM.select( '.mce-toolbar-grp', ed.getContainer() )[0],
+ /**
+ * @summary Returns the height of the editor toolbar(s) in px.
+ *
+ * @since 3.9.0
+ *
+ * @param {Object} editor The TinyMCE editor.
+ * @returns {number} If the height is between 10 and 200 return the height,
+ * else return 30.
+ */
+ function getToolbarHeight( editor ) {
+ var node = $$( '.mce-toolbar-grp', editor.getContainer() )[0],
height = node && node.clientHeight;
if ( height && height > 10 && height < 200 ) {
@@ -42,283 +57,1353 @@
return 30;
}
- if ( 'tmce' === mode || 'tinymce' === mode ) {
- if ( ed && ! ed.isHidden() ) {
- return false;
- }
-
- if ( typeof( QTags ) !== 'undefined' ) {
- QTags.closeAllTags( id );
- }
-
- editorHeight = txtarea_el ? parseInt( txtarea_el.style.height, 10 ) : 0;
-
- if ( tinyMCEPreInit.mceInit[ id ] && tinyMCEPreInit.mceInit[ id ].wpautop ) {
- txtarea_el.value = t.wpautop( txtarea_el.value );
- }
+ /**
+ * @summary Switches the editor between Visual and Text mode.
+ *
+ * @since 2.5.0
+ *
+ * @memberof switchEditors
+ *
+ * @param {string} id The id of the editor you want to change the editor mode for. Default: `content`.
+ * @param {string} mode The mode you want to switch to. Default: `toggle`.
+ * @returns {void}
+ */
+ function switchEditor( id, mode ) {
+ id = id || 'content';
+ mode = mode || 'toggle';
- if ( ed ) {
- ed.show();
-
- // No point resizing the iframe in iOS
- if ( ! tinymce.Env.iOS && editorHeight ) {
- toolbarHeight = getToolbarHeight();
- editorHeight = editorHeight - toolbarHeight + 14;
+ var editorHeight, toolbarHeight, iframe,
+ editor = tinymce.get( id ),
+ wrap = $$( '#wp-' + id + '-wrap' ),
+ $textarea = $$( '#' + id ),
+ textarea = $textarea[0];
- // height cannot be under 50 or over 5000
- if ( editorHeight > 50 && editorHeight < 5000 ) {
- ed.theme.resizeTo( null, editorHeight );
- }
+ if ( 'toggle' === mode ) {
+ if ( editor && ! editor.isHidden() ) {
+ mode = 'html';
+ } else {
+ mode = 'tmce';
}
- } else {
- tinymce.init( tinyMCEPreInit.mceInit[id] );
}
- DOM.removeClass( wrap_id, 'html-active' );
- DOM.addClass( wrap_id, 'tmce-active' );
- DOM.setAttrib( txtarea_el, 'aria-hidden', true );
- setUserSetting( 'editor', 'tinymce' );
+ if ( 'tmce' === mode || 'tinymce' === mode ) {
+ // If the editor is visible we are already in `tinymce` mode.
+ if ( editor && ! editor.isHidden() ) {
+ return false;
+ }
- } else if ( 'html' === mode ) {
+ // Insert closing tags for any open tags in QuickTags.
+ if ( typeof( window.QTags ) !== 'undefined' ) {
+ window.QTags.closeAllTags( id );
+ }
- if ( ed && ed.isHidden() ) {
- return false;
- }
+ editorHeight = parseInt( textarea.style.height, 10 ) || 0;
- if ( ed ) {
- if ( ! tinymce.Env.iOS ) {
- iframe = DOM.get( id + '_ifr' );
- editorHeight = iframe ? parseInt( iframe.style.height, 10 ) : 0;
+ var keepSelection = false;
+ if ( editor ) {
+ keepSelection = editor.getParam( 'wp_keep_scroll_position' );
+ } else {
+ keepSelection = window.tinyMCEPreInit.mceInit[ id ] &&
+ window.tinyMCEPreInit.mceInit[ id ].wp_keep_scroll_position;
+ }
- if ( editorHeight ) {
- toolbarHeight = getToolbarHeight();
- editorHeight = editorHeight + toolbarHeight - 14;
+ if ( keepSelection ) {
+ // Save the selection
+ addHTMLBookmarkInTextAreaContent( $textarea );
+ }
+
+ if ( editor ) {
+ editor.show();
- // height cannot be under 50 or over 5000
+ // No point to resize the iframe in iOS.
+ if ( ! tinymce.Env.iOS && editorHeight ) {
+ toolbarHeight = getToolbarHeight( editor );
+ editorHeight = editorHeight - toolbarHeight + 14;
+
+ // Sane limit for the editor height.
if ( editorHeight > 50 && editorHeight < 5000 ) {
- txtarea_el.style.height = editorHeight + 'px';
+ editor.theme.resizeTo( null, editorHeight );
}
}
+
+ if ( editor.getParam( 'wp_keep_scroll_position' ) ) {
+ // Restore the selection
+ focusHTMLBookmarkInVisualEditor( editor );
+ }
+ } else {
+ tinymce.init( window.tinyMCEPreInit.mceInit[ id ] );
+ }
+
+ wrap.removeClass( 'html-active' ).addClass( 'tmce-active' );
+ $textarea.attr( 'aria-hidden', true );
+ window.setUserSetting( 'editor', 'tinymce' );
+
+ } else if ( 'html' === mode ) {
+ // If the editor is hidden (Quicktags is shown) we don't need to switch.
+ if ( editor && editor.isHidden() ) {
+ return false;
}
- ed.hide();
- } else {
- // The TinyMCE instance doesn't exist, run the content through 'pre_wpautop()' and show the textarea
- if ( tinyMCEPreInit.mceInit[ id ] && tinyMCEPreInit.mceInit[ id ].wpautop ) {
- txtarea_el.value = t.pre_wpautop( txtarea_el.value );
+ if ( editor ) {
+ // Don't resize the textarea in iOS. The iframe is forced to 100% height there, we shouldn't match it.
+ if ( ! tinymce.Env.iOS ) {
+ iframe = editor.iframeElement;
+ editorHeight = iframe ? parseInt( iframe.style.height, 10 ) : 0;
+
+ if ( editorHeight ) {
+ toolbarHeight = getToolbarHeight( editor );
+ editorHeight = editorHeight + toolbarHeight - 14;
+
+ // Sane limit for the textarea height.
+ if ( editorHeight > 50 && editorHeight < 5000 ) {
+ textarea.style.height = editorHeight + 'px';
+ }
+ }
+ }
+
+ var selectionRange = null;
+
+ if ( editor.getParam( 'wp_keep_scroll_position' ) ) {
+ selectionRange = findBookmarkedPosition( editor );
+ }
+
+ editor.hide();
+
+ if ( selectionRange ) {
+ selectTextInTextArea( editor, selectionRange );
+ }
+ } else {
+ // There is probably a JS error on the page. The TinyMCE editor instance doesn't exist. Show the textarea.
+ $textarea.css({ 'display': '', 'visibility': '' });
+ }
+
+ wrap.removeClass( 'tmce-active' ).addClass( 'html-active' );
+ $textarea.attr( 'aria-hidden', false );
+ window.setUserSetting( 'editor', 'html' );
+ }
+ }
+
+ /**
+ * @summary Checks if a cursor is inside an HTML tag.
+ *
+ * In order to prevent breaking HTML tags when selecting text, the cursor
+ * must be moved to either the start or end of the tag.
+ *
+ * This will prevent the selection marker to be inserted in the middle of an HTML tag.
+ *
+ * This function gives information whether the cursor is inside a tag or not, as well as
+ * the tag type, if it is a closing tag and check if the HTML tag is inside a shortcode tag,
+ * e.g. `[caption]<img.../>..`.
+ *
+ * @param {string} content The test content where the cursor is.
+ * @param {number} cursorPosition The cursor position inside the content.
+ *
+ * @returns {(null|Object)} Null if cursor is not in a tag, Object if the cursor is inside a tag.
+ */
+ function getContainingTagInfo( content, cursorPosition ) {
+ var lastLtPos = content.lastIndexOf( '<', cursorPosition - 1 ),
+ lastGtPos = content.lastIndexOf( '>', cursorPosition );
+
+ if ( lastLtPos > lastGtPos || content.substr( cursorPosition, 1 ) === '>' ) {
+ // find what the tag is
+ var tagContent = content.substr( lastLtPos ),
+ tagMatch = tagContent.match( /<\s*(\/)?(\w+)/ );
+
+ if ( ! tagMatch ) {
+ return null;
}
- DOM.setStyles( txtarea_el, {'display': '', 'visibility': ''} );
+ var tagType = tagMatch[2],
+ closingGt = tagContent.indexOf( '>' );
+
+ return {
+ ltPos: lastLtPos,
+ gtPos: lastLtPos + closingGt + 1, // offset by one to get the position _after_ the character,
+ tagType: tagType,
+ isClosingTag: !! tagMatch[1]
+ };
+ }
+ return null;
+ }
+
+ /**
+ * @summary Check if the cursor is inside a shortcode
+ *
+ * If the cursor is inside a shortcode wrapping tag, e.g. `[caption]` it's better to
+ * move the selection marker to before or after the shortcode.
+ *
+ * For example `[caption]` rewrites/removes anything that's between the `[caption]` tag and the
+ * `<img/>` tag inside.
+ *
+ * `[caption]<span>ThisIsGone</span><img .../>[caption]`
+ *
+ * Moving the selection to before or after the short code is better, since it allows to select
+ * something, instead of just losing focus and going to the start of the content.
+ *
+ * @param {string} content The text content to check against.
+ * @param {number} cursorPosition The cursor position to check.
+ *
+ * @return {(undefined|Object)} Undefined if the cursor is not wrapped in a shortcode tag.
+ * Information about the wrapping shortcode tag if it's wrapped in one.
+ */
+ function getShortcodeWrapperInfo( content, cursorPosition ) {
+ var contentShortcodes = getShortCodePositionsInText( content );
+
+ for ( var i = 0; i < contentShortcodes.length; i++ ) {
+ var element = contentShortcodes[ i ];
+
+ if ( cursorPosition >= element.startIndex && cursorPosition <= element.endIndex ) {
+ return element;
+ }
+ }
+ }
+
+ /**
+ * Gets a list of unique shortcodes or shortcode-look-alikes in the content.
+ *
+ * @param {string} content The content we want to scan for shortcodes.
+ */
+ function getShortcodesInText( content ) {
+ var shortcodes = content.match( /\[+([\w_-])+/g ),
+ result = [];
+
+ if ( shortcodes ) {
+ for ( var i = 0; i < shortcodes.length; i++ ) {
+ var shortcode = shortcodes[ i ].replace( /^\[+/g, '' );
+
+ if ( result.indexOf( shortcode ) === -1 ) {
+ result.push( shortcode );
+ }
+ }
}
- DOM.removeClass( wrap_id, 'tmce-active' );
- DOM.addClass( wrap_id, 'html-active' );
- DOM.setAttrib( txtarea_el, 'aria-hidden', false );
- setUserSetting( 'editor', 'html' );
- }
- return false;
- },
-
- _wp_Nop: function( content ) {
- var blocklist1, blocklist2,
- preserve_linebreaks = false,
- preserve_br = false;
-
- // Protect pre|script tags
- if ( content.indexOf( '<pre' ) !== -1 || content.indexOf( '<script' ) !== -1 ) {
- preserve_linebreaks = true;
- content = content.replace( /<(pre|script)[^>]*>[\s\S]+?<\/\1>/g, function( a ) {
- a = a.replace( /<br ?\/?>(\r\n|\n)?/g, '<wp-line-break>' );
- a = a.replace( /<\/?p( [^>]*)?>(\r\n|\n)?/g, '<wp-line-break>' );
- return a.replace( /\r?\n/g, '<wp-line-break>' );
- });
+ return result;
}
- // keep <br> tags inside captions and remove line breaks
- if ( content.indexOf( '[caption' ) !== -1 ) {
- preserve_br = true;
- content = content.replace( /\[caption[\s\S]+?\[\/caption\]/g, function( a ) {
- return a.replace( /<br([^>]*)>/g, '<wp-temp-br$1>' ).replace( /[\r\n\t]+/, '' );
- });
+ /**
+ * @summary Get all shortcodes and their positions in the content
+ *
+ * This function returns all the shortcodes that could be found in the textarea content
+ * along with their character positions and boundaries.
+ *
+ * This is used to check if the selection cursor is inside the boundaries of a shortcode
+ * and move it accordingly, to avoid breakage.
+ *
+ * @link adjustTextAreaSelectionCursors
+ *
+ * The information can also be used in other cases when we need to lookup shortcode data,
+ * as it's already structured!
+ *
+ * @param {string} content The content we want to scan for shortcodes
+ */
+ function getShortCodePositionsInText( content ) {
+ var allShortcodes = getShortcodesInText( content ), shortcodeInfo;
+
+ if ( allShortcodes.length === 0 ) {
+ return [];
+ }
+
+ var shortcodeDetailsRegexp = wp.shortcode.regexp( allShortcodes.join( '|' ) ),
+ shortcodeMatch, // Define local scope for the variable to be used in the loop below.
+ shortcodesDetails = [];
+
+ while ( shortcodeMatch = shortcodeDetailsRegexp.exec( content ) ) {
+ /**
+ * Check if the shortcode should be shown as plain text.
+ *
+ * This corresponds to the [[shortcode]] syntax, which doesn't parse the shortcode
+ * and just shows it as text.
+ */
+ var showAsPlainText = shortcodeMatch[1] === '[';
+
+ shortcodeInfo = {
+ shortcodeName: shortcodeMatch[2],
+ showAsPlainText: showAsPlainText,
+ startIndex: shortcodeMatch.index,
+ endIndex: shortcodeMatch.index + shortcodeMatch[0].length,
+ length: shortcodeMatch[0].length
+ };
+
+ shortcodesDetails.push( shortcodeInfo );
+ }
+
+ /**
+ * Get all URL matches, and treat them as embeds.
+ *
+ * Since there isn't a good way to detect if a URL by itself on a line is a previewable
+ * object, it's best to treat all of them as such.
+ *
+ * This means that the selection will capture the whole URL, in a similar way shrotcodes
+ * are treated.
+ */
+ var urlRegexp = new RegExp(
+ '(^|[\\n\\r][\\n\\r]|<p>)(https?:\\/\\/[^\s"]+?)(<\\/p>\s*|[\\n\\r][\\n\\r]|$)', 'gi'
+ );
+
+ while ( shortcodeMatch = urlRegexp.exec( content ) ) {
+ shortcodeInfo = {
+ shortcodeName: 'url',
+ showAsPlainText: false,
+ startIndex: shortcodeMatch.index,
+ endIndex: shortcodeMatch.index + shortcodeMatch[ 0 ].length,
+ length: shortcodeMatch[ 0 ].length,
+ urlAtStartOfContent: shortcodeMatch[ 1 ] === '',
+ urlAtEndOfContent: shortcodeMatch[ 3 ] === ''
+ };
+
+ shortcodesDetails.push( shortcodeInfo );
+ }
+
+ return shortcodesDetails;
+ }
+
+ /**
+ * Generate a cursor marker element to be inserted in the content.
+ *
+ * `span` seems to be the least destructive element that can be used.
+ *
+ * Using DomQuery syntax to create it, since it's used as both text and as a DOM element.
+ *
+ * @param {Object} domLib DOM library instance.
+ * @param {string} content The content to insert into the cusror marker element.
+ */
+ function getCursorMarkerSpan( domLib, content ) {
+ return domLib( '<span>' ).css( {
+ display: 'inline-block',
+ width: 0,
+ overflow: 'hidden',
+ 'line-height': 0
+ } )
+ .html( content ? content : '' );
}
- // Pretty it up for the source editor
- blocklist1 = 'blockquote|ul|ol|li|table|thead|tbody|tfoot|tr|th|td|div|h[1-6]|p|fieldset';
- content = content.replace( new RegExp( '\\s*</(' + blocklist1 + ')>\\s*', 'g' ), '</$1>\n' );
- content = content.replace( new RegExp( '\\s*<((?:' + blocklist1 + ')(?: [^>]*)?)>', 'g' ), '\n<$1>' );
+ /**
+ * @summary Get adjusted selection cursor positions according to HTML tags/shortcodes
+ *
+ * Shortcodes and HTML codes are a bit of a special case when selecting, since they may render
+ * content in Visual mode. If we insert selection markers somewhere inside them, it's really possible
+ * to break the syntax and render the HTML tag or shortcode broken.
+ *
+ * @link getShortcodeWrapperInfo
+ *
+ * @param {string} content Textarea content that the cursors are in
+ * @param {{cursorStart: number, cursorEnd: number}} cursorPositions Cursor start and end positions
+ *
+ * @return {{cursorStart: number, cursorEnd: number}}
+ */
+ function adjustTextAreaSelectionCursors( content, cursorPositions ) {
+ var voidElements = [
+ 'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+ 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'
+ ];
- // Mark </p> if it has any attributes.
- content = content.replace( /(<p [^>]+>.*?)<\/p>/g, '$1</p#>' );
-
- // Separate <div> containing <p>
- content = content.replace( /<div( [^>]*)?>\s*<p>/gi, '<div$1>\n\n' );
+ var cursorStart = cursorPositions.cursorStart,
+ cursorEnd = cursorPositions.cursorEnd,
+ // check if the cursor is in a tag and if so, adjust it
+ isCursorStartInTag = getContainingTagInfo( content, cursorStart );
- // Remove <p> and <br />
- content = content.replace( /\s*<p>/gi, '' );
- content = content.replace( /\s*<\/p>\s*/gi, '\n\n' );
- content = content.replace( /\n[\s\u00a0]+\n/g, '\n\n' );
- content = content.replace( /\s*<br ?\/?>\s*/gi, '\n' );
+ if ( isCursorStartInTag ) {
+ /**
+ * Only move to the start of the HTML tag (to select the whole element) if the tag
+ * is part of the voidElements list above.
+ *
+ * This list includes tags that are self-contained and don't need a closing tag, according to the
+ * HTML5 specification.
+ *
+ * This is done in order to make selection of text a bit more consistent when selecting text in
+ * `<p>` tags or such.
+ *
+ * In cases where the tag is not a void element, the cursor is put to the end of the tag,
+ * so it's either between the opening and closing tag elements or after the closing tag.
+ */
+ if ( voidElements.indexOf( isCursorStartInTag.tagType ) !== -1 ) {
+ cursorStart = isCursorStartInTag.ltPos;
+ } else {
+ cursorStart = isCursorStartInTag.gtPos;
+ }
+ }
+
+ var isCursorEndInTag = getContainingTagInfo( content, cursorEnd );
+ if ( isCursorEndInTag ) {
+ cursorEnd = isCursorEndInTag.gtPos;
+ }
- // Fix some block element newline issues
- content = content.replace( /\s*<div/g, '\n<div' );
- content = content.replace( /<\/div>\s*/g, '</div>\n' );
- content = content.replace( /\s*\[caption([^\[]+)\[\/caption\]\s*/gi, '\n\n[caption$1[/caption]\n\n' );
- content = content.replace( /caption\]\n\n+\[caption/g, 'caption]\n\n[caption' );
+ var isCursorStartInShortcode = getShortcodeWrapperInfo( content, cursorStart );
+ if ( isCursorStartInShortcode && ! isCursorStartInShortcode.showAsPlainText ) {
+ /**
+ * If a URL is at the start or the end of the content,
+ * the selection doesn't work, because it inserts a marker in the text,
+ * which breaks the embedURL detection.
+ *
+ * The best way to avoid that and not modify the user content is to
+ * adjust the cursor to either after or before URL.
+ */
+ if ( isCursorStartInShortcode.urlAtStartOfContent ) {
+ cursorStart = isCursorStartInShortcode.endIndex;
+ } else {
+ cursorStart = isCursorStartInShortcode.startIndex;
+ }
+ }
- blocklist2 = 'blockquote|ul|ol|li|table|thead|tbody|tfoot|tr|th|td|h[1-6]|pre|fieldset';
- content = content.replace( new RegExp('\\s*<((?:' + blocklist2 + ')(?: [^>]*)?)\\s*>', 'g' ), '\n<$1>' );
- content = content.replace( new RegExp('\\s*</(' + blocklist2 + ')>\\s*', 'g' ), '</$1>\n' );
- content = content.replace( /<li([^>]*)>/g, '\t<li$1>' );
+ var isCursorEndInShortcode = getShortcodeWrapperInfo( content, cursorEnd );
+ if ( isCursorEndInShortcode && ! isCursorEndInShortcode.showAsPlainText ) {
+ if ( isCursorEndInShortcode.urlAtEndOfContent ) {
+ cursorEnd = isCursorEndInShortcode.startIndex;
+ } else {
+ cursorEnd = isCursorEndInShortcode.endIndex;
+ }
+ }
- if ( content.indexOf( '<option' ) !== -1 ) {
- content = content.replace( /\s*<option/g, '\n<option' );
- content = content.replace( /\s*<\/select>/g, '\n</select>' );
+ return {
+ cursorStart: cursorStart,
+ cursorEnd: cursorEnd
+ };
}
- if ( content.indexOf( '<hr' ) !== -1 ) {
- content = content.replace( /\s*<hr( [^>]*)?>\s*/g, '\n\n<hr$1>\n\n' );
+ /**
+ * @summary Adds text selection markers in the editor textarea.
+ *
+ * Adds selection markers in the content of the editor `textarea`.
+ * The method directly manipulates the `textarea` content, to allow TinyMCE plugins
+ * to run after the markers are added.
+ *
+ * @param {object} $textarea TinyMCE's textarea wrapped as a DomQuery object
+ */
+ function addHTMLBookmarkInTextAreaContent( $textarea ) {
+ if ( ! $textarea || ! $textarea.length ) {
+ // If no valid $textarea object is provided, there's nothing we can do.
+ return;
+ }
+
+ var textArea = $textarea[0],
+ textAreaContent = textArea.value,
+
+ adjustedCursorPositions = adjustTextAreaSelectionCursors( textAreaContent, {
+ cursorStart: textArea.selectionStart,
+ cursorEnd: textArea.selectionEnd
+ } ),
+
+ htmlModeCursorStartPosition = adjustedCursorPositions.cursorStart,
+ htmlModeCursorEndPosition = adjustedCursorPositions.cursorEnd,
+
+ mode = htmlModeCursorStartPosition !== htmlModeCursorEndPosition ? 'range' : 'single',
+
+ selectedText = null,
+ cursorMarkerSkeleton = getCursorMarkerSpan( $$, '' ).attr( 'data-mce-type','bookmark' );
+
+ if ( mode === 'range' ) {
+ var markedText = textArea.value.slice( htmlModeCursorStartPosition, htmlModeCursorEndPosition ),
+ bookMarkEnd = cursorMarkerSkeleton.clone().addClass( 'mce_SELRES_end' );
+
+ selectedText = [
+ markedText,
+ bookMarkEnd[0].outerHTML
+ ].join( '' );
+ }
+
+ textArea.value = [
+ textArea.value.slice( 0, htmlModeCursorStartPosition ), // text until the cursor/selection position
+ cursorMarkerSkeleton.clone() // cursor/selection start marker
+ .addClass( 'mce_SELRES_start' )[0].outerHTML,
+ selectedText, // selected text with end cursor/position marker
+ textArea.value.slice( htmlModeCursorEndPosition ) // text from last cursor/selection position to end
+ ].join( '' );
+ }
+
+ /**
+ * @summary Focus the selection markers in Visual mode.
+ *
+ * The method checks for existing selection markers inside the editor DOM (Visual mode)
+ * and create a selection between the two nodes using the DOM `createRange` selection API
+ *
+ * If there is only a single node, select only the single node through TinyMCE's selection API
+ *
+ * @param {Object} editor TinyMCE editor instance.
+ */
+ function focusHTMLBookmarkInVisualEditor( editor ) {
+ var startNode = editor.$( '.mce_SELRES_start' ).attr( 'data-mce-bogus', 1 ),
+ endNode = editor.$( '.mce_SELRES_end' ).attr( 'data-mce-bogus', 1 );
+
+ if ( startNode.length ) {
+ editor.focus();
+
+ if ( ! endNode.length ) {
+ editor.selection.select( startNode[0] );
+ } else {
+ var selection = editor.getDoc().createRange();
+
+ selection.setStartAfter( startNode[0] );
+ selection.setEndBefore( endNode[0] );
+
+ editor.selection.setRng( selection );
+ }
+ }
+
+ if ( editor.getParam( 'wp_keep_scroll_position' ) ) {
+ scrollVisualModeToStartElement( editor, startNode );
+ }
+
+ removeSelectionMarker( startNode );
+ removeSelectionMarker( endNode );
+
+ editor.save();
+ }
+
+ /**
+ * @summary Remove selection marker and the parent node if it is an empty paragraph.
+ *
+ * By default TinyMCE wraps loose inline tags in a `<p>`.
+ * When removing selection markers an empty `<p>` may be left behind, remove it.
+ *
+ * @param {object} $marker The marker to be removed from the editor DOM, wrapped in an instnce of `editor.$`
+ */
+ function removeSelectionMarker( $marker ) {
+ var $markerParent = $marker.parent();
+
+ $marker.remove();
+
+ //Remove empty paragraph left over after removing the marker.
+ if ( $markerParent.is( 'p' ) && ! $markerParent.children().length && ! $markerParent.text() ) {
+ $markerParent.remove();
+ }
+ }
+
+ /**
+ * @summary Scrolls the content to place the selected element in the center of the screen.
+ *
+ * Takes an element, that is usually the selection start element, selected in
+ * `focusHTMLBookmarkInVisualEditor()` and scrolls the screen so the element appears roughly
+ * in the middle of the screen.
+ *
+ * I order to achieve the proper positioning, the editor media bar and toolbar are subtracted
+ * from the window height, to get the proper viewport window, that the user sees.
+ *
+ * @param {Object} editor TinyMCE editor instance.
+ * @param {Object} element HTMLElement that should be scrolled into view.
+ */
+ function scrollVisualModeToStartElement( editor, element ) {
+ var elementTop = editor.$( element ).offset().top,
+ TinyMCEContentAreaTop = editor.$( editor.getContentAreaContainer() ).offset().top,
+
+ toolbarHeight = getToolbarHeight( editor ),
+
+ edTools = $( '#wp-content-editor-tools' ),
+ edToolsHeight = 0,
+ edToolsOffsetTop = 0,
+
+ $scrollArea;
+
+ if ( edTools.length ) {
+ edToolsHeight = edTools.height();
+ edToolsOffsetTop = edTools.offset().top;
+ }
+
+ var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
+
+ selectionPosition = TinyMCEContentAreaTop + elementTop,
+ visibleAreaHeight = windowHeight - ( edToolsHeight + toolbarHeight );
+
+ // There's no need to scroll if the selection is inside the visible area.
+ if ( selectionPosition < visibleAreaHeight ) {
+ return;
+ }
+
+ /**
+ * The minimum scroll height should be to the top of the editor, to offer a consistent
+ * experience.
+ *
+ * In order to find the top of the editor, we calculate the offset of `#wp-content-editor-tools` and
+ * subtracting the height. This gives the scroll position where the top of the editor tools aligns with
+ * the top of the viewport (under the Master Bar)
+ */
+ var adjustedScroll;
+ if ( editor.settings.wp_autoresize_on ) {
+ $scrollArea = $( 'html,body' );
+ adjustedScroll = Math.max( selectionPosition - visibleAreaHeight / 2, edToolsOffsetTop - edToolsHeight );
+ } else {
+ $scrollArea = $( editor.contentDocument ).find( 'html,body' );
+ adjustedScroll = elementTop;
+ }
+
+ $scrollArea.animate( {
+ scrollTop: parseInt( adjustedScroll, 10 )
+ }, 100 );
+ }
+
+ /**
+ * This method was extracted from the `SaveContent` hook in
+ * `wp-includes/js/tinymce/plugins/wordpress/plugin.js`.
+ *
+ * It's needed here, since the method changes the content a bit, which confuses the cursor position.
+ *
+ * @param {Object} event TinyMCE event object.
+ */
+ function fixTextAreaContent( event ) {
+ // Keep empty paragraphs :(
+ event.content = event.content.replace( /<p>(?:<br ?\/?>|\u00a0|\uFEFF| )*<\/p>/g, '<p> </p>' );
}
- if ( content.indexOf( '<object' ) !== -1 ) {
- content = content.replace( /<object[\s\S]+?<\/object>/g, function( a ) {
- return a.replace( /[\r\n]+/g, '' );
- });
- }
+ /**
+ * @summary Finds the current selection position in the Visual editor.
+ *
+ * Find the current selection in the Visual editor by inserting marker elements at the start
+ * and end of the selection.
+ *
+ * Uses the standard DOM selection API to achieve that goal.
+ *
+ * Check the notes in the comments in the code below for more information on some gotchas
+ * and why this solution was chosen.
+ *
+ * @param {Object} editor The editor where we must find the selection
+ * @returns {(null|Object)} The selection range position in the editor
+ */
+ function findBookmarkedPosition( editor ) {
+ // Get the TinyMCE `window` reference, since we need to access the raw selection.
+ var TinyMCEWindow = editor.getWin(),
+ selection = TinyMCEWindow.getSelection();
+
+ if ( ! selection || selection.rangeCount < 1 ) {
+ // no selection, no need to continue.
+ return;
+ }
+
+ /**
+ * The ID is used to avoid replacing user generated content, that may coincide with the
+ * format specified below.
+ * @type {string}
+ */
+ var selectionID = 'SELRES_' + Math.random();
- // Unmark special paragraph closing tags
- content = content.replace( /<\/p#>/g, '</p>\n' );
- content = content.replace( /\s*(<p [^>]+>[\s\S]*?<\/p>)/g, '\n$1' );
+ /**
+ * Create two marker elements that will be used to mark the start and the end of the range.
+ *
+ * The elements have hardcoded style that makes them invisible. This is done to avoid seeing
+ * random content flickering in the editor when switching between modes.
+ */
+ var spanSkeleton = getCursorMarkerSpan( editor.$, selectionID ),
+ startElement = spanSkeleton.clone().addClass( 'mce_SELRES_start' ),
+ endElement = spanSkeleton.clone().addClass( 'mce_SELRES_end' );
+
+ /**
+ * Inspired by:
+ * @link https://stackoverflow.com/a/17497803/153310
+ *
+ * Why do it this way and not with TinyMCE's bookmarks?
+ *
+ * TinyMCE's bookmarks are very nice when working with selections and positions, BUT
+ * there is no way to determine the precise position of the bookmark when switching modes, since
+ * TinyMCE does some serialization of the content, to fix things like shortcodes, run plugins, prettify
+ * HTML code and so on. In this process, the bookmark markup gets lost.
+ *
+ * If we decide to hook right after the bookmark is added, we can see where the bookmark is in the raw HTML
+ * in TinyMCE. Unfortunately this state is before the serialization, so any visual markup in the content will
+ * throw off the positioning.
+ *
+ * To avoid this, we insert two custom `span`s that will serve as the markers at the beginning and end of the
+ * selection.
+ *
+ * Why not use TinyMCE's selection API or the DOM API to wrap the contents? Because if we do that, this creates
+ * a new node, which is inserted in the dom. Now this will be fine, if we worked with fixed selections to
+ * full nodes. Unfortunately in our case, the user can select whatever they like, which means that the
+ * selection may start in the middle of one node and end in the middle of a completely different one. If we
+ * wrap the selection in another node, this will create artifacts in the content.
+ *
+ * Using the method below, we insert the custom `span` nodes at the start and at the end of the selection.
+ * This helps us not break the content and also gives us the option to work with multi-node selections without
+ * breaking the markup.
+ */
+ var range = selection.getRangeAt( 0 ),
+ startNode = range.startContainer,
+ startOffset = range.startOffset,
+ boundaryRange = range.cloneRange();
+
+ /**
+ * If the selection is on a shortcode with Live View, TinyMCE creates a bogus markup,
+ * which we have to account for.
+ */
+ if ( editor.$( startNode ).parents( '.mce-offscreen-selection' ).length > 0 ) {
+ startNode = editor.$( '[data-mce-selected]' )[0];
- // Trim whitespace
- content = content.replace( /^\s+/, '' );
- content = content.replace( /[\s\u00a0]+$/, '' );
+ /**
+ * Marking the start and end element with `data-mce-object-selection` helps
+ * discern when the selected object is a Live Preview selection.
+ *
+ * This way we can adjust the selection to properly select only the content, ignoring
+ * whitespace inserted around the selected object by the Editor.
+ */
+ startElement.attr( 'data-mce-object-selection', 'true' );
+ endElement.attr( 'data-mce-object-selection', 'true' );
+
+ editor.$( startNode ).before( startElement[0] );
+ editor.$( startNode ).after( endElement[0] );
+ } else {
+ boundaryRange.collapse( false );
+ boundaryRange.insertNode( endElement[0] );
+
+ boundaryRange.setStart( startNode, startOffset );
+ boundaryRange.collapse( true );
+ boundaryRange.insertNode( startElement[0] );
+
+ range.setStartAfter( startElement[0] );
+ range.setEndBefore( endElement[0] );
+ selection.removeAllRanges();
+ selection.addRange( range );
+ }
+
+ /**
+ * Now the editor's content has the start/end nodes.
+ *
+ * Unfortunately the content goes through some more changes after this step, before it gets inserted
+ * in the `textarea`. This means that we have to do some minor cleanup on our own here.
+ */
+ editor.on( 'GetContent', fixTextAreaContent );
+
+ var content = removep( editor.getContent() );
+
+ editor.off( 'GetContent', fixTextAreaContent );
+
+ startElement.remove();
+ endElement.remove();
- // put back the line breaks in pre|script
- if ( preserve_linebreaks ) {
- content = content.replace( /<wp-line-break>/g, '\n' );
- }
+ var startRegex = new RegExp(
+ '<span[^>]*\\s*class="mce_SELRES_start"[^>]+>\\s*' + selectionID + '[^<]*<\\/span>(\\s*)'
+ );
+
+ var endRegex = new RegExp(
+ '(\\s*)<span[^>]*\\s*class="mce_SELRES_end"[^>]+>\\s*' + selectionID + '[^<]*<\\/span>'
+ );
+
+ var startMatch = content.match( startRegex ),
+ endMatch = content.match( endRegex );
+
+ if ( ! startMatch ) {
+ return null;
+ }
+
+ var startIndex = startMatch.index,
+ startMatchLength = startMatch[0].length,
+ endIndex = null;
- // and the <br> tags in captions
- if ( preserve_br ) {
- content = content.replace( /<wp-temp-br([^>]*)>/g, '<br$1>' );
+ if (endMatch) {
+ /**
+ * Adjust the selection index, if the selection contains a Live Preview object or not.
+ *
+ * Check where the `data-mce-object-selection` attribute is set above for more context.
+ */
+ if ( startMatch[0].indexOf( 'data-mce-object-selection' ) !== -1 ) {
+ startMatchLength -= startMatch[1].length;
+ }
+
+ var endMatchIndex = endMatch.index;
+
+ if ( endMatch[0].indexOf( 'data-mce-object-selection' ) !== -1 ) {
+ endMatchIndex -= endMatch[1].length;
+ }
+
+ // We need to adjust the end position to discard the length of the range start marker
+ endIndex = endMatchIndex - startMatchLength;
+ }
+
+ return {
+ start: startIndex,
+ end: endIndex
+ };
}
- return content;
- },
+ /**
+ * @summary Selects text in the TinyMCE `textarea`.
+ *
+ * Selects the text in TinyMCE's textarea that's between `selection.start` and `selection.end`.
+ *
+ * For `selection` parameter:
+ * @link findBookmarkedPosition
+ *
+ * @param {Object} editor TinyMCE's editor instance.
+ * @param {Object} selection Selection data.
+ */
+ function selectTextInTextArea( editor, selection ) {
+ // only valid in the text area mode and if we have selection
+ if ( ! selection ) {
+ return;
+ }
- _wp_Autop: function(pee) {
- var preserve_linebreaks = false,
- preserve_br = false,
- blocklist = 'table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre' +
- '|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|legend|section' +
- '|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary';
+ var textArea = editor.getElement(),
+ start = selection.start,
+ end = selection.end || selection.start;
- if ( pee.indexOf( '<object' ) !== -1 ) {
- pee = pee.replace( /<object[\s\S]+?<\/object>/g, function( a ) {
- return a.replace( /[\r\n]+/g, '' );
- });
+ if ( textArea.focus ) {
+ // Wait for the Visual editor to be hidden, then focus and scroll to the position
+ setTimeout( function() {
+ textArea.setSelectionRange( start, end );
+ if ( textArea.blur ) {
+ // defocus before focusing
+ textArea.blur();
+ }
+ textArea.focus();
+ }, 100 );
+ }
}
- pee = pee.replace( /<[^<>]+>/g, function( a ){
- return a.replace( /[\r\n]+/g, ' ' );
- });
+ // Restore the selection when the editor is initialized. Needed when the Text editor is the default.
+ $( document ).on( 'tinymce-editor-init.keep-scroll-position', function( event, editor ) {
+ if ( editor.$( '.mce_SELRES_start' ).length ) {
+ focusHTMLBookmarkInVisualEditor( editor );
+ }
+ } );
+
+ /**
+ * @summary Replaces <p> tags with two line breaks. "Opposite" of wpautop().
+ *
+ * Replaces <p> tags with two line breaks except where the <p> has attributes.
+ * Unifies whitespace.
+ * Indents <li>, <dt> and <dd> for better readability.
+ *
+ * @since 2.5.0
+ *
+ * @memberof switchEditors
+ *
+ * @param {string} html The content from the editor.
+ * @return {string} The content with stripped paragraph tags.
+ */
+ function removep( html ) {
+ var blocklist = 'blockquote|ul|ol|li|dl|dt|dd|table|thead|tbody|tfoot|tr|th|td|h[1-6]|fieldset|figure',
+ blocklist1 = blocklist + '|div|p',
+ blocklist2 = blocklist + '|pre',
+ preserve_linebreaks = false,
+ preserve_br = false,
+ preserve = [];
+
+ if ( ! html ) {
+ return '';
+ }
- // Protect pre|script tags
- if ( pee.indexOf( '<pre' ) !== -1 || pee.indexOf( '<script' ) !== -1 ) {
- preserve_linebreaks = true;
- pee = pee.replace( /<(pre|script)[^>]*>[\s\S]+?<\/\1>/g, function( a ) {
- return a.replace( /(\r\n|\n)/g, '<wp-line-break>' );
- });
- }
+ // Protect script and style tags.
+ if ( html.indexOf( '<script' ) !== -1 || html.indexOf( '<style' ) !== -1 ) {
+ html = html.replace( /<(script|style)[^>]*>[\s\S]*?<\/\1>/g, function( match ) {
+ preserve.push( match );
+ return '<wp-preserve>';
+ } );
+ }
+
+ // Protect pre tags.
+ if ( html.indexOf( '<pre' ) !== -1 ) {
+ preserve_linebreaks = true;
+ html = html.replace( /<pre[^>]*>[\s\S]+?<\/pre>/g, function( a ) {
+ a = a.replace( /<br ?\/?>(\r\n|\n)?/g, '<wp-line-break>' );
+ a = a.replace( /<\/?p( [^>]*)?>(\r\n|\n)?/g, '<wp-line-break>' );
+ return a.replace( /\r?\n/g, '<wp-line-break>' );
+ });
+ }
+
+ // Remove line breaks but keep <br> tags inside image captions.
+ if ( html.indexOf( '[caption' ) !== -1 ) {
+ preserve_br = true;
+ html = html.replace( /\[caption[\s\S]+?\[\/caption\]/g, function( a ) {
+ return a.replace( /<br([^>]*)>/g, '<wp-temp-br$1>' ).replace( /[\r\n\t]+/, '' );
+ });
+ }
+
+ // Normalize white space characters before and after block tags.
+ html = html.replace( new RegExp( '\\s*</(' + blocklist1 + ')>\\s*', 'g' ), '</$1>\n' );
+ html = html.replace( new RegExp( '\\s*<((?:' + blocklist1 + ')(?: [^>]*)?)>', 'g' ), '\n<$1>' );
+
+ // Mark </p> if it has any attributes.
+ html = html.replace( /(<p [^>]+>.*?)<\/p>/g, '$1</p#>' );
+
+ // Preserve the first <p> inside a <div>.
+ html = html.replace( /<div( [^>]*)?>\s*<p>/gi, '<div$1>\n\n' );
- // keep <br> tags inside captions and convert line breaks
- if ( pee.indexOf( '[caption' ) !== -1 ) {
- preserve_br = true;
- pee = pee.replace( /\[caption[\s\S]+?\[\/caption\]/g, function( a ) {
- // keep existing <br>
- a = a.replace( /<br([^>]*)>/g, '<wp-temp-br$1>' );
- // no line breaks inside HTML tags
- a = a.replace( /<[a-zA-Z0-9]+( [^<>]+)?>/g, function( b ) {
- return b.replace( /[\r\n\t]+/, ' ' );
+ // Remove paragraph tags.
+ html = html.replace( /\s*<p>/gi, '' );
+ html = html.replace( /\s*<\/p>\s*/gi, '\n\n' );
+
+ // Normalize white space chars and remove multiple line breaks.
+ html = html.replace( /\n[\s\u00a0]+\n/g, '\n\n' );
+
+ // Replace <br> tags with line breaks.
+ html = html.replace( /(\s*)<br ?\/?>\s*/gi, function( match, space ) {
+ if ( space && space.indexOf( '\n' ) !== -1 ) {
+ return '\n\n';
+ }
+
+ return '\n';
+ });
+
+ // Fix line breaks around <div>.
+ html = html.replace( /\s*<div/g, '\n<div' );
+ html = html.replace( /<\/div>\s*/g, '</div>\n' );
+
+ // Fix line breaks around caption shortcodes.
+ html = html.replace( /\s*\[caption([^\[]+)\[\/caption\]\s*/gi, '\n\n[caption$1[/caption]\n\n' );
+ html = html.replace( /caption\]\n\n+\[caption/g, 'caption]\n\n[caption' );
+
+ // Pad block elements tags with a line break.
+ html = html.replace( new RegExp('\\s*<((?:' + blocklist2 + ')(?: [^>]*)?)\\s*>', 'g' ), '\n<$1>' );
+ html = html.replace( new RegExp('\\s*</(' + blocklist2 + ')>\\s*', 'g' ), '</$1>\n' );
+
+ // Indent <li>, <dt> and <dd> tags.
+ html = html.replace( /<((li|dt|dd)[^>]*)>/g, ' \t<$1>' );
+
+ // Fix line breaks around <select> and <option>.
+ if ( html.indexOf( '<option' ) !== -1 ) {
+ html = html.replace( /\s*<option/g, '\n<option' );
+ html = html.replace( /\s*<\/select>/g, '\n</select>' );
+ }
+
+ // Pad <hr> with two line breaks.
+ if ( html.indexOf( '<hr' ) !== -1 ) {
+ html = html.replace( /\s*<hr( [^>]*)?>\s*/g, '\n\n<hr$1>\n\n' );
+ }
+
+ // Remove line breaks in <object> tags.
+ if ( html.indexOf( '<object' ) !== -1 ) {
+ html = html.replace( /<object[\s\S]+?<\/object>/g, function( a ) {
+ return a.replace( /[\r\n]+/g, '' );
});
- // convert remaining line breaks to <br>
- return a.replace( /\s*\n\s*/g, '<wp-temp-br />' );
- });
+ }
+
+ // Unmark special paragraph closing tags.
+ html = html.replace( /<\/p#>/g, '</p>\n' );
+
+ // Pad remaining <p> tags whit a line break.
+ html = html.replace( /\s*(<p [^>]+>[\s\S]*?<\/p>)/g, '\n$1' );
+
+ // Trim.
+ html = html.replace( /^\s+/, '' );
+ html = html.replace( /[\s\u00a0]+$/, '' );
+
+ if ( preserve_linebreaks ) {
+ html = html.replace( /<wp-line-break>/g, '\n' );
+ }
+
+ if ( preserve_br ) {
+ html = html.replace( /<wp-temp-br([^>]*)>/g, '<br$1>' );
+ }
+
+ // Restore preserved tags.
+ if ( preserve.length ) {
+ html = html.replace( /<wp-preserve>/g, function() {
+ return preserve.shift();
+ } );
+ }
+
+ return html;
}
- pee = pee + '\n\n';
- pee = pee.replace( /<br \/>\s*<br \/>/gi, '\n\n' );
- pee = pee.replace( new RegExp( '(<(?:' + blocklist + ')(?: [^>]*)?>)', 'gi' ), '\n$1' );
- pee = pee.replace( new RegExp( '(</(?:' + blocklist + ')>)', 'gi' ), '$1\n\n' );
- pee = pee.replace( /<hr( [^>]*)?>/gi, '<hr$1>\n\n' ); // hr is self closing block element
- pee = pee.replace( /\s*<option/gi, '<option' ); // No <p> or <br> around <option>
- pee = pee.replace( /<\/option>\s*/gi, '</option>' );
- pee = pee.replace( /\r\n|\r/g, '\n' );
- pee = pee.replace( /\n\s*\n+/g, '\n\n' );
- pee = pee.replace( /([\s\S]+?)\n\n/g, '<p>$1</p>\n' );
- pee = pee.replace( /<p>\s*?<\/p>/gi, '');
- pee = pee.replace( new RegExp( '<p>\\s*(</?(?:' + blocklist + ')(?: [^>]*)?>)\\s*</p>', 'gi' ), '$1' );
- pee = pee.replace( /<p>(<li.+?)<\/p>/gi, '$1');
- pee = pee.replace( /<p>\s*<blockquote([^>]*)>/gi, '<blockquote$1><p>');
- pee = pee.replace( /<\/blockquote>\s*<\/p>/gi, '</p></blockquote>');
- pee = pee.replace( new RegExp( '<p>\\s*(</?(?:' + blocklist + ')(?: [^>]*)?>)', 'gi' ), '$1' );
- pee = pee.replace( new RegExp( '(</?(?:' + blocklist + ')(?: [^>]*)?>)\\s*</p>', 'gi' ), '$1' );
- pee = pee.replace( /\s*\n/gi, '<br />\n');
- pee = pee.replace( new RegExp( '(</?(?:' + blocklist + ')[^>]*>)\\s*<br />', 'gi' ), '$1' );
- pee = pee.replace( /<br \/>(\s*<\/?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)>)/gi, '$1' );
- pee = pee.replace( /(?:<p>|<br ?\/?>)*\s*\[caption([^\[]+)\[\/caption\]\s*(?:<\/p>|<br ?\/?>)*/gi, '[caption$1[/caption]' );
+ /**
+ * @summary Replaces two line breaks with a paragraph tag and one line break with a <br>.
+ *
+ * Similar to `wpautop()` in formatting.php.
+ *
+ * @since 2.5.0
+ *
+ * @memberof switchEditors
+ *
+ * @param {string} text The text input.
+ * @returns {string} The formatted text.
+ */
+ function autop( text ) {
+ var preserve_linebreaks = false,
+ preserve_br = false,
+ blocklist = 'table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre' +
+ '|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|legend|section' +
+ '|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary';
+
+ // Normalize line breaks.
+ text = text.replace( /\r\n|\r/g, '\n' );
+
+ // Remove line breaks from <object>.
+ if ( text.indexOf( '<object' ) !== -1 ) {
+ text = text.replace( /<object[\s\S]+?<\/object>/g, function( a ) {
+ return a.replace( /\n+/g, '' );
+ });
+ }
- pee = pee.replace( /(<(?:div|th|td|form|fieldset|dd)[^>]*>)(.*?)<\/p>/g, function( a, b, c ) {
- if ( c.match( /<p( [^>]*)?>/ ) ) {
- return a;
+ // Remove line breaks from tags.
+ text = text.replace( /<[^<>]+>/g, function( a ) {
+ return a.replace( /[\n\t ]+/g, ' ' );
+ });
+
+ // Preserve line breaks in <pre> and <script> tags.
+ if ( text.indexOf( '<pre' ) !== -1 || text.indexOf( '<script' ) !== -1 ) {
+ preserve_linebreaks = true;
+ text = text.replace( /<(pre|script)[^>]*>[\s\S]*?<\/\1>/g, function( a ) {
+ return a.replace( /\n/g, '<wp-line-break>' );
+ });
+ }
+
+ if ( text.indexOf( '<figcaption' ) !== -1 ) {
+ text = text.replace( /\s*(<figcaption[^>]*>)/g, '$1' );
+ text = text.replace( /<\/figcaption>\s*/g, '</figcaption>' );
+ }
+
+ // Keep <br> tags inside captions.
+ if ( text.indexOf( '[caption' ) !== -1 ) {
+ preserve_br = true;
+
+ text = text.replace( /\[caption[\s\S]+?\[\/caption\]/g, function( a ) {
+ a = a.replace( /<br([^>]*)>/g, '<wp-temp-br$1>' );
+
+ a = a.replace( /<[^<>]+>/g, function( b ) {
+ return b.replace( /[\n\t ]+/, ' ' );
+ });
+
+ return a.replace( /\s*\n\s*/g, '<wp-temp-br />' );
+ });
}
- return b + '<p>' + c + '</p>';
- });
+ text = text + '\n\n';
+ text = text.replace( /<br \/>\s*<br \/>/gi, '\n\n' );
+
+ // Pad block tags with two line breaks.
+ text = text.replace( new RegExp( '(<(?:' + blocklist + ')(?: [^>]*)?>)', 'gi' ), '\n\n$1' );
+ text = text.replace( new RegExp( '(</(?:' + blocklist + ')>)', 'gi' ), '$1\n\n' );
+ text = text.replace( /<hr( [^>]*)?>/gi, '<hr$1>\n\n' );
+
+ // Remove white space chars around <option>.
+ text = text.replace( /\s*<option/gi, '<option' );
+ text = text.replace( /<\/option>\s*/gi, '</option>' );
+
+ // Normalize multiple line breaks and white space chars.
+ text = text.replace( /\n\s*\n+/g, '\n\n' );
+
+ // Convert two line breaks to a paragraph.
+ text = text.replace( /([\s\S]+?)\n\n/g, '<p>$1</p>\n' );
+
+ // Remove empty paragraphs.
+ text = text.replace( /<p>\s*?<\/p>/gi, '');
+
+ // Remove <p> tags that are around block tags.
+ text = text.replace( new RegExp( '<p>\\s*(</?(?:' + blocklist + ')(?: [^>]*)?>)\\s*</p>', 'gi' ), '$1' );
+ text = text.replace( /<p>(<li.+?)<\/p>/gi, '$1');
+
+ // Fix <p> in blockquotes.
+ text = text.replace( /<p>\s*<blockquote([^>]*)>/gi, '<blockquote$1><p>');
+ text = text.replace( /<\/blockquote>\s*<\/p>/gi, '</p></blockquote>');
+
+ // Remove <p> tags that are wrapped around block tags.
+ text = text.replace( new RegExp( '<p>\\s*(</?(?:' + blocklist + ')(?: [^>]*)?>)', 'gi' ), '$1' );
+ text = text.replace( new RegExp( '(</?(?:' + blocklist + ')(?: [^>]*)?>)\\s*</p>', 'gi' ), '$1' );
+
+ text = text.replace( /(<br[^>]*>)\s*\n/gi, '$1' );
+
+ // Add <br> tags.
+ text = text.replace( /\s*\n/g, '<br />\n');
+
+ // Remove <br> tags that are around block tags.
+ text = text.replace( new RegExp( '(</?(?:' + blocklist + ')[^>]*>)\\s*<br />', 'gi' ), '$1' );
+ text = text.replace( /<br \/>(\s*<\/?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)>)/gi, '$1' );
+
+ // Remove <p> and <br> around captions.
+ text = text.replace( /(?:<p>|<br ?\/?>)*\s*\[caption([^\[]+)\[\/caption\]\s*(?:<\/p>|<br ?\/?>)*/gi, '[caption$1[/caption]' );
+
+ // Make sure there is <p> when there is </p> inside block tags that can contain other blocks.
+ text = text.replace( /(<(?:div|th|td|form|fieldset|dd)[^>]*>)(.*?)<\/p>/g, function( a, b, c ) {
+ if ( c.match( /<p( [^>]*)?>/ ) ) {
+ return a;
+ }
+
+ return b + '<p>' + c + '</p>';
+ });
+
+ // Restore the line breaks in <pre> and <script> tags.
+ if ( preserve_linebreaks ) {
+ text = text.replace( /<wp-line-break>/g, '\n' );
+ }
+
+ // Restore the <br> tags in captions.
+ if ( preserve_br ) {
+ text = text.replace( /<wp-temp-br([^>]*)>/g, '<br$1>' );
+ }
- // put back the line breaks in pre|script
- if ( preserve_linebreaks ) {
- pee = pee.replace( /<wp-line-break>/g, '\n' );
+ return text;
+ }
+
+ /**
+ * @summary Fires custom jQuery events `beforePreWpautop` and `afterPreWpautop` when jQuery is available.
+ *
+ * @since 2.9.0
+ *
+ * @memberof switchEditors
+ *
+ * @param {String} html The content from the visual editor.
+ * @returns {String} the filtered content.
+ */
+ function pre_wpautop( html ) {
+ var obj = { o: exports, data: html, unfiltered: html };
+
+ if ( $ ) {
+ $( 'body' ).trigger( 'beforePreWpautop', [ obj ] );
+ }
+
+ obj.data = removep( obj.data );
+
+ if ( $ ) {
+ $( 'body' ).trigger( 'afterPreWpautop', [ obj ] );
+ }
+
+ return obj.data;
+ }
+
+ /**
+ * @summary Fires custom jQuery events `beforeWpautop` and `afterWpautop` when jQuery is available.
+ *
+ * @since 2.9.0
+ *
+ * @memberof switchEditors
+ *
+ * @param {String} text The content from the text editor.
+ * @returns {String} filtered content.
+ */
+ function wpautop( text ) {
+ var obj = { o: exports, data: text, unfiltered: text };
+
+ if ( $ ) {
+ $( 'body' ).trigger( 'beforeWpautop', [ obj ] );
+ }
+
+ obj.data = autop( obj.data );
+
+ if ( $ ) {
+ $( 'body' ).trigger( 'afterWpautop', [ obj ] );
+ }
+
+ return obj.data;
+ }
+
+ if ( $ ) {
+ $( document ).ready( init );
+ } else if ( document.addEventListener ) {
+ document.addEventListener( 'DOMContentLoaded', init, false );
+ window.addEventListener( 'load', init, false );
+ } else if ( window.attachEvent ) {
+ window.attachEvent( 'onload', init );
+ document.attachEvent( 'onreadystatechange', function() {
+ if ( 'complete' === document.readyState ) {
+ init();
+ }
+ } );
}
- if ( preserve_br ) {
- pee = pee.replace( /<wp-temp-br([^>]*)>/g, '<br$1>' );
+ wp.editor.autop = wpautop;
+ wp.editor.removep = pre_wpautop;
+
+ exports = {
+ go: switchEditor,
+ wpautop: wpautop,
+ pre_wpautop: pre_wpautop,
+ _wp_Autop: autop,
+ _wp_Nop: removep
+ };
+
+ return exports;
+ }
+
+ /**
+ * @namespace {SwitchEditors} switchEditors
+ * Expose the switch editors to be used globally.
+ */
+ window.switchEditors = new SwitchEditors();
+
+ /**
+ * Initialize TinyMCE and/or Quicktags. For use with wp_enqueue_editor() (PHP).
+ *
+ * Intended for use with an existing textarea that will become the Text editor tab.
+ * The editor width will be the width of the textarea container, height will be adjustable.
+ *
+ * Settings for both TinyMCE and Quicktags can be passed on initialization, and are "filtered"
+ * with custom jQuery events on the document element, wp-before-tinymce-init and wp-before-quicktags-init.
+ *
+ * @since 4.8.0
+ *
+ * @param {string} id The HTML id of the textarea that is used for the editor.
+ * Has to be jQuery compliant. No brackets, special chars, etc.
+ * @param {object} settings Example:
+ * settings = {
+ * // See https://www.tinymce.com/docs/configure/integration-and-setup/.
+ * // Alternatively set to `true` to use the defaults.
+ * tinymce: {
+ * setup: function( editor ) {
+ * console.log( 'Editor initialized', editor );
+ * }
+ * }
+ *
+ * // Alternatively set to `true` to use the defaults.
+ * quicktags: {
+ * buttons: 'strong,em,link'
+ * }
+ * }
+ */
+ wp.editor.initialize = function( id, settings ) {
+ var init;
+ var defaults;
+
+ if ( ! $ || ! id || ! wp.editor.getDefaultSettings ) {
+ return;
}
- return pee;
- },
-
- pre_wpautop: function( content ) {
- var t = this, o = { o: t, data: content, unfiltered: content },
- q = typeof( jQuery ) !== 'undefined';
+ defaults = wp.editor.getDefaultSettings();
- if ( q ) {
- jQuery( 'body' ).trigger( 'beforePreWpautop', [ o ] );
- }
-
- o.data = t._wp_Nop( o.data );
-
- if ( q ) {
- jQuery('body').trigger('afterPreWpautop', [ o ] );
+ // Initialize TinyMCE by default
+ if ( ! settings ) {
+ settings = {
+ tinymce: true
+ };
}
- return o.data;
- },
+ // Add wrap and the Visual|Text tabs.
+ if ( settings.tinymce && settings.quicktags ) {
+ var $textarea = $( '#' + id );
+
+ var $wrap = $( '<div>' ).attr( {
+ 'class': 'wp-core-ui wp-editor-wrap tmce-active',
+ id: 'wp-' + id + '-wrap'
+ } );
+
+ var $editorContainer = $( '<div class="wp-editor-container">' );
+
+ var $button = $( '<button>' ).attr( {
+ type: 'button',
+ 'data-wp-editor-id': id
+ } );
+
+ var $editorTools = $( '<div class="wp-editor-tools">' );
+
+ if ( settings.mediaButtons ) {
+ var buttonText = 'Add Media';
+
+ if ( window._wpMediaViewsL10n && window._wpMediaViewsL10n.addMedia ) {
+ buttonText = window._wpMediaViewsL10n.addMedia;
+ }
+
+ var $addMediaButton = $( '<button type="button" class="button insert-media add_media">' );
+
+ $addMediaButton.append( '<span class="wp-media-buttons-icon"></span>' );
+ $addMediaButton.append( document.createTextNode( ' ' + buttonText ) );
+ $addMediaButton.data( 'editor', id );
- wpautop: function( pee ) {
- var t = this, o = { o: t, data: pee, unfiltered: pee },
- q = typeof( jQuery ) !== 'undefined';
+ $editorTools.append(
+ $( '<div class="wp-media-buttons">' )
+ .append( $addMediaButton )
+ );
+ }
- if ( q ) {
- jQuery( 'body' ).trigger('beforeWpautop', [ o ] );
+ $wrap.append(
+ $editorTools
+ .append( $( '<div class="wp-editor-tabs">' )
+ .append( $button.clone().attr({
+ id: id + '-tmce',
+ 'class': 'wp-switch-editor switch-tmce'
+ }).text( window.tinymce.translate( 'Visual' ) ) )
+ .append( $button.attr({
+ id: id + '-html',
+ 'class': 'wp-switch-editor switch-html'
+ }).text( window.tinymce.translate( 'Text' ) ) )
+ ).append( $editorContainer )
+ );
+
+ $textarea.after( $wrap );
+ $editorContainer.append( $textarea );
+ }
+
+ if ( window.tinymce && settings.tinymce ) {
+ if ( typeof settings.tinymce !== 'object' ) {
+ settings.tinymce = {};
+ }
+
+ init = $.extend( {}, defaults.tinymce, settings.tinymce );
+ init.selector = '#' + id;
+
+ $( document ).trigger( 'wp-before-tinymce-init', init );
+ window.tinymce.init( init );
+
+ if ( ! window.wpActiveEditor ) {
+ window.wpActiveEditor = id;
+ }
}
- o.data = t._wp_Autop( o.data );
+ if ( window.quicktags && settings.quicktags ) {
+ if ( typeof settings.quicktags !== 'object' ) {
+ settings.quicktags = {};
+ }
+
+ init = $.extend( {}, defaults.quicktags, settings.quicktags );
+ init.id = id;
+
+ $( document ).trigger( 'wp-before-quicktags-init', init );
+ window.quicktags( init );
+
+ if ( ! window.wpActiveEditor ) {
+ window.wpActiveEditor = init.id;
+ }
+ }
+ };
- if ( q ) {
- jQuery( 'body' ).trigger('afterWpautop', [ o ] );
+ /**
+ * Remove one editor instance.
+ *
+ * Intended for use with editors that were initialized with wp.editor.initialize().
+ *
+ * @since 4.8.0
+ *
+ * @param {string} id The HTML id of the editor textarea.
+ */
+ wp.editor.remove = function( id ) {
+ var mceInstance, qtInstance,
+ $wrap = $( '#wp-' + id + '-wrap' );
+
+ if ( window.tinymce ) {
+ mceInstance = window.tinymce.get( id );
+
+ if ( mceInstance ) {
+ if ( ! mceInstance.isHidden() ) {
+ mceInstance.save();
+ }
+
+ mceInstance.remove();
+ }
}
- return o.data;
- }
-};
+ if ( window.quicktags ) {
+ qtInstance = window.QTags.getInstance( id );
+
+ if ( qtInstance ) {
+ qtInstance.remove();
+ }
+ }
+
+ if ( $wrap.length ) {
+ $wrap.after( $( '#' + id ) );
+ $wrap.remove();
+ }
+ };
+
+ /**
+ * Get the editor content.
+ *
+ * Intended for use with editors that were initialized with wp.editor.initialize().
+ *
+ * @since 4.8.0
+ *
+ * @param {string} id The HTML id of the editor textarea.
+ * @return The editor content.
+ */
+ wp.editor.getContent = function( id ) {
+ var editor;
+
+ if ( ! $ || ! id ) {
+ return;
+ }
+
+ if ( window.tinymce ) {
+ editor = window.tinymce.get( id );
+
+ if ( editor && ! editor.isHidden() ) {
+ editor.save();
+ }
+ }
+
+ return $( '#' + id ).val();
+ };
+
+}( window.jQuery, window.wp ));