tastylink-tinymce-plugin.js

(function(tinymce){
	tinymce.ui.Factory.add( 'WPTastyLinkPreview', tinymce.ui.Control.extend( {
		url: '#',
		renderHtml: function() {
			return (
				'<div id="' + this._id + '" class="wp-link-preview">' +
					'<a href="' + this.url + '" target="_blank" rel="noopener" tabindex="-1">' + this.url + '</a>' +
				'</div>'
			);
		},
		setURL: function( url ) {
			this.url = url;
			tinymce.$( this.getEl().firstChild ).attr( 'href', this.url ).text( url );
		}
	} ) );

	tinymce.PluginManager.add( 'tastylinks', function( editor ) {
		var $ = window.jQuery,
			toolbar,
			previewInstance;

		var handleSpanTargetEvent = function( e ){
			var el = $(e.target);
			if ( el.hasClass('tasty-link-selected') ) {
				return;
			}
			editor.dom.removeClass( editor.dom.select('span'), 'tasty-link-selected' );
			toolbar.hide();
			if ( ! el.hasClass('tasty-link') ) {
				return;
			}
			el.addClass('tasty-link-selected');
			previewInstance.setURL( el.attr('data-tasty-link-href') );
			toolbar.element = e.target;
			toolbar.show();
		};

		editor.on('click', handleSpanTargetEvent);

		editor.on( 'preinit', function() {
			if ( editor.wp && editor.wp._createToolbar ) {
				toolbar = editor.wp._createToolbar( [
					'wp_tastylink_preview',
					'wp_tastylink_remove',
				], true );
			}
		});
		editor.addButton( 'wp_tastylink_preview', {
			type: 'WPTastyLinkPreview',
			onPostRender: function() {
				previewInstance = this;
			},
		});
		editor.addButton( 'wp_tastylink_remove', {
			tooltip: 'Remove Tasty Link',
			icon: 'dashicon dashicons-editor-unlink',
			onClick: function( e ) {
				if ( typeof toolbar.element !== 'undefined' ) {
					var innerHTML = '<!-- tasty-links-ignore -->' + toolbar.element.innerHTML + '<!-- /tasty-links-ignore -->';
					var newEl = editor.dom.createFragment( innerHTML );
					editor.dom.replace( newEl, toolbar.element );
					delete toolbar.element;
				}
				toolbar.hide();
			},
		} );
	});
}(window.tinymce))