Some MenuButtons not working with @mui/material": "^6.1.2" and "@tiptap/": "^2.9.1",

[akreienbring]

Describe the bug

A clear and concise description of what the bug is.

Before filing a bug, please confirm that you have:

1. Set up your extensions correctly.

   a. Installed the necessary Tiptap extensions for whatever functionality you are trying to use (e.g. Color extension for using the MenuButtonTextColor).

   b. Passed the extensions you need to the extensions field of RichTextEditor/useEditor

   See README info here for more details.

2. Confirmed there isn't CSS external to mui-tiptap that is causing a problem with appearance/layout.

To Reproduce

Please include a CodeSandbox demo of the problem if possible. (You can fork this CodeSandbox.)

Steps to reproduce the behavior:

1. 2. 3.

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

System (please complete the following information)

• mui-tiptap version: [e.g. 1.1.0]
• tiptap version: 2.9.1
• @mui/material: 6.1.2
• @mui/icons-material version: Not installed by me!
• Browser: Chrome, Firefox
• Node version: 20x
• OS:Windows 11
• Extensions used with a hook, like in your CodeSandBox

Additional context

The MenuButtons: MenuButtonEditLink, MenuButtonTextColor, MenuButtonHighlightColor, don't open the popup dialogs. As I took / compared my code from / with your CodeSandBox I can only imagine that I missed some important npm package or MUI / TipTap had some breaking changes.

Despite I have not installed @mui/icons-material (guess that's not the cause) I can't see anything in your provided package.json that I missed. For clarity, here is the relevant part of mine:

    "@mui/material": "^6.1.2",
    "@tiptap/core": "^2.9.1",
    "@tiptap/extension-blockquote": "^2.9.1",
    "@tiptap/extension-bold": "^2.9.1",
    "@tiptap/extension-bullet-list": "^2.9.1",
    "@tiptap/extension-code": "^2.9.1",
    "@tiptap/extension-code-block": "^2.9.1",
    "@tiptap/extension-color": "^2.9.1",
    "@tiptap/extension-document": "^2.9.1",
    "@tiptap/extension-highlight": "^2.9.1",
    "@tiptap/extension-history": "^2.9.1",
    "@tiptap/extension-italic": "^2.9.1",
    "@tiptap/extension-link": "^2.9.1",
    "@tiptap/extension-list-item": "^2.9.1",
    "@tiptap/extension-ordered-list": "^2.9.1",
    "@tiptap/extension-paragraph": "^2.9.1",
    "@tiptap/extension-placeholder": "^2.9.1",
    "@tiptap/extension-strike": "^2.9.1",
    "@tiptap/extension-text": "^2.9.1",
    "@tiptap/extension-text-style": "^2.9.1",
    "@tiptap/extension-underline": "^2.9.1",
    "@tiptap/pm": "^2.9.1",
    "@tiptap/react": "^2.9.1",

All other MenuButtons work as expected. BTW: Thanks for this helpful library!

Edit: I'm running this with Reactjs and Javascript

[markdon]

Your popups may be rendering below other UI, like a MUI modal. You can see this with Chrome Dev Tools:

It is fixable by specifying the container where the popup should be appended (instead of document.body):

<MenuButtonHighlightColor
          PopperProps={{ container: popperContainer }}
          swatchColors={highlightColors}
        />

See https://mui.com/material-ui/api/popper/#:~:text=to%20migrate.-,container,-HTML%20element%0A%7C%C2%A0func

Edit: I noticed @sjdemartini provided this solution here: https://github.com/sjdemartini/mui-tiptap/issues/206#issuecomment-2133851815