@wordpress/block-editor 16.0.1-next.v.202607070741.0 → 16.1.0

package/src/components/writing-flow/use-editable-root.js

@@ -0,0 +1,112 @@
+/**
+ * WordPress dependencies
+ */
+import { useRegistry, useSelect } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { setContentEditableWrapper } from './utils';
+import { getBlockClientId, getSelectionEditableElement } from '../../utils/dom';
+import { unlock } from '../../lock-unlock';
+
+/**
+ * Keeps the writing flow wrapper contentEditable while the selected block
+ * supports `editableRoot`, so the native selection can extend across blocks.
+ * While the wrapper is editable it must also hold focus: a nested editable
+ * element cannot retain focus once an ancestor becomes an editing host (the
+ * first DOM mutation moves focus to the host, inconsistently across
+ * browsers).
+ */
+export default function useEditableRoot() {
+	const registry = useRegistry();
+	const enabled = useSelect( ( select ) => {
+		const { getSelectedBlockClientId, canHostEditableRoot, isZoomOut } =
+			unlock( select( blockEditorStore ) );
+		return (
+			! isZoomOut() && canHostEditableRoot( getSelectedBlockClientId() )
+		);
+	}, [] );
+
+	return useRefEffect(
+		( node ) => {
+			if ( ! enabled ) {
+				return;
+			}
+
+			const {
+				getSelectedBlockClientId,
+				hasMultiSelection,
+				isMultiSelecting,
+			} = registry.select( blockEditorStore );
+
+			// Focus is moved separately below, only when an editable
+			// element belonging to the selected block holds it.
+			if ( ! setContentEditableWrapper( node, true, { focus: false } ) ) {
+				return;
+			}
+
+			// Move focus from the block's editable element to the wrapper,
+			// but only when an editable element belonging to the selected
+			// block has focus. Never steal focus from other regions (e.g.
+			// List View), UI elements (e.g. buttons), or other editables
+			// within the wrapper (e.g. the post title). The selection is
+			// preserved. If the selection is still outside the focused
+			// element, a mousedown just focused it and the browser has not
+			// placed the caret yet; moving focus now would cancel the
+			// pending caret placement. The selection observer moves focus
+			// once the selection lands.
+			const { activeElement } = node.ownerDocument;
+			const selection = node.ownerDocument.defaultView.getSelection();
+			if (
+				activeElement !== node &&
+				activeElement?.isContentEditable &&
+				node.contains( activeElement ) &&
+				getBlockClientId( activeElement ) ===
+					getSelectedBlockClientId() &&
+				selection.anchorNode &&
+				activeElement.contains( selection.anchorNode )
+			) {
+				node.focus();
+			}
+
+			return () => {
+				// A multi-selection owns the wrapper as its editing host
+				// now: the host and its textbox semantics remain, and the
+				// selection observer disables both together when the
+				// selection collapses. Removing the attributes here would
+				// strip the accessible name off the focused editing host at
+				// the moment cross-block editing begins.
+				if ( hasMultiSelection() || isMultiSelecting() ) {
+					return;
+				}
+
+				setContentEditableWrapper( node, false );
+
+				// If the wrapper held focus, return focus to the editable
+				// element containing the selection, which is focusable
+				// again now that the wrapper is no longer an editing host.
+				// Only do so if that element belongs to the selected block:
+				// when the selection moved to another block through the
+				// store, the stale DOM selection must not reclaim block
+				// selection through its focus handler.
+				if ( node.ownerDocument.activeElement === node ) {
+					const editable = getSelectionEditableElement(
+						node.ownerDocument.defaultView.getSelection(),
+						node
+					);
+					if (
+						editable &&
+						getBlockClientId( editable ) ===
+							getSelectedBlockClientId()
+					) {
+						editable.focus();
+					}
+				}
+			};
+		},
+		[ enabled, registry ]
+	);
+}

package/src/components/writing-flow/use-home-end.js

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { HOME, END } from '@wordpress/keycodes';
+import { useSelect } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { getSelectionEditableElement } from '../../utils/dom';
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * Moves the caret to the start or end of the visual line for Home and End
+ * with `Selection.modify()`, because the browser's default caret movement
+ * cannot be relied on in two cases:
+ *
+ * - While the wrapper is the contentEditable editing host (a selected block
+ *   supports `editableRoot`), browsers don't perform the default caret
+ *   movement for Home and End.
+ * - Chromium on macOS maps Home and End to scroll commands, so it never
+ *   moves the caret in editable content on that platform, including nested
+ *   editable elements like the tab labels in the tab-list block.
+ */
+export default function useHomeEnd() {
+	const { hasMultiSelection } = useSelect( blockEditorStore );
+	return useRefEffect( ( node ) => {
+		function onKeyDown( event ) {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+
+			if ( event.keyCode !== HOME && event.keyCode !== END ) {
+				return;
+			}
+
+			if ( event.metaKey || event.ctrlKey || event.altKey ) {
+				return;
+			}
+
+			// Only handle keys pressed in editable content, in both of the
+			// cases mentioned above: `event.target` is the focused element,
+			// and `isContentEditable` is true both for the wrapper as the
+			// editing host and for a nested editable element like a tab label.
+			// Anything else that takes focus like inputs and textareas keep
+			// default behavior.
+			if ( ! event.target.isContentEditable || hasMultiSelection() ) {
+				return;
+			}
+
+			const selection = node.ownerDocument.defaultView.getSelection();
+
+			if ( ! getSelectionEditableElement( selection, node ) ) {
+				return;
+			}
+
+			event.preventDefault();
+			selection.modify(
+				event.shiftKey ? 'extend' : 'move',
+				event.keyCode === HOME ? 'backward' : 'forward',
+				'lineboundary'
+			);
+		}
+
+		node.addEventListener( 'keydown', onKeyDown );
+		return () => {
+			node.removeEventListener( 'keydown', onKeyDown );
+		};
+	}, [] );
+}

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

@@ -16,6 +16,8 @@ import {
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { setContentEditableWrapper } from './utils';
+import { getSelectionEditableElement } from '../../utils/dom';
 
 /**
  * Handles input for selections across blocks.
@@ -45,10 +47,25 @@ export default function useInput() {
 
 	return useRefEffect( ( node ) => {
 		function onBeforeInput( event ) {
-			// If writing flow is editable, NEVER allow the browser to alter the
-			// DOM. This will cause React errors (and the DOM should only be
-			// altered in a controlled fashion).
-			if ( node.contentEditable === 'true' ) {
+			// If writing flow is editable, never allow the browser to alter
+			// the DOM outside of an editable element within a block. This
+			// will cause React errors (and the DOM should only be altered in
+			// a controlled fashion). The wrapper can be contentEditable with
+			// a single selection when the selected block supports
+			// `editableRoot`; in that case edits within the block's editable
+			// element are handled by its rich text instance.
+			if ( node.contentEditable !== 'true' ) {
+				return;
+			}
+
+			if ( hasMultiSelection() ) {
+				event.preventDefault();
+				return;
+			}
+
+			const selection = node.ownerDocument.defaultView.getSelection();
+
+			if ( ! getSelectionEditableElement( selection, node ) ) {
 				event.preventDefault();
 			}
 		}
@@ -127,7 +144,7 @@ export default function useInput() {
 			}
 
 			if ( event.keyCode === ENTER ) {
-				node.contentEditable = false;
+				setContentEditableWrapper( node, false );
 				event.preventDefault();
 				if ( __unstableIsFullySelected() ) {
 					replaceBlocks(
@@ -141,7 +158,7 @@ export default function useInput() {
 				event.keyCode === BACKSPACE ||
 				event.keyCode === DELETE
 			) {
-				node.contentEditable = false;
+				setContentEditableWrapper( node, false );
 				event.preventDefault();
 				if ( __unstableIsFullySelected() ) {
 					removeBlocks( getSelectedBlockClientIds() );
@@ -156,7 +173,7 @@ export default function useInput() {
 				event.key.length === 1 &&
 				! ( event.metaKey || event.ctrlKey )
 			) {
-				node.contentEditable = false;
+				setContentEditableWrapper( node, false );
 				if ( __unstableIsSelectionMergeable() ) {
 					__unstableDeleteSelection( event.keyCode === DELETE );
 				} else {
@@ -176,7 +193,7 @@ export default function useInput() {
 				return;
 			}
 
-			node.contentEditable = false;
+			setContentEditableWrapper( node, false );
 
 			if ( __unstableIsSelectionMergeable() ) {
 				__unstableDeleteSelection();

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

@@ -8,6 +8,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { setContentEditableWrapper } from './utils';
 
 function selector( select ) {
 	const {
@@ -73,11 +74,9 @@ export default function useMultiSelection() {
 			// 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.
-			node.contentEditable = true;
-
 			// For some browsers, like Safari, it is important that focus
 			// happens BEFORE selection removal.
-			node.focus();
+			setContentEditableWrapper( node, true );
 
 			defaultView.getSelection().removeAllRanges();
 		},

package/src/components/writing-flow/use-select-all.js

@@ -10,7 +10,11 @@ import { useRefEffect } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { isInsideRootBlock, getBlockClientId } from '../../utils/dom';
+import {
+	isInsideRootBlock,
+	getBlockClientId,
+	getSelectionEditableElement,
+} from '../../utils/dom';
 
 export default function useSelectAll() {
 	const { getBlockOrder, getSelectedBlockClientIds, getBlockRootClientId } =
@@ -25,17 +29,43 @@ export default function useSelectAll() {
 			}
 
 			const selectedClientIds = getSelectedBlockClientIds();
+			const { ownerDocument } = node;
+			const selection = ownerDocument.defaultView.getSelection();
+			// When the wrapper is contentEditable and holds focus (the
+			// selected block supports `editableRoot`), the event targets the
+			// wrapper; resolve the editable element containing the selection.
+			const editable =
+				( event.target === node &&
+					getSelectionEditableElement( selection, node ) ) ||
+				event.target;
 
 			if (
 				selectedClientIds.length < 2 &&
-				! isEntirelySelected( event.target )
+				! isEntirelySelected( editable )
 			) {
+				// While the wrapper is contentEditable, the browser default
+				// would select the entire canvas. Select the contents of the
+				// editable element instead, like the default does when the
+				// element itself holds focus.
+				if ( event.target === node && editable !== node ) {
+					event.preventDefault();
+					const range = ownerDocument.createRange();
+					range.selectNodeContents( editable );
+					selection.removeAllRanges();
+					selection.addRange( range );
+					// The native `selectionchange` event is asynchronous;
+					// dispatch it synchronously so that listeners depending
+					// on it (e.g. the rich text internal record sync) run
+					// before any event following this one.
+					ownerDocument.dispatchEvent(
+						new Event( 'selectionchange' )
+					);
+				}
 				return;
 			}
 
 			event.preventDefault();
 
-			const { ownerDocument } = event.target;
 			const [ firstSelectedClientId ] = selectedClientIds;
 			const activeClientId = getBlockClientId(
 				ownerDocument.activeElement