Color pickers are displayed below the modal
AgrYpn1a opened this issue · comments
Describe the bug
When using <MenuButtonTextColor />
and <MenuButtonHighlightColor />
color pickers in the TipTap placed in a modal, color pickers are rendered in a layer below the modal.
To Reproduce
Steps to reproduce the behavior:
- Use color pickers in the TipTap that is rendered in a MUI Dialog (Modal)
Expected behavior
The same is happening with editing links, however, for links there is a special component <LinkBubbleMenu />
that can be modified by passing an argument for container
prop that is a reference to a container in which the popup should be rendered, if proper modal container is passed in, the link popup is rendered in a correct layer without having to mess with z-index
. The expected behaviour would be the same as it is for links.
<LinkBubbleMenu container={props.dialogRef?.current} />
Screenshots
System (please complete the following information)
- mui-tiptap version: ^1.8.6
- tiptap version: ^2.2.4
- Browser: Chrome
- Node version: 18
- OS: macOS 11.4
- Copy-paste your
extensions
array used for the editor:
return [
BulletList,
CodeBlock,
Document,
HardBreak,
ListItem,
OrderedList,
Paragraph,
Text,
Bold,
Blockquote,
Code,
Italic,
Underline,
CustomLinkExtension.configure({
autolink: true,
linkOnPaste: true,
openOnClick: false,
}),
LinkBubbleMenuHandler,
Gapcursor,
HeadingWithAnchor,
TextAlign.configure({
types: ['heading', 'paragraph', 'image'],
}),
TextStyle,
Color,
FontSize,
Highlight.configure({ multicolor: true }),
HorizontalRule,
ResizableImage,
Dropcursor,
History,
];
Same problem. I tried this but it's not working.
<MenuButtonTextColor
defaultTextColor={theme.palette.text.primary}
swatchColors={colors}
PopperProps={{ style: { zIndex: `${theme.zIndex.modal + 1} !important` }}}
/>
@jfily I have opened a PR with a fix, need to handle couple of more things and it should be ready soon.
Same problem. I tried this but it's not working.
<MenuButtonTextColor defaultTextColor={theme.palette.text.primary} swatchColors={colors} PopperProps={{ style: { zIndex: `${theme.zIndex.modal + 1} !important` }}} />
That's worked me, but with modify z Index to 5
@AgrYpn1a So you can actually specify the container
for these menu buttons' color pickers so that they can appear on top of whatever context you prefer, similar to what the original issue here is requesting/suggesting should be possible (in line with <LinkBubbleMenu container={...} />
).
To use it, you pass container
element as one of the button's PopperProps
. Under the hood, this is the same as what the bubble menus use (a Popper
's container
):
<MenuButtonTextColor PopperProps={{ container: myContainer }} />
<MenuButtonHighlightColor PopperProps={{ container: myContainer }} />
Alternatively, a z-index override of the PopperProps
can be used as suggested above (thanks!). Here's one flavor of that:
<MenuButtonTextColor
PopperProps={{
sx: { zIndex: (theme) => `${theme.zIndex.tooltip} !important` },
}}
/>
I think because of these options (particularly the container
via PopperProps
) this reduces the need for a separate component that users have to render just for the color picker. The color picker isn't currently a "bubble menu" in the same way that the link and table menus are. I'll follow up separately on your PR.
Let me know if for some reason the above does not work.
@sjdemartini I wish you have provided me with the container
solution earlier :D in my case, it works as expect, thanks.
@sjdemartini I wish you have provided me with the
container
solution earlier :D in my case, it works as expect, thanks.
@AgrYpn1a 😅 I wasn't sure myself how to handle that since I hadn't used the color pickers in that sort of context before, and unfortunately didn't have time earlier to look into it, but glad this PopperProps container works for you after all! Thanks again for the thorough report and for spending time looking into a fix