TinyMCE: improve the way wpViews work. Add two paragraphs and capture the caret in them on clicking before/after/left/right of a view or moving the caret with the arrow keys, then show a "fake" caret.

This makes it much more "natural" to move the caret with the arrow keys and to add paragraphs before a view when it is the first element or after a view when it's last.

Props avryl, see #28595.

git-svn-id: https://develop.svn.wordpress.org/trunk@28994 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/js/mce-view.js

@@ -39,45 +39,47 @@ window.wp = window.wp || {};
 		getHtml: function() {},
 		render: function() {
 			this.setContent(
+				'<p class="wpview-selection-before">\u00a0</p>' +
+				'<div class="wpview-body" contenteditable="false">' +
 					'<div class="toolbar">' +
 						( _.isFunction( views[ this.type ].edit ) ? '<div class="dashicons dashicons-edit edit"></div>' : '' ) +
 						'<div class="dashicons dashicons-no-alt remove"></div>' +
 					'</div>' +
-				'<div class="wpview-content">' +
+					'<div class="wpview-content wpview-type-' + this.type + '">' +
 						this.getHtml() +
 					'</div>' +
 					( this.overlay ? '<div class="wpview-overlay"></div>' : '' ) +
-				// The <ins> is used to mark the end of the wrapper div (has to be the last child node).
+				'</div>' +
-				// Needed when comparing the content as string for preventing extra undo levels.
+				'<p class="wpview-selection-after">\u00a0</p>',
-				'<ins data-wpview-end="1"></ins>',
 				function( self, editor, node ) {
 					$( self ).trigger( 'ready', [ editor, node ] );
-				}
+				},
+				'wrap'
 			);
 		},
 		unbind: function() {},
-		setContent: function( html, callback, replace ) {
+		setContent: function( html, callback, option ) {
 			_.each( tinymce.editors, function( editor ) {
 				var self = this;
 				if ( editor.plugins.wpview ) {
 					$( editor.getBody() )
 					.find( '[data-wpview-text="' + this.encodedText + '"]' )
 					.each( function ( i, element ) {
-						var contentWrap = $( element ).children( '.wpview-content' ),
+						var contentWrap = $( element ).find( '.wpview-content' ),
 							wrap = element;
 
-						if ( contentWrap.length ) {
+						if ( contentWrap.length && option !== 'wrap' ) {
 							element = contentWrap = contentWrap[0];
 						}
 
 						if ( _.isString( html ) ) {
-							if ( replace ) {
+							if ( option === 'replace' ) {
 								element = editor.dom.replace( editor.dom.createFragment( html ), wrap );
 							} else {
 								editor.dom.setHTML( element, html );
 							}
 						} else {
-							if ( replace ) {
+							if ( option === 'replace' ) {
 								element = editor.dom.replace( html, wrap );
 							} else {
 								element.appendChild( html );
@@ -85,7 +87,7 @@ window.wp = window.wp || {};
 						}
 
 						if ( _.isFunction( callback ) ) {
-							callback( self, editor, $( element ).children( '.wpview-content' )[0] );
+							callback( self, editor, $( element ).find( '.wpview-content' )[0] );
 						}
 					} );
 				}
@@ -267,10 +269,9 @@ window.wp = window.wp || {};
 				tag: 'div',
 
 				attrs: {
-					'class': 'wpview-wrap wpview-type-' + viewType,
+					'class': 'wpview-wrap',
 					'data-wpview-text': encodedText,
-					'data-wpview-type': viewType,
+					'data-wpview-type': viewType
-					'contenteditable': 'false'
 				},
 
 				content: '\u00a0'
@@ -742,7 +743,7 @@ window.wp = window.wp || {};
 
 						self.setError( response.message, 'admin-media' );
 					} else {
-						self.setContent( '<p>' + self.original + '</p>', null, true );
+						self.setContent( '<p>' + self.original + '</p>', null, 'replace' );
 					}
 				} else if ( response && response.statusText ) {
 					self.setError( response.statusText, 'admin-media' );

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

@@ -4,41 +4,29 @@
  */
 tinymce.PluginManager.add( 'wpview', function( editor ) {
 	var selected,
+		Env = tinymce.Env,
 		VK = tinymce.util.VK,
 		TreeWalker = tinymce.dom.TreeWalker,
-		toRemove = false;
+		toRemove = false,
+		cursorInterval, lastKeyDownNode, setViewCursorTries;
 
-	function getParentView( node ) {
+	function getView( node ) {
-		while ( node && node.nodeName !== 'BODY' ) {
+		return editor.dom.getParent( node, function( node ) {
-			if ( isView( node ) ) {
+			return editor.dom.hasClass( node, 'wpview-wrap' );
-				return node;
+		});
-			}
-
-			node = node.parentNode;
-		}
-	}
-
-	function isView( node ) {
-		return node && /\bwpview-wrap\b/.test( node.className );
-	}
-
-	function createPadNode() {
-		return editor.dom.create( 'p', { 'data-wpview-pad': 1 },
-			( tinymce.Env.ie && tinymce.Env.ie < 11 ) ? '' : '<br data-mce-bogus="1" />' );
 	}
 
 	/**
 	 * Get the text/shortcode string for a view.
 	 *
-	 * @param view The view wrapper's HTML id or node
+	 * @param view The view wrapper's node
 	 * @returns string The text/shoercode string of the view
 	 */
 	function getViewText( view ) {
-		view = getParentView( typeof view === 'string' ? editor.dom.get( view ) : view );
+		if ( view = getView( view ) ) {
-
-		if ( view ) {
 			return window.decodeURIComponent( editor.dom.getAttrib( view, 'data-wpview-text' ) || '' );
 		}
+
 		return '';
 	}
 
@@ -49,12 +37,13 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 	 * @param text The text string to be set
 	 */
 	function setViewText( view, text ) {
-		view = getParentView( typeof view === 'string' ? editor.dom.get( view ) : view );
+		view = getView( view );
 
 		if ( view ) {
 			editor.dom.setAttrib( view, 'data-wpview-text', window.encodeURIComponent( text || '' ) );
 			return true;
 		}
+
 		return false;
 	}
 
@@ -62,6 +51,41 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 		event.stopPropagation();
 	}
 
+	function setViewCursor( before, view ) {
+		var location = before ? 'before' : 'after',
+			offset = before ? 0 : 1;
+		editor.selection.setCursorLocation( editor.dom.select( '.wpview-selection-' + location, view )[0], offset );
+		editor.nodeChanged();
+	}
+
+	function handleEnter( view, before ) {
+		var dom = editor.dom,
+			padNode;
+
+		if ( ! before && view.nextSibling && dom.isEmpty( view.nextSibling ) && view.nextSibling.nodeName === 'P' ) {
+			padNode = view.nextSibling;
+		} else if ( before && view.previousSibling && dom.isEmpty( view.previousSibling ) && view.previousSibling.nodeName === 'P' ) {
+			padNode = view.previousSibling;
+		} else {
+			padNode = dom.create( 'p' );
+
+			if ( ! ( Env.ie && Env.ie < 11 ) ) {
+				padNode.innerHTML = '<br data-mce-bogus="1">';
+			}
+
+			if ( before ) {
+				view.parentNode.insertBefore( padNode, view );
+			} else {
+				dom.insertAfter( padNode, view );
+			}
+		}
+
+		deselect();
+		editor.getBody().focus();
+		editor.selection.setCursorLocation( padNode, 0 );
+		editor.nodeChanged();
+	}
+
 	function select( viewNode ) {
 		var clipboard,
 			dom = editor.dom;
@@ -80,8 +104,7 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 			'contenteditable': 'true'
 		}, getViewText( viewNode ) );
 
-		// Prepend inside the wrapper
+		editor.dom.select( '.wpview-body', viewNode )[0].appendChild( clipboard );
-		viewNode.insertBefore( clipboard, viewNode.firstChild );
 
 		// Both of the following are necessary to prevent manipulating the selection/focus
 		dom.bind( clipboard, 'beforedeactivate focusin focusout', _stop );
@@ -116,27 +139,6 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 		selected = null;
 	}
 
-	function selectSiblingView( node, direction ) {
-		var body = editor.getBody(),
-			sibling = direction === 'previous' ? 'previousSibling' : 'nextSibling';
-
-		while ( node && node.parentNode !== body ) {
-			if ( node[sibling] ) {
-				// The caret will be in another element
-				return false;
-			}
-
-			node = node.parentNode;
-		}
-
-		if ( isView( node[sibling] ) ) {
-			select( node[sibling] );
-			return true;
-		}
-
-		return false;
-	}
-
 	// Check if the `wp.mce` API exists.
 	if ( typeof wp === 'undefined' || ! wp.mce ) {
 		return;
@@ -144,9 +146,13 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 
 	// Remove the content of view wrappers from HTML string
 	function emptyViews( content ) {
-		return content.replace(/(<div[^>]+wpview-wrap[^>]+>)[\s\S]+?data-wpview-end[^>]*><\/ins><\/div>/g, '$1</div>' );
+		return content.replace(/<div[^>]+data-wpview-text=\"([^"]+)"[^>]*>[\s\S]+?wpview-selection-after[^>]+>(?:&nbsp;|\u00a0)*<\/p><\/div>/g, '$1' );
 	}
 	
+	window.emptyViews = function() {
+		return emptyViews( editor.getContent({format : 'raw'}) );
+	};
+
 	// Prevent adding undo levels on changes inside a view wrapper
 	editor.on( 'BeforeAddUndo', function( event ) {
 		if ( event.lastLevel && emptyViews( event.level.content ) === emptyViews( event.lastLevel.content ) ) {
@@ -181,77 +187,61 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 
 	// When the editor's content has been updated and the DOM has been
 	// processed, render the views in the document.
-	editor.on( 'SetContent', function( event ) {
+	editor.on( 'SetContent', function() {
-		var body, padNode;
-
 		wp.mce.views.render();
-
-		// Add padding <p> if the noneditable node is last
-		if ( event.load || ! event.set ) {
-			body = editor.getBody();
-
-			if ( isView( body.lastChild ) ) {
-				padNode = createPadNode();
-				body.appendChild( padNode );
-
-				if ( ! event.initial ) {
-					editor.selection.setCursorLocation( padNode, 0 );
-				}
-			}
-		}
 	});
 
-	// Detect mouse down events that are adjacent to a view when a view is the first view or the last view
+	// Set the cursor before or after a view when clicking next to it.
 	editor.on( 'click', function( event ) {
-		var body = editor.getBody(),
+		var x = event.clientX,
-			doc = editor.getDoc(),
+			y = event.clientY,
-			scrollTop = doc.documentElement.scrollTop || body.scrollTop || 0,
+			body = editor.getBody(),
-			x, y, firstNode, lastNode, padNode;
+			bodyRect = body.getBoundingClientRect(),
+			first = body.firstChild,
+			firstRect = first.getBoundingClientRect(),
+			last = body.lastChild,
+			lastRect = last.getBoundingClientRect(),
+			view;
 
-		if ( event.target.nodeName === 'HTML' && ! event.metaKey && ! event.ctrlKey ) {
+		if ( y < firstRect.top && ( view = getView( first ) ) ) {
-			firstNode = body.firstChild;
+			setViewCursor( true, view );
-			lastNode = body.lastChild;
+			event.preventDefault();
-			x = event.clientX;
+		} else if ( y > lastRect.bottom && ( view = getView( last ) ) ) {
-			y = event.clientY;
+			setViewCursor( false, view );
+			event.preventDefault();
+		} else {
+			tinymce.each( editor.dom.select( '.wpview-wrap' ), function( view ) {
+				var rect = view.getBoundingClientRect();
 
-			// Detect clicks above or to the left if the first node is a wpview
+				if ( y >= rect.top && y <= rect.bottom ) {
-			if ( isView( firstNode ) && ( ( x < firstNode.offsetLeft && y < ( firstNode.offsetHeight - scrollTop ) ) ||
+					if ( x < bodyRect.left ) {
-				y < firstNode.offsetTop ) ) {
+						setViewCursor( true, view );
-
+						event.preventDefault();
-				padNode = createPadNode();
+					} else if ( x > bodyRect.right ) {
-				body.insertBefore( padNode, firstNode );
+						setViewCursor( false, view );
-
+						event.preventDefault();
-			// Detect clicks to the right and below the last view
-			} else if ( isView( lastNode ) && ( x > ( lastNode.offsetLeft + lastNode.offsetWidth ) ||
-				( ( scrollTop + y ) - ( lastNode.offsetTop + lastNode.offsetHeight ) ) > 0 ) ) {
-
-				padNode = createPadNode();
-				body.appendChild( padNode );
 					}
-
+					return;
-			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.on( 'init', function() {
 		var selection = editor.selection;
+
 		// When a view is selected, ensure content that is being pasted
 		// or inserted is added to a text node (instead of the view).
 		editor.on( 'BeforeSetContent', function() {
 			var walker, target,
-				view = getParentView( selection.getNode() );
+				view = getView( selection.getNode() );
 
 			// If the selection is not within a view, bail.
 			if ( ! view ) {
 				return;
 			}
 
-			if ( ! view.nextSibling || isView( view.nextSibling ) ) {
+			if ( ! view.nextSibling || getView( view.nextSibling ) ) {
 				// If there are no additional nodes or the next node is a
 				// view, create a text node after the current view.
 				target = editor.getDoc().createTextNode('');
@@ -267,9 +257,7 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 			selection.collapse( true );
 		});
 
-		// When the selection's content changes, scan any new content
+		// When the selection's content changes, scan any new content for matching views.
-		// for matching views.
-		//
 		// Runs on paste and on inserting nodes/html.
 		editor.on( 'SetContent', function( e ) {
 			if ( ! e.context ) {
@@ -286,7 +274,7 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 		});
 
 		editor.dom.bind( editor.getBody().parentNode, 'mousedown mouseup click', function( event ) {
-			var view = getParentView( event.target ),
+			var view = getView( event.target ),
 				deselectEventType;
 
 			// Contain clicks inside the view wrapper
@@ -294,7 +282,7 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 				event.stopPropagation();
 
 				// Hack to try and keep the block resize handles from appearing. They will show on mousedown and then be removed on mouseup.
-				if ( tinymce.Env.ie <= 10 ) {
+				if ( Env.ie <= 10 ) {
 					deselect();
 				}
 
@@ -307,14 +295,14 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 						editor.dom.remove( view );
 					}
 				}
+
 				// Returning false stops the ugly bars from appearing in IE11 and stops the view being selected as a range in FF.
 				// Unfortunately, it also inhibits the dragging of views to a new location.
 				return false;
 			} else {
-
 				// Fix issue with deselecting a view in IE8. Without this hack, clicking content above the view wouldn't actually deselect it
 				// and the caret wouldn't be placed at the mouse location
-				if ( tinymce.Env.ie && tinymce.Env.ie <= 8 ) {
+				if ( Env.ie && Env.ie <= 8 ) {
 					deselectEventType = 'mouseup';
 				} else {
 					deselectEventType = 'mousedown';
@@ -328,19 +316,8 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 	});
 
 	editor.on( 'PreProcess', function( event ) {
-		var dom = editor.dom;
-
-		// Remove empty padding nodes
-		tinymce.each( dom.select( 'p[data-wpview-pad]', event.node ), function( node ) {
-			if ( dom.isEmpty( node ) ) {
-				dom.remove( node );
-			} else {
-				dom.setAttrib( node, 'data-wpview-pad', null );
-			}
-		});
-
 		// Replace the wpview node with the wpview string/shortcode?
-		tinymce.each( dom.select( 'div[data-wpview-text]', event.node ), function( node ) {
+		tinymce.each( editor.dom.select( 'div[data-wpview-text]', event.node ), function( node ) {
 			// Empty the wrap node
 			if ( 'textContent' in node ) {
 				node.textContent = '\u00a0';
@@ -361,10 +338,108 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 		}
 	});
 
+	// (De)select views when arrow keys are used to navigate the content of the editor.
 	editor.on( 'keydown', function( event ) {
+		if ( event.metaKey || event.ctrlKey || ( keyCode >= 112 && keyCode <= 123 ) ) {
+			return;
+		}
+
+		if ( selected ) {
+			return;
+		}
+
 		var keyCode = event.keyCode,
-			body = editor.getBody(),
+			dom = editor.dom,
-			view, padNode;
+			selection = editor.selection,
+			node = selection.getNode(),
+			view = getView( node ),
+			cursorBefore, cursorAfter;
+
+		lastKeyDownNode = node;
+
+		if ( ! view ) {
+			return;
+		}
+
+		if ( ! ( ( cursorBefore = dom.hasClass( view, 'wpview-selection-before' ) ) ||
+				( cursorAfter = dom.hasClass( view, 'wpview-selection-after' ) ) ) ) {
+			return;
+		}
+
+		if ( ( cursorAfter && keyCode === VK.UP ) || ( cursorBefore && keyCode === VK.BACKSPACE ) ) {
+			if ( view.previousSibling ) {
+				if ( getView( view.previousSibling ) ) {
+					setViewCursor( false, view.previousSibling );
+				} else {
+					if ( dom.isEmpty( view.previousSibling ) && keyCode === VK.BACKSPACE ) {
+						dom.remove( view.previousSibling );
+					} else {
+						selection.select( view.previousSibling, true );
+						selection.collapse();
+					}
+				}
+			} else {
+				handleEnter( view, true );
+			}
+			event.preventDefault();
+		} else if ( cursorAfter && ( keyCode === VK.DOWN || keyCode === VK.RIGHT ) ) {
+			if ( view.nextSibling ) {
+				if ( getView( view.nextSibling ) ) {
+					setViewCursor( false, view.nextSibling );
+				} else {
+					selection.setCursorLocation( view.nextSibling, 0 );
+				}
+			} else {
+				handleEnter( view );
+			}
+			event.preventDefault();
+		} else if ( cursorBefore && ( keyCode === VK.UP || keyCode ===  VK.LEFT ) ) {
+			if ( view.previousSibling ) {
+				if ( getView( view.previousSibling ) ) {
+					setViewCursor( true, view.previousSibling );
+				} else {
+					selection.select( view.previousSibling, true );
+					selection.collapse();
+				}
+			} else {
+				handleEnter( view, true );
+			}
+			event.preventDefault();
+		} else if ( cursorBefore && keyCode === VK.DOWN ) {
+			if ( view.nextSibling ) {
+				if ( getView( view.nextSibling ) ) {
+					setViewCursor( true, view.nextSibling );
+				} else {
+					selection.setCursorLocation( view.nextSibling, 0 );
+				}
+			} else {
+				handleEnter( view );
+			}
+			event.preventDefault();
+		} else if ( ( cursorAfter && keyCode === VK.LEFT ) || ( cursorBefore && keyCode === VK.RIGHT ) ) {
+			select( view );
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		} else if ( cursorAfter && keyCode === VK.BACKSPACE ) {
+			dom.remove( view );
+			event.preventDefault();
+		} else if ( cursorAfter ) {
+			handleEnter( view );
+		} else if ( cursorBefore ) {
+			handleEnter( view , true);
+		}
+
+		if ( keyCode === VK.ENTER ) {
+			event.preventDefault();
+		}
+	});
+
+	// Handle key presses for selected views.
+	editor.on( 'keydown', function( event ) {
+		var dom = editor.dom,
+			keyCode = event.keyCode,
+			selection = editor.selection,
+			view;
 
 		// If a view isn't selected, let the event go on its merry way.
 		if ( ! selected ) {
@@ -374,144 +449,115 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 		// Let key presses that involve the command or control keys through.
 		// Also, let any of the F# keys through.
 		if ( event.metaKey || event.ctrlKey || ( keyCode >= 112 && keyCode <= 123 ) ) {
-			if ( ( event.metaKey || event.ctrlKey ) && keyCode === 88 ) {
+			// But remove the view when cmd/ctrl + x/backspace are pressed.
+			if ( ( event.metaKey || event.ctrlKey ) && ( keyCode === 88 || keyCode === VK.BACKSPACE ) ) {
+				// We'll remove a cut view on keyup, otherwise the browser can't copy the content.
+				if ( keyCode === 88 ) {
 					toRemove = selected;
+				} else {
+					editor.dom.remove( selected );
+				}
 			}
 			return;
 		}
 
-		view = getParentView( editor.selection.getNode() );
+		view = getView( selection.getNode() );
 
-		// If the caret is not within the selected view, deselect the
+		// If the caret is not within the selected view, deselect the view and bail.
-		// view and bail.
 		if ( view !== selected ) {
 			deselect();
 			return;
 		}
 
-		// Deselect views with the arrow keys
 		if ( keyCode === VK.LEFT || keyCode === VK.UP ) {
+			setViewCursor( true, view );
 			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 ) {
-				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 ) {
+			setViewCursor( false, view );
 			deselect();
-			// Handle case where the next node is another wpview
+		} else if ( keyCode === VK.ENTER ) {
-			if ( isView( view.nextSibling ) ) {
+			handleEnter( view );
-				select( view.nextSibling );
-			// Handle case were the view is that last node
-			} else if ( ! view.nextSibling ) {
-				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, 0 );
-			}
 		} else if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
-			// If delete or backspace is pressed, delete the view.
+			dom.remove( selected );
-			editor.dom.remove( selected );
 		}
 
 		event.preventDefault();
 	});
 
-	// Select views when arrow keys are used to navigate the content of the editor.
+	// Make sure we don't eat any content.
 	editor.on( 'keydown', function( event ) {
-		var keyCode = event.keyCode,
+		var selection = editor.selection,
-			dom = editor.dom,
+			node, range, view;
-			range = editor.selection.getRng(),
-			startNode = range.startContainer,
-			body = editor.getBody(),
-			node, container;
 
-		if ( ! startNode || startNode === body || event.metaKey || event.ctrlKey ) {
+		if ( event.keyCode === VK.BACKSPACE ) {
-			return;
+			node = selection.getNode();
-		}
 
-		if ( keyCode === VK.UP || keyCode === VK.LEFT ) {
+			if ( editor.dom.isEmpty( node ) ) {
-			if ( keyCode === VK.LEFT && ( ! range.collapsed || range.startOffset !== 0 ) ) {
+				if ( view = getView( node.previousSibling ) ) {
-				// Not at the beginning of the current range
+					setViewCursor( false, view );
-				return;
+					editor.dom.remove( node );
-			}
-
-			if ( ! ( node = dom.getParent( startNode, dom.isBlock ) ) ) {
-				return;
-			}
-
-			if ( selectSiblingView( node, 'previous' ) ) {
 					event.preventDefault();
 				}
-		} else if ( keyCode === VK.DOWN || keyCode === VK.RIGHT ) {
+			} else if ( ( range = selection.getRng() ) &&
-			if ( ! ( node = dom.getParent( startNode, dom.isBlock ) ) ) {
+					range.startOffset === 0 &&
-				return;
+					range.endOffset === 0 &&
-			}
+					( view = getView( node.previousSibling ) ) ) {
-
+				setViewCursor( false, view );
-			if ( keyCode === VK.RIGHT ) {
-				container = range.endContainer;
-
-				if ( ! range.collapsed || ( range.startOffset === 0 && container.length ) ||
-					container.nextSibling ||
-					( container.nodeType === 3 && range.startOffset !== container.length ) ) { // Not at the end of the current range
-
-					return;
-				}
-
-				// In a child element
-				while ( container && container !== node && container !== body ) {
-					if ( container.nextSibling ) {
-						return;
-					}
-					container = container.parentNode;
-				}
-			}
-
-			if ( selectSiblingView( node, 'next' ) ) {
 				event.preventDefault();
 			}
 		}
 	});
 
-	editor.on( 'keyup', function( event ) {
+	editor.on( 'keyup', function() {
-		var padNode,
-			keyCode = event.keyCode,
-			body = editor.getBody(),
-			range;
-
 		if ( toRemove ) {
 			editor.dom.remove( toRemove );
 			toRemove = false;
 		}
+	});
 
-		if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
+	editor.on( 'nodechange', function( event ) {
-			// Make sure there is padding if the last element is a view
+		var dom = editor.dom,
-			if ( isView( body.lastChild ) ) {
+			views = editor.dom.select( '.wpview-wrap' ),
-				padNode = createPadNode();
+			className = event.element.className,
-				body.appendChild( padNode );
+			view = getView( event.element ),
+			lKDN = lastKeyDownNode;
 
-				if ( body.childNodes.length === 2 ) {
+		lastKeyDownNode = false;
-					editor.selection.setCursorLocation( padNode, 0 );
+
-				}
+		clearInterval( cursorInterval );
+
+		dom.removeClass( views, 'wpview-selection-before' );
+		dom.removeClass( views, 'wpview-selection-after' );
+		dom.removeClass( views, 'wpview-cursor-hide' );
+
+		if ( view ) {
+			if ( className === 'wpview-selection-before' || className === 'wpview-selection-after' ) {
+				setViewCursorTries = 0;
+
+				// Make sure the cursor arrived in the right node.
+				// This is necessary for Firefox.
+				if ( lKDN === view.previousSibling ) {
+					setViewCursor( true, view );
+					return;
+				} else if ( lKDN === view.nextSibling ) {
+					setViewCursor( false, view );
+					return;
 				}
 
-			range = editor.selection.getRng();
+				dom.addClass( view, className );
 
-			// Allow an initial element in the document to be removed when it is before a view
+				cursorInterval = setInterval( function() {
-			if ( body.firstChild === range.startContainer && range.collapsed === true &&
+					if ( dom.hasClass( view, 'wpview-cursor-hide' ) ) {
-					isView( range.startContainer.nextSibling ) && range.startOffset === 0 ) {
+						dom.removeClass( view, 'wpview-cursor-hide' );
-
+					} else {
-				editor.dom.remove( range.startContainer );
+						dom.addClass( view, 'wpview-cursor-hide' );
+					}
+				}, 500 );
+			// If the cursor happens to be anywhere around the view, then set the cursor properly.
+			// Only try this once to prevent a loop. (You never know.)
+			} else if ( ! selected && ! setViewCursorTries ) {
+				setViewCursorTries++;
+				setViewCursor( true, view );
 			}
 		}
 	});

src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -210,7 +210,8 @@ audio {
 }
 
 /* hide the shortcode content, but allow the content to still be selected */
-.wpview-wrap .wpview-clipboard {
+.wpview-wrap .wpview-clipboard,
+.wpview-wrap > p {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -225,14 +226,47 @@ audio {
 	height: 1px;
 }
 
+/* An ugly box will appear when this is focussed in IE, so we'll move it outside the window. */
+.wpview-wrap.wpview-selection-before > p,
+.wpview-wrap.wpview-selection-after > p {
+	left: -10000px;
+}
+
 .wpview-wrap .wpview-clipboard,
-.wpview-wrap .wpview-clipboard * {
+.wpview-wrap .wpview-clipboard *,
+.wpview-wrap > p {
 	-moz-user-select: text;
 	-webkit-user-select: text;
 	-ms-user-select: text;
 	user-select: text;
 }
 
+.wpview-wrap.wpview-selection-before:before,
+.wpview-wrap.wpview-selection-after:before {
+	content: '';
+	margin: 0;
+	padding: 0;
+	position: absolute;
+	top: -2px;
+	left: -3px;
+	bottom: -2px;
+	width: 1px;
+	background-color: black;
+	-webkit-transition: opacity 0.15s ease-out;
+	-moz-transition: opacity 0.15s ease-out;
+	transition: opacity 0.15s ease-out;
+	opacity: 1;
+}
+
+.wpview-wrap.wpview-selection-after:before {
+	left: auto;
+	right: -3px;
+}
+
+.wpview-wrap.wpview-cursor-hide:before {
+	opacity: 0;
+}
+
 /**
  * Media previews
  */
@@ -348,16 +382,16 @@ audio {
 }
 
 /* Audio player is short; therefore let's put the toolbar above */
-.wpview-type-audio .toolbar {
+.wpview-wrap[data-wpview-type="audio"] .toolbar {
 	top: auto;
 	bottom: -34px;
 }
 
-.wpview-type-audio .toolbar div {
+.wpview-wrap[data-wpview-type="audio"] .toolbar div {
 	margin-top: 0;
 }
 
-.wpview-type-audio .toolbar div:first-child {
+.wpview-wrap[data-wpview-type="audio"] .toolbar div:first-child {
 	margin-left: 0;
 }