ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
26.6k stars 2.23k forks source link

[Bug]: Bubble Menu `shouldShow` prop does not work properly #4775

Open piszczu4 opened 8 months ago

piszczu4 commented 8 months ago

Which packages did you experience the bug in?

bubble-menu

What Tiptap version are you using?

latest

What’s the bug you are facing?

I made a BubbleMenu for my link mark to show it's href and a button to edit/delete mark. The problem is that BubbleMenu is shown even when isActive("link") is false and hence href is null. You could observe it in attached example when clicking outside bubble menu - href disappears but button is still visible. How to fix that? Interestingly, when I remove duration from bubble menu, the behacviour is opposite - the issue appears when showing BubbleMenu, no when closing it. Issue does not appear when clicking completely outside of editor.

What browser are you using?

Chrome

Code example

https://codesandbox.io/p/sandbox/bubblemenu-issue-d46rx5?file=%2Fsrc%2FApp.js%3A17%2C25

What did you expect to happen?

BubleMenu should not render if shouldShow is false

Anything to add? (optional)

No response

Did you update your dependencies?

Are you sponsoring us?

piszczu4 commented 8 months ago

The same issue appear in the official Tiptap example here - try to click link item. I tried to resolve it using content state and below tippy prop to put that content when closing tippy (and when shouldShow return false) but really looking for some official fix

     onHide: (instance) => {
          setContent(instance.popper.innerHTML);
        },

EDIT I debug the code and I observed the following: The first time shouldShow is called by onSelectionChange as below: image

Here, the selection is actually the same on both editor.state and state object so that's not an issue. Because shouldShow (correctly) returns true, Bubbe Menu is showed. Unfortunately, the content of BubbleMenu is created after this shouldShow so the link attributes are empty, hence the href is empty and it does not look good. Its updated later as below

image

Would appreciate any comment from developers and other users

piszczu4 commented 8 months ago

Another issue is that the bubble menu (despite arrow) does not position correctly on first click and you have to click again to position it correctly.