@wordpress/block-editor 8.4.0 → 8.5.0

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();

package/src/hooks/border-color.js

@@ -23,11 +23,11 @@ import {
 } from '../components/colors';
 import useSetting from '../components/use-setting';
 import {
+	BORDER_SUPPORT_KEY,
 	hasBorderSupport,
 	removeBorderAttribute,
-	shouldSkipSerialization,
 } from './border';
-import { cleanEmptyObject } from './utils';
+import { cleanEmptyObject, shouldSkipSerialization } from './utils';
 
 // Defining empty array here instead of inline avoids unnecessary re-renders of
 // color control.
@@ -200,7 +200,7 @@ function addAttributes( settings ) {
 function addSaveProps( props, blockType, attributes ) {
 	if (
 		! hasBorderSupport( blockType, 'color' ) ||
-		shouldSkipSerialization( blockType )
+		shouldSkipSerialization( blockType, BORDER_SUPPORT_KEY, 'color' )
 	) {
 		return props;
 	}
@@ -231,7 +231,7 @@ function addSaveProps( props, blockType, attributes ) {
 function addEditProps( settings ) {
 	if (
 		! hasBorderSupport( settings, 'color' ) ||
-		shouldSkipSerialization( settings )
+		shouldSkipSerialization( settings, BORDER_SUPPORT_KEY, 'color' )
 	) {
 		return settings;
 	}
@@ -266,7 +266,7 @@ export const withBorderColorPaletteStyles = createHigherOrderComponent(
 
 		if (
 			! hasBorderSupport( name, 'color' ) ||
-			shouldSkipSerialization( name )
+			shouldSkipSerialization( name, BORDER_SUPPORT_KEY, 'color' )
 		) {
 			return <BlockListBlock { ...props } />;
 		}

package/src/hooks/border.js

@@ -171,19 +171,6 @@ export function hasBorderSupport( blockName, feature = 'any' ) {
 	return !! support?.[ feature ];
 }
 
-/**
- * Check whether serialization of border classes and styles should be skipped.
- *
- * @param {string|Object} blockType Block name or block type object.
- *
- * @return {boolean} Whether serialization of border properties should occur.
- */
-export function shouldSkipSerialization( blockType ) {
-	const support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );
-
-	return support?.__experimentalSkipSerialization;
-}
-
 /**
  * Returns a new style object where the specified border attribute has been
  * removed.