Skip to content

Commit

Permalink
Fix incorrect useAnchor positioning when switching from virtual to ri…
Browse files Browse the repository at this point in the history
…ch text elements (#58900)

When creating a link or inline text color, we start with a virtual element and then after creating the link/adding a color, it switches from a virtual to rich text element (<a> or <mark>). We want to recompute that we've changed elements and reanchor appropriately when this happens.

Also, useAnchor was adding focus and selectionChange events that were only used by a previous version of the link control UX where the link popover would show based on the caret position. If the caret was within the link, we would show the link popover. This is no longer the case, so we can remove these event listeners.
  • Loading branch information
jeryj authored and youknowriad committed Feb 13, 2024
1 parent 924b0f1 commit 5f03c58
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 58 deletions.
22 changes: 1 addition & 21 deletions packages/format-library/src/link/inline.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import {
import {
__experimentalLinkControl as LinkControl,
store as blockEditorStore,
useCachedTruthy,
} from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';

Expand Down Expand Up @@ -195,28 +194,9 @@ function InlineLinkUI( {

const popoverAnchor = useAnchor( {
editableContentElement: contentRef.current,
settings,
settings: { ...settings, isActive },
} );

// As you change the link by interacting with the Link UI
// 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 Link UI.
// This caches the last truthy value of the selection anchor reference.
// This ensures the Popover is positioned correctly on initial submission of the link.
const cachedRect = useCachedTruthy( popoverAnchor.getBoundingClientRect() );

// If the link is not active (i.e. it is a new link) then we need to
// override the getBoundingClientRect method on the anchor element
// to return the cached value of the selection represented by the text
// that the user selected to be linked.
// If the link is active (i.e. it is an existing link) then we allow
// the default behaviour of the popover anchor to be used. This will get
// the anchor based on the `<a>` element in the rich text.
if ( ! isActive ) {
popoverAnchor.getBoundingClientRect = () => cachedRect;
}

async function handleCreate( pageTitle ) {
const page = await createPageEntity( {
title: pageTitle,
Expand Down
1 change: 1 addition & 0 deletions packages/format-library/src/text-color/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ function TextColorEdit( {
value={ value }
onChange={ onChange }
contentRef={ contentRef }
isActive={ isActive }
/>
) }
</>
Expand Down
14 changes: 2 additions & 12 deletions packages/format-library/src/text-color/inline.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import {
getColorObjectByColorValue,
getColorObjectByAttributeValues,
store as blockEditorStore,
useCachedTruthy,
} from '@wordpress/block-editor';
import {
Popover,
Expand Down Expand Up @@ -147,22 +146,13 @@ export default function InlineColorUI( {
onChange,
onClose,
contentRef,
isActive,
} ) {
const popoverAnchor = useAnchor( {
editableContentElement: contentRef.current,
settings,
settings: { ...settings, isActive },
} );

/*
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 cachedRect = useCachedTruthy( popoverAnchor.getBoundingClientRect() );
popoverAnchor.getBoundingClientRect = () => cachedRect;

return (
<Popover
onClose={ onClose }
Expand Down
38 changes: 13 additions & 25 deletions packages/rich-text/src/component/use-anchor.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/**
* WordPress dependencies
*/
import { usePrevious } from '@wordpress/compose';
import { useState, useLayoutEffect } from '@wordpress/element';

/** @typedef {import('../register-format-type').WPFormat} WPFormat */
Expand Down Expand Up @@ -137,44 +138,31 @@ function getAnchor( editableContentElement, tagName, className ) {
* @return {Element|VirtualAnchorElement|undefined|null} The active element or selection range.
*/
export function useAnchor( { editableContentElement, settings = {} } ) {
const { tagName, className } = settings;
const { tagName, className, isActive } = settings;
const [ anchor, setAnchor ] = useState( () =>
getAnchor( editableContentElement, tagName, className )
);
const wasActive = usePrevious( isActive );

useLayoutEffect( () => {
if ( ! editableContentElement ) return;

const { ownerDocument } = editableContentElement;

function callback() {
if (
editableContentElement === ownerDocument.activeElement ||
// When a link is created, we need to attach the popover to the newly created anchor.
( ! wasActive && isActive ) ||
// Sometimes we're _removing_ an active anchor, such as the inline color popover.
// When we add the color, it switches from a virtual anchor to a `<mark>` element.
// When we _remove_ the color, it switches from a `<mark>` element to a virtual anchor.
( wasActive && ! isActive )
) {
setAnchor(
getAnchor( editableContentElement, tagName, className )
);
}

function attach() {
ownerDocument.addEventListener( 'selectionchange', callback );
}

function detach() {
ownerDocument.removeEventListener( 'selectionchange', callback );
}

if ( editableContentElement === ownerDocument.activeElement ) {
attach();
}

editableContentElement.addEventListener( 'focusin', attach );
editableContentElement.addEventListener( 'focusout', detach );

return () => {
detach();

editableContentElement.removeEventListener( 'focusin', attach );
editableContentElement.removeEventListener( 'focusout', detach );
};
}, [ editableContentElement, tagName, className ] );
}, [ editableContentElement, tagName, className, isActive, wasActive ] );

return anchor;
}

0 comments on commit 5f03c58

Please sign in to comment.