Add an editableRoot block support for native cross-block selection

docs/reference-guides/block-api/block-supports.md

@@ -682,6 +682,19 @@ attributes: {
 }
 ```
 
+## editableRoot
+
+-   Type: `boolean`
+-   Default value: `false`
+
+When set to `true`, the block declares that it keeps working when an ancestor
+element (the editor canvas) is the `contenteditable` editing host, with focus
+and the native selection residing there instead of on the block's own editable
+elements. The editor uses this to keep the canvas editable while such a block
+is selected, enabling native partial selection across blocks. Blocks that rely
+on `event.target` or DOM focus pointing at their own elements should not
+declare this support.
+
 ## filter
 
 -   Type: `Object`

docs/reference-guides/core-blocks/README.md

@@ -616,7 +616,7 @@ Start with the basic building block of all narrative.
 
 -	**Name:** [core/paragraph](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-text/core-block-paragraph/)
 -	**Category:** [text](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-text/)
--	**Supports:** __unstablePasteTextInline, align (full, wide), anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fitText, fontSize, lineHeight, textAlign, textColumns, textIndent), ~~className~~
+-	**Supports:** __unstablePasteTextInline, align (full, wide), anchor, color (background, gradients, link, text), editableRoot, interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fitText, fontSize, lineHeight, textAlign, textColumns, textIndent), ~~className~~
 -	**Attributes:** content, direction, dropCap, placeholder
 
 ## Pattern Placeholder

packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -29,9 +29,8 @@ import { unlock } from '../../../lock-unlock';
  */
 export function useFocusFirstElement( { clientId, initialPosition } ) {
 	const ref = useRef();
-	const { isBlockSelected, isMultiSelecting, isZoomOut } = unlock(
-		useSelect( blockEditorStore )
-	);
+	const { isBlockSelected, isMultiSelecting, isZoomOut, getSelectionStart } =
+		unlock( useSelect( blockEditorStore ) );
 
 	useEffect( () => {
 		// Check if the block is still selected at the time this effect runs.
@@ -87,7 +86,27 @@ export function useFocusFirstElement( { clientId, initialPosition } ) {
 				return;
 			}
 		}
-		placeCaretAtHorizontalEdge( target, isReverse );
+		// Do not place a caret when the target already contains one:
+		// while a focused editing host contains the target (the block
+		// supports `editableRoot`), the caret can be inside it without the
+		// target holding focus. Only a caret the rich text synchronized to
+		// the store (offsets present) is deliberate; a leftover one yields
+		// to an explicitly requested edge position (initialPosition -1).
+		const { activeElement } = ownerDocument;
+		const selection = ownerDocument.defaultView.getSelection();
+		const { clientId: selectionClientId, offset } = getSelectionStart();
+		const hasCaret =
+			activeElement?.isContentEditable &&
+			activeElement.contains( target ) &&
+			!! selection.anchorNode &&
+			target.contains( selection.anchorNode );
+		const isDeliberate =
+			initialPosition === 0 ||
+			( offset !== undefined && selectionClientId === clientId );
+
+		if ( ! ( hasCaret && isDeliberate ) ) {
+			placeCaretAtHorizontalEdge( target, isReverse );
+		}
 	}, [ initialPosition, clientId ] );
 
 	return ref;

packages/block-editor/src/components/block-list/use-block-props/use-focus-handler.js

@@ -12,6 +12,7 @@ import {
  */
 import { isInsideRootBlock } from '../../../utils/dom';
 import { store as blockEditorStore } from '../../../store';
+import { isShiftClickInProgress } from '../../writing-flow/utils';
 import { unlock } from '../../../lock-unlock';
 
 const { subscribeDelegatedListener } = unlock( composePrivateApis );
@@ -22,7 +23,8 @@ const { subscribeDelegatedListener } = unlock( composePrivateApis );
  * @param {string} clientId Block client ID.
  */
 export function useFocusHandler( clientId ) {
-	const { isBlockSelected } = useSelect( blockEditorStore );
+	const { isBlockSelected, isBlockMultiSelected } =
+		useSelect( blockEditorStore );
 	const { selectBlock, selectionChange } = useDispatch( blockEditorStore );
 
 	return useRefEffect(
@@ -36,14 +38,6 @@ export function useFocusHandler( clientId ) {
 			 * @param {FocusEvent} event Focus event.
 			 */
 			function onFocus( event ) {
-				// When the whole editor is editable, let writing flow handle
-				// selection.
-				if (
-					node.parentElement.closest( '[contenteditable="true"]' )
-				) {
-					return;
-				}
-
 				// Check synchronously because a non-selected block might be
 				// getting data through `useSelect` asynchronously.
 				if ( isBlockSelected( clientId ) ) {
@@ -54,12 +48,43 @@ export function useFocusHandler( clientId ) {
 					return;
 				}
 
+				// Never select on the focus fired by a shift+click: the
+				// browser can focus the common editable ancestor of the
+				// range (e.g. a group block), and any selection re-render
+				// mid gesture destroys the native selection being made. The
+				// selection observer builds the multi-selection on mouseup.
+				if ( isShiftClickInProgress() ) {
+					return;
+				}
+
+				// A block that is part of the current multi-selection must
+				// not collapse it. Focus can land on the clicked block after
+				// the multi-selection was built: the focus event of a
+				// shift+click is not ordered consistently against its
+				// mouseup across browsers.
+				if ( isBlockMultiSelected( clientId ) ) {
+					return;
+				}
+
 				// If an inner block is focussed, that block is responsible for
 				// setting the selected block.
 				if ( ! isInsideRootBlock( node, event.target ) ) {
 					return;
 				}
 
+				// For editable targets, select without initial caret
+				// placement: the caret is inside the target. Placement would
+				// move it, and would collapse a native selection in the
+				// making, e.g. a shift+click extending the selection across
+				// blocks while the wrapper is the editing host. The observer
+				// builds the multi-selection from the anchor it recorded at
+				// mousedown, so this dispatch overwriting the store anchor
+				// is harmless.
+				if ( event.target.isContentEditable ) {
+					selectBlock( clientId, null );
+					return;
+				}
+
 				selectBlock( clientId );
 			}
 

packages/block-editor/src/components/rich-text/event-listeners/before-input-rules.js

@@ -1,17 +1,20 @@
 /**
  * WordPress dependencies
  */
-import { insert, isCollapsed } from '@wordpress/rich-text';
+import {
+	insert,
+	isCollapsed,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 import { applyFilters } from '@wordpress/hooks';
-import { privateApis as composePrivateApis } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 /**
  * When typing over a selection, the selection will we wrapped by a matching
@@ -84,10 +87,10 @@ export default ( props ) => ( element ) => {
 		// call few lines above has fully updated the data store state and rerendered
 		// all affected components.
 		window.queueMicrotask( () => {
-			event.target.dispatchEvent( newEvent );
+			element.dispatchEvent( newEvent );
 		} );
 		event.preventDefault();
 	}
 
-	return subscribeDelegatedListener( element, 'beforeinput', onInput, true );
+	return subscribeOwnedListener( element, 'beforeinput', onInput, true );
 };

packages/block-editor/src/components/rich-text/event-listeners/delete.js

@@ -2,15 +2,18 @@
  * WordPress dependencies
  */
 import { DELETE, BACKSPACE } from '@wordpress/keycodes';
-import { isCollapsed, isEmpty } from '@wordpress/rich-text';
-import { privateApis as composePrivateApis } from '@wordpress/compose';
+import {
+	isCollapsed,
+	isEmpty,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export default ( props ) => ( element ) => {
 	function onKeyDown( event ) {
@@ -54,5 +57,5 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	return subscribeDelegatedListener( element, 'keydown', onKeyDown );
+	return subscribeOwnedListener( element, 'keydown', onKeyDown );
 };

packages/block-editor/src/components/rich-text/event-listeners/enter.js

@@ -2,14 +2,19 @@
  * WordPress dependencies
  */
 import { ENTER } from '@wordpress/keycodes';
-import { insert, remove } from '@wordpress/rich-text';
+import {
+	insert,
+	remove,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 import { privateApis as composePrivateApis } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../../lock-unlock';
 
+const { subscribeOwnedListener, ownsSelection } = unlock( richTextPrivateApis );
 const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export default ( props ) => ( element ) => {
@@ -31,8 +36,9 @@ export default ( props ) => ( element ) => {
 		}
 
 		// The event listener is attached to the window, so we need to check if
-		// the target is the element.
-		if ( event.target !== element ) {
+		// the target is the element, or whether the element owns the
+		// selection through a focused editing host.
+		if ( event.target !== element && ! ownsSelection( element ) ) {
 			return;
 		}
 
@@ -90,7 +96,7 @@ export default ( props ) => ( element ) => {
 	);
 	// Capture phase so this runs before ancestor (writing flow) bubble
 	// handlers, matching the timing of the previous raw element listener.
-	const unsubscribeKeyDownDeprecated = subscribeDelegatedListener(
+	const unsubscribeKeyDownDeprecated = subscribeOwnedListener(
 		element,
 		'keydown',
 		onKeyDownDeprecated,

packages/block-editor/src/components/rich-text/event-listeners/input-events.js

@@ -1,14 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export default ( props ) => ( element ) => {
 	const { inputEvents } = props.current;
@@ -18,5 +19,5 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	return subscribeDelegatedListener( element, 'input', onInput );
+	return subscribeOwnedListener( element, 'input', onInput );
 };

packages/block-editor/src/components/rich-text/event-listeners/input-rules.js

@@ -1,9 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { insert, toHTMLString } from '@wordpress/rich-text';
+import {
+	insert,
+	toHTMLString,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 import { getBlockTransforms, findTransform } from '@wordpress/blocks';
-import { privateApis as composePrivateApis } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -16,7 +19,7 @@ import {
 } from '../../../utils/selection';
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export function findSelection( blocks ) {
 	let i = blocks.length;
@@ -160,13 +163,13 @@ export default ( props ) => ( element ) => {
 
 	// Capture phase so these run before ancestor (writing flow) bubble
 	// handlers, matching the timing of the previous raw element listeners.
-	const unsubscribeInput = subscribeDelegatedListener(
+	const unsubscribeInput = subscribeOwnedListener(
 		element,
 		'input',
 		onInput,
 		true
 	);
-	const unsubscribeCompositionEnd = subscribeDelegatedListener(
+	const unsubscribeCompositionEnd = subscribeOwnedListener(
 		element,
 		'compositionend',
 		onInput,

packages/block-editor/src/components/rich-text/event-listeners/insert-replacement-text.js

@@ -1,15 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 /**
  * When the browser is about to auto correct, add an undo level so the user can
@@ -29,5 +30,5 @@ export default ( props ) => ( element ) => {
 			.__unstableMarkLastChangeAsPersistent();
 	}
 
-	return subscribeDelegatedListener( element, 'beforeinput', onInput );
+	return subscribeOwnedListener( element, 'beforeinput', onInput );
 };

packages/block-editor/src/components/rich-text/event-listeners/paste-handler.js

@@ -2,7 +2,12 @@
  * WordPress dependencies
  */
 import { pasteHandler } from '@wordpress/blocks';
-import { isEmpty, insert, create } from '@wordpress/rich-text';
+import {
+	isEmpty,
+	insert,
+	create,
+	privateApis as richTextPrivateApis,
+} from '@wordpress/rich-text';
 import { isURL } from '@wordpress/url';
 import { privateApis as composePrivateApis } from '@wordpress/compose';
 
@@ -15,6 +20,7 @@ import { getPasteEventData } from '../../../utils/pasting';
 import { unlock } from '../../../lock-unlock';
 
 const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { ownsSelection } = unlock( richTextPrivateApis );
 
 /** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
 
@@ -34,8 +40,14 @@ export default ( props ) => ( element ) => {
 		} = props.current;
 
 		// The event listener is attached to the window, so we need to check if
-		// the target is the element or inside the element.
-		if ( ! element.contains( event.target ) ) {
+		// the target is the element or inside the element. When the editable
+		// wrapper holds focus (the selected block supports `editableRoot`),
+		// the event targets the wrapper instead; the element then owns the
+		// paste when it contains the selection.
+		if (
+			! element.contains( event.target ) &&
+			! ownsSelection( element )
+		) {
 			return;
 		}