TinyMCE: add inline link dialog

First run.
Links the advanced button to the "old" dialog for now.

See #33301.

Built from https://develop.svn.wordpress.org/trunk@36384


git-svn-id: http://core.svn.wordpress.org/trunk@36351 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Ella Iseulde Van Dorpe 2016-01-23 00:08:26 +00:00
parent fb8544a0ac
commit 3663a5bca5
12 changed files with 392 additions and 35 deletions

View File

@ -1477,8 +1477,14 @@ function wp_ajax_wp_link_ajax() {
$args = array();
if ( isset( $_POST['search'] ) )
if ( isset( $_POST['search'] ) ) {
$args['s'] = wp_unslash( $_POST['search'] );
}
if ( isset( $_POST['term'] ) ) {
$args['s'] = wp_unslash( $_POST['term'] );
}
$args['pagenum'] = ! empty( $_POST['page'] ) ? absint( $_POST['page'] ) : 1;
require(ABSPATH . WPINC . '/class-wp-editor.php');

View File

@ -779,6 +779,7 @@ final class _WP_Editors {
if ( in_array('wplink', self::$plugins, true) || in_array('link', self::$qt_buttons, true) ) {
wp_enqueue_script('wplink');
wp_enqueue_script( 'jquery-ui-autocomplete' );
}
if ( self::$old_dfw_compat ) {

View File

@ -451,6 +451,46 @@ div.mce-path {
width: 20px;
}
.mce-toolbar .mce-btn-group .mce-btn.mce-primary {
min-width: 0;
background: #0085ba;
border-color: #0073aa #006799 #006799;
-webkit-box-shadow: 0 1px 0 #006799;
box-shadow: 0 1px 0 #006799;
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 1px #006799,
-1px 0 1px #006799,
0 1px 1px #006799,
1px 0 1px #006799;
}
.mce-toolbar .mce-btn-group .mce-btn.mce-primary .mce-ico {
color: #fff;
}
.mce-toolbar .mce-btn-group .mce-btn.mce-primary:hover,
.mce-toolbar .mce-btn-group .mce-btn.mce-primary:focus {
background: #008ec2;
border-color: #006799;
color: #fff;
}
.mce-toolbar .mce-btn-group .mce-btn.mce-primary:focus {
-webkit-box-shadow: 0 1px 0 #0073aa,
0 0 2px 1px #33b3db;
box-shadow: 0 1px 0 #0073aa,
0 0 2px 1px #33b3db;
}
.mce-toolbar .mce-btn-group .mce-btn.mce-primary:active {
background: #0073aa;
border-color: #006799;
-webkit-box-shadow: inset 0 2px 0 #006799;
box-shadow: inset 0 2px 0 #006799;
vertical-align: top;
}
/* mce listbox */
.mce-toolbar .mce-btn-group .mce-btn.mce-listbox {
-webkit-border-radius: 0;
@ -1709,6 +1749,42 @@ div.wp-link-preview a {
}
}
div.wp-link-input {
float: right;
margin: 2px;
max-width: 694px;
}
div.wp-link-input input {
width: 300px;
padding: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and ( max-width: 400px ) {
div.wp-link-input {
min-width: 0;
max-width: 70%;
max-width: -webkit-calc(100% - 80px);
max-width: calc(100% - 80px);
}
div.wp-link-input input {
width: 100%;
font-size: 16px;
padding: 4px;
}
}
.ui-autocomplete.mce-wp-autocomplete {
z-index: 100100;
margin-top: 10px;
max-height: 200px;
overflow-y: auto;
}
/* =Overlay Body
-------------------------------------------------------------- */

File diff suppressed because one or more lines are too long

View File

@ -451,6 +451,46 @@ div.mce-path {
width: 20px;
}
.mce-toolbar .mce-btn-group .mce-btn.mce-primary {
min-width: 0;
background: #0085ba;
border-color: #0073aa #006799 #006799;
-webkit-box-shadow: 0 1px 0 #006799;
box-shadow: 0 1px 0 #006799;
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 1px #006799,
1px 0 1px #006799,
0 1px 1px #006799,
-1px 0 1px #006799;
}
.mce-toolbar .mce-btn-group .mce-btn.mce-primary .mce-ico {
color: #fff;
}
.mce-toolbar .mce-btn-group .mce-btn.mce-primary:hover,
.mce-toolbar .mce-btn-group .mce-btn.mce-primary:focus {
background: #008ec2;
border-color: #006799;
color: #fff;
}
.mce-toolbar .mce-btn-group .mce-btn.mce-primary:focus {
-webkit-box-shadow: 0 1px 0 #0073aa,
0 0 2px 1px #33b3db;
box-shadow: 0 1px 0 #0073aa,
0 0 2px 1px #33b3db;
}
.mce-toolbar .mce-btn-group .mce-btn.mce-primary:active {
background: #0073aa;
border-color: #006799;
-webkit-box-shadow: inset 0 2px 0 #006799;
box-shadow: inset 0 2px 0 #006799;
vertical-align: top;
}
/* mce listbox */
.mce-toolbar .mce-btn-group .mce-btn.mce-listbox {
-webkit-border-radius: 0;
@ -1709,6 +1749,42 @@ div.wp-link-preview a {
}
}
div.wp-link-input {
float: left;
margin: 2px;
max-width: 694px;
}
div.wp-link-input input {
width: 300px;
padding: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and ( max-width: 400px ) {
div.wp-link-input {
min-width: 0;
max-width: 70%;
max-width: -webkit-calc(100% - 80px);
max-width: calc(100% - 80px);
}
div.wp-link-input input {
width: 100%;
font-size: 16px;
padding: 4px;
}
}
.ui-autocomplete.mce-wp-autocomplete {
z-index: 100100;
margin-top: 10px;
max-height: 200px;
overflow-y: auto;
}
/* =Overlay Body
-------------------------------------------------------------- */

File diff suppressed because one or more lines are too long

View File

@ -744,7 +744,10 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
top, left;
if ( spaceTop >= editorHeight || spaceBottom >= editorHeight ) {
return this.hide();
this.scrolling = true;
this.hide();
this.scrolling = false;
return this;
}
// Add offset in iOS to move the menu over the image, out of the way of the default iOS menu.
@ -850,13 +853,17 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
currentSelection = args.selection || args.element;
if ( activeToolbar ) {
if ( activeToolbar && activeToolbar !== args.toolbar ) {
activeToolbar.hide();
}
if ( args.toolbar ) {
activeToolbar = args.toolbar;
activeToolbar.show();
if ( activeToolbar !== args.toolbar ) {
activeToolbar = args.toolbar;
activeToolbar.show();
} else {
activeToolbar.reposition();
}
} else {
activeToolbar = false;
}
@ -870,18 +877,21 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
function hide( event ) {
if ( activeToolbar ) {
activeToolbar.hide();
if ( event.type === 'hide' ) {
activeToolbar.hide();
activeToolbar = false;
} else if ( event.type === 'resize' || event.type === 'scroll' ) {
} else if ( ( event.type === 'resize' || event.type === 'scroll' ) && ! activeToolbar.blockHide ) {
clearTimeout( timeout );
timeout = setTimeout( function() {
if ( activeToolbar && typeof activeToolbar.show === 'function' ) {
activeToolbar.scrolling = false;
activeToolbar.show();
}
}, 250 );
activeToolbar.scrolling = true;
activeToolbar.hide();
}
}
}

File diff suppressed because one or more lines are too long

View File

@ -47,12 +47,105 @@
}
} );
tinymce.ui.WPLinkInput = tinymce.ui.Control.extend( {
renderHtml: function() {
return (
'<div id="' + this._id + '" class="wp-link-input">' +
'<input type="text" value="" tabindex="-1" />' +
'</div>'
);
},
setURL: function( url ) {
this.getEl().firstChild.value = url;
}
} );
tinymce.PluginManager.add( 'wplink', function( editor ) {
var a;
var toolbar;
var editToolbar;
var previewInstance;
var inputInstance;
var $ = window.jQuery;
editor.on( 'preinit', function() {
if ( editor.wp && editor.wp._createToolbar ) {
toolbar = editor.wp._createToolbar( [
'wp_link_preview',
'wp_link_edit',
'wp_link_remove'
], true );
editToolbar = editor.wp._createToolbar( [
'wp_link_input',
'wp_link_apply',
'wp_link_advanced'
], true );
editToolbar.on( 'show', function() {
var node = editToolbar.find( 'toolbar' )[0];
node && node.focus( true );
a = editor.dom.getParent( editor.selection.getNode(), 'a' );
} );
editToolbar.on( 'hide', function() {
editToolbar.scrolling || editor.execCommand( 'wp_link_cancel' );
} );
}
} );
editor.addCommand( 'WP_Link', function() {
window.wpLink && window.wpLink.open( editor.id );
});
var a = editor.dom.getParent( editor.selection.getNode(), 'a' );
if ( a ) {
editor.dom.setAttribs( a, { 'data-wp-edit': true } );
} else {
editor.execCommand( 'mceInsertLink', false, { href: '_wp_link_placeholder' } );
}
editor.nodeChanged();
} );
editor.addCommand( 'wp_link_apply', function() {
if ( editToolbar.scrolling ) {
return;
}
var href = tinymce.trim( inputInstance.getEl().firstChild.value );
if ( href && ! /^(?:[a-z]+:|#|\?|\.|\/)/.test( href ) ) {
href = 'http://' + href;
}
if ( ! href ) {
editor.dom.remove( a, true );
return;
}
if ( a ) {
editor.dom.setAttribs( a, { href: href, 'data-wp-edit': null } );
}
a = false;
editor.nodeChanged();
editor.focus();
} );
editor.addCommand( 'wp_link_cancel', function() {
if ( a ) {
if ( editor.$( a ).attr( 'href' ) === '_wp_link_placeholder' ) {
editor.dom.remove( a, true );
} else {
editor.dom.setAttribs( a, { 'data-wp-edit': null } );
}
}
a = false;
editor.nodeChanged();
editor.focus();
} );
// WP default shortcut
editor.addShortcut( 'access+a', '', 'WP_Link' );
@ -102,27 +195,115 @@
editor.addButton( 'wp_link_preview', {
type: 'WPLinkPreview',
onPostRender: function() {
var self = this;
previewInstance = this;
}
} );
editor.on( 'wptoolbar', function( event ) {
var anchor = editor.dom.getParent( event.element, 'a' ),
$anchor,
href;
editor.addButton( 'wp_link_input', {
type: 'WPLinkInput',
onPostRender: function() {
var input = this.getEl().firstChild;
var cache;
var last;
if ( anchor ) {
$anchor = editor.$( anchor );
href = $anchor.attr( 'href' );
inputInstance = this;
if ( href && ! $anchor.find( 'img' ).length ) {
self.setURL( href );
event.element = anchor;
event.toolbar = toolbar;
if ( $ ) {
$( input )
.on( 'keydown', function() {
$( input ).removeAttr( 'aria-activedescendant' );
} )
.autocomplete( {
source: function( request, response ) {
if ( last === request.term ) {
response( cache );
return;
}
if ( /^https?:/.test( request.term ) || request.term.indexOf( '.' ) !== -1 ) {
return response();
}
$.post( window.ajaxurl, {
action: 'wp-link-ajax',
page: 1,
search: request.term,
_ajax_linking_nonce: $( '#_ajax_linking_nonce' ).val()
}, function( data ) {
cache = data;
response( data );
}, 'json' );
last = request.term;
},
focus: function( event, ui ) {
$( input ).attr( 'aria-activedescendant', 'mce-wp-autocomplete-' + ui.item.ID );
},
select: function( event, ui ) {
$( input ).val( ui.item.permalink );
return false;
},
open: function() {
$( input ).attr( 'aria-expanded', 'true' );
editToolbar.blockHide = true;
},
close: function() {
$( input ).attr( 'aria-expanded', 'false' );
editToolbar.blockHide = false;
},
minLength: 2,
position: {
my: 'left top+5'
}
}
} ).autocomplete( 'instance' )._renderItem = function( ul, item ) {
return $( '<li role="option" id="mce-wp-autocomplete-' + item.ID + '">' )
.append( '<span>' + item.title + '</span>&nbsp;<span class="alignright">' + item.info + '</span>' )
.appendTo( ul );
};
$( input )
.attr( {
'role': 'combobox',
'aria-autocomplete': 'list',
'aria-expanded': 'false',
'aria-owns': $( input ).autocomplete( 'widget' ).attr( 'id' )
} )
.on( 'focus', function() {
$( input ).autocomplete( 'search' );
} )
.autocomplete( 'widget' )
.addClass( 'mce-wp-autocomplete' )
.attr( 'role', 'listbox' );
}
tinymce.$( input ).on( 'keydown', function( event ) {
event.keyCode === 13 && editor.execCommand( 'wp_link_apply' );
} );
}
} );
editor.on( 'wptoolbar', function( event ) {
var anchor = editor.dom.getParent( event.element, 'a' ),
$anchor,
href, edit;
if ( anchor ) {
$anchor = editor.$( anchor );
href = $anchor.attr( 'href' );
edit = $anchor.attr( 'data-wp-edit' );
if ( href === '_wp_link_placeholder' || edit ) {
inputInstance.setURL( edit ? href : '' );
event.element = anchor;
event.toolbar = editToolbar;
} else if ( href && ! $anchor.find( 'img' ).length ) {
previewInstance.setURL( href );
event.element = anchor;
event.toolbar = toolbar;
}
}
} );
editor.addButton( 'wp_link_edit', {
tooltip: 'Edit ', // trailing space is needed, used for context
icon: 'dashicon dashicons-edit',
@ -135,14 +316,21 @@
cmd: 'unlink'
} );
editor.on( 'preinit', function() {
if ( editor.wp && editor.wp._createToolbar ) {
toolbar = editor.wp._createToolbar( [
'wp_link_preview',
'wp_link_edit',
'wp_link_remove'
], true );
// Advanced, more, options?
editor.addButton( 'wp_link_advanced', {
tooltip: 'Advanced',
icon: 'dashicon dashicons-admin-generic',
onclick: function() {
editor.execCommand( 'wp_link_apply' );
window.wpLink && window.wpLink.open( editor.id );
}
} );
editor.addButton( 'wp_link_apply', {
tooltip: 'Apply',
icon: 'dashicon dashicons-editor-break',
cmd: 'wp_link_apply',
classes: 'widget btn primary'
} );
} );
} )( window.tinymce );

View File

@ -1 +1 @@
!function(a){a.ui.WPLinkPreview=a.ui.Control.extend({url:"#",renderHtml:function(){return'<div id="'+this._id+'" class="wp-link-preview"><a href="'+this.url+'" target="_blank" tabindex="-1">'+this.url+"</a></div>"},setURL:function(b){var c,d;this.url!==b&&(this.url=b,b=window.decodeURIComponent(b),b=b.replace(/^(?:https?:)?\/\/(?:www\.)?/,""),-1!==(c=b.indexOf("?"))&&(b=b.slice(0,c)),-1!==(c=b.indexOf("#"))&&(b=b.slice(0,c)),b=b.replace(/(?:index)?\.html$/,""),"/"===b.charAt(b.length-1)&&(b=b.slice(0,-1)),b.length>40&&-1!==(c=b.indexOf("/"))&&-1!==(d=b.lastIndexOf("/"))&&d!==c&&(c+b.length-d<40&&(d=-(40-(c+1))),b=b.slice(0,c+1)+"\u2026"+b.slice(d)),a.$(this.getEl().firstChild).attr("href",this.url).text(b))}}),a.PluginManager.add("wplink",function(b){var c;b.addCommand("WP_Link",function(){window.wpLink&&window.wpLink.open(b.id)}),b.addShortcut("access+a","","WP_Link"),b.addShortcut("meta+k","","WP_Link"),b.addButton("link",{icon:"link",tooltip:"Insert/edit link",cmd:"WP_Link",stateSelector:"a[href]"}),b.addButton("unlink",{icon:"unlink",tooltip:"Remove link",cmd:"unlink"}),b.addMenuItem("link",{icon:"link",text:"Insert/edit link",cmd:"WP_Link",stateSelector:"a[href]",context:"insert",prependToContext:!0}),b.on("pastepreprocess",function(c){var d=c.content,e=/^(?:https?:)?\/\/\S+$/i;b.selection.isCollapsed()||e.test(b.selection.getContent())||(d=d.replace(/<[^>]+>/g,""),d=a.trim(d),e.test(d)&&(b.execCommand("mceInsertLink",!1,{href:b.dom.decode(d)}),c.preventDefault()))}),b.addButton("wp_link_preview",{type:"WPLinkPreview",onPostRender:function(){var a=this;b.on("wptoolbar",function(d){var e,f,g=b.dom.getParent(d.element,"a");g&&(e=b.$(g),f=e.attr("href"),f&&!e.find("img").length&&(a.setURL(f),d.element=g,d.toolbar=c))})}}),b.addButton("wp_link_edit",{tooltip:"Edit ",icon:"dashicon dashicons-edit",cmd:"WP_Link"}),b.addButton("wp_link_remove",{tooltip:"Remove",icon:"dashicon dashicons-no",cmd:"unlink"}),b.on("preinit",function(){b.wp&&b.wp._createToolbar&&(c=b.wp._createToolbar(["wp_link_preview","wp_link_edit","wp_link_remove"],!0))})})}(window.tinymce);
!function(a){a.ui.WPLinkPreview=a.ui.Control.extend({url:"#",renderHtml:function(){return'<div id="'+this._id+'" class="wp-link-preview"><a href="'+this.url+'" target="_blank" tabindex="-1">'+this.url+"</a></div>"},setURL:function(b){var c,d;this.url!==b&&(this.url=b,b=window.decodeURIComponent(b),b=b.replace(/^(?:https?:)?\/\/(?:www\.)?/,""),-1!==(c=b.indexOf("?"))&&(b=b.slice(0,c)),-1!==(c=b.indexOf("#"))&&(b=b.slice(0,c)),b=b.replace(/(?:index)?\.html$/,""),"/"===b.charAt(b.length-1)&&(b=b.slice(0,-1)),b.length>40&&-1!==(c=b.indexOf("/"))&&-1!==(d=b.lastIndexOf("/"))&&d!==c&&(c+b.length-d<40&&(d=-(40-(c+1))),b=b.slice(0,c+1)+"\u2026"+b.slice(d)),a.$(this.getEl().firstChild).attr("href",this.url).text(b))}}),a.ui.WPLinkInput=a.ui.Control.extend({renderHtml:function(){return'<div id="'+this._id+'" class="wp-link-input"><input type="text" value="" tabindex="-1" /></div>'},setURL:function(a){this.getEl().firstChild.value=a}}),a.PluginManager.add("wplink",function(b){var c,d,e,f,g,h=window.jQuery;b.on("preinit",function(){b.wp&&b.wp._createToolbar&&(d=b.wp._createToolbar(["wp_link_preview","wp_link_edit","wp_link_remove"],!0),e=b.wp._createToolbar(["wp_link_input","wp_link_apply","wp_link_advanced"],!0),e.on("show",function(){var a=e.find("toolbar")[0];a&&a.focus(!0),c=b.dom.getParent(b.selection.getNode(),"a")}),e.on("hide",function(){e.scrolling||b.execCommand("wp_link_cancel")}))}),b.addCommand("WP_Link",function(){var a=b.dom.getParent(b.selection.getNode(),"a");a?b.dom.setAttribs(a,{"data-wp-edit":!0}):b.execCommand("mceInsertLink",!1,{href:"_wp_link_placeholder"}),b.nodeChanged()}),b.addCommand("wp_link_apply",function(){if(!e.scrolling){var d=a.trim(g.getEl().firstChild.value);if(d&&!/^(?:[a-z]+:|#|\?|\.|\/)/.test(d)&&(d="http://"+d),!d)return void b.dom.remove(c,!0);c&&b.dom.setAttribs(c,{href:d,"data-wp-edit":null}),c=!1,b.nodeChanged(),b.focus()}}),b.addCommand("wp_link_cancel",function(){c&&("_wp_link_placeholder"===b.$(c).attr("href")?b.dom.remove(c,!0):b.dom.setAttribs(c,{"data-wp-edit":null})),c=!1,b.nodeChanged(),b.focus()}),b.addShortcut("access+a","","WP_Link"),b.addShortcut("meta+k","","WP_Link"),b.addButton("link",{icon:"link",tooltip:"Insert/edit link",cmd:"WP_Link",stateSelector:"a[href]"}),b.addButton("unlink",{icon:"unlink",tooltip:"Remove link",cmd:"unlink"}),b.addMenuItem("link",{icon:"link",text:"Insert/edit link",cmd:"WP_Link",stateSelector:"a[href]",context:"insert",prependToContext:!0}),b.on("pastepreprocess",function(c){var d=c.content,e=/^(?:https?:)?\/\/\S+$/i;b.selection.isCollapsed()||e.test(b.selection.getContent())||(d=d.replace(/<[^>]+>/g,""),d=a.trim(d),e.test(d)&&(b.execCommand("mceInsertLink",!1,{href:b.dom.decode(d)}),c.preventDefault()))}),b.addButton("wp_link_preview",{type:"WPLinkPreview",onPostRender:function(){f=this}}),b.addButton("wp_link_input",{type:"WPLinkInput",onPostRender:function(){var c,d,f=this.getEl().firstChild;g=this,h&&(h(f).on("keydown",function(){h(f).removeAttr("aria-activedescendant")}).autocomplete({source:function(a,b){return d===a.term?void b(c):/^https?:/.test(a.term)||-1!==a.term.indexOf(".")?b():(h.post(window.ajaxurl,{action:"wp-link-ajax",page:1,search:a.term,_ajax_linking_nonce:h("#_ajax_linking_nonce").val()},function(a){c=a,b(a)},"json"),void(d=a.term))},focus:function(a,b){h(f).attr("aria-activedescendant","mce-wp-autocomplete-"+b.item.ID)},select:function(a,b){return h(f).val(b.item.permalink),!1},open:function(){h(f).attr("aria-expanded","true"),e.blockHide=!0},close:function(){h(f).attr("aria-expanded","false"),e.blockHide=!1},minLength:2,position:{my:"left top+5"}}).autocomplete("instance")._renderItem=function(a,b){return h('<li role="option" id="mce-wp-autocomplete-'+b.ID+'">').append("<span>"+b.title+'</span>&nbsp;<span class="alignright">'+b.info+"</span>").appendTo(a)},h(f).attr({role:"combobox","aria-autocomplete":"list","aria-expanded":"false","aria-owns":h(f).autocomplete("widget").attr("id")}).on("focus",function(){h(f).autocomplete("search")}).autocomplete("widget").addClass("mce-wp-autocomplete").attr("role","listbox")),a.$(f).on("keydown",function(a){13===a.keyCode&&b.execCommand("wp_link_apply")})}}),b.on("wptoolbar",function(a){var c,h,i,j=b.dom.getParent(a.element,"a");j&&(c=b.$(j),h=c.attr("href"),i=c.attr("data-wp-edit"),"_wp_link_placeholder"===h||i?(g.setURL(i?h:""),a.element=j,a.toolbar=e):h&&!c.find("img").length&&(f.setURL(h),a.element=j,a.toolbar=d))}),b.addButton("wp_link_edit",{tooltip:"Edit ",icon:"dashicon dashicons-edit",cmd:"WP_Link"}),b.addButton("wp_link_remove",{tooltip:"Remove",icon:"dashicon dashicons-no",cmd:"unlink"}),b.addButton("wp_link_advanced",{tooltip:"Advanced",icon:"dashicon dashicons-admin-generic",onclick:function(){b.execCommand("wp_link_apply"),window.wpLink&&window.wpLink.open(b.id)}}),b.addButton("wp_link_apply",{tooltip:"Apply",icon:"dashicon dashicons-editor-break",cmd:"wp_link_apply",classes:"widget btn primary"})})}(window.tinymce);

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.5-alpha-36383';
$wp_version = '4.5-alpha-36384';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.