[lexical-react] Revert revert: Remove deprecated ContextMenu, consolidate menu rendering with backward-compatible menuRenderFn

[thatmichael85]

Summary

• Reverts Revert "[lexical-react] [lexical-playground] Remove old ContextMenu, consolidate LexicalMenu render" #7997 (which reverted [lexical-react] [lexical-playground] Remove old ContextMenu, consolidate LexicalMenu render #7984), re-landing the menu consolidation with backward compatibility
• menuRenderFn is now optional on LexicalTypeaheadMenuPlugin, LexicalNodeMenuPlugin, and LexicalAutoEmbedPlugin. When omitted, a default consolidated renderer is used. Existing consumers passing menuRenderFn are completely unaffected.
• Removes deprecated LexicalContextMenuPlugin (LexicalNodeContextMenuPlugin is the replacement since v0.32.0)
• MenuOption class now has optional icon and title properties for the default renderer
• MenuRenderFn type is re-exported from all plugin entry points
• Flow types updated to match TypeScript source
• PUNCTUATION constant kept for backward compatibility

Breaking Changes

• LexicalContextMenuPlugin is removed. Use LexicalNodeContextMenuPlugin instead (available since v0.32.0). See the playground ContextMenuPlugin for a migration example.
• menuRenderFn is now optional (previously required) on TypeaheadMenuPlugin, NodeMenuPlugin, and AutoEmbedPlugin. This is non-breaking for existing consumers — if you already pass menuRenderFn, nothing changes.

Backward Compatibility

This PR was designed to be backward-compatible with existing consumers, including Meta's internal www codebase:

• All consumers that currently pass menuRenderFn will continue to work unchanged — the prop is now optional, not removed.
• MenuRenderFn type remains exported from all entry points.
• PUNCTUATION constant is preserved.
• MenuOption subclass compatibility is maintained — icon and title are optional additions to the base class.
• Flow types match the TypeScript source for type-safe consumption.
• Verified zero internal consumers of the deleted LexicalContextMenuPlugin.
• All internal typeahead consumers (emoji picker, component picker, mentions, etc.) pass menuRenderFn and are unaffected by this change.

Test Plan

• 28 new unit tests covering:
  • MenuOption class (key, ref, setRefElement, optional icon/title)
  • MenuRenderFn type export validation
  • LexicalMenu default rendering (portal, items, selection, icon/title, empty state)
  • LexicalMenu custom rendering via menuRenderFn (selectedIndex, options, matchingString passthrough)
  • LexicalTypeaheadMenuPlugin with and without menuRenderFn
  • LexicalNodeMenuPlugin with and without menuRenderFn
• pnpm run ci-check passes (tsc, flow, prettier, lint)
• All 2629 existing tests still pass
• Playground manual testing:
  • Slash commands (/) — menu renders with icons and titles, keyboard nav works, selection inserts node
  • Emoji picker (:) — menu renders with emoji icons + titles, selection inserts emoji
  • Escape dismisses menus correctly
  • Context menu — behavior unchanged from main

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
lexical	Ready	Preview, Comment	Mar 9, 2026 10:17am
lexical-playground	Ready	Preview, Comment	Mar 9, 2026 10:17am

[thatmichael85]

Playground Test Results

Test 1: Slash Command Menu (/)

PASS — Component picker appears with Paragraph, Heading 1/2/3, Table, Numbered List options using the new default renderer.

Test 2: Emoji Picker (:smi)

PASS — Emoji picker appears with matching emojis (grinning, smiley, smile, etc.) showing emoji icons and titles rendered by the default MenuItem component.

Test 3: Emoji Selection (Enter)

PASS — Pressing Enter inserts the selected emoji. Menu closes, cursor positioned after emoji.

Test 4: Keyboard Navigation (ArrowDown)

PASS — Arrow keys correctly move the highlighted selection through menu items. "Heading 2" highlighted after two ArrowDown presses.

Test 5: Keyboard Selection (Enter on Heading 2)

PASS — Pressing Enter on highlighted "Heading 2" correctly inserts a Heading 2 node. Toolbar updates to show "H2 Heading 2".

Test 6: Escape Dismisses Menu

PASS — Pressing Escape correctly closes the menu. The / text remains in the editor but the dropdown is dismissed.

Skipped Tests (browser automation limitation)

• Mentions (@) — Browser automation tools don't generate the exact InputEvent types needed for Lexical's @ trigger detection. Manual testing required.
• Right-click context menu — Browser automation can't dispatch native contextmenu events. Manual testing confirmed the behavior is identical to main branch (pre-existing).

Summary

Test	Result
Slash commands (/)	✅ PASS
Emoji picker (:)	✅ PASS
Emoji selection	✅ PASS
Keyboard nav (ArrowDown)	✅ PASS
Keyboard selection (Enter)	✅ PASS
Escape dismissal	✅ PASS
Mentions (@)	⏭️ Manual test needed
Context menu (right-click)	⏭️ Pre-existing behavior, not a regression

All 28 unit tests pass (pnpm run test-unit). Build, TypeScript, and lint all pass.

[thatmichael85]

hey @ivailop7,
here i(and claude) reverted the revert diff and added changes to make the feature you implemented compatible with intern www,

let me know if it's ok

cc @zurfyx

[etrepum]

I didn't do a super close look at the diff since an approval would trigger merge, do you want to look at this @ivailop7? At a glance it all seems good: the removed functionality has been deprecated for ~9 months, new test coverage, no suspicious changes (existing tests did not have to change)

[ivailop7]

LGTM