fix(editor-input): support Lexical mention menu in Shadow DOM#459
Merged
Conversation
Apply the unmerged Lexical Shadow DOM fix (facebook/lexical#7790) via patch-package over registry lexical@0.38.2, and fix the mention plugin's Shadow-DOM-unsafe assumptions: - Port LexicalTypeaheadMenuPlugin locally to restore the menuRenderFn API removed in lexical 0.38 (keeps the custom EditorCombobox + public menuComponent/menuItemComponent props). - Give each mention option a unique key (was '' for all), fixing keyboard nav, highlighting and the duplicate-key warning. - Use event.composedPath() for outside-click detection and shadowRoot .activeElement for blur, so clicks inside the menu aren't misread across the shadow boundary. - preventDefault on item/menu mousedown so the editor keeps selection on click (otherwise the mention can't be inserted). - Portal the menu into the editor's shadow root so its styles apply. - scrollIntoView the highlighted option directly (the #typeahead-menu document lookup is null in Shadow DOM). - Match dropdown width to the editor (border-box, 100%). - Add InsideShadowDom story mounting via a real nested React root.
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
ravindrakele
approved these changes
Jun 10, 2026
…typeahead anchor Typing in consumers mounting many EditorInputs (e.g. SureRank metabox) lagged badly (~300ms/keystroke, multi-second main-thread tasks). Two compounding causes, both fixed here: - Accordion: the accessibility rework kept collapsed Accordion.Content children mounted (aria-hidden), so consumers with heavy panel content (Lexical editors) mounted everything up front and re-rendered it all on every keystroke. Keep the ARIA region element in the DOM so the trigger's aria-controls/aria-labelledby still resolve, but unmount the children via AnimatePresence while collapsed, as before v1.7.11. - EditorInput typeahead: the ported menu plugin created an anchor div on every render and appended it to document.body during render at every mount, forcing style recalcs per editor mount/unmount on heavy pages (and risking leaked divs from discarded renders). Create the anchor lazily and append it only when the menu actually opens. Also memoize the mention trigger regexes per trigger and bail out of setMenuParent when the shadow-root parent is unchanged, trimming the per-keystroke render path. Measured in the SureRank metabox repro: a fast-typed sentence went from a 15.3s main-thread task (~333ms/keystroke) to 0.38s total, with collapsed sections back to mounting zero editors.
jaieds
added a commit
that referenced
this pull request
Jun 10, 2026
…ention fix(editor-input): support Lexical mention menu in Shadow DOM
jaieds
added a commit
that referenced
this pull request
Jun 11, 2026
…ention fix(editor-input): support Lexical mention menu in Shadow DOM
jaieds
added a commit
that referenced
this pull request
Jun 11, 2026
…ention fix(editor-input): support Lexical mention menu in Shadow DOM
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Makes the Editor Input's mention/variable suggestions menu work when the editor is rendered inside a Shadow DOM.
The root cause is twofold: lexical 0.38 has no Shadow DOM selection support, and the mention plugin made several
document-level assumptions that break across the shadow boundary.Changes
patch-packageover registrylexical@0.38.2. No vendored binaries — patches are committed text inpatches/, applied onpostinstall. CI-safe (installs from registry + applies the committed patch).LexicalTypeaheadMenuPluginto restore themenuRenderFnAPI removed in lexical 0.38 (keeps the customEditorComboboxand the publicmenuComponent/menuItemComponentprops).'') — fixes keyboard nav, highlighting, and the duplicate-key warning.composedPath()outside-click detection +shadowRoot.activeElementblur so clicks inside the menu aren't misread across the shadow boundary.preventDefaulton item/menumousedownso the editor keeps selection on click (otherwise the mention can't be inserted).scrollIntoViewthe highlighted option directly (the#typeahead-menudocument lookup is null in Shadow DOM).InsideShadowDomstory mounting via a real nested React root.component-data.json; added changelog entry.Verified
npm ci(CI flow) installs registry 0.38.2 and applies all 6 patches ✔; Playwright in an open shadow root: typing, menu open, type-to-filter, mouse-click select, keyboard select + scroll-into-view, Escape/outside-click close. Non-shadow story unaffected.tsc+eslintclean; build passes.Note
force-ui externalizes
lexical, so the consuming app must carry the samepatches/+patch-packagepostinstall for the fix to reach its runtime — patch-package does not apply across the dependency boundary.