From 447e0b1098d68f0fbba29ed3d06c639a8a4d144a Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Thu, 28 Mar 2024 18:14:04 +0200
Subject: [PATCH] RichText: separate fallback instance ID for selection
 retrieval (#60277)

Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
---
 .../src/components/rich-text/index.js         | 34 +++++++++++++++----
 .../components/rich-text/with-deprecations.js |  3 --
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index 3d1725c54fe715..f586694a56b97a 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -13,7 +13,7 @@ import {
 	createContext,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, useInstanceId } from '@wordpress/compose';
 import {
 	__unstableUseRichText as useRichText,
 	removeFormat,
@@ -52,6 +52,8 @@ import { canBindBlock } from '../../hooks/use-bindings-attributes';
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
 
+const instanceIdKey = Symbol( 'instanceId' );
+
 /**
  * Removes props used for the native version of RichText so that they are not
  * passed to the DOM element and log warnings.
@@ -117,6 +119,8 @@ export function RichTextWrapper(
 ) {
 	props = removeNativeProps( props );
 
+	const instanceId = useInstanceId( RichTextWrapper );
+
 	const anchorRef = useRef();
 	const context = useBlockEditContext();
 	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
@@ -139,7 +143,9 @@ export function RichTextWrapper(
 			isSelected =
 				selectionStart.clientId === clientId &&
 				selectionEnd.clientId === clientId &&
-				selectionStart.attributeKey === identifier;
+				( identifier
+					? selectionStart.attributeKey === identifier
+					: selectionStart[ instanceIdKey ] === instanceId );
 		} else if ( originalIsSelected ) {
 			isSelected = selectionStart.clientId === clientId;
 		}
@@ -153,6 +159,7 @@ export function RichTextWrapper(
 	const { selectionStart, selectionEnd, isSelected } = useSelect( selector, [
 		clientId,
 		identifier,
+		instanceId,
 		originalIsSelected,
 		isBlockSelected,
 	] );
@@ -213,6 +220,13 @@ export function RichTextWrapper(
 			const selection = {};
 			const unset = start === undefined && end === undefined;
 
+			const baseSelection = {
+				clientId,
+				[ identifier ? 'attributeKey' : instanceIdKey ]: identifier
+					? identifier
+					: instanceId,
+			};
+
 			if ( typeof start === 'number' || unset ) {
 				// If we are only setting the start (or the end below), which
 				// means a partial selection, and we're not updating a selection
@@ -227,8 +241,7 @@ export function RichTextWrapper(
 				}
 
 				selection.start = {
-					clientId,
-					attributeKey: identifier,
+					...baseSelection,
 					offset: start,
 				};
 			}
@@ -243,15 +256,22 @@ export function RichTextWrapper(
 				}
 
 				selection.end = {
-					clientId,
-					attributeKey: identifier,
+					...baseSelection,
 					offset: end,
 				};
 			}
 
 			selectionChange( selection );
 		},
-		[ clientId, identifier ]
+		[
+			clientId,
+			getBlockRootClientId,
+			getSelectionEnd,
+			getSelectionStart,
+			identifier,
+			instanceId,
+			selectionChange,
+		]
 	);
 
 	const {
diff --git a/packages/block-editor/src/components/rich-text/with-deprecations.js b/packages/block-editor/src/components/rich-text/with-deprecations.js
index 8feab2206900af..92a101f84be629 100644
--- a/packages/block-editor/src/components/rich-text/with-deprecations.js
+++ b/packages/block-editor/src/components/rich-text/with-deprecations.js
@@ -3,7 +3,6 @@
  */
 import { forwardRef } from '@wordpress/element';
 import { children as childrenSource } from '@wordpress/blocks';
-import { useInstanceId } from '@wordpress/compose';
 import { __unstableCreateElement } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
 
@@ -36,12 +35,10 @@ export function withDeprecations( Component ) {
 		}
 
 		const NewComponent = props.multiline ? RichTextMultiline : Component;
-		const instanceId = useInstanceId( NewComponent );
 
 		return (
 			<NewComponent
 				{ ...props }
-				identifier={ props.identifier || instanceId }
 				value={ value }
 				onChange={ onChange }
 				ref={ ref }