FloatingUI for LexicalMenu positioning #7409
Draft
Conversation
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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Currently has a bug with the Paste event from the custom context menu, where it appens to the start of the editor, vs where the selection was done. I guess it's a focus-related thing. Yet to pin down. |
|
I have found a much cleaner approach to do this. I'll do the ContextMenu by itself not using the LexicalMenu component at all. So this would allow to clean up the LexicalMenu and get rid of the pointer vs caret coordinates derivation code in the useMenuAnchor hook and make easier to reason about menu positioning. |
This was referenced May 3, 2025
8fc3af7 to
4966d37
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Since the Core team agreed that it's OK for the @lexical/react package to depend on floating UI to fix the difficult problem of popovers positioning. This PR begins this transition. This PR does this for the typeahead-based menus.
This PR also introduces a breaking change, because it removes the custom
menuRenderFnprop in LexicalMenu so one does not need to pass it in each typeahead widget (Mention, Forward slash, Emoji Picker, AutoEmbed), but reuses the same style and configuration for all them. This ensures consistency and reduces the overall codebase size and removes a bit of the duplicated code with respect to the playground code.There are other places where FloatingUI can be used like 'floating format toolbar', 'add comment popover', 'context menu', 'drag handle positioning', 'table hover action buttons', 'dropdown (toolbar and table action items)', 'the new + icon menu' those can come later on.