[lexical-react]: Add LexicalMenu styling to theme#7995
[lexical-react]: Add LexicalMenu styling to theme#7995ivailop7 wants to merge 2 commits intofacebook:mainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
james-atticus
left a comment
There was a problem hiding this comment.
Thanks for looking at this. Adding theming is good but doesn't quite meet the need where you have different styling for menus within the same editor.
As an example, we have a mentions typeahead menu and a text shortcuts typeahead menu with different styling. Currently we do this with menuRenderFn that constructs a container with a different class name on each. Eg:
.MentionsPlugin_typeahead-menu {
width: 320px;
max-height: 300px;
overflow-y: auto;
}
.MentionsPlugin_typeahead-menu .item {
color: var(--text-dark);
font-size: var(--font-medium);
font-weight: bold;
}I've pushed another commit here on top of your change which adds a prop that would allow us to do this (doesn't look like I can open an PR into your fork).
thanks, gave you edit to my fork, you should be able to push to the branch. |
…nd typeahead menus
|
Are we abandoning this? |
|
Seems so, for now. Closing. |
Since removing the menuRenderFn from the LexicalMenu component to allow for refactoring of the rendering and positioning, removed some styling flexibility. This PR adds the following theme classes for the LexicalMenu in the react package:
this should provide enough flexibility to style completely the LexicalMenu using pure CSS.