Keep the record selection authoritative during a stale-prop re-render

After handleChange dispatches a new selection to the store, the synchronous
forceRender can re-render before the selectionStart/selectionEnd props have
propagated. The render-time sync then overwrote the just-updated record with
the stale props and re-applied a stale caret to the DOM, dropping characters
at the wrong position while typing in a re-render-heavy context (e.g. an HTML
block's static inner blocks). Track the selection just dispatched and skip
the sync while the props still lag behind it.

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

Author: ellatrix

packages/rich-text/src/hook/index.js

@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useLayoutEffect, useReducer } from '@wordpress/element';
+import {
+	useRef,
+	useState,
+	useLayoutEffect,
+	useReducer,
+} from '@wordpress/element';
 import { useMergeRefs, useRefEffect } from '@wordpress/compose';
 import { useRegistry } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
@@ -97,12 +102,25 @@ function useRichTextBase( {
 
 	const hadSelectionUpdateRef = useRef( false );
 
+	// The selection `handleChange` last dispatched to the store. The
+	// `selectionStart`/`selectionEnd` props can momentarily lag it during a
+	// synchronous re-render (e.g. while typing in a re-render-heavy context),
+	// so the sync below must not overwrite the authoritative record with the
+	// stale props until they have caught up. Held in state (not a ref) so it
+	// can be read during render.
+	const [ pendingSelection, setPendingSelection ] = useState( null );
+	const propsLagSelection =
+		pendingSelection !== null &&
+		( selectionStart !== pendingSelection.start ||
+			selectionEnd !== pendingSelection.end );
+
 	if ( ! recordRef.current ) {
 		hadSelectionUpdateRef.current = isSelected;
 		setRecordFromProps();
 	} else if (
-		selectionStart !== recordRef.current.start ||
-		selectionEnd !== recordRef.current.end
+		! propsLagSelection &&
+		( selectionStart !== recordRef.current.start ||
+			selectionEnd !== recordRef.current.end )
 	) {
 		hadSelectionUpdateRef.current = isSelected;
 		recordRef.current = {
@@ -113,6 +131,17 @@ function useRichTextBase( {
 		};
 	}
 
+	// Clear the pending selection once the props reflect it.
+	useLayoutEffect( () => {
+		if (
+			pendingSelection !== null &&
+			selectionStart === pendingSelection.start &&
+			selectionEnd === pendingSelection.end
+		) {
+			setPendingSelection( null );
+		}
+	}, [ selectionStart, selectionEnd, pendingSelection ] );
+
 	/**
 	 * Sync the value to global state. The node tree and selection will also be
 	 * updated if differences are found.
@@ -152,6 +181,7 @@ function useRichTextBase( {
 				__unstableText: text,
 			} );
 		} );
+		setPendingSelection( { start, end } );
 		forceRender();
 	}