Ticket #32604: 32604.9.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;
+}
+
 /* =Overlay Body
 -------------------------------------------------------------- */
 

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

@@ -1 @@
-/* global tinymce */
-tinymce.PluginManager.add( 'wplink', function( editor ) {
-        editor.addCommand( 'WP_Link', function() {
-                window.wpLink && window.wpLink.open( editor.id );
-        });
-
-        // WP default shortcut
-        editor.addShortcut( 'Alt+Shift+A', '', 'WP_Link' );
-        // The "de-facto standard" shortcut, see #27305
-        editor.addShortcut( 'Meta+K', '', 'WP_Link' );
-
-        editor.addButton( 'link', {
-                icon: 'link',
-                tooltip: 'Insert/edit link',
-                cmd: 'WP_Link',
-                stateSelector: 'a[href]'
-        });
-
-        editor.addButton( 'unlink', {
-                icon: 'unlink',
-                tooltip: 'Remove link',
-                cmd: 'unlink'
-        });
-
-        editor.addMenuItem( 'link', {
-                icon: 'link',
-                text: 'Insert/edit link',
-                cmd: 'WP_Link',
-                stateSelector: 'a[href]',
-                context: 'insert',
-                prependToContext: true
-        });
-
-        editor.on( 'pastepreprocess', function( event ) {
-                var pastedStr = event.content,
-                        regExp = /^(?:https?:)?\/\/\S+$/i;
-
-                if ( ! editor.selection.isCollapsed() && ! regExp.test( editor.selection.getContent() ) ) {
-                        pastedStr = pastedStr.replace( /<[^>]+>/g, '' );
-                        pastedStr = tinymce.trim( pastedStr );
-
-                        if ( regExp.test( pastedStr ) ) {
-                                editor.execCommand( 'mceInsertLink', false, {
-                                        href: editor.dom.decode( pastedStr )
+( function( tinymce ) {
+        tinymce.PluginManager.add( 'wplink', function( editor ) {
+                var toolbar;
+
+                editor.addCommand( 'WP_Link', function() {
+                        window.wpLink && window.wpLink.open( editor.id );
+                } );
+
+                // WP default shortcut.
+                editor.addShortcut( 'Alt+Shift+A', '', 'WP_Link' );
+                // The "de-facto standard" shortcut, see #27305.
+                editor.addShortcut( 'Meta+K', '', 'WP_Link' );
+
+                editor.addButton( 'link', {
+                        icon: 'link',
+                        tooltip: 'Insert/edit link',
+                        cmd: 'WP_Link',
+                        stateSelector: 'a[href]'
+                } );
+
+                editor.addButton( 'unlink', {
+                        icon: 'unlink',
+                        tooltip: 'Remove link',
+                        cmd: 'unlink'
+                } );
+
+                editor.addMenuItem( 'link', {
+                        icon: 'link',
+                        text: 'Insert/edit link',
+                        cmd: 'WP_Link',
+                        stateSelector: 'a[href]',
+                        context: 'insert',
+                        prependToContext: true
+                } );
+
+                editor.on( 'pastepreprocess', function( event ) {
+                        var pastedStr = event.content,
+                                regExp = /^(?:https?:)?\/\/\S+$/i;
+
+                        if ( ! editor.selection.isCollapsed() && ! regExp.test( editor.selection.getContent() ) ) {
+                                pastedStr = pastedStr.replace( /<[^>]+>/g, '' );
+                                pastedStr = tinymce.trim( pastedStr );
+
+                                if ( regExp.test( pastedStr ) ) {
+                                        editor.execCommand( 'mceInsertLink', false, {
+                                                href: editor.dom.decode( pastedStr )
+                                        } );
+
+                                        event.preventDefault();
+                                }
+                        }
+                } );
+
+                tinymce.ui.WPLinkPreview = tinymce.ui.Control.extend( {
+                        renderHtml: function() {
+                                return (
+                                        '<div id="' + this._id + '" class="wp-link-preview">' +
+                                                '<a href="' + this.url + '" target="_blank">' + this.url + '</a>' +
+                                        '</div>'
+                                );
+                        },
+                        setURL: function( url ) {
+                                var index, lastIndex;
+
+                                if ( this.url !== url && this._rendered ) {
+                                        this.url = 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.replace( url.slice( index + 1, lastIndex ), '\u2026' );
+                                        }
+
+                                        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' ) );
+                                        }
                                 } );
 
-                                event.preventDefault();
+                                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;
                         }
-                }
+                } );
         } );
-});
+} )( window.tinymce );