Skip to content

LexicalMenu rewrite with Floating UI#7623

Closed
ivailop7 wants to merge 8 commits intofacebook:mainfrom
ivailop7:menu_floating_rewrite
Closed

LexicalMenu rewrite with Floating UI#7623
ivailop7 wants to merge 8 commits intofacebook:mainfrom
ivailop7:menu_floating_rewrite

Conversation

@ivailop7
Copy link
Copy Markdown
Collaborator

@ivailop7 ivailop7 commented Jun 14, 2025 •
edited
Loading

Breaking Change for LexicalMenu users

  • The list item render method is now removed from all playground extensions and defined only once, reducing the overall size of the playground and making all plugin menus consistent
  • Component signature no longer takes 'menuRenderFn'
  • Rendered items are now buttons with accessibility coming from Floating-UI, not li items
  • Add dependency to floating-ui/react in the playground due to the virtual focus
  • Fixes the weird positioning issues when the text editor is scrolled, or menu displayed at borders
  • Adds icons support to the context menu
  • Breaking change: Removes the old ContextMenu plugin that was deprecated in a previous version

This one turned out much harder than I expected, due to the dual focus that needed to be maintained:

  • Up/Down arrows to focus the displayed menu (non-direct DOM child)
  • Left/Right/any other character to continue typing
  • Return/Enter to select an item from the list vs creating a new line

this was achieved by wrapping the App with FloatingTree and using the virtual logic of Floating UI for cases like this. More context here

To Do:

  • Clean up useDynamicPositioning and useMenuAnchor
  • Consolidate some helpers and css between context menu and lexical menu
  • update test cases

Migration plan for the Release notes:

  • Remove the 'menuRenderFn' from the LexicalMenu component and the respective MenuItem functions in the plugins
  • Wrap your Editor component with the <FloatingTree> component from 'floating-ui/react'
  • Use the theme object for 'lexicalMenu' to style with CSS

@facebook-github-bot facebook-github-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 Jun 14, 2025
@vercel
Copy link
Copy Markdown

vercel bot commented Jun 14, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
lexical ❌ Failed (Inspect) Jul 9, 2025 9:17pm
lexical-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 9, 2025 9:17pm

@ivailop7 ivailop7 mentioned this pull request Jun 14, 2025
Closed
@ivailop7 ivailop7 force-pushed the menu_floating_rewrite branch from 6f57532 to 49293e7 Compare June 14, 2025 21:51
@etrepum etrepum mentioned this pull request Jul 3, 2025
Closed
@ivailop7 ivailop7 force-pushed the menu_floating_rewrite branch from 10d5728 to dbebbf5 Compare July 6, 2025 22:34
@ivailop7 ivailop7 closed this Nov 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@zurfyx zurfyx Awaiting requested review from zurfyx zurfyx will be requested when the pull request is marked ready for review zurfyx is a code owner

@fantactuka fantactuka Awaiting requested review from fantactuka fantactuka will be requested when the pull request is marked ready for review fantactuka is a code owner

@acywatson acywatson Awaiting requested review from acywatson acywatson will be requested when the pull request is marked ready for review acywatson is a code owner

@potatowagon potatowagon Awaiting requested review from potatowagon potatowagon will be requested when the pull request is marked ready for review potatowagon is a code owner

@takuyakanbr takuyakanbr Awaiting requested review from takuyakanbr takuyakanbr will be requested when the pull request is marked ready for review takuyakanbr is a code owner

@etrepum etrepum Awaiting requested review from etrepum etrepum will be requested when the pull request is marked ready for review etrepum is a code owner

Assignees

No one assigned

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@ivailop7 @facebook-github-bot