Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
praveentelu opened this issue Jul 6, 2024 · 4 comments
Open

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

praveentelu opened this issue Jul 6, 2024 · 4 comments

Comments

@praveentelu
Copy link

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:
image

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:

image

Additional information

No response

@phyohtetarkar
Copy link
Contributor

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

@praveentelu
Copy link
Author

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
Copy link
Contributor

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>

@bakikucukcakiroglu
Copy link

I also need this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants