Skip to content

Bug: Floating link editor can overflow editor bounds and be clipped #8362

@jimrandomh

Description

@jimrandomh

When you create a link, and when you put the cursor inside a link, a floating link editor appears below the link so you can edit the link destination URL. While this looks like a popup layered over the editor, in the DOM structure it's inside the editor, and if the link is at the bottom of the document, it overflows the editor bounds and gets clipped.

Lexical screenshot playground, showing it both being clipped and also having the wrong Z-index/layering:

Image

In Lexical Playground, there is just enough bottom-padding for the popup to be usable anyways (though it does look visually broken). In our (LW's) comment box, we have less bottom-padding, and we added things to the floating link editor that made it taller, so it's more fully broken (the buttons are entirely in the clipped region).

There are two approaches to fixing this. One is to detect when this is happening and flip it from below to above. The other is to place it somewhere else in the DOM, outside the editor. The latter is more complicated but does have precedent; CommentPlugin_CommentInputBox works that way, for example.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions