TinyMCE wpView:

- Typing something replaces a selected view.
- Pressing backspace deletes the selection.
- Pressing enter also deletes the selection.
- Pasting something replaces the selection.
- Also merge the different 'keydown' handlers.
Props avryl, fixes #28913.
Built from https://develop.svn.wordpress.org/trunk@29236


git-svn-id: http://core.svn.wordpress.org/trunk@29020 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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

@@ -76,7 +76,7 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 		editor.nodeChanged();
 	}
 
-	function handleEnter( view, before, keyCode ) {
+	function handleEnter( view, before, key ) {
 		var dom = editor.dom,
 			padNode = dom.create( 'p' );
 
@@ -92,7 +92,7 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 
 		deselect();
 
-		if ( before && keyCode === VK.ENTER ) {
+		if ( before && key === VK.ENTER ) {
 			setViewCursor( before, view );
 		} else {
 			editor.selection.setCursorLocation( padNode, 0 );
@@ -336,23 +336,87 @@ 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 ) ) {
+		var key = event.keyCode,
-			return;
-		}
-
-		if ( selected ) {
-			return;
-		}
-
-		var keyCode = event.keyCode,
 			dom = editor.dom,
 			selection = editor.selection,
-			node = selection.getNode(),
+			node, view, cursorBefore, cursorAfter,
-			view = getView( node ),
+			range, clonedRange, tempRange, remove;
-			cursorBefore, cursorAfter,
-			range, clonedRange, tempRange;
 
+		if ( selected ) {
+			// Let key presses that involve the command or control keys through.
+			// Also, let any of the F# keys through.
+			if ( event.metaKey || event.ctrlKey || ( key >= 112 && key <= 123 ) ) {
+				// But remove the view when cmd/ctrl + x/backspace are pressed.
+				if ( ( event.metaKey || event.ctrlKey ) && ( key === 88 || key === VK.BACKSPACE ) ) {
+					// We'll remove a cut view on keyup, otherwise the browser can't copy the content.
+					if ( key === 88 ) {
+						toRemove = selected;
+					} else {
+						editor.dom.remove( selected );
+					}
+				}
+				return;
+			}
+
+			view = getView( selection.getNode() );
+
+			// If the caret is not within the selected view, deselect the view and bail.
+			if ( view !== selected ) {
+				deselect();
+				return;
+			}
+
+			if ( key === VK.LEFT ) {
+				setViewCursor( true, view );
+				event.preventDefault();
+			} else if ( key === VK.UP ) {
+				if ( view.previousSibling ) {
+					if ( getView( view.previousSibling ) ) {
+						setViewCursor( true, view.previousSibling );
+					} else {
+						deselect();
+						selection.select( view.previousSibling, true );
+						selection.collapse();
+					}
+				} else {
+					setViewCursor( true, view );
+				}
+				event.preventDefault();
+			} else if ( key === VK.RIGHT ) {
+				setViewCursor( false, view );
+				event.preventDefault();
+			} else if ( key === VK.DOWN ) {
+				if ( view.nextSibling ) {
+					if ( getView( view.nextSibling ) ) {
+						setViewCursor( false, view.nextSibling );
+					} else {
+						deselect();
+						selection.setCursorLocation( view.nextSibling, 0 );
+					}
+				} else {
+					setViewCursor( false, view );
+				}
+				event.preventDefault();
+			// Ignore keys that don't insert anything.
+			} else if ( ( key > 47 || VK.SPACEBAR || key === VK.ENTER || key === VK.DELETE || key === VK.BACKSPACE ) && key !== 144 && key !== 145 ) {
+				editor.undoManager.transact( function() {
+					remove = selected;
+					handleEnter( selected );
+					dom.remove( remove );
+				});
+
+				if ( key === VK.ENTER || key === VK.DELETE || key === VK.BACKSPACE ) {
+					event.preventDefault();
+				}
+			}
+		} else {
+			if ( event.metaKey || event.ctrlKey || ( key >= 112 && key <= 123 ) ) {
+				return;
+			}
+
+			node = selection.getNode();
 			lastKeyDownNode = node;
+			view = getView( node );
 
 			// Make sure we don't delete part of a view.
 			// If the range ends or starts with the view, we'll need to trim it.
@@ -373,6 +437,25 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 				}
 			}
 
+			// Make sure we don't eat any content.
+			if ( event.keyCode === VK.BACKSPACE ) {
+				if ( editor.dom.isEmpty( node ) ) {
+					if ( view = getView( node.previousSibling ) ) {
+						setViewCursor( false, view );
+						editor.dom.remove( node );
+						event.preventDefault();
+						return;
+					}
+				} else if ( ( range = selection.getRng() ) &&
+						range.startOffset === 0 &&
+						range.endOffset === 0 &&
+						( view = getView( node.previousSibling ) ) ) {
+					setViewCursor( false, view );
+					event.preventDefault();
+					return;
+				}
+			}
+
 			if ( ! view ) {
 				return;
 			}
@@ -382,12 +465,12 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 				return;
 			}
 
-		if ( ( cursorAfter && keyCode === VK.UP ) || ( cursorBefore && keyCode === VK.BACKSPACE ) ) {
+			if ( ( cursorAfter && key === VK.UP ) || ( cursorBefore && key === VK.BACKSPACE ) ) {
 				if ( view.previousSibling ) {
 					if ( getView( view.previousSibling ) ) {
 						setViewCursor( false, view.previousSibling );
 					} else {
-					if ( dom.isEmpty( view.previousSibling ) && keyCode === VK.BACKSPACE ) {
+						if ( dom.isEmpty( view.previousSibling ) && key === VK.BACKSPACE ) {
 							dom.remove( view.previousSibling );
 						} else {
 							selection.select( view.previousSibling, true );
@@ -398,26 +481,26 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 					setViewCursor( true, view );
 				}
 				event.preventDefault();
-		} else if ( cursorAfter && ( keyCode === VK.DOWN || keyCode === VK.RIGHT ) ) {
+			} else if ( cursorAfter && ( key === VK.DOWN || key === VK.RIGHT ) ) {
 				if ( view.nextSibling ) {
 					if ( getView( view.nextSibling ) ) {
-					setViewCursor( keyCode === VK.RIGHT, view.nextSibling );
+						setViewCursor( key === VK.RIGHT, view.nextSibling );
 					} else {
 						selection.setCursorLocation( view.nextSibling, 0 );
 					}
 				}
 				event.preventDefault();
-		} else if ( cursorBefore && ( keyCode === VK.UP || keyCode ===  VK.LEFT ) ) {
+			} else if ( cursorBefore && ( key === VK.UP || key ===  VK.LEFT ) ) {
 				if ( view.previousSibling ) {
 					if ( getView( view.previousSibling ) ) {
-					setViewCursor( keyCode === VK.UP, view.previousSibling );
+						setViewCursor( key === VK.UP, view.previousSibling );
 					} else {
 						selection.select( view.previousSibling, true );
 						selection.collapse();
 					}
 				}
 				event.preventDefault();
-		} else if ( cursorBefore && keyCode === VK.DOWN ) {
+			} else if ( cursorBefore && key === VK.DOWN ) {
 				if ( view.nextSibling ) {
 					if ( getView( view.nextSibling ) ) {
 						setViewCursor( true, view.nextSibling );
@@ -428,115 +511,22 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 					setViewCursor( false, view );
 				}
 				event.preventDefault();
-		} else if ( ( cursorAfter && keyCode === VK.LEFT ) || ( cursorBefore && keyCode === VK.RIGHT ) ) {
+			} else if ( ( cursorAfter && key === VK.LEFT ) || ( cursorBefore && key === VK.RIGHT ) ) {
 				select( view );
 				event.preventDefault();
-			event.stopImmediatePropagation();
+			} else if ( cursorAfter && key === VK.BACKSPACE ) {
-		} else if ( cursorAfter && keyCode === VK.BACKSPACE ) {
+				editor.undoManager.transact( function() {
+					handleEnter( view );
 					dom.remove( view );
+				});
 				event.preventDefault();
 			} else if ( cursorAfter ) {
 				handleEnter( view );
 			} else if ( cursorBefore ) {
-			handleEnter( view , true, keyCode );
+				handleEnter( view , true, key );
 			}
 
-		if ( keyCode === VK.ENTER ) {
+			if ( key === 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 ) {
-			return;
-		}
-
-		// 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 ) ) {
-			// 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 = getView( 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 ) {
-			setViewCursor( true, view );
-		} else if ( keyCode === VK.UP ) {
-			if ( view.previousSibling ) {
-				if ( getView( view.previousSibling ) ) {
-					setViewCursor( true, view.previousSibling );
-				} else {
-					deselect();
-					selection.select( view.previousSibling, true );
-					selection.collapse();
-				}
-			} else {
-				setViewCursor( true, view );
-			}
-
-		} else if ( keyCode === VK.RIGHT ) {
-			setViewCursor( false, view );
-		} else if ( keyCode === VK.DOWN ) {
-			if ( view.nextSibling ) {
-				if ( getView( view.nextSibling ) ) {
-					setViewCursor( false, view.nextSibling );
-				} else {
-					deselect();
-					selection.setCursorLocation( view.nextSibling, 0 );
-				}
-			} else {
-				setViewCursor( false, view );
-			}
-		} else if ( keyCode === VK.ENTER ) {
-			handleEnter( view );
-		} else if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
-			dom.remove( selected );
-		}
-
-		event.preventDefault();
-	});
-
-	// Make sure we don't eat any content.
-	editor.on( 'keydown', function( event ) {
-		var selection = editor.selection,
-			node, range, view;
-
-		if ( event.keyCode === VK.BACKSPACE ) {
-			node = selection.getNode();
-
-			if ( editor.dom.isEmpty( node ) ) {
-				if ( view = getView( node.previousSibling ) ) {
-					setViewCursor( false, view );
-					editor.dom.remove( node );
-					event.preventDefault();
-				}
-			} else if ( ( range = selection.getRng() ) &&
-					range.startOffset === 0 &&
-					range.endOffset === 0 &&
-					( view = getView( node.previousSibling ) ) ) {
-				setViewCursor( false, view );
 				event.preventDefault();
 			}
 		}
@@ -580,9 +570,12 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 
 		clearInterval( cursorInterval );
 
-		dom.removeClass( views, 'wpview-selection-before' );
+		// This runs a lot and is faster than replacing each class separately
-		dom.removeClass( views, 'wpview-selection-after' );
+		tinymce.each( views, function ( view ) {
-		dom.removeClass( views, 'wpview-cursor-hide' );
+			if ( view.className ) {
+				view.className = view.className.replace( / ?\bwpview-(?:selection-before|selection-after|cursor-hide)\b/g, '' );
+			}
+		});
 
 		if ( focus ) {
 			if ( view ) {