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

   1 ( function( tinymce ) {
   2         tinymce.ui.WPLinkPreview = tinymce.ui.Control.extend( {
   3                 url: '#',
   4                 renderHtml: function() {
   5                         return (
   6                                 '<div id="' + this._id + '" class="wp-link-preview">' +
   7                                         '<a href="' + this.url + '" target="_blank" tabindex="-1">' + this.url + '</a>' +
   8                                 '</div>'
   9                         );
  10                 },
  11                 setURL: function( url ) {
  12                         var index, lastIndex;
  13
  14                         if ( this.url !== url ) {
  15                                 this.url = url;
  16
  17                                 url = window.decodeURIComponent( url );
  18
  19                                 url = url.replace( /^(?:https?:)?\/\/(?:www\.)?/, '' );
  20
  21                                 if ( ( index = url.indexOf( '?' ) ) !== -1 ) {
  22                                         url = url.slice( 0, index );
  23                                 }
  24
  25                                 if ( ( index = url.indexOf( '#' ) ) !== -1 ) {
  26                                         url = url.slice( 0, index );
  27                                 }
  28
  29                                 url = url.replace( /(?:index)?\.html$/, '' );
  30
  31                                 if ( url.charAt( url.length - 1 ) === '/' ) {
  32                                         url = url.slice( 0, -1 );
  33                                 }
  34
  35                                 // If nothing's left (maybe the URL was just a fragment), use the whole URL.
  36                                 if ( url === '' ) {
  37                                         url = this.url;
  38                                 }
  39
  40                                 // If the URL is longer that 40 chars, concatenate the beginning (after the domain) and ending with ...
  41                                 if ( url.length > 40 && ( index = url.indexOf( '/' ) ) !== -1 && ( lastIndex = url.lastIndexOf( '/' ) ) !== -1 && lastIndex !== index ) {
  42                                         // If the beginning + ending are shorter that 40 chars, show more of the ending
  43                                         if ( index + url.length - lastIndex < 40 ) {
  44                                                 lastIndex = -( 40 - ( index + 1 ) );
  45                                         }
  46
  47                                         url = url.slice( 0, index + 1 ) + '\u2026' + url.slice( lastIndex );
  48                                 }
  49
  50                                 tinymce.$( this.getEl().firstChild ).attr( 'href', this.url ).text( url );
  51                         }
  52                 }
  53         } );
  54
  55         tinymce.ui.WPLinkInput = tinymce.ui.Control.extend( {
  56                 renderHtml: function() {
  57                         return (
  58                                 '<div id="' + this._id + '" class="wp-link-input">' +
  59                                         '<input type="text" value="" placeholder="' + tinymce.translate( 'Paste URL or type to search' ) + '" />' +
  60                                         '<input type="text" style="display:none" value="" />' +
  61                                 '</div>'
  62                         );
  63                 },
  64                 setURL: function( url ) {
  65                         this.getEl().firstChild.value = url;
  66                 },
  67                 getURL: function() {
  68                         return tinymce.trim( this.getEl().firstChild.value );
  69                 },
  70                 getLinkText: function() {
  71                         var text = this.getEl().firstChild.nextSibling.value;
  72
  73                         if ( ! tinymce.trim( text ) ) {
  74                                 return '';
  75                         }
  76
  77                         return text.replace( /[\r\n\t ]+/g, ' ' );
  78                 },
  79                 reset: function() {
  80                         var urlInput = this.getEl().firstChild;
  81
  82                         urlInput.value = '';
  83                         urlInput.nextSibling.value = '';
  84                 }
  85         } );
  86
  87         tinymce.PluginManager.add( 'wplink', function( editor ) {
  88                 var toolbar;
  89                 var editToolbar;
  90                 var previewInstance;
  91                 var inputInstance;
  92                 var linkNode;
  93                 var doingUndoRedo;
  94                 var doingUndoRedoTimer;
  95                 var $ = window.jQuery;
  96
  97                 function getSelectedLink() {
  98                         var href, html,
  99                                 node = editor.selection.getNode(),
 100                                 link = editor.dom.getParent( node, 'a[href]' );
 101
 102                         if ( ! link ) {
 103                                 html = editor.selection.getContent({ format: 'raw' });
 104
 105                                 if ( html && html.indexOf( '</a>' ) !== -1 ) {
 106                                         href = html.match( /href="([^">]+)"/ );
 107
 108                                         if ( href && href[1] ) {
 109                                                 link = editor.$( 'a[href="' + href[1] + '"]', node )[0];
 110                                         }
 111
 112                                         if ( link ) {
 113                                                 editor.selection.select( link );
 114                                         }
 115                                 }
 116                         }
 117
 118                         return link;
 119                 }
 120
 121                 function removePlaceholders() {
 122                         editor.$( 'a' ).each( function( i, element ) {
 123                                 var $element = editor.$( element );
 124
 125                                 if ( $element.attr( 'href' ) === '_wp_link_placeholder' ) {
 126                                         editor.dom.remove( element, true );
 127                                 } else if ( $element.attr( 'data-wplink-edit' ) ) {
 128                                         $element.attr( 'data-wplink-edit', null );
 129                                 }
 130                         });
 131                 }
 132
 133                 function removePlaceholderStrings( content, dataAttr ) {
 134                         if ( dataAttr ) {
 135                                 content = content.replace( / data-wplink-edit="true"/g, '' );
 136                         }
 137
 138                         return content.replace( /<a [^>]*?href="_wp_link_placeholder"[^>]*>([\s\S]+)<\/a>/g, '$1' );
 139                 }
 140
 141                 editor.on( 'preinit', function() {
 142                         if ( editor.wp && editor.wp._createToolbar ) {
 143                                 toolbar = editor.wp._createToolbar( [
 144                                         'wp_link_preview',
 145                                         'wp_link_edit',
 146                                         'wp_link_remove'
 147                                 ], true );
 148
 149                                 var editButtons = [
 150                                         'wp_link_input',
 151                                         'wp_link_apply'
 152                                 ];
 153
 154                                 if ( typeof window.wpLink !== 'undefined' ) {
 155                                         editButtons.push( 'wp_link_advanced' );
 156                                 }
 157
 158                                 editToolbar = editor.wp._createToolbar( editButtons, true );
 159
 160                                 editToolbar.on( 'show', function() {
 161                                         if ( ! tinymce.$( document.body ).hasClass( 'modal-open' ) ) {
 162                                                 window.setTimeout( function() {
 163                                                         var element = editToolbar.$el.find( 'input.ui-autocomplete-input' )[0],
 164                                                                 selection = linkNode && ( linkNode.textContent || linkNode.innerText );
 165
 166                                                         if ( element ) {
 167                                                                 if ( ! element.value && selection && typeof window.wpLink !== 'undefined' ) {
 168                                                                         element.value = window.wpLink.getUrlFromSelection( selection );
 169                                                                 }
 170
 171                                                                 if ( ! doingUndoRedo ) {
 172                                                                         element.focus();
 173                                                                         element.select();
 174                                                                 }
 175                                                         }
 176                                                 } );
 177                                         }
 178                                 } );
 179
 180                                 editToolbar.on( 'hide', function() {
 181                                         if ( ! editToolbar.scrolling ) {
 182                                                 editor.execCommand( 'wp_link_cancel' );
 183                                         }
 184                                 } );
 185                         }
 186                 } );
 187
 188                 editor.addCommand( 'WP_Link', function() {
 189                         if ( tinymce.Env.ie && tinymce.Env.ie < 10 && typeof window.wpLink !== 'undefined' ) {
 190                                 window.wpLink.open( editor.id );
 191                                 return;
 192                         }
 193
 194                         linkNode = getSelectedLink();
 195                         editToolbar.tempHide = false;
 196
 197                         if ( linkNode ) {
 198                                 editor.dom.setAttribs( linkNode, { 'data-wplink-edit': true } );
 199                         } else {
 200                                 removePlaceholders();
 201                                 editor.execCommand( 'mceInsertLink', false, { href: '_wp_link_placeholder' } );
 202
 203                                 linkNode = editor.$( 'a[href="_wp_link_placeholder"]' )[0];
 204                                 editor.nodeChanged();
 205                         }
 206                 } );
 207
 208                 editor.addCommand( 'wp_link_apply', function() {
 209                         if ( editToolbar.scrolling ) {
 210                                 return;
 211                         }
 212
 213                         var href, text;
 214
 215                         if ( linkNode ) {
 216                                 href = inputInstance.getURL();
 217                                 text = inputInstance.getLinkText();
 218                                 editor.focus();
 219
 220                                 if ( ! href ) {
 221                                         editor.dom.remove( linkNode, true );
 222                                         return;
 223                                 }
 224
 225                                 if ( ! /^(?:[a-z]+:|#|\?|\.|\/)/.test( href ) ) {
 226                                         href = 'http://' + href;
 227                                 }
 228
 229                                 editor.dom.setAttribs( linkNode, { href: href, 'data-wplink-edit': null } );
 230
 231                                 if ( ! tinymce.trim( linkNode.innerHTML ) ) {
 232                                         editor.$( linkNode ).text( text || href );
 233                                 }
 234                         }
 235
 236                         inputInstance.reset();
 237                         editor.nodeChanged();
 238
 239                         // Audible confirmation message when a link has been inserted in the Editor.
 240                         if ( typeof window.wp !== 'undefined' && window.wp.a11y && typeof window.wpLinkL10n !== 'undefined' ) {
 241                                 window.wp.a11y.speak( window.wpLinkL10n.linkInserted );
 242                         }
 243                 } );
 244
 245                 editor.addCommand( 'wp_link_cancel', function() {
 246                         if ( ! editToolbar.tempHide ) {
 247                                 inputInstance.reset();
 248                                 removePlaceholders();
 249                                 editor.focus();
 250                                 editToolbar.tempHide = false;
 251                         }
 252                 } );
 253
 254                 // WP default shortcut
 255                 editor.addShortcut( 'access+a', '', 'WP_Link' );
 256                 // The "de-facto standard" shortcut, see #27305
 257                 editor.addShortcut( 'meta+k', '', 'WP_Link' );
 258
 259                 editor.addButton( 'link', {
 260                         icon: 'link',
 261                         tooltip: 'Insert/edit link',
 262                         cmd: 'WP_Link',
 263                         stateSelector: 'a[href]'
 264                 });
 265
 266                 editor.addButton( 'unlink', {
 267                         icon: 'unlink',
 268                         tooltip: 'Remove link',
 269                         cmd: 'unlink'
 270                 });
 271
 272                 editor.addMenuItem( 'link', {
 273                         icon: 'link',
 274                         text: 'Insert/edit link',
 275                         cmd: 'WP_Link',
 276                         stateSelector: 'a[href]',
 277                         context: 'insert',
 278                         prependToContext: true
 279                 });
 280
 281                 editor.on( 'pastepreprocess', function( event ) {
 282                         var pastedStr = event.content,
 283                                 regExp = /^(?:https?:)?\/\/\S+$/i;
 284
 285                         if ( ! editor.selection.isCollapsed() && ! regExp.test( editor.selection.getContent() ) ) {
 286                                 pastedStr = pastedStr.replace( /<[^>]+>/g, '' );
 287                                 pastedStr = tinymce.trim( pastedStr );
 288
 289                                 if ( regExp.test( pastedStr ) ) {
 290                                         editor.execCommand( 'mceInsertLink', false, {
 291                                                 href: editor.dom.decode( pastedStr )
 292                                         } );
 293
 294                                         event.preventDefault();
 295                                 }
 296                         }
 297                 } );
 298
 299                 // Remove any remaining placeholders on saving.
 300                 editor.on( 'savecontent', function( event ) {
 301                         event.content = removePlaceholderStrings( event.content, true );
 302                 });
 303
 304                 // Prevent adding undo levels on inserting link placeholder.
 305                 editor.on( 'BeforeAddUndo', function( event ) {
 306                         if ( event.lastLevel && event.lastLevel.content && event.level.content &&
 307                                 event.lastLevel.content === removePlaceholderStrings( event.level.content ) ) {
 308
 309                                 event.preventDefault();
 310                         }
 311                 });
 312
 313                 // When doing undo and redo with keyboard shortcuts (Ctrl|Cmd+Z, Ctrl|Cmd+Shift+Z, Ctrl|Cmd+Y),
 314                 // set a flag to not focus the inline dialog. The editor has to remain focused so the users can do consecutive undo/redo.
 315                 editor.on( 'keydown', function( event ) {
 316                         if ( event.altKey || ( tinymce.Env.mac && ( ! event.metaKey || event.ctrlKey ) ) ||
 317                                 ( ! tinymce.Env.mac && ! event.ctrlKey ) ) {
 318
 319                                 return;
 320                         }
 321
 322                         if ( event.keyCode === 89 || event.keyCode === 90 ) { // Y or Z
 323                                 doingUndoRedo = true;
 324
 325                                 window.clearTimeout( doingUndoRedoTimer );
 326                                 doingUndoRedoTimer = window.setTimeout( function() {
 327                                         doingUndoRedo = false;
 328                                 }, 500 );
 329                         }
 330                 } );
 331
 332                 editor.addButton( 'wp_link_preview', {
 333                         type: 'WPLinkPreview',
 334                         onPostRender: function() {
 335                                 previewInstance = this;
 336                         }
 337                 } );
 338
 339                 editor.addButton( 'wp_link_input', {
 340                         type: 'WPLinkInput',
 341                         onPostRender: function() {
 342                                 var element = this.getEl(),
 343                                         input = element.firstChild,
 344                                         $input, cache, last;
 345
 346                                 inputInstance = this;
 347
 348                                 if ( $ && $.ui && $.ui.autocomplete ) {
 349                                         $input = $( input );
 350
 351                                         $input.on( 'keydown', function() {
 352                                                 $input.removeAttr( 'aria-activedescendant' );
 353                                         } )
 354                                         .autocomplete( {
 355                                                 source: function( request, response ) {
 356                                                         if ( last === request.term ) {
 357                                                                 response( cache );
 358                                                                 return;
 359                                                         }
 360
 361                                                         if ( /^https?:/.test( request.term ) || request.term.indexOf( '.' ) !== -1 ) {
 362                                                                 return response();
 363                                                         }
 364
 365                                                         $.post( window.ajaxurl, {
 366                                                                 action: 'wp-link-ajax',
 367                                                                 page: 1,
 368                                                                 search: request.term,
 369                                                                 _ajax_linking_nonce: $( '#_ajax_linking_nonce' ).val()
 370                                                         }, function( data ) {
 371                                                                 cache = data;
 372                                                                 response( data );
 373                                                         }, 'json' );
 374
 375                                                         last = request.term;
 376                                                 },
 377                                                 focus: function( event, ui ) {
 378                                                         $input.attr( 'aria-activedescendant', 'mce-wp-autocomplete-' + ui.item.ID );
 379                                                         /*
 380                                                          * Don't empty the URL input field, when using the arrow keys to
 381                                                          * highlight items. See api.jqueryui.com/autocomplete/#event-focus
 382                                                          */
 383                                                         event.preventDefault();
 384                                                 },
 385                                                 select: function( event, ui ) {
 386                                                         $input.val( ui.item.permalink );
 387                                                         $( element.firstChild.nextSibling ).val( ui.item.title );
 388
 389                                                         if ( 9 === event.keyCode && typeof window.wp !== 'undefined' &&
 390                                                                 window.wp.a11y && typeof window.wpLinkL10n !== 'undefined' ) {
 391                                                                 // Audible confirmation message when a link has been selected.
 392                                                                 window.wp.a11y.speak( window.wpLinkL10n.linkSelected );
 393                                                         }
 394
 395                                                         return false;
 396                                                 },
 397                                                 open: function() {
 398                                                         $input.attr( 'aria-expanded', 'true' );
 399                                                         editToolbar.blockHide = true;
 400                                                 },
 401                                                 close: function() {
 402                                                         $input.attr( 'aria-expanded', 'false' );
 403                                                         editToolbar.blockHide = false;
 404                                                 },
 405                                                 minLength: 2,
 406                                                 position: {
 407                                                         my: 'left top+2'
 408                                                 },
 409                                                 messages: {
 410                                                         noResults: ( typeof window.uiAutocompleteL10n !== 'undefined' ) ? window.uiAutocompleteL10n.noResults : '',
 411                                                         results: function( number ) {
 412                                                                 if ( typeof window.uiAutocompleteL10n !== 'undefined' ) {
 413                                                                         if ( number > 1 ) {
 414                                                                                 return window.uiAutocompleteL10n.manyResults.replace( '%d', number );
 415                                                                         }
 416
 417                                                                         return window.uiAutocompleteL10n.oneResult;
 418                                                                 }
 419                                                         }
 420                                                 }
 421                                         } ).autocomplete( 'instance' )._renderItem = function( ul, item ) {
 422                                                 return $( '<li role="option" id="mce-wp-autocomplete-' + item.ID + '">' )
 423                                                 .append( '<span>' + item.title + '</span>&nbsp;<span class="wp-editor-float-right">' + item.info + '</span>' )
 424                                                 .appendTo( ul );
 425                                         };
 426
 427                                         $input.attr( {
 428                                                 'role': 'combobox',
 429                                                 'aria-autocomplete': 'list',
 430                                                 'aria-expanded': 'false',
 431                                                 'aria-owns': $input.autocomplete( 'widget' ).attr( 'id' )
 432                                         } )
 433                                         .on( 'focus', function() {
 434                                                 var inputValue = $input.val();
 435                                                 /*
 436                                                  * Don't trigger a search if the URL field already has a link or is empty.
 437                                                  * Also, avoids screen readers announce `No search results`.
 438                                                  */
 439                                                 if ( inputValue && ! /^https?:/.test( inputValue ) ) {
 440                                                         $input.autocomplete( 'search' );
 441                                                 }
 442                                         } )
 443                                         .autocomplete( 'widget' )
 444                                                 .addClass( 'wplink-autocomplete' )
 445                                                 .attr( 'role', 'listbox' )
 446                                                 .removeAttr( 'tabindex' ); // Remove the `tabindex=0` attribute added by jQuery UI.
 447                                 }
 448
 449                                 tinymce.$( input ).on( 'keydown', function( event ) {
 450                                         if ( event.keyCode === 13 ) {
 451                                                 editor.execCommand( 'wp_link_apply' );
 452                                                 event.preventDefault();
 453                                         }
 454                                 } );
 455                         }
 456                 } );
 457
 458                 editor.on( 'wptoolbar', function( event ) {
 459                         var linkNode = editor.dom.getParent( event.element, 'a' ),
 460                                 $linkNode, href, edit;
 461
 462                         if ( tinymce.$( document.body ).hasClass( 'modal-open' ) ) {
 463                                 editToolbar.tempHide = true;
 464                                 return;
 465                         }
 466
 467                         editToolbar.tempHide = false;
 468
 469                         if ( linkNode ) {
 470                                 $linkNode = editor.$( linkNode );
 471                                 href = $linkNode.attr( 'href' );
 472                                 edit = $linkNode.attr( 'data-wplink-edit' );
 473
 474                                 if ( href === '_wp_link_placeholder' || edit ) {
 475                                         if ( edit && ! inputInstance.getURL() ) {
 476                                                 inputInstance.setURL( href );
 477                                         }
 478
 479                                         event.element = linkNode;
 480                                         event.toolbar = editToolbar;
 481                                 } else if ( href && ! $linkNode.find( 'img' ).length ) {
 482                                         previewInstance.setURL( href );
 483                                         event.element = linkNode;
 484                                         event.toolbar = toolbar;
 485                                 }
 486                         }
 487                 } );
 488
 489                 editor.addButton( 'wp_link_edit', {
 490                         tooltip: 'Edit ', // trailing space is needed, used for context
 491                         icon: 'dashicon dashicons-edit',
 492                         cmd: 'WP_Link'
 493                 } );
 494
 495                 editor.addButton( 'wp_link_remove', {
 496                         tooltip: 'Remove',
 497                         icon: 'dashicon dashicons-no',
 498                         cmd: 'unlink'
 499                 } );
 500
 501                 editor.addButton( 'wp_link_advanced', {
 502                         tooltip: 'Link options',
 503                         icon: 'dashicon dashicons-admin-generic',
 504                         onclick: function() {
 505                                 if ( typeof window.wpLink !== 'undefined' ) {
 506                                         var url = inputInstance.getURL() || null,
 507                                                 text = inputInstance.getLinkText() || null;
 508
 509                                         /*
 510                                          * Accessibility note: moving focus back to the editor confuses
 511                                          * screen readers. They will announce again the Editor ARIA role
 512                                          * `application` and the iframe `title` attribute.
 513                                          *
 514                                          * Unfortunately IE looses the selection when the editor iframe
 515                                          * looses focus, so without returning focus to the editor, the code
 516                                          * in the modal will not be able to get the selection, place the caret
 517                                          * at the same location, etc.
 518                                          */
 519                                         if ( tinymce.Env.ie ) {
 520                                                 editor.focus(); // Needed for IE
 521                                         }
 522
 523                                         window.wpLink.open( editor.id, url, text, linkNode );
 524
 525                                         editToolbar.tempHide = true;
 526                                         inputInstance.reset();
 527                                 }
 528                         }
 529                 } );
 530
 531                 editor.addButton( 'wp_link_apply', {
 532                         tooltip: 'Apply',
 533                         icon: 'dashicon dashicons-editor-break',
 534                         cmd: 'wp_link_apply',
 535                         classes: 'widget btn primary'
 536                 } );
 537
 538                 return {
 539                         close: function() {
 540                                 editToolbar.tempHide = false;
 541                                 editor.execCommand( 'wp_link_cancel' );
 542                         }
 543                 };
 544         } );
 545 } )( window.tinymce );