Keep a copy of anchor ref to preserve highlighted text selection (#36263

)

* Keep a copy of anchor ref to preserve selection

* Update native files as well

packages/block-editor/README.md

@@ -680,6 +680,18 @@ _Returns_
 
 -   `Object`: Props to pass to the element to mark as a block.
 
+### useCachedTruthy
+
+Keeps an up-to-date copy of the passed value and returns it. If value becomes falsy, it will return the last truthy copy.
+
+_Parameters_
+
+-   _value_ `any`:
+
+_Returns_
+
+-   `any`: value
+
 ### useInnerBlocksProps
 
 This hook is used to lightly mark an element as an inner blocks wrapper

packages/block-editor/src/hooks/index.js

@@ -18,3 +18,4 @@ export { useCustomSides } from './dimensions';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
+export { useCachedTruthy } from './use-cached-truthy';

packages/block-editor/src/hooks/index.native.js

@@ -13,3 +13,4 @@ import './font-size';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
+export { useCachedTruthy } from './use-cached-truthy';

packages/block-editor/src/hooks/use-cached-truthy.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Keeps an up-to-date copy of the passed value and returns it. If value becomes falsy, it will return the last truthy copy.
+ *
+ * @param {any} value
+ * @return {any} value
+ */
+export function useCachedTruthy( value ) {
+	const [ cachedValue, setCachedValue ] = useState( value );
+	useEffect( () => {
+		if ( value ) {
+			setCachedValue( value );
+		}
+	}, [ value ] );
+	return cachedValue;
+}

packages/block-editor/src/index.js

@@ -9,6 +9,7 @@ export {
 	useColorProps as __experimentalUseColorProps,
 	useCustomSides as __experimentalUseCustomSides,
 	getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles,
+	useCachedTruthy,
 } from './hooks';
 export * from './components';
 export * from './utils';

packages/format-library/src/text-color/inline.js

@@ -20,6 +20,7 @@ import {
 	getColorObjectByColorValue,
 	getColorObjectByAttributeValues,
 	store as blockEditorStore,
+	useCachedTruthy,
 } from '@wordpress/block-editor';
 import { Popover, TabPanel } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -139,7 +140,17 @@ export default function InlineColorUI( {
 	onClose,
 	contentRef,
 } ) {
-	const anchorRef = useAnchorRef( { ref: contentRef, value, settings } );
+	/* 
+	 As you change the text color by typing a HEX value into a field,
+	 the return value of document.getSelection jumps to the field you're editing,
+	 not the highlighted text. Given that useAnchorRef uses document.getSelection,
+	 it will return null, since it can't find the <mark> element within the HEX input.
+	 This caches the last truthy value of the selection anchor reference.
+	 */
+	const anchorRef = useCachedTruthy(
+		useAnchorRef( { ref: contentRef, value, settings } )
+	);
+
 	return (
 		<Popover
 			onClose={ onClose }