MenuButton & MenuButtonHighlightColor render incorrectly when used inside shadow DOM web-components

[kartikmandhan]

Describe the bug

1.MenuButton's Tooltip goes behind the popup, also the styling is not applied,
is there a container prop solution possible for this as well

2. ClorPicker doesn't show in MenuButtonHighlightColor/MenuButtonTextColor, when I change the container via PopperProps
   

System (please complete the following information)

• mui-tiptap version:1.8.7
• tiptap version: 2.0.4
• Browser: All
• Node version: 16.4.2
• OS: Ubuntu
• Copy-paste your extensions array used for the editor:

 <MenuControlsContainer>
      <MenuSelectFontFamily
        MenuProps={{
          container: containerEl,
        }}
        options={[
          { label: "Comic Sans", value: "Comic Sans MS, Comic Sans" },
          { label: "Cursive", value: "cursive" },
          { label: "Monospace", value: "monospace" },
          { label: "Serif", value: "serif" },
        ]}
      />

      <MenuDivider />

      <MenuSelectHeading
        MenuProps={{
          container: containerEl,
        }}
      />

      <MenuDivider />

      <MenuSelectFontSize
        MenuProps={{
          container: containerEl,
        }}
      />

      <MenuDivider />

      <MenuButtonBold />

      <MenuButtonItalic />

      <MenuButtonUnderline />

      <MenuButtonStrikethrough />

      <MenuButtonSubscript />

      <MenuButtonSuperscript />

      <MenuDivider />

      <MenuButtonTextColor
        PopperProps={{
          container: containerEl,
        }}
        defaultTextColor={theme.palette.text.primary}
        swatchColors={[
          { value: "#000000", label: "Black" },
          { value: "#ffffff", label: "White" },
          { value: "#888888", label: "Grey" },
          { value: "#ff0000", label: "Red" },
          { value: "#ff9900", label: "Orange" },
          { value: "#ffff00", label: "Yellow" },
          { value: "#00d000", label: "Green" },
          { value: "#0000ff", label: "Blue" },
        ]}
      />

      <MenuButtonHighlightColor
        PopperProps={{
          container: containerEl,
        }}
        swatchColors={[
          { value: "#595959", label: "Dark grey" },
          { value: "#dddddd", label: "Light grey" },
          { value: "#ffa6a6", label: "Light red" },
          { value: "#ffd699", label: "Light orange" },
          // Plain yellow matches the browser default `mark` like when using Cmd+Shift+H
          { value: "#ffff00", label: "Yellow" },
          { value: "#99cc99", label: "Light green" },
          { value: "#90c6ff", label: "Light blue" },
          { value: "#8085e9", label: "Light purple" },
        ]}
      />

      <MenuDivider />

      <MenuButtonEditLink />

      <MenuDivider />

      <MenuSelectTextAlign
        MenuProps={{
          container: containerEl,
        }}
      />

      <MenuDivider />

      <MenuButtonOrderedList />

      <MenuButtonBulletedList />

      <MenuButtonTaskList />

      {/* On touch devices, we'll show indent/unindent buttons, since they're
      unlikely to have a keyboard that will allow for using Tab/Shift+Tab. These
      buttons probably aren't necessary for keyboard users and would add extra
      clutter. */}
      {isTouchDevice() && (
        <>
          <MenuButtonIndent />

          <MenuButtonUnindent />
        </>
      )}

      <MenuDivider />

      <MenuButtonBlockquote />

      <MenuDivider />

      <MenuButtonCode />

      <MenuButtonCodeBlock />

      <MenuDivider />

      <MenuButtonImageUpload
        onUploadFiles={(files) =>
          // For the sake of a demo, we don't have a server to upload the files
          // to, so we'll instead convert each one to a local "temporary" object
          // URL. This will not persist properly in a production setting. You
          // should instead upload the image files to your server, or perhaps
          // convert the images to bas64 if you would like to encode the image
          // data directly into the editor content, though that can make the
          // editor content very large.
          files.map((file) => ({
            src: URL.createObjectURL(file),
            alt: file.name,
          }))
        }
      />

      <MenuDivider />

      <MenuButtonHorizontalRule />

      <MenuButtonAddTable />

      <MenuDivider />

      <MenuButtonRemoveFormatting />

      <MenuDivider />

      <MenuButtonUndo />
      <MenuButtonRedo />
    </MenuControlsContainer>

[sjdemartini]

I'm sorry, I'm not sure I understand point 1 or point 2.

1. MenuButton's Tooltip goes behind the popup, also the styling is not applied,

What does this mean? Which popup? And which styling is not applied? I can't tell from your screenshot how this relates to mui-tiptap. The demo linked from the README of mui-tiptap has working MenuButton tooltips and styles.

2. ClorPicker doesn't show in MenuButtonHighlightColor/MenuButtonTextColor, when I change the container via PopperProps

How are you creating/setting containerEl? Setting the container worked as discussed here #206 (comment) without the issue you're describing. Do you see any console errors? Can you tell in your developer tools why the Color Picker isn't visible? I don't have enough information to reproduce or understand, I'm afraid.

[kartikmandhan]

To give you context, my MUI component is wrapped inside a web-component(micro-frontends). Hence I provide it a containerEl, to render any overlays which is just a div element inside the shadow-root.
All I want to know or request is, is there a way to provide container element for Component's tooltip as well. Secondly, for the I don't see any console errors, I do see the react-colorful div present, but its not visible:

[sjdemartini]

I see, I don't know much about behavior or implementation inside the shadow DOM / webcomponents. I would welcome a PR if you happen to find a simple fix, but don't plan to investigate this myself, since it seems like a niche use-case that may not be properly supported in Tiptap or MUI themselves.

[kartikmandhan]

I just want to know is there a z-index property/ other css of the react-colorful that I can tweak to make it work.. if you're aware about that.

Thanks in advance.

[sjdemartini]

I'm not sure. I'd recommend looking in your developer tools, etc to investigate