Ticket #32604: 32604.11.patch

src/wp-includes/css/editor.css

@@ -1599 +1599 @@
         }
 }
 
+.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 +1 @@
 /* global tinymce */
 tinymce.PluginManager.add( 'wplink', function( editor ) {
+        var toolbar;
+
         editor.addCommand( 'WP_Link', function() {
                 window.wpLink && window.wpLink.open( editor.id );
         });
@@ -48 +50 @@
                         }
                 }
         } );
+
+        tinymce.ui.WPLinkPreview = tinymce.ui.Control.extend( {
+                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._rendered ) {
+                                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( 'nodechange', function( event ) {
+                                if ( event.element.nodeName === 'A' ) {
+                                        self.setURL( editor.$( event.element ).attr( 'href' ) );
+                                }
+                        } );
+
+                        self._rendered = true;
+
+                        self._super();
+                }
+        } );
+
+        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 );
+        } );
+
+        editor.on( 'wptoolbar', function( event ) {
+                if ( event.element.nodeName === 'A' ) {
+                        event.toolbar = toolbar;
+                }
+        } );
 });