Tiptap: Editor MenuBar buttons are not reactive

[Cwhite534]

The editor-menu-bar buttons are not reactive.

We have an app that contains multiple pages, navigating to a page creates a TipTap editor and populates the content based off query string of the desired page. When the first page containing an editor is loaded, everything works as expected, Upon loading another page the menuBar will not highlight the buttons correctly. Eg clicking bold will correctly bold the selected text, but the toolbar button will not be highlighted unless you click outside the editor. Using vue dev tools we can see that 'IsActive.bold()' value is correctly being updated.

It should be noted keeping all things the same, but changing editor-menu-bar to editor-menu-bubble fixes this issue entirely.

This occurs in Edge (Chromium), Edge Legacy, Chrome, and Firefox on Windows and Linux operating systems.

I am unsure if the reason is because when changing pages another editor is instantiated, but any input would be appreciated.

[cliftonscott]

I'm seeing the same problem.

[lahdekorpi]

I can confirm this.

If you update the view manually, then it will work. I created a test counter in the toolbar view that increments every second. Every time the view updates, the buttons change state correctly.

[gregveres]

I am seeing the same problem. I thought I was going crazy. :) The strange thing is that things work fine in the demo and my code looks very similar to the demo - I was comparing to the tables demo.
Its like the menu bar doesn't re-render when isActive changes.

[gregveres]

The strange thing is that it must work some times. I have been looking at tiptap-vuetify and their demo works properly. Also all the tiptap demos work properly. There must be something we are doing that is messing up the updating.

[gregveres]

And just to be clear to anybody else who runs across this, the work around is to just replace "editor-menu-bar" with "editor-menu-bubble". You can still use your normal toolbar without having to adopt the bubble style menu.

[gregveres]

I can confirm that this bug was introduced somewhere between
"tiptap": "^1.26.6",
"tiptap-extensions": "^1.28.6",

and
"tiptap": "^1.29.6",
"tiptap-extensions": "^1.32.6",

I am using 1.29.6 and I have this problem.
Element-tiptap is using 1.26.6 and doesn't have the problem. I just wasted a couple hours on this again before I remembered this issue exists. :(

[gregveres]

I can confirm this is still an issue in v1.30.0 - although that version did fix the blockquote issue!

[hanspagel]

Thanks for reporting @Cwhite534! And thanks @gregveres for sharing all the details! I’m closing this issue in favor for #700, which seems to report the same bug. ✌️