DIAGNOSTIC: port main PR input handling to locate the html:70 fix

Temporary: brings the main PR's input-and-selection listener migration
(subscribeOwnedListener, ensureSelectionSync, ownsSelection) onto the
always-listen prep to test on CI whether the html:70 typing fix lives in
this file. To be reverted.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: ellatrix

packages/rich-text/src/hook/event-listeners/input-and-selection.js

@@ -9,6 +9,8 @@ import { privateApis as composePrivateApis } from '@wordpress/compose';
 import { getActiveFormats } from '../../get-active-formats';
 import { isCollapsed } from '../../is-collapsed';
 import { updateFormats } from '../../update-formats';
+import { ownsSelection } from '../../owns-selection';
+import { subscribeOwnedListener } from '../../subscribe-owned-listener';
 import { unlock } from '../../lock-unlock';
 
 const { subscribeDelegatedListener } = unlock( composePrivateApis );
@@ -129,9 +131,13 @@ export default ( props ) => ( element ) => {
 			return;
 		}
 
-		// Ensure the active element is the rich text element. The listener
-		// stays subscribed but no-ops for instances that aren't focused.
-		if ( ownerDocument.activeElement !== element ) {
+		// Ensure the active element is the rich text element, or that the
+		// element owns the selection through a focused editing host (the
+		// editable block editor canvas wrapper).
+		if (
+			ownerDocument.activeElement !== element &&
+			! ownsSelection( element )
+		) {
 			return;
 		}
 
@@ -189,10 +195,11 @@ export default ( props ) => ( element ) => {
 	}
 
 	function onCompositionStart() {
+		// Do not update the selection when characters are being composed as
+		// this rerenders the component and might destroy internal browser
+		// editing state. `handleSelectionChange` returns early while
+		// composing.
 		isComposing = true;
-		// `handleSelectionChange` returns early while composing, so the
-		// selection is not updated as characters are composed (which rerenders
-		// the component and might destroy internal browser editing state).
 		// Remove the placeholder. Since the rich text value doesn't update
 		// during composition, the placeholder doesn't get removed. There's no
 		// need to re-add it, when the value is updated on compositionend it
@@ -228,8 +235,24 @@ export default ( props ) => ( element ) => {
 			props.current;
 
 		// When the whole editor is editable, let writing flow handle
-		// selection.
+		// selection state.
 		if ( element.parentElement.closest( '[contenteditable="true"]' ) ) {
+			// A nested editable element does not receive a caret from being
+			// focused, unlike an editing host. When the element does not
+			// contain the selection, restore the internal record's selection,
+			// or match the editing host behavior for programmatic focus and
+			// place the caret at the start.
+			const selection = defaultView.getSelection();
+			if (
+				! selection.anchorNode ||
+				! element.contains( selection.anchorNode )
+			) {
+				if ( isSelected && record.current.start !== undefined ) {
+					applyRecord( record.current );
+				} else {
+					selection.collapse( element, 0 );
+				}
+			}
 			return;
 		}
 
@@ -257,22 +280,63 @@ export default ( props ) => ( element ) => {
 		window.queueMicrotask( handleSelectionChange );
 	}
 
+	/**
+	 * The native `selectionchange` event is asynchronous and may not have
+	 * been dispatched yet for a preceding selection change when the next
+	 * event arrives. Sync the record immediately so the handlers of the very
+	 * event being processed read a fresh record.
+	 */
+	function ensureSelectionSync() {
+		if ( ownerDocument.activeElement === element ) {
+			return;
+		}
+		if ( ! ownsSelection( element ) ) {
+			return;
+		}
+		handleSelectionChange();
+	}
+
 	// `input` and `compositionend` must run before block-editor's
 	// `input-rules.js` element-level listeners, which call `getValue()`
 	// reading `record.current` updated by our `onInput`. Use capture phase
 	// so we fire before any ancestor bubble handlers.
-	const unsubscribeInput = subscribeDelegatedListener(
+	const unsubscribeInput = subscribeOwnedListener(
 		element,
 		'input',
 		onInput,
 		true
 	);
-	const unsubscribeCompositionStart = subscribeDelegatedListener(
+	// Bound to the document with capture so it runs before any other
+	// listener of the event. Subscribed for every event type whose handlers
+	// read the internal record.
+	const unsubscribeEnsureSelection = [
+		'keydown',
+		'beforeinput',
+		'copy',
+		'cut',
+		'paste',
+	].map( ( eventType ) =>
+		subscribeDelegatedListener(
+			ownerDocument,
+			eventType,
+			ensureSelectionSync,
+			true
+		)
+	);
+	// Permanently subscribed: `handleSelectionChange` checks whether the
+	// element has focus or owns the selection itself. The shared underlying
+	// delegated listener keeps the number of native listeners constant.
+	const unsubscribeSelectionChange = subscribeDelegatedListener(
+		ownerDocument,
+		'selectionchange',
+		handleSelectionChange
+	);
+	const unsubscribeCompositionStart = subscribeOwnedListener(
 		element,
 		'compositionstart',
 		onCompositionStart
 	);
-	const unsubscribeCompositionEnd = subscribeDelegatedListener(
+	const unsubscribeCompositionEnd = subscribeOwnedListener(
 		element,
 		'compositionend',
 		onCompositionEnd,
@@ -283,21 +347,13 @@ export default ( props ) => ( element ) => {
 		'focusin',
 		onFocus
 	);
-	// Permanently subscribed rather than added on focus and removed on blur:
-	// `handleSelectionChange` checks whether the element is focused itself,
-	// and the shared underlying delegated listener keeps the number of native
-	// listeners constant.
-	const unsubscribeSelectionChange = subscribeDelegatedListener(
-		ownerDocument,
-		'selectionchange',
-		handleSelectionChange
-	);
 
 	return () => {
 		unsubscribeInput();
+		unsubscribeEnsureSelection.forEach( ( unsubscribe ) => unsubscribe() );
+		unsubscribeSelectionChange();
 		unsubscribeCompositionStart();
 		unsubscribeCompositionEnd();
 		unsubscribeFocus();
-		unsubscribeSelectionChange();
 	};
 };

packages/rich-text/src/owns-selection.js

@@ -0,0 +1,37 @@
+/**
+ * Returns true when the element owns the document selection: either the
+ * element itself has focus, or its contentEditable editing host has focus
+ * (e.g. an editable block editor canvas wrapper) and the selection is fully
+ * contained within the element.
+ *
+ * @param {HTMLElement} element The editable element.
+ *
+ * @return {boolean} Whether the element owns the document selection.
+ */
+export function ownsSelection( element ) {
+	const { ownerDocument } = element;
+	const { activeElement } = ownerDocument;
+
+	if ( activeElement === element ) {
+		return true;
+	}
+
+	if (
+		! activeElement ||
+		! activeElement.isContentEditable ||
+		! element.isContentEditable ||
+		! activeElement.contains( element )
+	) {
+		return false;
+	}
+
+	const selection = ownerDocument.defaultView.getSelection();
+	const { anchorNode, focusNode } = selection;
+
+	return (
+		!! anchorNode &&
+		!! focusNode &&
+		element.contains( anchorNode ) &&
+		element.contains( focusNode )
+	);
+}

packages/rich-text/src/subscribe-owned-listener.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { ownsSelection } from './owns-selection';
+import { unlock } from './lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
+
+/**
+ * Subscribes a callback for events owned by the given editable element:
+ * events targeting the element or its descendants, and events targeting a
+ * focused editing host (e.g. an editable block editor canvas wrapper) while
+ * the element contains the selection. In the latter case events target the
+ * host, never the element, so an element-bound listener would not fire.
+ *
+ * @param {HTMLElement} element   The editable element.
+ * @param {string}      eventType DOM event name.
+ * @param {Function}    callback  Listener to be invoked with the event.
+ * @param {boolean}     capture   Use the capture phase. Defaults to `false`.
+ *
+ * @return {Function} Unsubscribe function.
+ */
+export function subscribeOwnedListener(
+	element,
+	eventType,
+	callback,
+	capture = false
+) {
+	return subscribeDelegatedListener(
+		element.ownerDocument,
+		eventType,
+		( event ) => {
+			if (
+				! element.contains( event.target ) &&
+				! ownsSelection( element )
+			) {
+				return;
+			}
+			callback( event );
+		},
+		capture
+	);
+}