)(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 cursor marker element. */ function getCursorMarkerSpan( domLib, content ) { return domLib( '' ).css( { display: 'inline-block', width: 0, overflow: 'hidden', 'line-height': 0 } ) .html( content ? content : '' ); } /** * Gets adjusted selection cursor positions according to HTML tags, comments, and 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' ]; var cursorStart = cursorPositions.cursorStart, cursorEnd = cursorPositions.cursorEnd, // Check if the cursor is in a tag and if so, adjust it. isCursorStartInTag = getContainingTagInfo( content, cursorStart ); 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 * `` 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; } 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; } } var isCursorEndInShortcode = getShortcodeWrapperInfo( content, cursorEnd ); if ( isCursorEndInShortcode && ! isCursorEndInShortcode.showAsPlainText ) { if ( isCursorEndInShortcode.urlAtEndOfContent ) { cursorEnd = isCursorEndInShortcode.startIndex; } else { cursorEnd = isCursorEndInShortcode.endIndex; } } return { cursorStart: cursorStart, cursorEnd: cursorEnd }; } /** * 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( '' ); } /** * Focuses 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 ); } } scrollVisualModeToStartElement( editor, startNode ); removeSelectionMarker( startNode ); removeSelectionMarker( endNode ); editor.save(); } /** * Removes selection marker and the parent node if it is an empty paragraph. * * By default TinyMCE wraps loose inline tags in a ``. * When removing selection markers an empty `` may be left behind, remove it. * * @param {Object} $marker The marker to be removed from the editor DOM, wrapped in an instance 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(); } } /** * 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( /(?:|\u00a0|\uFEFF| )*<\/p>/g, ' ' ); } /** * 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. * @return {(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(); /** * 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]; /** * 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(); var startRegex = new RegExp( ']*\\s*class="mce_SELRES_start"[^>]+>\\s*' + selectionID + '[^<]*<\\/span>(\\s*)' ); var endRegex = new RegExp( '(\\s*)]*\\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; 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 }; } /** * 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; } var textArea = editor.getElement(), start = selection.start, end = selection.end || selection.start; 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 ); } } // 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 ); } } ); /** * Replaces tags with two line breaks. "Opposite" of wpautop(). * * Replaces tags with two line breaks except where the has attributes. * Unifies whitespace. * Indents , and 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 script and style tags. if ( html.indexOf( '
` 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; } 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; } } var isCursorEndInShortcode = getShortcodeWrapperInfo( content, cursorEnd ); if ( isCursorEndInShortcode && ! isCursorEndInShortcode.showAsPlainText ) { if ( isCursorEndInShortcode.urlAtEndOfContent ) { cursorEnd = isCursorEndInShortcode.startIndex; } else { cursorEnd = isCursorEndInShortcode.endIndex; } } return { cursorStart: cursorStart, cursorEnd: cursorEnd }; } /** * 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( '' ); } /** * Focuses 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 ); } } scrollVisualModeToStartElement( editor, startNode ); removeSelectionMarker( startNode ); removeSelectionMarker( endNode ); editor.save(); } /** * Removes selection marker and the parent node if it is an empty paragraph. * * By default TinyMCE wraps loose inline tags in a `
`. * When removing selection markers an empty `
` may be left behind, remove it. * * @param {Object} $marker The marker to be removed from the editor DOM, wrapped in an instance 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(); } } /** * 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( /
(?:|\u00a0|\uFEFF| )*<\/p>/g, '
tags with two line breaks. "Opposite" of wpautop(). * * Replaces
tags with two line breaks except where the
has attributes. * Unifies whitespace. * Indents