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