Changeset 31713

Timestamp:

03/11/2015 02:39:02 AM (10 years ago)

Author:

azaozz

Message:

wpLink: replace the "Title" field with a "Text" field and populate it with the link text when editing an existing link or with the selected text if any.
Props iseulde. See #28206.

Location:

trunk/src/wp-includes

Files:

• class-wp-editor.php (modified) (2 diffs)
• css/editor.css (modified) (4 diffs)
• js/tinymce/plugins/wplink/plugin.js (modified) (4 diffs)
• js/wplink.js (modified) (13 diffs)

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

@@ -1449 +1449 @@
             <div id="link-options">
                 <p class="howto"><?php _e( 'Enter the destination URL' ); ?></p>
-                <div>
-                    <label><span><?php _e( 'URL' ); ?></span><input id="url-field" type="text" name="href" /></label>
+                <div class="wp-link-text-field">
+                    <label><span><?php _e( 'Text' ); ?></span><input id="wp-link-text" type="text" /></label>
                 </div>
                 <div>
-                    <label><span><?php _e( 'Title' ); ?></span><input id="link-title-field" type="text" name="linktitle" /></label>
+                    <label><span><?php _e( 'URL' ); ?></span><input id="wp-link-url" type="text" /></label>
                 </div>
                 <div class="link-target">
-                    <label><span>&nbsp;</span><input type="checkbox" id="link-target-checkbox" /> <?php _e( 'Open link in a new window/tab' ); ?></label>
+                    <label><span>&nbsp;</span><input type="checkbox" id="wp-link-target" /> <?php _e( 'Open link in a new window/tab' ); ?></label>
                 </div>
             </div>
@@ -1464 +1464 @@
                     <label>
                         <span class="search-label"><?php _e( 'Search' ); ?></span>
-                        <input type="search" id="search-field" class="link-search-field" autocomplete="off" />
+                        <input type="search" id="wp-link-search" class="link-search-field" autocomplete="off" />
                         <span class="spinner"></span>
                     </label>

trunk/src/wp-includes/css/editor.css

@@ -1194 +1194 @@
     box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
     width: 500px;
-    height: 250px;
     overflow: hidden;
     margin-left: -250px;
@@ -1230 +1229 @@
 }
 
+#wp-link-wrap .wp-link-text-field {
+    display: none;
+}
+
+#wp-link-wrap.has-text-field .wp-link-text-field {
+    display: block;
+}
+
 #link-modal-title {
     background: #fcfcfc;
@@ -1396 +1403 @@
     right: 16px;
     bottom: 16px;
+    top: 172px;
+}
+
+.has-text-field #wp-link .query-results {
     top: 205px;
 }
@@ -1530 +1541 @@
 @media screen and ( max-width: 782px ) {
     #wp-link-wrap {
-        height: 280px;
         margin-top: -140px;
     }
 
     #wp-link-wrap.search-panel-visible .query-results {
+        top: 195px;
+    }
+
+    #wp-link-wrap.search-panel-visible.has-text-field .query-results {
         top: 235px;
     }

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

@@ -1 +1 @@
 /* global tinymce */
 tinymce.PluginManager.add( 'wplink', function( editor ) {
-    var linkButton;
-
-    // Register a command so that it can be invoked by using tinyMCE.activeEditor.execCommand( 'WP_Link' );
     editor.addCommand( 'WP_Link', function() {
-        if ( ( ! linkButton || ! linkButton.disabled() ) && typeof window.wpLink !== 'undefined' ) {
-            window.wpLink.open( editor.id );
-        }
+        window.wpLink && window.wpLink.open( editor.id );
     });
 
@@ -15 +10 @@
     editor.addShortcut( 'ctrl+k', '', 'WP_Link' );
 
-    function setState( button, node ) {
-        var parent = editor.dom.getParent( node, 'a' ),
-            getView = editor.plugins.wpview ? editor.plugins.wpview.getView : function() { return false; };
-
-        button.disabled( ( editor.selection.isCollapsed() && ! parent ) || ( parent && ! parent.href ) || getView( node ) );
-        button.active( parent && parent.href );
-    }
-
     editor.addButton( 'link', {
         icon: 'link',
@@ -28 +15 @@
         shortcut: 'Alt+Shift+A',
         cmd: 'WP_Link',
-
-        onPostRender: function() {
-            linkButton = this;
-
-            editor.on( 'nodechange', function( event ) {
-                setState( linkButton, event.element );
-            });
-        }
+        stateSelector: 'a[href]'
     });
 
@@ -41 +21 @@
         icon: 'unlink',
         tooltip: 'Remove link',
-        cmd: 'unlink',
-
-        onPostRender: function() {
-            var unlinkButton = this;
-
-            editor.on( 'nodechange', function( event ) {
-                setState( unlinkButton, event.element );
-            });
-        }
+        cmd: 'unlink'
     });
 

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

@@ -7 +7 @@
         rivers = {},
         isTouch = ( 'ontouchend' in document );
+
+    function getLink() {
+        return editor.dom.getParent( editor.selection.getNode(), 'a' );
+    }
 
     wpLink = {
@@ -22 +26 @@
             inputs.submit = $( '#wp-link-submit' );
             inputs.close = $( '#wp-link-close' );
-            // URL
-            inputs.url = $( '#url-field' );
+
+            // Input
+            inputs.text = $( '#wp-link-text' );
+            inputs.url = $( '#wp-link-url' );
             inputs.nonce = $( '#_ajax_linking_nonce' );
-            // Secondary options
-            inputs.title = $( '#link-title-field' );
-            // Advanced Options
-            inputs.openInNewTab = $( '#link-target-checkbox' );
-            inputs.search = $( '#search-field' );
+            inputs.openInNewTab = $( '#wp-link-target' );
+            inputs.search = $( '#wp-link-search' );
+
             // Build Rivers
             rivers.search = new River( $( '#search-results' ) );
@@ -130 +134 @@
 
             wpLink.refresh();
+
             $( document ).trigger( 'wplink-open', inputs.wrap );
         },
@@ -145 +150 @@
                 wpLink.mceRefresh();
             } else {
+                inputs.wrap.removeClass( 'has-text-field' );
+                inputs.text.val( '' );
                 wpLink.setDefaultValues();
             }
@@ -155 +162 @@
                 // If this is moved above the selection changes,
                 // IE will show a flashing cursor over the dialog.
-                inputs.url.focus()[0].select();
+                if ( inputs.wrap.hasClass( 'has-text-field' ) ) {
+                    inputs.text.focus();
+                } else {
+                    inputs.url.focus()[0].select();
+                }
             }
 
@@ -166 +177 @@
         },
 
+        hasSelectedText: function( linkNode ) {
+            var html = editor.selection.getContent();
+
+            // Partial html and not a fully selected anchor element
+            if ( /</.test( html ) && ( ! /^<a [^>]+>[^<]+<\/a>$/.test( html ) || html.indexOf('href=') === -1 ) ) {
+                return false;
+            }
+
+            if ( linkNode ) {
+                var nodes = linkNode.childNodes, i;
+
+                if ( nodes.length === 0 ) {
+                    return false;
+                }
+
+                for ( i = nodes.length - 1; i >= 0; i-- ) {
+                    if ( nodes[i].nodeType != 3 ) {
+                        return false;
+                    }
+                }
+            }
+
+            return true;
+        },
+
         mceRefresh: function() {
-            var e;
-
-            // If link exists, select proper values.
-            if ( e = editor.dom.getParent( editor.selection.getNode(), 'A' ) ) {
-                // Set URL and description.
-                inputs.url.val( editor.dom.getAttrib( e, 'href' ) );
-                inputs.title.val( editor.dom.getAttrib( e, 'title' ) );
-                // Set open in new tab.
-                inputs.openInNewTab.prop( 'checked', ( '_blank' === editor.dom.getAttrib( e, 'target' ) ) );
-                // Update save prompt.
+            var text,
+                selectedNode = editor.selection.getNode(),
+                linkNode = editor.dom.getParent( selectedNode, 'a[href]' ),
+                onlyText = this.hasSelectedText( linkNode );
+
+            if ( linkNode ) {
+                text = linkNode.innerText || linkNode.textContent;
+                inputs.url.val( editor.dom.getAttrib( linkNode, 'href' ) );
+                inputs.openInNewTab.prop( 'checked', '_blank' === editor.dom.getAttrib( linkNode, 'target' ) );
                 inputs.submit.val( wpLinkL10n.update );
-
-            // If there's no link, set the default values.
-            } else {
-                wpLink.setDefaultValues();
+            } else {
+                text = editor.selection.getContent({ format: 'text' });
+                this.setDefaultValues();
+            }
+
+            if ( onlyText ) {
+                inputs.text.val( text || '' );
+                inputs.wrap.addClass( 'has-text-field' );
+            } else {
+                inputs.text.val( '' );
+                inputs.wrap.removeClass( 'has-text-field' );
             }
         },
@@ -210 +252 @@
             return {
                 href: $.trim( inputs.url.val() ),
-                title: $.trim( inputs.title.val() ),
                 target: inputs.openInNewTab.prop( 'checked' ) ? '_blank' : ''
             };
@@ -216 +257 @@
 
         update: function() {
-            if ( wpLink.isMCE() )
+            if ( wpLink.isMCE() ) {
                 wpLink.mceUpdate();
-            else
+            } else {
                 wpLink.htmlUpdate();
+            }
         },
 
         htmlUpdate: function() {
-            var attrs, html, begin, end, cursor, title, selection,
+            var attrs, text, html, begin, end, cursor, selection,
                 textarea = wpLink.textarea;
 
-            if ( ! textarea )
-                return;
+            if ( ! textarea ) {
+                return;
+            }
 
             attrs = wpLink.getAttrs();
+            text = inputs.text.val();
 
             // If there's no href, return.
-            if ( ! attrs.href )
-                return;
+            if ( ! attrs.href ) {
+                return;
+            }
 
             // Build HTML
             html = '<a href="' + attrs.href + '"';
-
-            if ( attrs.title ) {
-                title = attrs.title.replace( /</g, '&lt;' ).replace( />/g, '&gt;' ).replace( /"/g, '&quot;' );
-                html += ' title="' + title + '"';
-            }
 
             if ( attrs.target ) {
@@ -255 +295 @@
                 //       inside the closing tag.
                 textarea.focus();
-                wpLink.range.text = html + wpLink.range.text + '</a>';
+                wpLink.range.text = html + ( text || wpLink.range.text ) + '</a>';
                 wpLink.range.moveToBookmark( wpLink.range.getBookmark() );
                 wpLink.range.select();
@@ -262 +302 @@
             } else if ( typeof textarea.selectionStart !== 'undefined' ) {
                 // W3C
-                begin       = textarea.selectionStart;
-                end         = textarea.selectionEnd;
-                selection   = textarea.value.substring( begin, end );
-                html        = html + selection + '</a>';
-                cursor      = begin + html.length;
+                begin = textarea.selectionStart;
+                end = textarea.selectionEnd;
+                selection = text || textarea.value.substring( begin, end );
+                html = html + selection + '</a>';
+                cursor = begin + html.length;
 
                 // If no text is selected, place the cursor inside the closing tag.
-                if ( begin == end )
-                    cursor -= '</a>'.length;
-
-                textarea.value = textarea.value.substring( 0, begin ) + html +
-                    textarea.value.substring( end, textarea.value.length );
+                if ( begin === end && ! selection ) {
+                    cursor -= 4;
+                }
+
+                textarea.value = (
+                    textarea.value.substring( 0, begin ) +
+                    html +
+                    textarea.value.substring( end, textarea.value.length )
+                );
 
                 // Update cursor position
@@ -284 +328 @@
 
         mceUpdate: function() {
-            var link,
-                attrs = wpLink.getAttrs();
+            var attrs = wpLink.getAttrs(),
+                link, text;
 
             wpLink.close();
@@ -294 +338 @@
             }
 
-            link = editor.dom.getParent( editor.selection.getNode(), 'a[href]' );
-
-            // If the values are empty, unlink and return
-            if ( ! attrs.href || attrs.href == 'http://' ) {
+            if ( ! attrs.href ) {
                 editor.execCommand( 'unlink' );
                 return;
             }
 
+            link = getLink();
+            text = inputs.text.val();
+
             if ( link ) {
+                if ( text ) {
+                    if ( 'innerText' in link ) {
+                        link.innerText = text;
+                    } else {
+                        link.textContent = text;
+                    }
+                }
+
                 editor.dom.setAttribs( link, attrs );
             } else {
-                editor.execCommand( 'mceInsertLink', false, attrs );
-            }
-
-            // Move the cursor to the end of the selection
-            editor.selection.collapse();
+                if ( text ) {
+                    editor.selection.setNode( editor.dom.create( 'a', attrs, text ) );
+                } else {
+                    editor.execCommand( 'mceInsertLink', false, attrs );
+                }
+            }
         },
 
         updateFields: function( e, li ) {
             inputs.url.val( li.children( '.item-permalink' ).val() );
-            inputs.title.val( li.hasClass( 'no-title' ) ? '' : li.children( '.item-title' ).text() );
         },
 
         setDefaultValues: function() {
-            var selection = editor && editor.selection.getContent(),
+            var selection,
                 emailRegexp = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
-                urlRegexp = /^(https?|ftp):\/\/[A-Z0-9.-]+\.[A-Z]{2,4}[^ "]*$/i;
+                urlRegexp = /^(https?|ftp):\/\/[A-Z0-9.-]+\.[A-Z]{2,4}[^ "]*$/i,
+                text;
+
+            if ( this.isMCE() ) {
+                selection = editor.selection.getContent();
+            } else if ( document.selection && wpLink.range ) {
+                selection = wpLink.range.text;
+            } else if ( typeof this.textarea.selectionStart !== 'undefined' ) {
+                selection = this.textarea.value.substring( this.textarea.selectionStart, this.textarea.selectionEnd );
+            }
 
             if ( selection && emailRegexp.test( selection ) ) {
@@ -332 +393 @@
                 inputs.url.val( '' );
             }
-
-            // Set description to default.
-            inputs.title.val( '' );
 
             // Update save prompt.