Changeset 31713

Timestamp:

03/11/2015 02:39:02 AM (11 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.