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.


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

src/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
 -------------------------------------------------------------- */
 

src/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 );
+	} );
 });