Changeset 41783

Timestamp:

10/06/2017 05:43:11 PM (9 years ago)

Author:

azaozz

Message:

Editor:

• Fix keeping text selection and scroll position when there are embeds from URL.
• Add editor setting to disable keeping selection and scroll position.
• Remove dependency on Underscore.js.
• Fix error in the Text widget editor.

Props biskobe.
Fixes #42059, see #40854.

Location:

trunk/src

Files:

• wp-admin/edit-form-advanced.php (modified) (1 diff)
• wp-admin/js/editor.js (modified) (15 diffs)
• wp-includes/class-wp-editor.php (modified) (1 diff)

trunk/src/wp-admin/edit-form-advanced.php

@@ -629 +629 @@
                 'wp_autoresize_on' => $_wp_editor_expand,
                 'add_unload_trigger' => false,
+                'wp_keep_scroll_position' => true,
         ),
 ) ); ?>

trunk/src/wp-admin/js/editor.js

@@ -100 +100 @@
                                 editorHeight = parseInt( textarea.style.height, 10 ) || 0;
 
-                                // Save the selection
-                                addHTMLBookmarkInTextAreaContent( $textarea, $ );
+                                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 ( keepSelection ) {
+                                        // Save the selection
+                                        addHTMLBookmarkInTextAreaContent( $textarea );
+                                }
 
                                 if ( editor ) {
@@ -117 +127 @@
                                         }
 
-                                        // Restore the selection
-                                        focusHTMLBookmarkInVisualEditor( editor );
+                                        if ( editor.getParam( 'wp_keep_scroll_position' ) ) {
+                                                // Restore the selection
+                                                focusHTMLBookmarkInVisualEditor( editor );
+                                        }
                                 } else {
                                         tinymce.init( window.tinyMCEPreInit.mceInit[ id ] );
@@ -133 +145 @@
                                 }
 
-                                var selectionRange = null;
                                 if ( editor ) {
                                         // Don't resize the textarea in iOS. The iframe is forced to 100% height there, we shouldn't match it.
@@ -151 +162 @@
                                         }
 
-                                        selectionRange = findBookmarkedPosition( editor );
+                                        var selectionRange = null;
+
+                                        if ( editor.getParam( 'wp_keep_scroll_position' ) ) {
+                                                selectionRange = findBookmarkedPosition( editor );
+                                        }
 
                                         editor.hide();
@@ -235 +250 @@
                         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;
+                                }
+                        }
                 }
 
@@ -246 +265 @@
                  */
                 function getShortcodesInText( content ) {
-                        var shortcodes = content.match( /\[+([\w_-])+/g );
-
-                        return _.uniq(
-                                _.map( shortcodes, function( element ) {
-                                        return element.replace( /^\[+/g, '' );
-                                } )
-                        );
+                        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 );
+                                        }
+                                }
+                        }
+
+                        return result;
                 }
 
@@ -336 +362 @@
                         }
 
+                        /**
+                         * 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;
                 }
@@ -400 +454 @@
                                 if ( voidElements.indexOf( isCursorStartInTag.tagType ) !== -1 ) {
                                         cursorStart = isCursorStartInTag.ltPos;
-                                }
-                                else {
+                                } else {
                                         cursorStart = isCursorStartInTag.gtPos;
                                 }
@@ -413 +466 @@
                         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;
+                                }
                         }
 
@@ -456 +525 @@
 
                                 selectedText = null,
-                                cursorMarkerSkeleton = getCursorMarkerSpan( $$, '&#65279;' );
+                                cursorMarkerSkeleton = getCursorMarkerSpan( $$, '&#65279;' ).attr( 'data-mce-type','bookmark' );
 
                         if ( mode === 'range' ) {
@@ -471 +540 @@
                                 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
@@ -488 +557 @@
                  */
                 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 ) {
@@ -506 +575 @@
                         }
 
-                        scrollVisualModeToStartElement( editor, startNode );
-
+                        if ( editor.getParam( 'wp_keep_scroll_position' ) ) {
+                                scrollVisualModeToStartElement( editor, startNode );
+                        }
 
                         removeSelectionMarker( startNode );
@@ -549 +619 @@
                                 TinyMCEContentAreaTop = editor.$( editor.getContentAreaContainer() ).offset().top,
 
+                                toolbarHeight = getToolbarHeight( editor ),
+
                                 edTools = $( '#wp-content-editor-tools' ),
-                                edToolsHeight = edTools.height(),
-                                edToolsOffsetTop = edTools.offset().top,
-
-                                toolbarHeight = getToolbarHeight( editor ),
-
-                                windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
+                                edToolsHeight = 0,
+                                edToolsOffsetTop = 0;
+
+                        if ( edTools.length ) {
+                                edToolsHeight = edTools.height();
+                                edToolsOffsetTop = edTools.offset().top;
+                        }
+
+                        var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
 
                                 selectionPosition = TinyMCEContentAreaTop + elementTop,
@@ -676 +751 @@
                                  * 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] );

trunk/src/wp-includes/class-wp-editor.php

@@ -982 +982 @@
                         'wpeditimage_html5_captions' => true,
                         'wp_lang_attr' => get_bloginfo( 'language' ),
+                        'wp_keep_scroll_position' => false,
                         'wp_shortcut_labels' => wp_json_encode( $shortcut_labels ),
                 );