Use MUI theme tooltip zIndex for popper menus to appear above modals

[sjdemartini]

Bringing back the functionality of https://github.com/sjdemartini/mui-tiptap/pull/225.

Overwhelming consensus and convention is to have poppers use the tooltip zIndex to always appear above modals, which affects

Two "breaking" changes as a result:

1. The z-index for the bubble menus (ControlledBubbleMenu, LinkBubbleMenu, TableBubbleMenu) and poppers (ColorPickerPopper via MenuButtonHighlightColor and MenuButtonTextColor) will now be theme.zIndex.tooltip
2. The Z_INDEXES object (exported from mui-tiptap) removes the BUBBLE_MENU value. You should instead reference theme.zIndex.tooltip to get the z-index used for the bubble menus, as mui-tiptap does not define the value internally.

Relates to and resolves these issues/PRs:

• https://github.com/sjdemartini/mui-tiptap/issues/194
• https://github.com/sjdemartini/mui-tiptap/issues/206
• https://github.com/sjdemartini/mui-tiptap/issues/265
• https://github.com/sjdemartini/mui-tiptap/pull/209
• https://github.com/sjdemartini/mui-tiptap/issues/289

[lkp-k]

Thanks for this package.

How can I override the zIndex, without !important? For example, the Link bubble. Here's what I'm doing right now -

<GlobalStyles
  styles={(theme) => ({
    ".MuiTiptap-ControlledBubbleMenu-root": {
      zIndex: "30 !important",
    },
  })}
/>

In my case I have a SidePanel (which has its own z-index of 20, as it appears above a gantt chart which has its own complex UI) within which I show the Editor.

May I suggest, if possible, that users can pass in a optional "baseZIndex" so the components you provide will use whatever existing z-index they currently have + the baseZIndex? That way it might help reduce the overrides consumer has to do.