Changeset 36602

Timestamp:

02/20/2016 09:35:54 PM (8 years ago)

Author:

azaozz

Message:

TinyMCE, inline link dialog:

• Fix passing values to the (old) modal on open when non-linked text is selected and Advanced is clicked before pasting an URL.
• When the user has selected text partially including a link and opens the editing dialog, auto-select the link only. Helps when a linked word is selected by double-clicking.
• Remove all placeholders on saving.
• Do not add undo level on inserting link placeholder.
• Remove the placeholder when canceling from the modal.

See #33301.

Location:

trunk/src/wp-includes/js

Files:

• tinymce/plugins/wplink/plugin.js (modified) (9 diffs)
• wplink.js (modified) (6 diffs)

trunk/src/wp-includes/js/tinymce/plugins/wplink/plugin.js

@@ -42 +42 @@
                     // If the beginning + ending are shorter that 40 chars, show more of the ending
                     if ( index + url.length - lastIndex < 40 ) {
-                        lastIndex =  -( 40 - ( index + 1 ) );
+                        lastIndex = -( 40 - ( index + 1 ) );
                     }
 
@@ -75 +75 @@
 
         function getSelectedLink() {
-            var href,
-                selectedNode = editor.selection.getNode(),
-                selectedText = editor.selection.getContent(),
-                link = editor.dom.getParent( selectedNode, 'a[href]' );
-
-            if ( ! link && selectedText.indexOf( '</a>' ) !== -1 ) {
-                href = selectedText.match( /href="([^">]+)"/ );
-
-                if ( href && href[1] ) {
-                    link = editor.$( 'a[href="' + href[1] + '"]', selectedNode )[0];
-                }
-
-                if ( link ) {
-                    editor.selection.select( link );
-                    editor.nodeChanged();
+            var href, html
+                node = editor.selection.getNode();
+                link = editor.dom.getParent( node, 'a[href]' );
+
+            if ( ! link ) {
+                html = editor.selection.getContent({ format: 'raw' });
+
+                if ( html && html.indexOf( '</a>' ) !== -1 ) {
+                    href = html.match( /href="([^">]+)"/ );
+
+                    if ( href && href[1] ) {
+                        link = editor.$( 'a[href="' + href[1] + '"]', node )[0];
+                    }
+
+                    if ( link ) {
+                        editor.selection.select( link );
+                        editor.nodeChanged();
+                    }
                 }
             }
 
             return link;
+        }
+        
+        function removePlaceholders() {
+            editor.$( 'a' ).each( function( i, element ) {
+                var $element = editor.$( element );
+
+                if ( $element.attr( 'href' ) === '_wp_link_placeholder' ) {
+                    editor.dom.remove( element, true );
+                } else if ( $element.attr( 'data-wp-link-edit' ) ) {
+                    $element.attr( 'data-wp-link-edit', null );
+                }
+            });
+        }
+        
+        function removePlaceholderStrings( content, dataAttr ) {
+            if ( dataAttr ) {
+                content = content.replace( / data-wp-link-edit="true"/g, '' );
+            }
+
+            return content.replace( /<a [^>]*?href="_wp_link_placeholder"[^>]*>([\s\S]+)<\/a>/g, '$1' );
         }
 
@@ -127 +150 @@
 
             if ( link ) {
-                editor.dom.setAttribs( link, { 'data-wp-edit': true } );
+                editor.dom.setAttribs( link, { 'data-wp-link-edit': true } );
             } else {
+                removePlaceholders();
+
                 editor.execCommand( 'mceInsertLink', false, { href: '_wp_link_placeholder' } );
+                editor.selection.select( editor.$( 'a[href="_wp_link_placeholder"]' )[0] );
                 editor.nodeChanged();
             }
@@ -151 +177 @@
 
             if ( a ) {
-                editor.dom.setAttribs( a, { href: href, 'data-wp-edit': null } );
+                editor.dom.setAttribs( a, { href: href, 'data-wp-link-edit': null } );
             }
 
@@ -161 +187 @@
 
         editor.addCommand( 'wp_link_cancel', function() {
-            if ( a ) {
-                if ( editor.$( a ).attr( 'href' ) === '_wp_link_placeholder' ) {
-                    editor.dom.remove( a, true );
-                } else {
-                    editor.dom.setAttribs( a, { 'data-wp-edit': null } );
-                }
-            }
-
+            removePlaceholders();
             a = false;
-
             editor.nodeChanged();
             editor.focus();
@@ -219 +237 @@
             }
         } );
+        
+        // Remove any remaining placeholders on saving.
+        editor.on( 'savecontent', function( event ) {
+            event.content = removePlaceholderStrings( event.content, true );
+        });
+        
+        // Prevent adding undo levels on inserting link placeholder.
+        editor.on( 'BeforeAddUndo', function( event ) {
+            if ( event.level.content ) {
+                event.level.content = removePlaceholderStrings( event.level.content );
+            }
+        });
 
         editor.addButton( 'wp_link_preview', {
@@ -236 +266 @@
                 inputInstance = this;
 
-                if ( $ ) {
+                if ( $ && $.ui && $.ui.autocomplete ) {
                     $( input )
                     .on( 'keydown', function() {
@@ -312 +342 @@
         editor.on( 'wptoolbar', function( event ) {
             var anchor = editor.dom.getParent( event.element, 'a' ),
-                $anchor,
-                href, edit;
+                $anchor, href, edit;
 
             if ( anchor ) {
                 $anchor = editor.$( anchor );
                 href = $anchor.attr( 'href' );
-                edit = $anchor.attr( 'data-wp-edit' );
+                edit = $anchor.attr( 'data-wp-link-edit' );
 
                 if ( href === '_wp_link_placeholder' || edit ) {
@@ -349 +378 @@
             icon: 'dashicon dashicons-admin-generic',
             onclick: function() {
-                editor.execCommand( 'wp_link_apply' );
-                window.wpLink && window.wpLink.open( editor.id );
+                if ( typeof window.wpLink !== 'undefined' ) {
+                    if ( inputInstance.getEl().firstChild.value ) {
+                        editor.execCommand( 'wp_link_apply' );
+                    }
+
+                    window.wpLink.open( editor.id );
+                }
             }
         } );

trunk/src/wp-includes/js/wplink.js

@@ -220 +220 @@
 
         mceRefresh: function() {
-            var text,
+            var text, url,
                 selectedNode = editor.selection.getNode(),
                 linkNode = editor.dom.getParent( selectedNode, 'a[href]' ),
@@ -227 +227 @@
             if ( linkNode ) {
                 text = linkNode.innerText || linkNode.textContent;
-                inputs.url.val( editor.dom.getAttrib( linkNode, 'href' ) );
+                url = editor.dom.getAttrib( linkNode, 'href' );
+
+                if ( url === '_wp_link_placeholder' ) {
+                    url = '';
+                }
+
+                inputs.url.val( url );
                 inputs.openInNewTab.prop( 'checked', '_blank' === editor.dom.getAttrib( linkNode, 'target' ) );
                 inputs.submit.val( wpLinkL10n.update );
@@ -245 +251 @@
 
         close: function() {
+            var linkNode;
+            
             $( document.body ).removeClass( 'modal-open' );
 
@@ -255 +263 @@
                 }
             } else {
+                linkNode = editor.dom.getParent( editor.selection.getNode(), 'a[href]' );
+
+                if ( linkNode && editor.dom.getAttrib( linkNode, 'href' ) === '_wp_link_placeholder' ) {
+                    editor.dom.remove( linkNode, true );
+                }
+
                 editor.focus();
             }
@@ -353 +367 @@
                 link, text;
 
-            wpLink.close();
             editor.focus();
 
@@ -389 +402 @@
             }
 
+            wpLink.close();
             editor.nodeChanged();
         },