Expose API to allow triggering the anchor to be recomputed

WordPress · Jan 10, 2024 · 36a92d3 · 36a92d3
1 parent 32e820d
commit 36a92d3
Showing 1 changed file with 7 additions and 8 deletions.
diff --git a/packages/rich-text/src/component/use-anchor.js b/packages/rich-text/src/component/use-anchor.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState, useLayoutEffect } from '@wordpress/element';
+import { useState, useLayoutEffect, useCallback } from '@wordpress/element';
 
 /** @typedef {import('../register-format-type').WPFormat} WPFormat */
 /** @typedef {import('../types').RichTextValue} RichTextValue */
@@ -142,17 +142,15 @@ export function useAnchor( { editableContentElement, settings = {} } ) {
 		getAnchor( editableContentElement, tagName, className )
 	);
 
+	const callback = useCallback( () => {
+		setAnchor( getAnchor( editableContentElement, tagName, className ) );
+	}, [ className, editableContentElement, tagName ] );
+
 	useLayoutEffect( () => {
 		if ( ! editableContentElement ) return;
 
 		const { ownerDocument } = editableContentElement;
 
-		function callback() {
-			setAnchor(
-				getAnchor( editableContentElement, tagName, className )
-			);
-		}
-
 		function attach() {
 			ownerDocument.addEventListener( 'selectionchange', callback );
 		}
@@ -174,7 +172,8 @@ export function useAnchor( { editableContentElement, settings = {} } ) {
 			editableContentElement.removeEventListener( 'focusin', attach );
 			editableContentElement.removeEventListener( 'focusout', detach );
 		};
-	}, [ editableContentElement, tagName, className ] );
+	}, [ editableContentElement, tagName, className, callback ] );
 
+	anchor.update = callback;
 	return anchor;
 }