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