Feature Request: Vue Devtools plugin

[segevfiner]

Description

The Vue Devtools don't show the state of Tiptap very nicely (You have to dig into the view.state, knowing that's where the state is), so I wrote to following to ease this a bit: tiptapVueDevtools.ts.

This is rather basic and only adds an inspector panel that shows some info from the state more readily, but if we add a global before create hook for the editor to be used by the devtools plugin, we can add a lot more useful stuff in this, for example: We can add a timeline of transactions, a dedicated inspector panel showing the state of all editors on the page, buttons to modify the editor in some ways, etc.

For those interested, I made this during my work at swimm.io where we use Tiptap for our editor. (Posted with permissions of course)

Use Case

Making it nicer to debug & develop with Tiptap/ProseMIrror in Vue with the Vue Devtools.

Type

New feature