Ticket #42059: 42059.diff

src/wp-admin/js/editor.js

@@ -234 +234 @@
                 function getShortcodeWrapperInfo( content, cursorPosition ) {
                         var contentShortcodes = getShortCodePositionsInText( content );
 
-                        return _.find( contentShortcodes, function( element ) {
-                                return cursorPosition >= element.startIndex && cursorPosition <= element.endIndex;
-                        } );
+                        for ( var i = 0; i < contentShortcodes.length; i++ ) {
+                                var element = contentShortcodes[ i ];
+
+                                if ( cursorPosition >= element.startIndex && cursorPosition <= element.endIndex ) {
+                                        return element;
+                                }
+                        }
                 }
 
                 /**
@@ -245 +249 @@
                  * @param {string} content The content we want to scan for shortcodes.
                  */
                 function getShortcodesInText( content ) {
-                        var shortcodes = content.match( /\[+([\w_-])+/g );
+                        var shortcodes = content.match( /\[+([\w_-])+/g ),
+                                result = [];
 
-                        return _.uniq(
-                                _.map( shortcodes, function( element ) {
-                                        return element.replace( /^\[+/g, '' );
-                                } )
-                        );
+                        for ( var i = 0; i < shortcodes.length; i++ ) {
+                                var shortcode = shortcodes[ i ].replace( /^\[+/g, '' );
+
+                                if ( result.indexOf( shortcode ) === -1 ) {
+                                        result.push( shortcode );
+                                }
+                        }
+
+                        return result;
                 }
 
                 /**
@@ -335 +344 @@
                                 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,
+                                        isPreviewable: true,
+                                        urlAtStartOfContent: shortcodeMatch[ 1 ] === '',
+                                        urlAtEndOfContent: shortcodeMatch[ 3 ] === ''
+                                };
+
+                                shortcodesDetails.push( shortcodeInfo );
+                        }
+
                         return shortcodesDetails;
                 }
 
@@ -412 +449 @@
 
                         var isCursorStartInShortcode = getShortcodeWrapperInfo( content, cursorStart );
                         if ( isCursorStartInShortcode && isCursorStartInShortcode.isPreviewable ) {
-                                cursorStart = isCursorStartInShortcode.startIndex;
+                                /**
+                                 * 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.isPreviewable ) {
-                                cursorEnd = isCursorEndInShortcode.endIndex;
+                                if (isCursorEndInShortcode.urlAtEndOfContent) {
+                                        cursorEnd = isCursorEndInShortcode.startIndex;
+                                }
+                                else {
+                                        cursorEnd = isCursorEndInShortcode.endIndex;
+                                }
                         }
 
                         return {
@@ -455 +510 @@
                                 mode = htmlModeCursorStartPosition !== htmlModeCursorEndPosition ? 'range' : 'single',
 
                                 selectedText = null,
-                                cursorMarkerSkeleton = getCursorMarkerSpan( $$, '&#65279;' );
+                                cursorMarkerSkeleton = getCursorMarkerSpan( $$, '&#65279;' ).attr( 'data-mce-type','bookmark' );
 
                         if ( mode === 'range' ) {
                                 var markedText = textArea.value.slice( htmlModeCursorStartPosition, htmlModeCursorEndPosition ),
@@ -470 +525 @@
                         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,
+                                        .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( '' );
@@ -487 +542 @@
                  * @param {Object} editor TinyMCE editor instance.
                  */
                 function focusHTMLBookmarkInVisualEditor( editor ) {
-                        var startNode = editor.$( '.mce_SELRES_start' ),
-                                endNode = editor.$( '.mce_SELRES_end' );
+                        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();
@@ -507 +562 @@
 
                         scrollVisualModeToStartElement( editor, startNode );
 
-
                         removeSelectionMarker( startNode );
                         removeSelectionMarker( endNode );
                 }
@@ -675 +729 @@
                                  * 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');
+                                startElement.attr( 'data-mce-object-selection', 'true' );
+                                endElement.attr( 'data-mce-object-selection', 'true' );
 
                                 editor.$( startNode ).before( startElement[0] );
                                 editor.$( startNode ).after( endElement[0] );