diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css
index f5ac98bd6b..4e3bf348c3 100644
--- a/src/wp-includes/css/editor.css
+++ b/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
-------------------------------------------------------------- */
diff --git a/src/wp-includes/js/tinymce/plugins/wplink/plugin.js b/src/wp-includes/js/tinymce/plugins/wplink/plugin.js
index 123cec5b82..419c1cf622 100644
--- a/src/wp-includes/js/tinymce/plugins/wplink/plugin.js
+++ b/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 (
+ '
'
+ );
+ },
+ 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 );
+ } );
});