- Makes sure that the editor is focused when clicking on a wpview.
- When a view is the first or last node in the editor and a click on the area around the view adds a new paragraph, deselect the wpview so that the new paragraph is properly focused.
- When navigating via keyboard, select or deselect wpviews as appropriate.
Props gcorne, see #26959
Built from https://develop.svn.wordpress.org/trunk@27582


git-svn-id: http://core.svn.wordpress.org/trunk@27425 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2014-03-18 04:57:14 +00:00
parent c8ecc9f07a
commit 41c747f4c1
3 changed files with 73 additions and 8 deletions

View File

@ -86,6 +86,11 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
editor.dom.bind( clipboard, 'beforedeactivate focusin focusout', _stop ); editor.dom.bind( clipboard, 'beforedeactivate focusin focusout', _stop );
editor.dom.bind( selected, 'beforedeactivate focusin focusout', _stop ); editor.dom.bind( selected, 'beforedeactivate focusin focusout', _stop );
// Make sure that the editor is focused.
// It is possible that the editor is not focused when the mouse event fires
// without focus, the selection will not work properly.
editor.getBody().focus();
// select the hidden div // select the hidden div
editor.selection.select( clipboard, true ); editor.selection.select( clipboard, true );
} }
@ -156,8 +161,6 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
editor.selection.setCursorLocation( padNode, 0 ); editor.selection.setCursorLocation( padNode, 0 );
} }
} }
// refreshEmptyContentNode();
}); });
// Detect mouse down events that are adjacent to a view when a view is the first view or the last view // Detect mouse down events that are adjacent to a view when a view is the first view or the last view
@ -188,6 +191,9 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
} }
if ( padNode ) { if ( padNode ) {
// Make sure that a selected view is deselected so that focus and selection are handled properly
deselect();
editor.getBody().focus();
editor.selection.setCursorLocation( padNode, 0 ); editor.selection.setCursorLocation( padNode, 0 );
} }
} }
@ -298,7 +304,8 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
editor.on( 'keydown', function( event ) { editor.on( 'keydown', function( event ) {
var keyCode = event.keyCode, var keyCode = event.keyCode,
view; body = editor.getBody(),
view, padNode;
// If a view isn't selected, let the event go on its merry way. // If a view isn't selected, let the event go on its merry way.
if ( ! selected ) { if ( ! selected ) {
@ -314,23 +321,81 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
return; return;
} }
// If the caret is not within the selected view, deselect the
// view and bail.
view = getParentView( editor.selection.getNode() ); view = getParentView( editor.selection.getNode() );
// If the caret is not within the selected view, deselect the
// view and bail.
if ( view !== selected ) { if ( view !== selected ) {
deselect(); deselect();
return; return;
} }
if ( keyCode === VK.LEFT || keyCode === VK.UP ) {
deselect();
// Handle case where two views are stacked on top of one another
if ( isView( view.previousSibling ) ) {
select( view.previousSibling );
// Handle case where view is the first node
} else if ( view.previousSibling === null ) {
padNode = createPadNode();
body.insertBefore( padNode, body.firstChild );
editor.selection.setCursorLocation( body.firstChild, 0 );
// Handle default case
} else {
editor.selection.select( view.previousSibling, true );
editor.selection.collapse();
}
} else if ( keyCode === VK.RIGHT || keyCode === VK.DOWN ) {
deselect();
// Handle case where the next node is another wpview
if ( isView( view.nextSibling ) ) {
select( view.nextSibling );
// Handle case were the view is that last node
} else if ( view.nextSibling === null ) {
padNode = createPadNode();
body.appendChild( padNode );
editor.selection.setCursorLocation( body.lastChild, 0 );
// Handle default case where the next node is a non-wpview
} else {
editor.selection.setCursorLocation( view.nextSibling.firstChild, 0 );
}
} else if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
// If delete or backspace is pressed, delete the view. // If delete or backspace is pressed, delete the view.
if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
editor.dom.remove( selected ); editor.dom.remove( selected );
} }
event.preventDefault(); event.preventDefault();
}); });
// Select and deselect views when arrow keys are used to navigate the content of the editor.
editor.on( 'keydown', function( event ) {
var keyCode = event.keyCode,
range = editor.selection.getRng(),
body = editor.getBody(),
node;
if ( ! range.collapsed || event.metaKey || event.ctrlKey ) {
return;
}
if ( keyCode === VK.LEFT || keyCode === VK.UP ) {
node = range.startContainer.parentNode === body ? range.startContainer : range.startContainer.parentNode;
// The caret is directly after a wpview
if ( range.startOffset === 0 && isView( node.previousSibling ) ) {
select( node.previousSibling );
event.preventDefault();
}
} else if ( keyCode === VK.RIGHT || keyCode === VK.DOWN ) {
node = range.startContainer.parentNode === body ? range.startContainer : range.startContainer.parentNode;
// The caret is directly before a wpview
if ( ( ( range.startOffset === 0 && ! range.endContainer.length ) || ( range.startOffset === range.endContainer.length ) ) &&
isView( node.nextSibling ) ) {
select( node.nextSibling );
event.preventDefault();
}
}
});
editor.on( 'keyup', function( event ) { editor.on( 'keyup', function( event ) {
var padNode, var padNode,
keyCode = event.keyCode, keyCode = event.keyCode,

View File

@ -1 +1 @@
tinymce.PluginManager.add("wpview",function(a){function b(a){for(;a&&"BODY"!==a.nodeName;){if(c(a))return a;a=a.parentNode}}function c(a){return a&&/\bwpview-wrap\b/.test(a.className)}function d(){return a.dom.create("p",{"data-wpview-pad":1},tinymce.Env.ie&&tinymce.Env.ie<11?"":'<br data-mce-bogus="1" />')}function e(c){return c=b("string"==typeof c?a.dom.get(c):c),c?window.decodeURIComponent(a.dom.getAttrib(c,"data-wpview-text")||""):""}function f(c,d){return c=b("string"==typeof c?a.dom.get(c):c),c?(a.dom.setAttrib(c,"data-wpview-text",window.encodeURIComponent(d||"")),!0):!1}function g(a){a.stopPropagation()}function h(b){var c,d=a.dom;b!==j&&(i(),j=b,d.addClass(b,"selected"),c=d.create("div",{"class":"wpview-clipboard",contenteditable:"true"},e(b)),b.appendChild(c),a.dom.bind(c,"beforedeactivate focusin focusout",g),a.dom.bind(j,"beforedeactivate focusin focusout",g),a.selection.select(c,!0))}function i(){var b,c=a.dom;j&&(b=a.dom.select(".wpview-clipboard",j)[0],c.unbind(b),c.remove(b),c.unbind(j,"beforedeactivate focusin focusout click mouseup",g),c.removeClass(j,"selected"),a.selection.select(j.nextSibling),a.selection.collapse()),j=null}var j,k=tinymce.util.VK,l=tinymce.dom.TreeWalker,m=!1;if("undefined"!=typeof wp&&wp.mce)return a.on("BeforeAddUndo",function(a){j&&!m&&a.preventDefault()}),a.on("BeforeSetContent",function(a){a.content&&(a.content=wp.mce.views.toViews(a.content))}),a.on("SetContent",function(b){var e,f;"raw"!==b.format&&wp.mce.views.render(),(b.load||!b.set)&&(e=a.getBody(),c(e.lastChild)&&(f=d(),e.appendChild(f),a.selection.setCursorLocation(f,0)))}),a.on("click",function(b){var e,f,g,h,i,j=a.getBody(),k=a.getDoc(),l=k.documentElement.scrollTop||j.scrollTop||0;"HTML"!==b.target.nodeName||b.metaKey||b.ctrlKey||(g=j.firstChild,h=j.lastChild,e=b.clientX,f=b.clientY,c(g)&&(e<g.offsetLeft&&f<g.offsetHeight-l||f<g.offsetTop)?(i=d(),j.insertBefore(i,g)):c(h)&&(e>h.offsetLeft+h.offsetWidth||l+f-(h.offsetTop+h.offsetHeight)>0)&&(i=d(),j.appendChild(i)),i&&a.selection.setCursorLocation(i,0))}),a.on("init",function(){var d=a.selection;a.on("BeforeSetContent",function(){var e,f,g=b(d.getNode());g&&(!g.nextSibling||c(g.nextSibling)?(f=a.getDoc().createTextNode(""),a.dom.insertAfter(f,g)):(e=new l(g.nextSibling,g.nextSibling),f=e.next()),d.select(f),d.collapse(!0))}),a.on("SetContent",function(a){if(a.context){var b=d.getNode();b.innerHTML&&(b.innerHTML=wp.mce.views.toViews(b.innerHTML))}}),a.dom.bind(a.getBody(),"mousedown mouseup click",function(c){var d=b(c.target);return d?(c.stopPropagation(),"click"===c.type&&(c.metaKey||c.ctrlKey||(a.dom.hasClass(c.target,"edit")?wp.mce.views.edit(d):a.dom.hasClass(c.target,"remove")&&a.dom.remove(d))),h(d),!1):void("click"===c.type&&i())})}),a.on("PreProcess",function(b){var c=a.dom;tinymce.each(c.select("p[data-wpview-pad]",b.node),function(a){c.isEmpty(a)?c.remove(a):c.setAttrib(a,"data-wpview-pad",null)}),tinymce.each(c.select("div[data-wpview-text]",b.node),function(a){"textContent"in a?a.textContent="":a.innerText="",c.replace(c.create("p",null,window.decodeURIComponent(c.getAttrib(a,"data-wpview-text"))),a)})}),a.on("keydown",function(c){var d,e=c.keyCode;if(j){if(c.metaKey||c.ctrlKey||e>=112&&123>=e)return void((c.metaKey||c.ctrlKey)&&88===e&&(m=j));if(d=b(a.selection.getNode()),d!==j)return void i();(e===k.DELETE||e===k.BACKSPACE)&&a.dom.remove(j),c.preventDefault()}}),a.on("keyup",function(b){var e,f,g=b.keyCode,h=a.getBody();m&&(a.dom.remove(m),m=!1),(g===k.DELETE||g===k.BACKSPACE)&&(c(h.lastChild)&&(e=d(),h.appendChild(e),2===h.childNodes.length&&a.selection.setCursorLocation(e,0)),f=a.selection.getRng(),h.firstChild===f.startContainer&&f.collapsed===!0&&c(f.startContainer.nextSibling)&&0===f.startOffset&&a.dom.remove(f.startContainer))}),{getViewText:e,setViewText:f}}); tinymce.PluginManager.add("wpview",function(a){function b(a){for(;a&&"BODY"!==a.nodeName;){if(c(a))return a;a=a.parentNode}}function c(a){return a&&/\bwpview-wrap\b/.test(a.className)}function d(){return a.dom.create("p",{"data-wpview-pad":1},tinymce.Env.ie&&tinymce.Env.ie<11?"":'<br data-mce-bogus="1" />')}function e(c){return c=b("string"==typeof c?a.dom.get(c):c),c?window.decodeURIComponent(a.dom.getAttrib(c,"data-wpview-text")||""):""}function f(c,d){return c=b("string"==typeof c?a.dom.get(c):c),c?(a.dom.setAttrib(c,"data-wpview-text",window.encodeURIComponent(d||"")),!0):!1}function g(a){a.stopPropagation()}function h(b){var c,d=a.dom;b!==j&&(i(),j=b,d.addClass(b,"selected"),c=d.create("div",{"class":"wpview-clipboard",contenteditable:"true"},e(b)),b.appendChild(c),a.dom.bind(c,"beforedeactivate focusin focusout",g),a.dom.bind(j,"beforedeactivate focusin focusout",g),a.getBody().focus(),a.selection.select(c,!0))}function i(){var b,c=a.dom;j&&(b=a.dom.select(".wpview-clipboard",j)[0],c.unbind(b),c.remove(b),c.unbind(j,"beforedeactivate focusin focusout click mouseup",g),c.removeClass(j,"selected"),a.selection.select(j.nextSibling),a.selection.collapse()),j=null}var j,k=tinymce.util.VK,l=tinymce.dom.TreeWalker,m=!1;if("undefined"!=typeof wp&&wp.mce)return a.on("BeforeAddUndo",function(a){j&&!m&&a.preventDefault()}),a.on("BeforeSetContent",function(a){a.content&&(a.content=wp.mce.views.toViews(a.content))}),a.on("SetContent",function(b){var e,f;"raw"!==b.format&&wp.mce.views.render(),(b.load||!b.set)&&(e=a.getBody(),c(e.lastChild)&&(f=d(),e.appendChild(f),a.selection.setCursorLocation(f,0)))}),a.on("click",function(b){var e,f,g,h,j,k=a.getBody(),l=a.getDoc(),m=l.documentElement.scrollTop||k.scrollTop||0;"HTML"!==b.target.nodeName||b.metaKey||b.ctrlKey||(g=k.firstChild,h=k.lastChild,e=b.clientX,f=b.clientY,c(g)&&(e<g.offsetLeft&&f<g.offsetHeight-m||f<g.offsetTop)?(j=d(),k.insertBefore(j,g)):c(h)&&(e>h.offsetLeft+h.offsetWidth||m+f-(h.offsetTop+h.offsetHeight)>0)&&(j=d(),k.appendChild(j)),j&&(i(),a.getBody().focus(),a.selection.setCursorLocation(j,0)))}),a.on("init",function(){var d=a.selection;a.on("BeforeSetContent",function(){var e,f,g=b(d.getNode());g&&(!g.nextSibling||c(g.nextSibling)?(f=a.getDoc().createTextNode(""),a.dom.insertAfter(f,g)):(e=new l(g.nextSibling,g.nextSibling),f=e.next()),d.select(f),d.collapse(!0))}),a.on("SetContent",function(a){if(a.context){var b=d.getNode();b.innerHTML&&(b.innerHTML=wp.mce.views.toViews(b.innerHTML))}}),a.dom.bind(a.getBody(),"mousedown mouseup click",function(c){var d=b(c.target);return d?(c.stopPropagation(),"click"===c.type&&(c.metaKey||c.ctrlKey||(a.dom.hasClass(c.target,"edit")?wp.mce.views.edit(d):a.dom.hasClass(c.target,"remove")&&a.dom.remove(d))),h(d),!1):void("click"===c.type&&i())})}),a.on("PreProcess",function(b){var c=a.dom;tinymce.each(c.select("p[data-wpview-pad]",b.node),function(a){c.isEmpty(a)?c.remove(a):c.setAttrib(a,"data-wpview-pad",null)}),tinymce.each(c.select("div[data-wpview-text]",b.node),function(a){"textContent"in a?a.textContent="":a.innerText="",c.replace(c.create("p",null,window.decodeURIComponent(c.getAttrib(a,"data-wpview-text"))),a)})}),a.on("keydown",function(e){var f,g,l=e.keyCode,n=a.getBody();if(j){if(e.metaKey||e.ctrlKey||l>=112&&123>=l)return void((e.metaKey||e.ctrlKey)&&88===l&&(m=j));if(f=b(a.selection.getNode()),f!==j)return void i();l===k.LEFT||l===k.UP?(i(),c(f.previousSibling)?h(f.previousSibling):null===f.previousSibling?(g=d(),n.insertBefore(g,n.firstChild),a.selection.setCursorLocation(n.firstChild,0)):(a.selection.select(f.previousSibling,!0),a.selection.collapse())):l===k.RIGHT||l===k.DOWN?(i(),c(f.nextSibling)?h(f.nextSibling):null===f.nextSibling?(g=d(),n.appendChild(g),a.selection.setCursorLocation(n.lastChild,0)):a.selection.setCursorLocation(f.nextSibling.firstChild,0)):(l===k.DELETE||l===k.BACKSPACE)&&a.dom.remove(j),e.preventDefault()}}),a.on("keydown",function(b){var d,e=b.keyCode,f=a.selection.getRng(),g=a.getBody();!f.collapsed||b.metaKey||b.ctrlKey||(e===k.LEFT||e===k.UP?(d=f.startContainer.parentNode===g?f.startContainer:f.startContainer.parentNode,0===f.startOffset&&c(d.previousSibling)&&(h(d.previousSibling),b.preventDefault())):(e===k.RIGHT||e===k.DOWN)&&(d=f.startContainer.parentNode===g?f.startContainer:f.startContainer.parentNode,(0===f.startOffset&&!f.endContainer.length||f.startOffset===f.endContainer.length)&&c(d.nextSibling)&&(h(d.nextSibling),b.preventDefault())))}),a.on("keyup",function(b){var e,f,g=b.keyCode,h=a.getBody();m&&(a.dom.remove(m),m=!1),(g===k.DELETE||g===k.BACKSPACE)&&(c(h.lastChild)&&(e=d(),h.appendChild(e),2===h.childNodes.length&&a.selection.setCursorLocation(e,0)),f=a.selection.getRng(),h.firstChild===f.startContainer&&f.collapsed===!0&&c(f.startContainer.nextSibling)&&0===f.startOffset&&a.dom.remove(f.startContainer))}),{getViewText:e,setViewText:f}});