wpView:
- 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:
parent
c8ecc9f07a
commit
41c747f4c1
|
@ -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 delete or backspace is pressed, delete the view.
|
if ( keyCode === VK.LEFT || keyCode === VK.UP ) {
|
||||||
if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
|
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.
|
||||||
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,
|
||||||
|
|
|
@ -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}});
|
Binary file not shown.
Loading…
Reference in New Issue