[Summary view] [Print] [Text view]

   1  ( function( tinymce ) {
   2      tinymce.ui.Factory.add( '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" rel="noopener" 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.Factory.add( '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          var emailRegex = /^(mailto:)?[a-z0-9._%+-]+@[a-z0-9][a-z0-9.-]*\.[a-z]{2,63}$/i;
  97          var urlRegex1 = /^https?:\/\/([^\s/?.#-][^\s\/?.#]*\.?)+(\/[^\s"]*)?$/i;
  98          var urlRegex2 = /^https?:\/\/[^\/]+\.[^\/]+($|\/)/i;
  99          var speak = ( typeof window.wp !== 'undefined' && window.wp.a11y && window.wp.a11y.speak ) ? window.wp.a11y.speak : function() {};
 100          var hasLinkError = false;
 101  
 102  		function getSelectedLink() {
 103              var href, html,
 104                  node = editor.selection.getStart(),
 105                  link = editor.dom.getParent( node, 'a[href]' );
 106  
 107              if ( ! link ) {
 108                  html = editor.selection.getContent({ format: 'raw' });
 109  
 110                  if ( html && html.indexOf( '</a>' ) !== -1 ) {
 111                      href = html.match( /href="([^">]+)"/ );
 112  
 113                      if ( href && href[1] ) {
 114                          link = editor.$( 'a[href="' + href[1] + '"]', node )[0];
 115                      }
 116  
 117                      if ( link ) {
 118                          editor.selection.select( link );
 119                      }
 120                  }
 121              }
 122  
 123              return link;
 124          }
 125  
 126  		function removePlaceholders() {
 127              editor.$( 'a' ).each( function( i, element ) {
 128                  var $element = editor.$( element );
 129  
 130                  if ( $element.attr( 'href' ) === '_wp_link_placeholder' ) {
 131                      editor.dom.remove( element, true );
 132                  } else if ( $element.attr( 'data-wplink-edit' ) ) {
 133                      $element.attr( 'data-wplink-edit', null );
 134                  }
 135              });
 136          }
 137  
 138  		function removePlaceholderStrings( content, dataAttr ) {
 139              return content.replace( /(<a [^>]+>)([\s\S]*?)<\/a>/g, function( all, tag, text ) {
 140                  if ( tag.indexOf( ' href="_wp_link_placeholder"' ) > -1 ) {
 141                      return text;
 142                  }
 143  
 144                  if ( dataAttr ) {
 145                      tag = tag.replace( / data-wplink-edit="true"/g, '' );
 146                  }
 147  
 148                  tag = tag.replace( / data-wplink-url-error="true"/g, '' );
 149  
 150                  return tag + text + '</a>';
 151              });
 152          }
 153  
 154  		function checkLink( node ) {
 155              var $link = editor.$( node );
 156              var href = $link.attr( 'href' );
 157  
 158              if ( ! href || typeof $ === 'undefined' ) {
 159                  return;
 160              }
 161  
 162              hasLinkError = false;
 163  
 164              if ( /^http/i.test( href ) && ( ! urlRegex1.test( href ) || ! urlRegex2.test( href ) ) ) {
 165                  hasLinkError = true;
 166                  $link.attr( 'data-wplink-url-error', 'true' );
 167                  speak( editor.translate( 'Warning: the link has been inserted but may have errors. Please test it.' ), 'assertive' );
 168              } else {
 169                  $link.removeAttr( 'data-wplink-url-error' );
 170              }
 171          }
 172  
 173          editor.on( 'preinit', function() {
 174              if ( editor.wp && editor.wp._createToolbar ) {
 175                  toolbar = editor.wp._createToolbar( [
 176                      'wp_link_preview',
 177                      'wp_link_edit',
 178                      'wp_link_remove'
 179                  ], true );
 180  
 181                  var editButtons = [
 182                      'wp_link_input',
 183                      'wp_link_apply'
 184                  ];
 185  
 186                  if ( typeof window.wpLink !== 'undefined' ) {
 187                      editButtons.push( 'wp_link_advanced' );
 188                  }
 189  
 190                  editToolbar = editor.wp._createToolbar( editButtons, true );
 191  
 192                  editToolbar.on( 'show', function() {
 193                      if ( typeof window.wpLink === 'undefined' || ! window.wpLink.modalOpen ) {
 194                          window.setTimeout( function() {
 195                              var element = editToolbar.$el.find( 'input.ui-autocomplete-input' )[0],
 196                                  selection = linkNode && ( linkNode.textContent || linkNode.innerText );
 197  
 198                              if ( element ) {
 199                                  if ( ! element.value && selection && typeof window.wpLink !== 'undefined' ) {
 200                                      element.value = window.wpLink.getUrlFromSelection( selection );
 201                                  }
 202  
 203                                  if ( ! doingUndoRedo ) {
 204                                      element.focus();
 205                                      element.select();
 206                                  }
 207                              }
 208                          } );
 209                      }
 210                  } );
 211  
 212                  editToolbar.on( 'hide', function() {
 213                      if ( ! editToolbar.scrolling ) {
 214                          editor.execCommand( 'wp_link_cancel' );
 215                      }
 216                  } );
 217              }
 218          } );
 219  
 220          editor.addCommand( 'WP_Link', function() {
 221              if ( tinymce.Env.ie && tinymce.Env.ie < 10 && typeof window.wpLink !== 'undefined' ) {
 222                  window.wpLink.open( editor.id );
 223                  return;
 224              }
 225  
 226              linkNode = getSelectedLink();
 227              editToolbar.tempHide = false;
 228  
 229              if ( ! linkNode ) {
 230                  removePlaceholders();
 231                  editor.execCommand( 'mceInsertLink', false, { href: '_wp_link_placeholder' } );
 232  
 233                  linkNode = editor.$( 'a[href="_wp_link_placeholder"]' )[0];
 234                  editor.nodeChanged();
 235              }
 236  
 237              editor.dom.setAttribs( linkNode, { 'data-wplink-edit': true } );
 238          } );
 239  
 240          editor.addCommand( 'wp_link_apply', function() {
 241              if ( editToolbar.scrolling ) {
 242                  return;
 243              }
 244  
 245              var href, text;
 246  
 247              if ( linkNode ) {
 248                  href = inputInstance.getURL();
 249                  text = inputInstance.getLinkText();
 250                  editor.focus();
 251  
 252                  var parser = document.createElement( 'a' );
 253                  parser.href = href;
 254  
 255                  if ( 'javascript:' === parser.protocol || 'data:' === parser.protocol ) { // jshint ignore:line
 256                      href = '';
 257                  }
 258  
 259                  if ( ! href ) {
 260                      editor.dom.remove( linkNode, true );
 261                      return;
 262                  }
 263  
 264                  if ( ! /^(?:[a-z]+:|#|\?|\.|\/)/.test( href ) && ! emailRegex.test( href ) ) {
 265                      href = 'http://' + href;
 266                  }
 267  
 268                  editor.dom.setAttribs( linkNode, { href: href, 'data-wplink-edit': null } );
 269  
 270                  if ( ! tinymce.trim( linkNode.innerHTML ) ) {
 271                      editor.$( linkNode ).text( text || href );
 272                  }
 273  
 274                  checkLink( linkNode );
 275              }
 276  
 277              inputInstance.reset();
 278              editor.nodeChanged();
 279  
 280              // Audible confirmation message when a link has been inserted in the Editor.
 281              if ( typeof window.wpLinkL10n !== 'undefined' && ! hasLinkError ) {
 282                  speak( window.wpLinkL10n.linkInserted );
 283              }
 284          } );
 285  
 286          editor.addCommand( 'wp_link_cancel', function() {
 287              inputInstance.reset();
 288  
 289              if ( ! editToolbar.tempHide ) {
 290                  removePlaceholders();
 291              }
 292          } );
 293  
 294          editor.addCommand( 'wp_unlink', function() {
 295              editor.execCommand( 'unlink' );
 296              editToolbar.tempHide = false;
 297              editor.execCommand( 'wp_link_cancel' );
 298          } );
 299  
 300          // WP default shortcuts.
 301          editor.addShortcut( 'access+a', '', 'WP_Link' );
 302          editor.addShortcut( 'access+s', '', 'wp_unlink' );
 303          // The "de-facto standard" shortcut, see #27305.
 304          editor.addShortcut( 'meta+k', '', 'WP_Link' );
 305  
 306          editor.addButton( 'link', {
 307              icon: 'link',
 308              tooltip: 'Insert/edit link',
 309              cmd: 'WP_Link',
 310              stateSelector: 'a[href]'
 311          });
 312  
 313          editor.addButton( 'unlink', {
 314              icon: 'unlink',
 315              tooltip: 'Remove link',
 316              cmd: 'unlink'
 317          });
 318  
 319          editor.addMenuItem( 'link', {
 320              icon: 'link',
 321              text: 'Insert/edit link',
 322              cmd: 'WP_Link',
 323              stateSelector: 'a[href]',
 324              context: 'insert',
 325              prependToContext: true
 326          });
 327  
 328          editor.on( 'pastepreprocess', function( event ) {
 329              var pastedStr = event.content,
 330                  regExp = /^(?:https?:)?\/\/\S+$/i;
 331  
 332              if ( ! editor.selection.isCollapsed() && ! regExp.test( editor.selection.getContent() ) ) {
 333                  pastedStr = pastedStr.replace( /<[^>]+>/g, '' );
 334                  pastedStr = tinymce.trim( pastedStr );
 335  
 336                  if ( regExp.test( pastedStr ) ) {
 337                      editor.execCommand( 'mceInsertLink', false, {
 338                          href: editor.dom.decode( pastedStr )
 339                      } );
 340  
 341                      event.preventDefault();
 342                  }
 343              }
 344          } );
 345  
 346          // Remove any remaining placeholders on saving.
 347          editor.on( 'savecontent', function( event ) {
 348              event.content = removePlaceholderStrings( event.content, true );
 349          });
 350  
 351          // Prevent adding undo levels on inserting link placeholder.
 352          editor.on( 'BeforeAddUndo', function( event ) {
 353              if ( event.lastLevel && event.lastLevel.content && event.level.content &&
 354                  event.lastLevel.content === removePlaceholderStrings( event.level.content ) ) {
 355  
 356                  event.preventDefault();
 357              }
 358          });
 359  
 360          // When doing undo and redo with keyboard shortcuts (Ctrl|Cmd+Z, Ctrl|Cmd+Shift+Z, Ctrl|Cmd+Y),
 361          // set a flag to not focus the inline dialog. The editor has to remain focused so the users can do consecutive undo/redo.
 362          editor.on( 'keydown', function( event ) {
 363              if ( event.keyCode === 27 ) { // Esc
 364                  editor.execCommand( 'wp_link_cancel' );
 365              }
 366  
 367              if ( event.altKey || ( tinymce.Env.mac && ( ! event.metaKey || event.ctrlKey ) ) ||
 368                  ( ! tinymce.Env.mac && ! event.ctrlKey ) ) {
 369  
 370                  return;
 371              }
 372  
 373              if ( event.keyCode === 89 || event.keyCode === 90 ) { // Y or Z
 374                  doingUndoRedo = true;
 375  
 376                  window.clearTimeout( doingUndoRedoTimer );
 377                  doingUndoRedoTimer = window.setTimeout( function() {
 378                      doingUndoRedo = false;
 379                  }, 500 );
 380              }
 381          } );
 382  
 383          editor.addButton( 'wp_link_preview', {
 384              type: 'WPLinkPreview',
 385              onPostRender: function() {
 386                  previewInstance = this;
 387              }
 388          } );
 389  
 390          editor.addButton( 'wp_link_input', {
 391              type: 'WPLinkInput',
 392              onPostRender: function() {
 393                  var element = this.getEl(),
 394                      input = element.firstChild,
 395                      $input, cache, last;
 396  
 397                  inputInstance = this;
 398  
 399                  if ( $ && $.ui && $.ui.autocomplete ) {
 400                      $input = $( input );
 401  
 402                      $input.on( 'keydown', function() {
 403                          $input.removeAttr( 'aria-activedescendant' );
 404                      } )
 405                      .autocomplete( {
 406                          source: function( request, response ) {
 407                              if ( last === request.term ) {
 408                                  response( cache );
 409                                  return;
 410                              }
 411  
 412                              if ( /^https?:/.test( request.term ) || request.term.indexOf( '.' ) !== -1 ) {
 413                                  return response();
 414                              }
 415  
 416                              $.post( window.ajaxurl, {
 417                                  action: 'wp-link-ajax',
 418                                  page: 1,
 419                                  search: request.term,
 420                                  _ajax_linking_nonce: $( '#_ajax_linking_nonce' ).val()
 421                              }, function( data ) {
 422                                  cache = data;
 423                                  response( data );
 424                              }, 'json' );
 425  
 426                              last = request.term;
 427                          },
 428                          focus: function( event, ui ) {
 429                              $input.attr( 'aria-activedescendant', 'mce-wp-autocomplete-' + ui.item.ID );
 430                              /*
 431                               * Don't empty the URL input field, when using the arrow keys to
 432                               * highlight items. See api.jqueryui.com/autocomplete/#event-focus
 433                               */
 434                              event.preventDefault();
 435                          },
 436                          select: function( event, ui ) {
 437                              $input.val( ui.item.permalink );
 438                              $( element.firstChild.nextSibling ).val( ui.item.title );
 439  
 440                              if ( 9 === event.keyCode && typeof window.wpLinkL10n !== 'undefined' ) {
 441                                  // Audible confirmation message when a link has been selected.
 442                                  speak( window.wpLinkL10n.linkSelected );
 443                              }
 444  
 445                              return false;
 446                          },
 447                          open: function() {
 448                              $input.attr( 'aria-expanded', 'true' );
 449                              editToolbar.blockHide = true;
 450                          },
 451                          close: function() {
 452                              $input.attr( 'aria-expanded', 'false' );
 453                              editToolbar.blockHide = false;
 454                          },
 455                          minLength: 2,
 456                          position: {
 457                              my: 'left top+2'
 458                          },
 459                          messages: {
 460                              noResults: ( typeof window.uiAutocompleteL10n !== 'undefined' ) ? window.uiAutocompleteL10n.noResults : '',
 461                              results: function( number ) {
 462                                  if ( typeof window.uiAutocompleteL10n !== 'undefined' ) {
 463                                      if ( number > 1 ) {
 464                                          return window.uiAutocompleteL10n.manyResults.replace( '%d', number );
 465                                      }
 466  
 467                                      return window.uiAutocompleteL10n.oneResult;
 468                                  }
 469                              }
 470                          }
 471                      } ).autocomplete( 'instance' )._renderItem = function( ul, item ) {
 472                          var fallbackTitle = ( typeof window.wpLinkL10n !== 'undefined' ) ? window.wpLinkL10n.noTitle : '',
 473                              title = item.title ? item.title : fallbackTitle;
 474  
 475                          return $( '<li role="option" id="mce-wp-autocomplete-' + item.ID + '">' )
 476                          .append( '<span>' + title + '</span>&nbsp;<span class="wp-editor-float-right">' + item.info + '</span>' )
 477                          .appendTo( ul );
 478                      };
 479  
 480                      $input.attr( {
 481                          'role': 'combobox',
 482                          'aria-autocomplete': 'list',
 483                          'aria-expanded': 'false',
 484                          'aria-owns': $input.autocomplete( 'widget' ).attr( 'id' )
 485                      } )
 486                      .on( 'focus', function() {
 487                          var inputValue = $input.val();
 488                          /*
 489                           * Don't trigger a search if the URL field already has a link or is empty.
 490                           * Also, avoids screen readers announce `No search results`.
 491                           */
 492                          if ( inputValue && ! /^https?:/.test( inputValue ) ) {
 493                              $input.autocomplete( 'search' );
 494                          }
 495                      } )
 496                      // Returns a jQuery object containing the menu element.
 497                      .autocomplete( 'widget' )
 498                          .addClass( 'wplink-autocomplete' )
 499                          .attr( 'role', 'listbox' )
 500                          .removeAttr( 'tabindex' ) // Remove the `tabindex=0` attribute added by jQuery UI.
 501                          /*
 502                           * Looks like Safari and VoiceOver need an `aria-selected` attribute. See ticket #33301.
 503                           * The `menufocus` and `menublur` events are the same events used to add and remove
 504                           * the `ui-state-focus` CSS class on the menu items. See jQuery UI Menu Widget.
 505                           */
 506                          .on( 'menufocus', function( event, ui ) {
 507                              ui.item.attr( 'aria-selected', 'true' );
 508                          })
 509                          .on( 'menublur', function() {
 510                              /*
 511                               * The `menublur` event returns an object where the item is `null`
 512                               * so we need to find the active item with other means.
 513                               */
 514                              $( this ).find( '[aria-selected="true"]' ).removeAttr( 'aria-selected' );
 515                          });
 516                  }
 517  
 518                  tinymce.$( input ).on( 'keydown', function( event ) {
 519                      if ( event.keyCode === 13 ) {
 520                          editor.execCommand( 'wp_link_apply' );
 521                          event.preventDefault();
 522                      }
 523                  } );
 524              }
 525          } );
 526  
 527          editor.on( 'wptoolbar', function( event ) {
 528              var linkNode = editor.dom.getParent( event.element, 'a' ),
 529                  $linkNode, href, edit;
 530  
 531              if ( typeof window.wpLink !== 'undefined' && window.wpLink.modalOpen ) {
 532                  editToolbar.tempHide = true;
 533                  return;
 534              }
 535  
 536              editToolbar.tempHide = false;
 537  
 538              if ( linkNode ) {
 539                  $linkNode = editor.$( linkNode );
 540                  href = $linkNode.attr( 'href' );
 541                  edit = $linkNode.attr( 'data-wplink-edit' );
 542  
 543                  if ( href === '_wp_link_placeholder' || edit ) {
 544                      if ( href !== '_wp_link_placeholder' && ! inputInstance.getURL() ) {
 545                          inputInstance.setURL( href );
 546                      }
 547  
 548                      event.element = linkNode;
 549                      event.toolbar = editToolbar;
 550                  } else if ( href && ! $linkNode.find( 'img' ).length ) {
 551                      previewInstance.setURL( href );
 552                      event.element = linkNode;
 553                      event.toolbar = toolbar;
 554  
 555                      if ( $linkNode.attr( 'data-wplink-url-error' ) === 'true' ) {
 556                          toolbar.$el.find( '.wp-link-preview a' ).addClass( 'wplink-url-error' );
 557                      } else {
 558                          toolbar.$el.find( '.wp-link-preview a' ).removeClass( 'wplink-url-error' );
 559                          hasLinkError = false;
 560                      }
 561                  }
 562              } else if ( editToolbar.visible() ) {
 563                  editor.execCommand( 'wp_link_cancel' );
 564              }
 565          } );
 566  
 567          editor.addButton( 'wp_link_edit', {
 568              tooltip: 'Edit|button', // '|button' is not displayed, only used for context.
 569              icon: 'dashicon dashicons-edit',
 570              cmd: 'WP_Link'
 571          } );
 572  
 573          editor.addButton( 'wp_link_remove', {
 574              tooltip: 'Remove link',
 575              icon: 'dashicon dashicons-editor-unlink',
 576              cmd: 'wp_unlink'
 577          } );
 578  
 579          editor.addButton( 'wp_link_advanced', {
 580              tooltip: 'Link options',
 581              icon: 'dashicon dashicons-admin-generic',
 582              onclick: function() {
 583                  if ( typeof window.wpLink !== 'undefined' ) {
 584                      var url = inputInstance.getURL() || null,
 585                          text = inputInstance.getLinkText() || null;
 586  
 587                      window.wpLink.open( editor.id, url, text );
 588  
 589                      editToolbar.tempHide = true;
 590                      editToolbar.hide();
 591                  }
 592              }
 593          } );
 594  
 595          editor.addButton( 'wp_link_apply', {
 596              tooltip: 'Apply',
 597              icon: 'dashicon dashicons-editor-break',
 598              cmd: 'wp_link_apply',
 599              classes: 'widget btn primary'
 600          } );
 601  
 602          return {
 603              close: function() {
 604                  editToolbar.tempHide = false;
 605                  editor.execCommand( 'wp_link_cancel' );
 606              },
 607              checkLink: checkLink
 608          };
 609      } );
 610  } )( window.tinymce );