Color pickers are displayed below the modal

[AgrYpn1a]

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:

1. 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,
        ];

[futurliberta]

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` }}}
/>

[AgrYpn1a]

@jfily I have opened a PR with a fix, need to handle couple of more things and it should be ready soon.

[miguelcr1982]

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

[sjdemartini]

@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.

[AgrYpn1a]

@sjdemartini I wish you have provided me with the container solution earlier :D in my case, it works as expect, thanks.

[sjdemartini]

@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

[mohamedzhioua]

• i fixe it using this line of code to the MenuButtonTextColor and MenuButtonHighlightColor :
  --> Added PopperProps with custom zIndex to ensure the color picker is displayed above other UI elements.
  --> Using !important to override any conflicting zIndex styles applied by parent components or modals.
  PopperProps={{
  sx: { zIndex: (theme) => ${theme.zIndex.tooltip} !important },
  }}

[sjdemartini]

jfyi, I've updated the default z-index of the bubble menus and poppers to use theme.zIndex.tooltip to fix this problem, released in v1.14.0.