Skip to content

Commit

Permalink
Format Library: Try to fix highlight popover jumping
Browse files Browse the repository at this point in the history
  • Loading branch information
t-hamano committed Sep 22, 2023
1 parent d1c4d51 commit bc710c9
Showing 1 changed file with 7 additions and 6 deletions.
13 changes: 7 additions & 6 deletions packages/format-library/src/text-color/inline.js
Original file line number Diff line number Diff line change
Expand Up @@ -137,19 +137,20 @@ export default function InlineColorUI( {
onClose,
contentRef,
} ) {
const popoverAnchor = useAnchor( {
editableContentElement: contentRef.current,
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 useAnchor 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 popoverAnchor = useCachedTruthy(
useAnchor( {
editableContentElement: contentRef.current,
settings,
} )
);
const cachedRect = useCachedTruthy( popoverAnchor.getBoundingClientRect() );
popoverAnchor.getBoundingClientRect = () => cachedRect;

return (
<Popover
Expand Down

0 comments on commit bc710c9

Please sign in to comment.