TinyMCE: wplink: add inline toolbar

Now the URL can be viewed as soon as you put the cursor in an anchor tag. Clicking on it will open the page in a new tab. You also have the edit and remove button close at hand.

First run.
See #32604.

Built from https://develop.svn.wordpress.org/trunk@32931


git-svn-id: http://core.svn.wordpress.org/trunk@32902 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/editor-rtl.css

@@ -1599,6 +1599,23 @@ i.mce-i-wp_code:before {
 	}
 }
 
+.wp-link-preview {
+	float: right;
+	margin: 5px;
+}
+
+.wp-link-preview a {
+	color: #0073aa;
+	text-decoration: underline;
+	-webkit-transition-property: border, background, color;
+	transition-property: border, background, color;
+	-webkit-transition-duration: .05s;
+	transition-duration: .05s;
+	-webkit-transition-timing-function: ease-in-out;
+	transition-timing-function: ease-in-out;
+	cursor: pointer;
+}
+
 /* =Overlay Body
 -------------------------------------------------------------- */
 

wp-includes/css/editor.css

@@ -1599,6 +1599,23 @@ i.mce-i-wp_code:before {
 	}
 }
 
+.wp-link-preview {
+	float: left;
+	margin: 5px;
+}
+
+.wp-link-preview a {
+	color: #0073aa;
+	text-decoration: underline;
+	-webkit-transition-property: border, background, color;
+	transition-property: border, background, color;
+	-webkit-transition-duration: .05s;
+	transition-duration: .05s;
+	-webkit-transition-timing-function: ease-in-out;
+	transition-timing-function: ease-in-out;
+	cursor: pointer;
+}
+
 /* =Overlay Body
 -------------------------------------------------------------- */
 

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

@@ -1,5 +1,7 @@
 /* global tinymce */
 tinymce.PluginManager.add( 'wplink', function( editor ) {
+	var toolbar;
+
 	editor.addCommand( 'WP_Link', function() {
 		window.wpLink && window.wpLink.open( editor.id );
 	});
@@ -48,4 +50,81 @@ tinymce.PluginManager.add( 'wplink', function( editor ) {
 			}
 		}
 	} );
+
+	tinymce.ui.WPLinkPreview = tinymce.ui.Control.extend( {
+		url: '#',
+		renderHtml: function() {
+			return (
+				'<div id="' + this._id + '" class="wp-link-preview">' +
+					'<a href="' + this.url + '" target="_blank" tabindex="-1">' + this.url + '</a>' +
+				'</div>'
+			);
+		},
+		setURL: function( url ) {
+			var index, lastIndex;
+
+			if ( this.url !== url ) {
+				this.url = url;
+
+				url = window.decodeURIComponent( url );
+
+				url = url.replace( /^(?:https?:)?\/\/(?:www\.)?/, '' );
+
+				if ( ( index = url.indexOf( '?' ) ) !== -1 ) {
+					url = url.slice( 0, index );
+				}
+
+				if ( ( index = url.indexOf( '#' ) ) !== -1 ) {
+					url = url.slice( 0, index );
+				}
+
+				url = url.replace( /(?:index)?\.html$/, '' );
+
+				if ( ( lastIndex = url.lastIndexOf( '/' ) ) === url.length - 1 ) {
+					url = url.slice( 0, lastIndex );
+				}
+
+				if ( ( index = url.indexOf( '/' ) ) !== -1 && ( lastIndex = url.lastIndexOf( '/' ) ) !== -1 && lastIndex !== index ) {
+					url = url.slice( 0, index + 1 ) + '\u2026' + url.slice( lastIndex, url.length );
+				}
+
+				tinymce.$( this.getEl().firstChild ).attr( 'href', this.url ).text( url );
+			}
+		},
+		postRender: function() {
+			var self = this;
+
+			editor.on( 'wptoolbar', function( event ) {
+				var anchor = editor.dom.getParent( event.element, 'a' ),
+					href;
+
+				if ( anchor && ( href = editor.$( anchor ).attr( 'href' ) ) ) {
+					self.setURL( href );
+
+					event.element = anchor;
+					event.toolbar = toolbar;
+				}
+			} );
+		}
+	} );
+
+	editor.addButton( 'wp_link_edit', {
+		tooltip: 'Edit ', // trailing space is needed, used for context
+		icon: 'dashicon dashicons-edit',
+		cmd: 'WP_Link'
+	} );
+
+	editor.addButton( 'wp_link_remove', {
+		tooltip: 'Remove',
+		icon: 'dashicon dashicons-no',
+		cmd: 'unlink'
+	} );
+
+	editor.on( 'preinit', function() {
+		toolbar = editor.wp._createToolbar( [
+			'WPLinkPreview',
+			'wp_link_edit',
+			'wp_link_remove'
+		], true );
+	} );
 });

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

@@ -1 +1 @@
-tinymce.PluginManager.add("wplink",function(a){a.addCommand("WP_Link",function(){window.wpLink&&window.wpLink.open(a.id)}),a.addShortcut("Alt+Shift+A","","WP_Link"),a.addShortcut("Meta+K","","WP_Link"),a.addButton("link",{icon:"link",tooltip:"Insert/edit link",cmd:"WP_Link",stateSelector:"a[href]"}),a.addButton("unlink",{icon:"unlink",tooltip:"Remove link",cmd:"unlink"}),a.addMenuItem("link",{icon:"link",text:"Insert/edit link",cmd:"WP_Link",stateSelector:"a[href]",context:"insert",prependToContext:!0}),a.on("pastepreprocess",function(b){var c=b.content,d=/^(?:https?:)?\/\/\S+$/i;a.selection.isCollapsed()||d.test(a.selection.getContent())||(c=c.replace(/<[^>]+>/g,""),c=tinymce.trim(c),d.test(c)&&(a.execCommand("mceInsertLink",!1,{href:a.dom.decode(c)}),b.preventDefault()))})});
+tinymce.PluginManager.add("wplink",function(a){var b;a.addCommand("WP_Link",function(){window.wpLink&&window.wpLink.open(a.id)}),a.addShortcut("Alt+Shift+A","","WP_Link"),a.addShortcut("Meta+K","","WP_Link"),a.addButton("link",{icon:"link",tooltip:"Insert/edit link",cmd:"WP_Link",stateSelector:"a[href]"}),a.addButton("unlink",{icon:"unlink",tooltip:"Remove link",cmd:"unlink"}),a.addMenuItem("link",{icon:"link",text:"Insert/edit link",cmd:"WP_Link",stateSelector:"a[href]",context:"insert",prependToContext:!0}),a.on("pastepreprocess",function(b){var c=b.content,d=/^(?:https?:)?\/\/\S+$/i;a.selection.isCollapsed()||d.test(a.selection.getContent())||(c=c.replace(/<[^>]+>/g,""),c=tinymce.trim(c),d.test(c)&&(a.execCommand("mceInsertLink",!1,{href:a.dom.decode(c)}),b.preventDefault()))}),tinymce.ui.WPLinkPreview=tinymce.ui.Control.extend({url:"#",renderHtml:function(){return'<div id="'+this._id+'" class="wp-link-preview"><a href="'+this.url+'" target="_blank" tabindex="-1">'+this.url+"</a></div>"},setURL:function(a){var b,c;this.url!==a&&(this.url=a,a=window.decodeURIComponent(a),a=a.replace(/^(?:https?:)?\/\/(?:www\.)?/,""),-1!==(b=a.indexOf("?"))&&(a=a.slice(0,b)),-1!==(b=a.indexOf("#"))&&(a=a.slice(0,b)),a=a.replace(/(?:index)?\.html$/,""),(c=a.lastIndexOf("/"))===a.length-1&&(a=a.slice(0,c)),-1!==(b=a.indexOf("/"))&&-1!==(c=a.lastIndexOf("/"))&&c!==b&&(a=a.slice(0,b+1)+"…"+a.slice(c,a.length)),tinymce.$(this.getEl().firstChild).attr("href",this.url).text(a))},postRender:function(){var c=this;a.on("wptoolbar",function(d){var e,f=a.dom.getParent(d.element,"a");f&&(e=a.$(f).attr("href"))&&(c.setURL(e),d.element=f,d.toolbar=b)})}}),a.addButton("wp_link_edit",{tooltip:"Edit ",icon:"dashicon dashicons-edit",cmd:"WP_Link"}),a.addButton("wp_link_remove",{tooltip:"Remove",icon:"dashicon dashicons-no",cmd:"unlink"}),a.on("preinit",function(){b=a.wp._createToolbar(["WPLinkPreview","wp_link_edit","wp_link_remove"],!0)})});

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.3-alpha-32930';
+$wp_version = '4.3-alpha-32931';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.