diff --git a/packages/rich-text/src/component/use-anchor.js b/packages/rich-text/src/component/use-anchor.js index ce571858a9b99f..7ea3281cb60d3a 100644 --- 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, useCallback } from '@wordpress/element'; +import { useState, useLayoutEffect } from '@wordpress/element'; /** @typedef {import('../register-format-type').WPFormat} WPFormat */ /** @typedef {import('../types').RichTextValue} RichTextValue */ @@ -142,15 +142,17 @@ 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 ); } @@ -172,8 +174,7 @@ export function useAnchor( { editableContentElement, settings = {} } ) { editableContentElement.removeEventListener( 'focusin', attach ); editableContentElement.removeEventListener( 'focusout', detach ); }; - }, [ editableContentElement, tagName, className, callback ] ); + }, [ editableContentElement, tagName, className ] ); - anchor.update = callback; return anchor; }