Bubble Menus should appear even with empty selections

[dhovart]

What’s the bug you are facing?

My use case: I want to display a full link (with an edit button) in a bubble menu even when the selection is empty, that is, when I simply clicked on the link.

Which browser was this experienced in? Are any special extensions installed?

any

How can we reproduce the bug on our side?

Click on an item that triggers a bubble menu and see that it doesn't work with empty selections.

Can you provide a CodeSandbox?

No response

What did you expect to happen?

The bubble menu should show up.

Anything to add? (optional)

This was working before upgrading to beta.201 but this change broke it: cd5fd60#diff-30fdbcf134f53a22876c93ec1e76674f6afef97f9b6162c7eb39b00bb7eef953R167

Maybe this should actually be parametrizable?

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. 💖
  Note; I'm not a sponsor but my company is.

[rumbcam]

This was partially fixed in commit e9d9d88

However it still didn't work as I would have expected while using @tiptap/vue-3.

After looking into it all today I figured out what's happening. I'm using Vue 3 and using the useEditor composition from @tiptap/vue-3.

The instance of Editor I get back from that is build on top of the Editor instance from @tiptap/core. One big difference though is that it returns a "reactiveState" object when trying to get editor.state. This object however only updates when the 'transaction' event is emitted, which happens after the bubble menu has its update function called.

the transaction event gets emitted in @tiptap/core in the dispatchTransaction, but it does so right after calling this.view.updateState(state). While prosemirror is running the update state it calls all of it's plugins update function and thus we get into bubble menu's update function which during that calls the shouldShow function. So when using useEditor and bubble menu at the time that you get into the shouldShow function there is a mismatch on state. editor.state !== editor.view.state. Thus calling editor.isActive('link') will not return the correct response because editor has not had it's state updated yet.

The work around I found is to import the function isActive directly from @tiptap/core instead of using the isActive method on editor. Then pass view.state as the first parameter and link as the second

import { isActive } from '@tiptap/core';

function shouldShow({ view }) {
    return isActive(view.state, 'link');
}

[github-actions]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days