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

wp-includes/js/tinymce/plugins/wpview/plugin.js

@@ -86,6 +86,11 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 		editor.dom.bind( clipboard, '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
 		editor.selection.select( clipboard, true );
 	}
@@ -156,8 +161,6 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 				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
@@ -188,6 +191,9 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 			}
 
 			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 );
 			}
 		}
@@ -298,7 +304,8 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 
 	editor.on( 'keydown', function( event ) {
 		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 ( ! selected ) {
@@ -314,23 +321,81 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 			return;
 		}
 
-		// If the caret is not within the selected view, deselect the
-		// view and bail.
 		view = getParentView( editor.selection.getNode() );
 
+		// If the caret is not within the selected view, deselect the
+		// view and bail.
 		if ( view !== selected ) {
 			deselect();
 			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 ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
 			editor.dom.remove( selected );
 		}
 
 		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 ) {
 		var padNode,
 			keyCode = event.keyCode,

wp-includes/js/tinymce/plugins/wpview/plugin.min.js

@@ -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}});