feat: Bubble Menu to be on top of the document, like options.

[praveentelu]

Describe the feature you'd like to request

Is there a way to show the bubble menu options on top of the document? We can activate/deactivate them based on whether the user selected a text or not.

Just like this:

This will help show the users they can do more with the editor. Not everyone will know the options by having a look at the current editor. They have to select a text to find out the options, which I think isn't intuitive.

Describe the solution you'd like to see

Show the options in the bubble menu on top of the document, like this:

Additional information

No response

[phyohtetarkar]

Yes, you can achieve by passing tippyOptions of bubble menu.

[praveentelu]

Hi @phyohtetarkar thank you for the reply. I'm trying to use "shouldShow = true" on tippyOptions (https://tiptap.dev/docs/editor/extensions/functionality/bubble-menu#shouldshow) but it throws an error:

Object literal may only specify known properties, and 'shouldShow' does not exist in type 'Partial

Can you help me implement this?

[phyohtetarkar]

Hello @praveentelu, shouldShow is not a tippyOptions's props it is a BubbleMenu's props. Here is an example code

    <EditorBubble
      tippyOptions={{
        placement: "top",
        appendTo: "parent",
      }}
      shouldShow={({ editor, view, state, from, to }) => {
        const { selection } = state;
        const { empty } = selection;

        // don't show bubble menu if:
        // - the editor is not editable
        // - the selected node is an image
        // - the selection is empty
        // - the selection is a node selection (for drag handles)
        if (
          !editor.isEditable ||
          editor.isActive("image") ||
          empty ||
          !isTextSelection(selection)
        ) {
          return false;
        }
        return true;
      }}
    >

    </EditorBubble>