Editor MenuBar buttons are not reactive

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.

[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.

[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. ✌️