1 ( function( tinymce ) {
2 tinymce.ui.WPLinkPreview = tinymce.ui.Control.extend( {
4 renderHtml: function() {
6 '<div id="' + this._id + '" class="wp-link-preview">' +
7 '<a href="' + this.url + '" target="_blank" tabindex="-1">' + this.url + '</a>' +
11 setURL: function( url ) {
14 if ( this.url !== url ) {
17 url = window.decodeURIComponent( url );
19 url = url.replace( /^(?:https?:)?\/\/(?:www\.)?/, '' );
21 if ( ( index = url.indexOf( '?' ) ) !== -1 ) {
22 url = url.slice( 0, index );
25 if ( ( index = url.indexOf( '#' ) ) !== -1 ) {
26 url = url.slice( 0, index );
29 url = url.replace( /(?:index)?\.html$/, '' );
31 if ( url.charAt( url.length - 1 ) === '/' ) {
32 url = url.slice( 0, -1 );
35 // If nothing's left (maybe the URL was just a fragment), use the whole URL.
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 ) );
47 url = url.slice( 0, index + 1 ) + '\u2026' + url.slice( lastIndex );
50 tinymce.$( this.getEl().firstChild ).attr( 'href', this.url ).text( url );
55 tinymce.ui.WPLinkInput = tinymce.ui.Control.extend( {
56 renderHtml: function() {
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="" />' +
64 setURL: function( url ) {
65 this.getEl().firstChild.value = url;
68 return tinymce.trim( this.getEl().firstChild.value );
70 getLinkText: function() {
71 var text = this.getEl().firstChild.nextSibling.value;
73 if ( ! tinymce.trim( text ) ) {
77 return text.replace( /[\r\n\t ]+/g, ' ' );
80 var urlInput = this.getEl().firstChild;
83 urlInput.nextSibling.value = '';
87 tinymce.PluginManager.add( 'wplink', function( editor ) {
94 var doingUndoRedoTimer;
95 var $ = window.jQuery;
97 function getSelectedLink() {
99 node = editor.selection.getNode(),
100 link = editor.dom.getParent( node, 'a[href]' );
103 html = editor.selection.getContent({ format: 'raw' });
105 if ( html && html.indexOf( '</a>' ) !== -1 ) {
106 href = html.match( /href="([^">]+)"/ );
108 if ( href && href[1] ) {
109 link = editor.$( 'a[href="' + href[1] + '"]', node )[0];
113 editor.selection.select( link );
121 function removePlaceholders() {
122 editor.$( 'a' ).each( function( i, element ) {
123 var $element = editor.$( element );
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 );
133 function removePlaceholderStrings( content, dataAttr ) {
135 content = content.replace( / data-wplink-edit="true"/g, '' );
138 return content.replace( /<a [^>]*?href="_wp_link_placeholder"[^>]*>([\s\S]+)<\/a>/g, '$1' );
141 editor.on( 'preinit', function() {
142 if ( editor.wp && editor.wp._createToolbar ) {
143 toolbar = editor.wp._createToolbar( [
154 if ( typeof window.wpLink !== 'undefined' ) {
155 editButtons.push( 'wp_link_advanced' );
158 editToolbar = editor.wp._createToolbar( editButtons, true );
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 );
167 if ( ! element.value && selection && typeof window.wpLink !== 'undefined' ) {
168 element.value = window.wpLink.getUrlFromSelection( selection );
171 if ( ! doingUndoRedo ) {
180 editToolbar.on( 'hide', function() {
181 if ( ! editToolbar.scrolling ) {
182 editor.execCommand( 'wp_link_cancel' );
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 );
194 linkNode = getSelectedLink();
195 editToolbar.tempHide = false;
198 editor.dom.setAttribs( linkNode, { 'data-wplink-edit': true } );
200 removePlaceholders();
201 editor.execCommand( 'mceInsertLink', false, { href: '_wp_link_placeholder' } );
203 linkNode = editor.$( 'a[href="_wp_link_placeholder"]' )[0];
204 editor.nodeChanged();
208 editor.addCommand( 'wp_link_apply', function() {
209 if ( editToolbar.scrolling ) {
216 href = inputInstance.getURL();
217 text = inputInstance.getLinkText();
221 editor.dom.remove( linkNode, true );
225 if ( ! /^(?:[a-z]+:|#|\?|\.|\/)/.test( href ) ) {
226 href = 'http://' + href;
229 editor.dom.setAttribs( linkNode, { href: href, 'data-wplink-edit': null } );
231 if ( ! tinymce.trim( linkNode.innerHTML ) ) {
232 editor.$( linkNode ).text( text || href );
236 inputInstance.reset();
237 editor.nodeChanged();
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 );
245 editor.addCommand( 'wp_link_cancel', function() {
246 if ( ! editToolbar.tempHide ) {
247 inputInstance.reset();
248 removePlaceholders();
250 editToolbar.tempHide = false;
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' );
259 editor.addButton( 'link', {
261 tooltip: 'Insert/edit link',
263 stateSelector: 'a[href]'
266 editor.addButton( 'unlink', {
268 tooltip: 'Remove link',
272 editor.addMenuItem( 'link', {
274 text: 'Insert/edit link',
276 stateSelector: 'a[href]',
278 prependToContext: true
281 editor.on( 'pastepreprocess', function( event ) {
282 var pastedStr = event.content,
283 regExp = /^(?:https?:)?\/\/\S+$/i;
285 if ( ! editor.selection.isCollapsed() && ! regExp.test( editor.selection.getContent() ) ) {
286 pastedStr = pastedStr.replace( /<[^>]+>/g, '' );
287 pastedStr = tinymce.trim( pastedStr );
289 if ( regExp.test( pastedStr ) ) {
290 editor.execCommand( 'mceInsertLink', false, {
291 href: editor.dom.decode( pastedStr )
294 event.preventDefault();
299 // Remove any remaining placeholders on saving.
300 editor.on( 'savecontent', function( event ) {
301 event.content = removePlaceholderStrings( event.content, true );
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 ) ) {
309 event.preventDefault();
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 ) ) {
322 if ( event.keyCode === 89 || event.keyCode === 90 ) { // Y or Z
323 doingUndoRedo = true;
325 window.clearTimeout( doingUndoRedoTimer );
326 doingUndoRedoTimer = window.setTimeout( function() {
327 doingUndoRedo = false;
332 editor.addButton( 'wp_link_preview', {
333 type: 'WPLinkPreview',
334 onPostRender: function() {
335 previewInstance = this;
339 editor.addButton( 'wp_link_input', {
341 onPostRender: function() {
342 var element = this.getEl(),
343 input = element.firstChild,
346 inputInstance = this;
348 if ( $ && $.ui && $.ui.autocomplete ) {
351 $input.on( 'keydown', function() {
352 $input.removeAttr( 'aria-activedescendant' );
355 source: function( request, response ) {
356 if ( last === request.term ) {
361 if ( /^https?:/.test( request.term ) || request.term.indexOf( '.' ) !== -1 ) {
365 $.post( window.ajaxurl, {
366 action: 'wp-link-ajax',
368 search: request.term,
369 _ajax_linking_nonce: $( '#_ajax_linking_nonce' ).val()
370 }, function( data ) {
377 focus: function( event, ui ) {
378 $input.attr( 'aria-activedescendant', 'mce-wp-autocomplete-' + ui.item.ID );
380 * Don't empty the URL input field, when using the arrow keys to
381 * highlight items. See api.jqueryui.com/autocomplete/#event-focus
383 event.preventDefault();
385 select: function( event, ui ) {
386 $input.val( ui.item.permalink );
387 $( element.firstChild.nextSibling ).val( ui.item.title );
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 );
398 $input.attr( 'aria-expanded', 'true' );
399 editToolbar.blockHide = true;
402 $input.attr( 'aria-expanded', 'false' );
403 editToolbar.blockHide = false;
410 noResults: ( typeof window.uiAutocompleteL10n !== 'undefined' ) ? window.uiAutocompleteL10n.noResults : '',
411 results: function( number ) {
412 if ( typeof window.uiAutocompleteL10n !== 'undefined' ) {
414 return window.uiAutocompleteL10n.manyResults.replace( '%d', number );
417 return window.uiAutocompleteL10n.oneResult;
421 } ).autocomplete( 'instance' )._renderItem = function( ul, item ) {
422 return $( '<li role="option" id="mce-wp-autocomplete-' + item.ID + '">' )
423 .append( '<span>' + item.title + '</span> <span class="wp-editor-float-right">' + item.info + '</span>' )
429 'aria-autocomplete': 'list',
430 'aria-expanded': 'false',
431 'aria-owns': $input.autocomplete( 'widget' ).attr( 'id' )
433 .on( 'focus', function() {
434 var inputValue = $input.val();
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`.
439 if ( inputValue && ! /^https?:/.test( inputValue ) ) {
440 $input.autocomplete( 'search' );
443 // Returns a jQuery object containing the menu element.
444 .autocomplete( 'widget' )
445 .addClass( 'wplink-autocomplete' )
446 .attr( 'role', 'listbox' )
447 .removeAttr( 'tabindex' ) // Remove the `tabindex=0` attribute added by jQuery UI.
449 * Looks like Safari and VoiceOver need an `aria-selected` attribute. See ticket #33301.
450 * The `menufocus` and `menublur` events are the same events used to add and remove
451 * the `ui-state-focus` CSS class on the menu items. See jQuery UI Menu Widget.
453 .on( 'menufocus', function( event, ui ) {
454 ui.item.attr( 'aria-selected', 'true' );
456 .on( 'menublur', function() {
458 * The `menublur` event returns an object where the item is `null`
459 * so we need to find the active item with other means.
461 $( this ).find( '[aria-selected="true"]' ).removeAttr( 'aria-selected' );
465 tinymce.$( input ).on( 'keydown', function( event ) {
466 if ( event.keyCode === 13 ) {
467 editor.execCommand( 'wp_link_apply' );
468 event.preventDefault();
474 editor.on( 'wptoolbar', function( event ) {
475 var linkNode = editor.dom.getParent( event.element, 'a' ),
476 $linkNode, href, edit;
478 if ( tinymce.$( document.body ).hasClass( 'modal-open' ) ) {
479 editToolbar.tempHide = true;
483 editToolbar.tempHide = false;
486 $linkNode = editor.$( linkNode );
487 href = $linkNode.attr( 'href' );
488 edit = $linkNode.attr( 'data-wplink-edit' );
490 if ( href === '_wp_link_placeholder' || edit ) {
491 if ( href !== '_wp_link_placeholder' && ! inputInstance.getURL() ) {
492 inputInstance.setURL( href );
495 event.element = linkNode;
496 event.toolbar = editToolbar;
497 } else if ( href && ! $linkNode.find( 'img' ).length ) {
498 previewInstance.setURL( href );
499 event.element = linkNode;
500 event.toolbar = toolbar;
505 editor.addButton( 'wp_link_edit', {
506 tooltip: 'Edit ', // trailing space is needed, used for context
507 icon: 'dashicon dashicons-edit',
511 editor.addButton( 'wp_link_remove', {
513 icon: 'dashicon dashicons-no',
517 editor.addButton( 'wp_link_advanced', {
518 tooltip: 'Link options',
519 icon: 'dashicon dashicons-admin-generic',
520 onclick: function() {
521 if ( typeof window.wpLink !== 'undefined' ) {
522 var url = inputInstance.getURL() || null,
523 text = inputInstance.getLinkText() || null;
526 * Accessibility note: moving focus back to the editor confuses
527 * screen readers. They will announce again the Editor ARIA role
528 * `application` and the iframe `title` attribute.
530 * Unfortunately IE looses the selection when the editor iframe
531 * looses focus, so without returning focus to the editor, the code
532 * in the modal will not be able to get the selection, place the caret
533 * at the same location, etc.
535 if ( tinymce.Env.ie ) {
536 editor.focus(); // Needed for IE
539 window.wpLink.open( editor.id, url, text, linkNode );
541 editToolbar.tempHide = true;
542 inputInstance.reset();
547 editor.addButton( 'wp_link_apply', {
549 icon: 'dashicon dashicons-editor-break',
550 cmd: 'wp_link_apply',
551 classes: 'widget btn primary'
556 editToolbar.tempHide = false;
557 editor.execCommand( 'wp_link_cancel' );
561 } )( window.tinymce );