LexicalMenu rewrite with Floating UI

[ivailop7]

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

[vercel]

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