[Bug]: TextMenu overflowing and not able to interact with it.

[MujtabaInfini8ai]

Which packages did you experience the bug in?

react

What Tiptap version are you using?

2.3.0

What’s the bug you are facing?

` <EditorContext.Provider value={providerValue}>

<EditorContent
editor={editor}
id="boundary"
ref={editorRef}
className="flex-1 overflow-y-auto h-screen "
style={{
maxHeight: "100vh",
}}
/>

      <ContentItemMenu editor={editor} />
      <LinkMenu editor={editor} appendTo={menuContainerRef} />
      <TextMenu editor={editor} />
      <ColumnsMenu editor={editor} appendTo={menuContainerRef} />
      <TableRowMenu editor={editor} appendTo={menuContainerRef} />
      <TableColumnMenu editor={editor} appendTo={menuContainerRef} />
      <ImageBlockMenu editor={editor} appendTo={menuContainerRef} />
    </div>
  </div>
  {editorLoader && editorLoaderPortal}
</EditorContext.Provider>



<BubbleMenu
  tippyOptions={{
    popperOptions: {
      placement: "bottom",
    },
  }}
  editor={editor}
  pluginKey="textMenu"
  shouldShow={states.shouldShow}
  updateDelay={100}
>
  <Toolbar.Wrapper>
    <AIDropdown
      onCompleteSentence={commands.onCompleteSentence}
      onEmojify={commands.onEmojify}
      onFixSpelling={commands.onFixSpelling}
      onMakeLonger={commands.onMakeLonger}
      onMakeShorter={commands.onMakeShorter}
      onSimplify={commands.onSimplify}
      onTldr={commands.onTldr}
      onTone={commands.onTone}
      onTranslate={commands.onTranslate}
      editor={editor}
    />
    <Toolbar.Divider />
    <MemoContentTypePicker options={blockOptions} />
    <MemoFontFamilyPicker
      onChange={commands.onSetFont}
      value={states.currentFont || ""}
    />
    <MemoFontSizePicker
      onChange={commands.onSetFontSize}
      value={states.currentSize || ""}
    />
    <Toolbar.Divider />
    <MemoButton
      tooltip="Bold"
      tooltipShortcut={["Mod", "B"]}
      onClick={commands.onBold}
      active={states.isBold}
    >
      <Icon name="Bold" />
    </MemoButton>
    <MemoButton
      tooltip="Italic"
      tooltipShortcut={["Mod", "I"]}
      onClick={commands.onItalic}
      active={states.isItalic}
    >
      <Icon name="Italic" />
    </MemoButton>
    <MemoButton
      tooltip="Underline"
      tooltipShortcut={["Mod", "U"]}
      onClick={commands.onUnderline}
      active={states.isUnderline}
    >
      <Icon name="Underline" />
    </MemoButton>
    <Popover.Root>
      <Popover.Trigger asChild>
        <MemoButton tooltip="Line height">
          <Icon name="AlignVerticalSpaceBetween" />
        </MemoButton>
      </Popover.Trigger>
      <Popover.Content side="top" sideOffset={8} asChild>
        <Surface className="p-1">
          <MemoLineHeightPicker
            onChange={commands.onLineHeight}
            value={states.currentLineHeight || ""}
          />
        </Surface>
      </Popover.Content>
    </Popover.Root>
    <EditLinkPopover onSetLink={commands.onLink} />
    <Popover.Root>
      <Popover.Trigger asChild>
        <MemoButton
          active={!!states.currentHighlight}
          tooltip="Highlight text"
        >
          <Icon name="Highlighter" />
        </MemoButton>
      </Popover.Trigger>
      <Popover.Content side="top" sideOffset={8} asChild>
        <Surface className="p-1">
          <MemoColorPicker
            color={states.currentHighlight}
            onChange={commands.onChangeHighlight}
            onClear={commands.onClearHighlight}
          />
        </Surface>
      </Popover.Content>
    </Popover.Root>
    <Popover.Root>
      <Popover.Trigger asChild>
        <MemoButton active={!!states.currentColor} tooltip="Text color">
          <Icon name="Palette" />
        </MemoButton>
      </Popover.Trigger>
      <Popover.Content side="top" sideOffset={8} asChild>
        <Surface className="p-1">
          <MemoColorPicker
            color={states.currentColor}
            onChange={commands.onChangeColor}
            onClear={commands.onClearColor}
          />
        </Surface>
      </Popover.Content>
    </Popover.Root>
    <Popover.Root>
      <Popover.Trigger asChild>
        <MemoButton tooltip="More options">
          <Icon name="EllipsisVertical" />
        </MemoButton>
      </Popover.Trigger>
      <Popover.Content side="top" asChild>
        <Toolbar.Wrapper>
          <MemoButton tooltip="Code block" onClick={commands.onCodeBlock}>
            <Icon name="CodeXml" />
          </MemoButton>
          <MemoButton
            tooltip="Strikehrough"
            tooltipShortcut={["Mod", "Shift", "S"]}
            onClick={commands.onStrike}
            active={states.isStrike}
          >
            <Icon name="Strikethrough" />
          </MemoButton>
          <MemoButton
            tooltip="Code"
            tooltipShortcut={["Mod", "E"]}
            onClick={commands.onCode}
            active={states.isCode}
          >
            <Icon name="Code" />
          </MemoButton>
          <MemoButton
            tooltip="Subscript"
            tooltipShortcut={["Mod", "."]}
            onClick={commands.onSubscript}
            active={states.isSubscript}
          >
            <Icon name="Subscript" />
          </MemoButton>
          <MemoButton
            tooltip="Superscript"
            tooltipShortcut={["Mod", ","]}
            onClick={commands.onSuperscript}
            active={states.isSuperscript}
          >
            <Icon name="Superscript" />
          </MemoButton>
          <Toolbar.Divider />
          <MemoButton
            tooltip="Align left"
            tooltipShortcut={["Shift", "Mod", "L"]}
            onClick={commands.onAlignLeft}
            active={states.isAlignLeft}
          >
            <Icon name="AlignLeft" />
          </MemoButton>
          <MemoButton
            tooltip="Align center"
            tooltipShortcut={["Shift", "Mod", "E"]}
            onClick={commands.onAlignCenter}
            active={states.isAlignCenter}
          >
            <Icon name="AlignCenter" />
          </MemoButton>
          <MemoButton
            tooltip="Align right"
            tooltipShortcut={["Shift", "Mod", "R"]}
            onClick={commands.onAlignRight}
            active={states.isAlignRight}
          >
            <Icon name="AlignRight" />
          </MemoButton>
          <MemoButton
            tooltip="Justify"
            tooltipShortcut={["Shift", "Mod", "J"]}
            onClick={commands.onAlignJustify}
            active={states.isAlignJustify}
          >
            <Icon name="AlignJustify" />
          </MemoButton>
        </Toolbar.Wrapper>
      </Popover.Content>
    </Popover.Root>
  </Toolbar.Wrapper>
</BubbleMenu>`

I have tried the Tippy js options as well but none works for me.
Any input will be helpful for me.
thank you

What browser are you using?

Chrome

Code example

No response

What did you expect to happen?

the bubble menu overflow so it should be inside the editor boundary. Tiptap live demo also have same issue.

Anything to add? (optional)

No response

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖