question: how does menu bar change state when editor cursor moves

[gregveres]

Hi, First, thank you for creating this component and sharing it. I like the design but I am using Vuetify, typescript and composition API. So for the past few days I have been converting your code base over to use these things.

Things are going well, but I can't get the menubar to update it's state when the editor cursor is moved. Could you help explain how that gets updated in your code base? I see that it works in your examples and I think I am using very similar code.

For instance, if we look at bold, I see that bold.ts returns "isActive: isActive.bold()". To me that looks like it is executing the .bold() call at the time that the menu bar is being constructed. How does isActive change when the cursor moves?

With my code, I see that the menubar updates when the focus changes. So I can get the right result by clicking out of the editor and then clicking back into the editor, but maybe if I understood how the bold button toggles as the cursor moves, that would help me track down what is missing.

Thanks

[gregveres]

I also notice that my number of characters doesn't change on the footer. So I am definitely missing some updating that you are catching.

[gregveres]

Debugging your code, I see that you are generating the buttons on each cursor movement. If I can get my buttons generating that frequently, it will definitely address my issue. If you can provide some guidance on how you get that function called on every cursor movement, that would be helpful. Thanks...

[Leecason]

You can see the paragraph about Transaction on https://prosemirror.net/docs/guide/.

Tiptap configure the dispatchTrasaction method, it will called when the user types, or otherwise interacts with the view.

In this method, you can see it invokes setActiveNodesAndMarks, and activeNodes and activeMarks will be updated.

The isActive getter we use is computed by the activeNodes and activeMarks, so we can get it updated.

[gregveres]

@Leecason Thank you very much for the pointer. I will do some reading....

[gregveres]

@Leecason I see what you are saying. The problem I am having is that in your code, this v-for is being regenerated every time the user interacts with the editor. But in my code, the v-for is only triggered on a focus change. I can't see how your v-for tells Vue that it needs to call generateCommandButtonComponentSpecs every time a transaction is dispatched. Did you do something special to get that effect or did it just happen for you?

[Leecason]

EditorContext contains the isActive property. check https://github.com/ueberdosis/tiptap#editormenubar

[gregveres]

@Leecason I just figured it out. It is a bug in a newer version of tiptap. I remember reading about it a week ago. EditorMenuBar has introduced a bug where it no longer triggers an update on each transaction dispatch. As soon as I switched my EditorMenuBar use to EditorMenuBubble, everything started working as expected. Keep that in mind in case you upgrade your version of tiptap. I don't think the guys supporting tiptap are going to be putting much effort into the current version of tiptap, they seem to be focused on implementing v2 from scratch in typescript.

Anyway, thank you very much for taking the time to respond! It is very much appreciated.

[Leecason]

Thank you. I am looking forward to the tiptap2 and vue3.