@wordpress/block-editor 8.4.0 → 8.5.2

package/src/components/writing-flow/use-arrow-nav.js

@@ -16,7 +16,7 @@ import {
 	isRTL,
 } from '@wordpress/dom';
 import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
@@ -120,16 +120,12 @@ export function getClosestTabbable(
 export default function useArrowNav() {
 	const {
 		getSelectedBlockClientId,
-		getMultiSelectedBlocksStartClientId,
 		getMultiSelectedBlocksEndClientId,
 		getPreviousBlockClientId,
 		getNextBlockClientId,
-		getFirstMultiSelectedBlockClientId,
-		getLastMultiSelectedBlockClientId,
 		getSettings,
 		hasMultiSelection,
 	} = useSelect( blockEditorStore );
-	const { multiSelect, selectBlock } = useDispatch( blockEditorStore );
 	return useRefEffect( ( node ) => {
 		// Here a DOMRect is stored while moving the caret vertically so
 		// vertical position of the start position can be restored. This is to
@@ -140,44 +136,6 @@ export default function useArrowNav() {
 			verticalRect = null;
 		}
 
-		function expandSelection( isReverse ) {
-			const selectedBlockClientId = getSelectedBlockClientId();
-			const selectionStartClientId = getMultiSelectedBlocksStartClientId();
-			const selectionEndClientId = getMultiSelectedBlocksEndClientId();
-			const selectionBeforeEndClientId = getPreviousBlockClientId(
-				selectionEndClientId || selectedBlockClientId
-			);
-			const selectionAfterEndClientId = getNextBlockClientId(
-				selectionEndClientId || selectedBlockClientId
-			);
-			const nextSelectionEndClientId = isReverse
-				? selectionBeforeEndClientId
-				: selectionAfterEndClientId;
-
-			if ( nextSelectionEndClientId ) {
-				if ( selectionStartClientId === nextSelectionEndClientId ) {
-					selectBlock( nextSelectionEndClientId );
-				} else {
-					multiSelect(
-						selectionStartClientId || selectedBlockClientId,
-						nextSelectionEndClientId
-					);
-				}
-			}
-		}
-
-		function moveSelection( isReverse ) {
-			const selectedFirstClientId = getFirstMultiSelectedBlockClientId();
-			const selectedLastClientId = getLastMultiSelectedBlockClientId();
-			const focusedBlockClientId = isReverse
-				? selectedFirstClientId
-				: selectedLastClientId;
-
-			if ( focusedBlockClientId ) {
-				selectBlock( focusedBlockClientId );
-			}
-		}
-
 		/**
 		 * Returns true if the given target field is the last in its block which
 		 * can be considered for tab transition. For example, in a block with
@@ -218,12 +176,6 @@ export default function useArrowNav() {
 			const { defaultView } = ownerDocument;
 
 			if ( hasMultiSelection() ) {
-				if ( isNav ) {
-					const action = isShift ? expandSelection : moveSelection;
-					action( isReverse );
-					event.preventDefault();
-				}
-
 				return;
 			}
 
@@ -278,10 +230,9 @@ export default function useArrowNav() {
 					isTabbableEdge( target, isReverse ) &&
 					isNavEdge( target, isReverse )
 				) {
-					// Shift key is down, and there is multi selection or we're
-					// at the end of the current block.
-					expandSelection( isReverse );
-					event.preventDefault();
+					node.contentEditable = true;
+					// Firefox doesn't automatically move focus.
+					node.focus();
 				}
 			} else if (
 				isVertical &&

package/src/components/writing-flow/use-click-selection.js

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { getBlockClientId } from '../../utils/dom';
+
+export default function useClickSelection() {
+	const { multiSelect, selectBlock } = useDispatch( blockEditorStore );
+	const {
+		isSelectionEnabled,
+		getBlockParents,
+		getBlockSelectionStart,
+		hasMultiSelection,
+	} = useSelect( blockEditorStore );
+	return useRefEffect(
+		( node ) => {
+			function onMouseDown( event ) {
+				// The main button.
+				// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+				if ( ! isSelectionEnabled() || event.button !== 0 ) {
+					return;
+				}
+
+				const startClientId = getBlockSelectionStart();
+				const clickedClientId = getBlockClientId( event.target );
+
+				if ( event.shiftKey ) {
+					if ( startClientId !== clickedClientId ) {
+						node.contentEditable = true;
+						// Firefox doesn't automatically move focus.
+						node.focus();
+					}
+				} else if ( hasMultiSelection() ) {
+					// Allow user to escape out of a multi-selection to a
+					// singular selection of a block via click. This is handled
+					// here since focus handling excludes blocks when there is
+					// multiselection, as focus can be incurred by starting a
+					// multiselection (focus moved to first block's multi-
+					// controls).
+					selectBlock( clickedClientId );
+				}
+			}
+
+			node.addEventListener( 'mousedown', onMouseDown );
+
+			return () => {
+				node.removeEventListener( 'mousedown', onMouseDown );
+			};
+		},
+		[
+			multiSelect,
+			selectBlock,
+			isSelectionEnabled,
+			getBlockParents,
+			getBlockSelectionStart,
+			hasMultiSelection,
+		]
+	);
+}

package/src/components/writing-flow/use-drag-selection.js

@@ -0,0 +1,126 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * Sets the `contenteditable` wrapper element to `value`.
+ *
+ * @param {HTMLElement} node  Block element.
+ * @param {boolean}     value `contentEditable` value (true or false)
+ */
+function setContentEditableWrapper( node, value ) {
+	node.contentEditable = value;
+	// Firefox doesn't automatically move focus.
+	if ( value ) node.focus();
+}
+
+/**
+ * Sets a multi-selection based on the native selection across blocks.
+ */
+export default function useDragSelection() {
+	const { startMultiSelect, stopMultiSelect } = useDispatch(
+		blockEditorStore
+	);
+	const { isSelectionEnabled, hasMultiSelection } = useSelect(
+		blockEditorStore
+	);
+	return useRefEffect(
+		( node ) => {
+			const { ownerDocument } = node;
+			const { defaultView } = ownerDocument;
+
+			let anchorElement;
+			let rafId;
+
+			function onMouseUp() {
+				stopMultiSelect();
+				// Equivalent to attaching the listener once.
+				defaultView.removeEventListener( 'mouseup', onMouseUp );
+				// The browser selection won't have updated yet at this point,
+				// so wait until the next animation frame to get the browser
+				// selection.
+				rafId = defaultView.requestAnimationFrame( () => {
+					if ( hasMultiSelection() ) {
+						return;
+					}
+
+					// If the selection is complete (on mouse up), and no
+					// multiple blocks have been selected, set focus back to the
+					// anchor element. if the anchor element contains the
+					// selection. Additionally, the contentEditable wrapper can
+					// now be disabled again.
+					setContentEditableWrapper( node, false );
+
+					const selection = defaultView.getSelection();
+
+					if ( selection.rangeCount ) {
+						const {
+							commonAncestorContainer,
+						} = selection.getRangeAt( 0 );
+
+						if (
+							anchorElement.contains( commonAncestorContainer )
+						) {
+							anchorElement.focus();
+						}
+					}
+				} );
+			}
+
+			function onMouseLeave( { buttons, target } ) {
+				// The primary button must be pressed to initiate selection.
+				// See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
+				if ( buttons !== 1 ) {
+					return;
+				}
+
+				// Check the attribute, not the contentEditable attribute. All
+				// child elements of the content editable wrapper are editable
+				// and return true for this property. We only want to start
+				// multi selecting when the mouse leaves the wrapper.
+				if ( ! target.getAttribute( 'contenteditable' ) ) {
+					return;
+				}
+
+				if ( ! isSelectionEnabled() ) {
+					return;
+				}
+
+				anchorElement = ownerDocument.activeElement;
+				startMultiSelect();
+
+				// `onSelectionStart` is called after `mousedown` and
+				// `mouseleave` (from a block). The selection ends when
+				// `mouseup` happens anywhere in the window.
+				defaultView.addEventListener( 'mouseup', onMouseUp );
+
+				// Allow cross contentEditable selection by temporarily making
+				// all content editable. We can't rely on using the store and
+				// React because re-rending happens too slowly. We need to be
+				// able to select across instances immediately.
+				setContentEditableWrapper( node, true );
+			}
+
+			node.addEventListener( 'mouseout', onMouseLeave );
+
+			return () => {
+				node.removeEventListener( 'mouseout', onMouseLeave );
+				defaultView.removeEventListener( 'mouseup', onMouseUp );
+				defaultView.cancelAnimationFrame( rafId );
+			};
+		},
+		[
+			startMultiSelect,
+			stopMultiSelect,
+			isSelectionEnabled,
+			hasMultiSelection,
+		]
+	);
+}

package/src/components/writing-flow/use-input.js

@@ -0,0 +1,112 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+import { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * Handles input for selections across blocks.
+ */
+export default function useInput() {
+	const {
+		__unstableIsFullySelected,
+		getSelectedBlockClientIds,
+		__unstableIsSelectionMergeable,
+		hasMultiSelection,
+	} = useSelect( blockEditorStore );
+	const {
+		replaceBlocks,
+		__unstableSplitSelection,
+		removeBlocks,
+		__unstableDeleteSelection,
+		__unstableExpandSelection,
+	} = useDispatch( blockEditorStore );
+
+	return useRefEffect( ( node ) => {
+		function onKeyDown( event ) {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+
+			if ( ! hasMultiSelection() ) {
+				return;
+			}
+
+			if ( event.keyCode === ENTER ) {
+				node.contentEditable = false;
+				event.preventDefault();
+				if ( __unstableIsFullySelected() ) {
+					replaceBlocks(
+						getSelectedBlockClientIds(),
+						createBlock( getDefaultBlockName() )
+					);
+				} else {
+					__unstableSplitSelection();
+				}
+			} else if (
+				event.keyCode === BACKSPACE ||
+				event.keyCode === DELETE
+			) {
+				node.contentEditable = false;
+				event.preventDefault();
+				if ( __unstableIsFullySelected() ) {
+					removeBlocks( getSelectedBlockClientIds() );
+				} else if ( __unstableIsSelectionMergeable() ) {
+					__unstableDeleteSelection( event.keyCode === DELETE );
+				} else {
+					__unstableExpandSelection();
+				}
+			} else if (
+				// If key.length is longer than 1, it's a control key that doesn't
+				// input anything.
+				event.key.length === 1 &&
+				! ( event.metaKey || event.ctrlKey )
+			) {
+				node.contentEditable = false;
+				if ( __unstableIsSelectionMergeable() ) {
+					__unstableDeleteSelection( event.keyCode === DELETE );
+				} else {
+					event.preventDefault();
+					// Safari does not stop default behaviour with either
+					// event.preventDefault() or node.contentEditable = false, so
+					// remove the selection to stop browser manipulation.
+					node.ownerDocument.defaultView
+						.getSelection()
+						.removeAllRanges();
+				}
+			}
+		}
+
+		function onCompositionStart( event ) {
+			if ( ! hasMultiSelection() ) {
+				return;
+			}
+
+			node.contentEditable = false;
+
+			if ( __unstableIsSelectionMergeable() ) {
+				__unstableDeleteSelection();
+			} else {
+				event.preventDefault();
+				// Safari does not stop default behaviour with either
+				// event.preventDefault() or node.contentEditable = false, so
+				// remove the selection to stop browser manipulation.
+				node.ownerDocument.defaultView.getSelection().removeAllRanges();
+			}
+		}
+
+		node.addEventListener( 'keydown', onKeyDown );
+		node.addEventListener( 'compositionstart', onCompositionStart );
+		return () => {
+			node.removeEventListener( 'keydown', onKeyDown );
+			node.removeEventListener( 'compositionstart', onCompositionStart );
+		};
+	}, [] );
+}

package/src/components/writing-flow/use-multi-selection.js

@@ -15,32 +15,6 @@ import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
 
-/**
- * Returns for the deepest node at the start or end of a container node. Ignores
- * any text nodes that only contain HTML formatting whitespace.
- *
- * @param {Element} node Container to search.
- * @param {string}  type 'start' or 'end'.
- */
-function getDeepestNode( node, type ) {
-	const child = type === 'start' ? 'firstChild' : 'lastChild';
-	const sibling = type === 'start' ? 'nextSibling' : 'previousSibling';
-
-	while ( node[ child ] ) {
-		node = node[ child ];
-
-		while (
-			node.nodeType === node.TEXT_NODE &&
-			/^[ \t\n]*$/.test( node.data ) &&
-			node[ sibling ]
-		) {
-			node = node[ sibling ];
-		}
-	}
-
-	return node;
-}
-
 function selector( select ) {
 	const {
 		isMultiSelecting,
@@ -48,6 +22,7 @@ function selector( select ) {
 		hasMultiSelection,
 		getSelectedBlockClientId,
 		getSelectedBlocksInitialCaretPosition,
+		__unstableIsFullySelected,
 	} = select( blockEditorStore );
 
 	return {
@@ -56,6 +31,7 @@ function selector( select ) {
 		hasMultiSelection: hasMultiSelection(),
 		selectedBlockClientId: getSelectedBlockClientId(),
 		initialPosition: getSelectedBlocksInitialCaretPosition(),
+		isFullSelection: __unstableIsFullySelected(),
 	};
 }
 
@@ -66,6 +42,7 @@ export default function useMultiSelection() {
 		multiSelectedBlockClientIds,
 		hasMultiSelection,
 		selectedBlockClientId,
+		isFullSelection,
 	} = useSelect( selector, [] );
 	const selectedRef = useBlockRef( selectedBlockClientId );
 	// These must be in the right DOM order.
@@ -120,9 +97,7 @@ export default function useMultiSelection() {
 				return;
 			}
 
-			// The block refs might not be immediately available
-			// when dragging blocks into another block.
-			if ( ! startRef.current || ! endRef.current ) {
+			if ( ! isFullSelection ) {
 				return;
 			}
 
@@ -136,17 +111,18 @@ export default function useMultiSelection() {
 			// BEFORE selection.
 			node.focus();
 
+			// The block refs might not be immediately available
+			// when dragging blocks into another block.
+			if ( ! startRef.current || ! endRef.current ) {
+				return;
+			}
+
 			const selection = defaultView.getSelection();
 			const range = ownerDocument.createRange();
 
 			// These must be in the right DOM order.
-			// The most stable way to select the whole block contents is to start
-			// and end at the deepest points.
-			const startNode = getDeepestNode( startRef.current, 'start' );
-			const endNode = getDeepestNode( endRef.current, 'end' );
-
-			range.setStartBefore( startNode );
-			range.setEndAfter( endNode );
+			range.setStartBefore( startRef.current );
+			range.setEndAfter( endRef.current );
 
 			selection.removeAllRanges();
 			selection.addRange( range );
@@ -157,6 +133,7 @@ export default function useMultiSelection() {
 			multiSelectedBlockClientIds,
 			selectedBlockClientId,
 			initialPosition,
+			isFullSelection,
 		]
 	);
 }

package/src/components/writing-flow/use-selection-observer.js

@@ -0,0 +1,153 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { getBlockClientId } from '../../utils/dom';
+
+/**
+ * Extract the selection start node from the selection. When the anchor node is
+ * not a text node, the selection offset is the index of a child node.
+ *
+ * @param {Selection} selection The selection.
+ *
+ * @return {Element} The selection start node.
+ */
+function extractSelectionStartNode( selection ) {
+	const { anchorNode, anchorOffset } = selection;
+
+	if ( anchorNode.nodeType === anchorNode.TEXT_NODE ) {
+		return anchorNode;
+	}
+
+	return anchorNode.childNodes[ anchorOffset ];
+}
+
+/**
+ * Extract the selection end node from the selection. When the focus node is not
+ * a text node, the selection offset is the index of a child node. The selection
+ * reaches up to but excluding that child node.
+ *
+ * @param {Selection} selection The selection.
+ *
+ * @return {Element} The selection start node.
+ */
+function extractSelectionEndNode( selection ) {
+	const { focusNode, focusOffset } = selection;
+
+	if ( focusNode.nodeType === focusNode.TEXT_NODE ) {
+		return focusNode;
+	}
+
+	return focusNode.childNodes[ focusOffset - 1 ];
+}
+
+function findDepth( a, b ) {
+	let depth = 0;
+
+	while ( a[ depth ] === b[ depth ] ) {
+		depth++;
+	}
+
+	return depth;
+}
+
+/**
+ * Sets the `contenteditable` wrapper element to `value`.
+ *
+ * @param {HTMLElement} node  Block element.
+ * @param {boolean}     value `contentEditable` value (true or false)
+ */
+function setContentEditableWrapper( node, value ) {
+	node.contentEditable = value;
+	// Firefox doesn't automatically move focus.
+	if ( value ) node.focus();
+}
+
+/**
+ * Sets a multi-selection based on the native selection across blocks.
+ */
+export default function useSelectionObserver() {
+	const { multiSelect, selectBlock, selectionChange } = useDispatch(
+		blockEditorStore
+	);
+	const { getBlockParents } = useSelect( blockEditorStore );
+	return useRefEffect(
+		( node ) => {
+			const { ownerDocument } = node;
+			const { defaultView } = ownerDocument;
+
+			function onSelectionChange() {
+				const selection = defaultView.getSelection();
+
+				// If no selection is found, end multi selection and disable the
+				// contentEditable wrapper.
+				if ( ! selection.rangeCount || selection.isCollapsed ) {
+					setContentEditableWrapper( node, false );
+					return;
+				}
+
+				const clientId = getBlockClientId(
+					extractSelectionStartNode( selection )
+				);
+				const endClientId = getBlockClientId(
+					extractSelectionEndNode( selection )
+				);
+				const isSingularSelection = clientId === endClientId;
+
+				if ( isSingularSelection ) {
+					selectBlock( clientId );
+				} else {
+					const startPath = [
+						...getBlockParents( clientId ),
+						clientId,
+					];
+					const endPath = [
+						...getBlockParents( endClientId ),
+						endClientId,
+					];
+					const depth = findDepth( startPath, endPath );
+
+					multiSelect( startPath[ depth ], endPath[ depth ] );
+				}
+			}
+
+			function addListeners() {
+				ownerDocument.addEventListener(
+					'selectionchange',
+					onSelectionChange
+				);
+				defaultView.addEventListener( 'mouseup', onSelectionChange );
+			}
+
+			function removeListeners() {
+				ownerDocument.removeEventListener(
+					'selectionchange',
+					onSelectionChange
+				);
+				defaultView.removeEventListener( 'mouseup', onSelectionChange );
+			}
+
+			function resetListeners() {
+				removeListeners();
+				addListeners();
+			}
+
+			addListeners();
+			// We must allow rich text to set selection first. This ensures that
+			// our `selectionchange` listener is always reset to be called after
+			// the rich text one.
+			node.addEventListener( 'focusin', resetListeners );
+			return () => {
+				removeListeners();
+				node.removeEventListener( 'focusin', resetListeners );
+			};
+		},
+		[ multiSelect, selectBlock, selectionChange, getBlockParents ]
+	);
+}

package/src/components/writing-flow/use-tab-nav.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { focus } from '@wordpress/dom';
+import { focus, isFormElement } from '@wordpress/dom';
 import { TAB, ESCAPE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect, useMergeRefs } from '@wordpress/compose';
@@ -12,16 +12,6 @@ import { useRef } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../../store';
 
-function isFormElement( element ) {
-	const { tagName } = element;
-	return (
-		tagName === 'INPUT' ||
-		tagName === 'BUTTON' ||
-		tagName === 'SELECT' ||
-		tagName === 'TEXTAREA'
-	);
-}
-
 export default function useTabNav() {
 	const container = useRef();
 	const focusCaptureBeforeRef = useRef();