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.

git-svn-id: https://develop.svn.wordpress.org/trunk@31713 602fd350-edb4-49c9-b593-d223f7449a82

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

@@ -1448,14 +1448,14 @@ final class _WP_Editors {
 		<div id="link-selector">
 			<div id="link-options">
 				<p class="howto"><?php _e( 'Enter the destination URL' ); ?></p>
-				<div>
+				<div class="wp-link-text-field">
-					<label><span><?php _e( 'URL' ); ?></span><input id="url-field" type="text" name="href" /></label>
+					<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>
 			<p class="howto"><a href="#" id="wp-link-search-toggle"><?php _e( 'Or link to existing content' ); ?></a></p>
@@ -1463,7 +1463,7 @@ final class _WP_Editors {
 				<div class="link-search-wrapper">
 					<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>
 				</div>

src/wp-includes/css/editor.css

@@ -1193,7 +1193,6 @@ i.mce-i-hr:before {
 	-webkit-box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
 	box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
 	width: 500px;
-	height: 250px;
 	overflow: hidden;
 	margin-left: -250px;
 	margin-top: -125px;
@@ -1229,6 +1228,14 @@ i.mce-i-hr:before {
 	margin-top: -250px;
 }
 
+#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;
 	border-bottom: 1px solid #dfdfdf;
@@ -1395,6 +1402,10 @@ i.mce-i-hr:before {
 	left: 16px;
 	right: 16px;
 	bottom: 16px;
+	top: 172px;
+}
+
+.has-text-field #wp-link .query-results {
 	top: 205px;
 }
 
@@ -1529,11 +1540,14 @@ i.mce-i-hr:before {
 
 @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;
 	}
 

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

@@ -1,12 +1,7 @@
 /* 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 && window.wpLink.open( editor.id );
-			window.wpLink.open( editor.id );
-		}
 	});
 
 	// WP default shortcut
@@ -14,41 +9,18 @@ tinymce.PluginManager.add( 'wplink', function( editor ) {
 	// The "de-facto standard" shortcut, see #27305
 	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',
 		tooltip: 'Insert/edit link',
 		shortcut: 'Alt+Shift+A',
 		cmd: 'WP_Link',
-
+		stateSelector: 'a[href]'
-		onPostRender: function() {
-			linkButton = this;
-
-			editor.on( 'nodechange', function( event ) {
-				setState( linkButton, event.element );
-			});
-		}
 	});
 
 	editor.addButton( 'unlink', {
 		icon: 'unlink',
 		tooltip: 'Remove link',
-		cmd: 'unlink',
+		cmd: 'unlink'
-
-		onPostRender: function() {
-			var unlinkButton = this;
-
-			editor.on( 'nodechange', function( event ) {
-				setState( unlinkButton, event.element );
-			});
-		}
 	});
 
 	editor.addMenuItem( 'link', {

src/wp-includes/js/wplink.js

@@ -7,6 +7,10 @@ var wpLink;
 		rivers = {},
 		isTouch = ( 'ontouchend' in document );
 
+	function getLink() {
+		return editor.dom.getParent( editor.selection.getNode(), 'a' );
+	}
+
 	wpLink = {
 		timeToTriggerRiver: 150,
 		minRiverAJAXDuration: 200,
@@ -21,14 +25,14 @@ var wpLink;
 			inputs.backdrop = $( '#wp-link-backdrop' );
 			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.openInNewTab = $( '#wp-link-target' );
-			inputs.title = $( '#link-title-field' );
+			inputs.search = $( '#wp-link-search' );
-			// Advanced Options
+
-			inputs.openInNewTab = $( '#link-target-checkbox' );
-			inputs.search = $( '#search-field' );
 			// Build Rivers
 			rivers.search = new River( $( '#search-results' ) );
 			rivers.recent = new River( $( '#most-recent-results' ) );
@@ -129,6 +133,7 @@ var wpLink;
 			inputs.backdrop.show();
 
 			wpLink.refresh();
+
 			$( document ).trigger( 'wplink-open', inputs.wrap );
 		},
 
@@ -144,6 +149,8 @@ var wpLink;
 			if ( wpLink.isMCE() ) {
 				wpLink.mceRefresh();
 			} else {
+				inputs.wrap.removeClass( 'has-text-field' );
+				inputs.text.val( '' );
 				wpLink.setDefaultValues();
 			}
 
@@ -154,8 +161,12 @@ var wpLink;
 				// Focus the URL field and highlight its contents.
 				// If this is moved above the selection changes,
 				// IE will show a flashing cursor over the dialog.
+				if ( inputs.wrap.hasClass( 'has-text-field' ) ) {
+					inputs.text.focus();
+				} else {
 					inputs.url.focus()[0].select();
 				}
+			}
 
 			// Load the most recent results if this is the first time opening the panel.
 			if ( ! rivers.recent.ul.children().length ) {
@@ -165,22 +176,53 @@ var wpLink;
 			correctedURL = inputs.url.val().replace( /^http:\/\//, '' );
 		},
 
+		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;
+			var text,
+				selectedNode = editor.selection.getNode(),
+				linkNode = editor.dom.getParent( selectedNode, 'a[href]' ),
+				onlyText = this.hasSelectedText( linkNode );
 
-			// If link exists, select proper values.
+			if ( linkNode ) {
-			if ( e = editor.dom.getParent( editor.selection.getNode(), 'A' ) ) {
+				text = linkNode.innerText || linkNode.textContent;
-				// Set URL and description.
+				inputs.url.val( editor.dom.getAttrib( linkNode, 'href' ) );
-				inputs.url.val( editor.dom.getAttrib( e, 'href' ) );
+				inputs.openInNewTab.prop( 'checked', '_blank' === editor.dom.getAttrib( linkNode, 'target' ) );
-				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.
 				inputs.submit.val( wpLinkL10n.update );
-
-			// If there's no link, set the default values.
 			} else {
-				wpLink.setDefaultValues();
+				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' );
 			}
 		},
 
@@ -209,39 +251,37 @@ var wpLink;
 		getAttrs: function() {
 			return {
 				href: $.trim( inputs.url.val() ),
-				title: $.trim( inputs.title.val() ),
 				target: inputs.openInNewTab.prop( 'checked' ) ? '_blank' : ''
 			};
 		},
 
 		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 )
+			if ( ! textarea ) {
 				return;
+			}
 
 			attrs = wpLink.getAttrs();
+			text = inputs.text.val();
 
 			// If there's no href, return.
-			if ( ! attrs.href )
+			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 ) {
 				html += ' target="' + attrs.target + '"';
 			}
@@ -254,7 +294,7 @@ var wpLink;
 				// Note: If no text is selected, IE will not place the cursor
 				//       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();
 
@@ -263,16 +303,20 @@ var wpLink;
 				// W3C
 				begin = textarea.selectionStart;
 				end = textarea.selectionEnd;
-				selection   = textarea.value.substring( begin, end );
+				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 )
+				if ( begin === end && ! selection ) {
-					cursor -= '</a>'.length;
+					cursor -= 4;
+				}
 
-				textarea.value = textarea.value.substring( 0, begin ) + html +
+				textarea.value = (
-					textarea.value.substring( end, textarea.value.length );
+					textarea.value.substring( 0, begin ) +
+					html +
+					textarea.value.substring( end, textarea.value.length )
+				);
 
 				// Update cursor position
 				textarea.selectionStart = textarea.selectionEnd = cursor;
@@ -283,8 +327,8 @@ var wpLink;
 		},
 
 		mceUpdate: function() {
-			var link,
+			var attrs = wpLink.getAttrs(),
-				attrs = wpLink.getAttrs();
+				link, text;
 
 			wpLink.close();
 			editor.focus();
@@ -293,33 +337,50 @@ var wpLink;
 				editor.selection.moveToBookmark( editor.windowManager.bookmark );
 			}
 
-			link = editor.dom.getParent( editor.selection.getNode(), 'a[href]' );
+			if ( ! attrs.href ) {
-
-			// If the values are empty, unlink and return
-			if ( ! attrs.href || attrs.href == 'http://' ) {
 				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 {
+				if ( text ) {
+					editor.selection.setNode( editor.dom.create( 'a', attrs, text ) );
 				} else {
 					editor.execCommand( 'mceInsertLink', false, attrs );
 				}
-
+			}
-			// Move the cursor to the end of the selection
-			editor.selection.collapse();
 		},
 
 		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 ) ) {
 				// Selection is email address
@@ -332,9 +393,6 @@ var wpLink;
 				inputs.url.val( '' );
 			}
 
-			// Set description to default.
-			inputs.title.val( '' );
-
 			// Update save prompt.
 			inputs.submit.val( wpLinkL10n.save );
 		},