Is there a way to congifgure Bubble Menu in React so that it doesn't pop up over an image?

[planktonrobo]

The Bubble Menu pops up when an image is selected and has options for styling text. I'm not sure it's considered a bug, but it does look a little silly since you can't take those actions on an image (bold, italicize, strike, etc). I'm using it through the StarterKit module. Is there a way to hide it when an image is selected? Thanks

[philippkuehn]

There are usecase for it: https://github.com/ueberdosis/tiptap/issues/1313 But there is a plan to make this configurable: https://github.com/ueberdosis/tiptap/issues/1480

[thatsjonsense]

You can hide the content of the menu, which will make it invisible. We use this to check:

  const selection = editor.state.selection
  const isTextSelection = selection instanceof TextSelection

[planktonrobo]

You can hide the content of the menu, which will make it invisible. We use this to check:

  const selection = editor.state.selection
  const isTextSelection = selection instanceof TextSelection

There is no TextSelection in tiptap/react. There is an isTextSelection function you can import. So here's what I figured out with your help:

`{editor && (

      <BubbleMenu editor={editor}>
        {isTextSelection(editor.state.selection) && <> <button
          onClick={() => editor.chain().focus().toggleBold().run()}
          className={editor.isActive("bold") ? "is-active" : ""}
        >
          bold
        </button>
        <button
          onClick={() => editor.chain().focus().toggleItalic().run()}
          className={editor.isActive("italic") ? "is-active" : ""}
        >
          italic
        </button>
        <button
          onClick={() => editor.chain().focus().toggleStrike().run()}
          className={editor.isActive("strike") ? "is-active" : ""}
        >
          strike
        </button> </> }

      </BubbleMenu>`)}