@wordpress/block-editor 8.3.1 → 8.5.1

package/src/components/url-popover/image-url-input-ui.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, isEmpty, each, map } from 'lodash';
+import { find, map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -80,38 +80,25 @@ const ImageURLInputUI = ( {
 		setIsOpen( false );
 	} );
 
-	const removeNewTabRel = ( currentRel ) => {
-		let newRel = currentRel;
-
-		if ( currentRel !== undefined && ! isEmpty( newRel ) ) {
-			if ( ! isEmpty( newRel ) ) {
-				each( NEW_TAB_REL, ( relVal ) => {
-					const regExp = new RegExp( '\\b' + relVal + '\\b', 'gi' );
-					newRel = newRel.replace( regExp, '' );
-				} );
-
-				// Only trim if NEW_TAB_REL values was replaced.
-				if ( newRel !== currentRel ) {
-					newRel = newRel.trim();
-				}
-
-				if ( isEmpty( newRel ) ) {
-					newRel = undefined;
-				}
-			}
-		}
-
-		return newRel;
-	};
-
 	const getUpdatedLinkTargetSettings = ( value ) => {
 		const newLinkTarget = value ? '_blank' : undefined;
 
 		let updatedRel;
-		if ( ! newLinkTarget && ! rel ) {
-			updatedRel = undefined;
+		if ( newLinkTarget ) {
+			const rels = ( rel ?? '' ).split( ' ' );
+			NEW_TAB_REL.forEach( ( relVal ) => {
+				if ( ! rels.includes( relVal ) ) {
+					rels.push( relVal );
+				}
+			} );
+			updatedRel = rels.join( ' ' );
 		} else {
-			updatedRel = removeNewTabRel( rel );
+			const rels = ( rel ?? '' )
+				.split( ' ' )
+				.filter(
+					( relVal ) => NEW_TAB_REL.includes( relVal ) === false
+				);
+			updatedRel = rels.length ? rels.join( ' ' ) : undefined;
 		}
 
 		return {
@@ -232,7 +219,7 @@ const ImageURLInputUI = ( {
 			/>
 			<TextControl
 				label={ __( 'Link Rel' ) }
-				value={ removeNewTabRel( rel ) || '' }
+				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
 			/>
 			<TextControl

package/src/components/writing-flow/index.js

@@ -18,6 +18,10 @@ import useMultiSelection from './use-multi-selection';
 import useTabNav from './use-tab-nav';
 import useArrowNav from './use-arrow-nav';
 import useSelectAll from './use-select-all';
+import useDragSelection from './use-drag-selection';
+import useSelectionObserver from './use-selection-observer';
+import useClickSelection from './use-click-selection';
+import useInput from './use-input';
 import { store as blockEditorStore } from '../../store';
 
 export function useWritingFlow() {
@@ -31,6 +35,10 @@ export function useWritingFlow() {
 		before,
 		useMergeRefs( [
 			ref,
+			useInput(),
+			useDragSelection(),
+			useSelectionObserver(),
+			useClickSelection(),
 			useMultiSelection(),
 			useSelectAll(),
 			useArrowNav(),

package/src/components/writing-flow/readme.md

@@ -0,0 +1,28 @@
+# Writing Flow
+
+This hook handles selection across blocks.
+
+## Partial multi-block selection
+
+Selecting across blocks is possible by temporarily setting the `contentEditable`
+attribute to `true`. This sounds scary, but we prevent all default behaviours
+except for selection, so don't worry. :)
+
+* For selection by mouse, we make everything editable when the mouse leaves an
+  editable field.
+* For Shift+Click selection, we do it on `mousedown`.
+* For keyboard selection we do it when the selection reaches the edge of an
+  editable field.
+
+In the future, we should consider using the `contentEditable` attribute for
+arrow key navigation as well.
+
+Now that it's possible to select across blocks, we need to sync this state to
+the block editor store. We can do this by listening to the `selectionchange`
+event. In writing flow, we can sync the selected block client ID, but when the
+selection starts or ends in a rich text field, it will be rich text that sync a
+more precise position (the block attribute key and offset in addition to the
+client ID).
+
+With the selection state in the block editor store, we can now handle things
+like Backspace, Delete, and Enter.

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,
 		]
 	);
 }