Skip to content

Link UI incorrectly anchored to "last" link within rich text contenteditable #58280

@getdave

Description

@getdave

If you have multiple links within a block of rich text then the Link UI will be "anchor" to the final first link you clicked in the block.

So if you click the first link in the block and then click on other links, the popover will continue to anchor to the first link. Similarly if you clicked the last link first, it would continue to anchor to that link.

It should be anchored to the link that triggers it. I suspect this is due to the way in which we recently changed the usage of useAnchor to cache the first position.

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

Screen.Capture.on.2024-01-25.at.20-41-55.mp4

Metadata

Metadata

Assignees

Labels

[Feature] Link EditingLink components (LinkControl, URLInput) and integrations (RichText link formatting)[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions