Skip to content

[lexical-playground] Bug Fix: Prevent floating link editor from overflowing bottom of editor bounds#8387

Closed
mayrang wants to merge 1 commit intofacebook:mainfrom
mayrang:fix/floating-link-editor-overflow
Closed

[lexical-playground] Bug Fix: Prevent floating link editor from overflowing bottom of editor bounds#8387
mayrang wants to merge 1 commit intofacebook:mainfrom
mayrang:fix/floating-link-editor-overflow

Conversation

@mayrang
Copy link
Copy Markdown
Contributor

@mayrang mayrang commented Apr 24, 2026

Description

Fixes #8362

When a link is near the bottom of the editor, the floating link editor popup overflows the editor scroller's bottom edge and gets clipped. This happens because setFloatingElemPositionForLinkEditor checks for top and right boundary collisions but not bottom.

This adds a bottom boundary check that mirrors the existing top boundary check — when the popup would overflow the bottom edge, it flips above the link instead:

+ if (top + floatingElemRect.height > editorScrollerRect.bottom) {
+   top -= floatingElemRect.height + targetRect.height + verticalGap * 2;
+ }

Test Plan

  1. Open the Lexical playground
  2. Add text and insert a link near the bottom of the editor
  3. Click the link
  4. Before: Floating link editor overflows below the editor bounds and is clipped
  5. After: Floating link editor flips above the link and stays within bounds

…lowing bottom of editor bounds

Add bottom boundary check to setFloatingElemPositionForLinkEditor so the
popup flips above the link when it would otherwise overflow the editor
scroller's bottom edge.

Fixes facebook#8362
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 24, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
lexical Ready Ready Preview, Comment Apr 24, 2026 5:35pm
lexical-playground Ready Ready Preview, Comment Apr 24, 2026 5:35pm

Request Review

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Apr 24, 2026
@etrepum etrepum added the extended-tests Run extended e2e tests on a PR label Apr 24, 2026
Copy link
Copy Markdown
Collaborator

@etrepum etrepum left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like this does it based on editor bounds but not also screen bounds so it might be worth fixing that too, or maybe just refactoring the link editor to use @floating-ui/react if it doesn't already.

Copy link
Copy Markdown
Contributor Author

@mayrang mayrang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the review! I think manually patching each edge case isn't sustainable. I'd prefer refactoring to @floating-ui/react if that direction works for you — or would you rather I just add a viewport bounds check on top of this for now?

@etrepum
Copy link
Copy Markdown
Collaborator

etrepum commented Apr 24, 2026

Refactoring for @floating-ui/react is the best option, the only reason it isn't done is because nobody has gotten around to it.

@mayrang
Copy link
Copy Markdown
Contributor Author

mayrang commented Apr 24, 2026

I'll open a new PR that refactors the link editor to use @floating-ui/react instead. Closing this one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. extended-tests Run extended e2e tests on a PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants