What is wrong with this plugin

I was implementing a plugin which duplicates (for now, but later may also add/delete) the value nodes in head.

My approach is

  1. get the head node and convert to JSON
  2. duplicates the values
  3. parse it back to a new head node
  4. select the old head node and replace with the new one

I made a demo at https://glitch.com/edit/#!/verbena-wood?path=index.js:70:35

But it reports an error inside prosemirror.

BTW, whenever I add Node at 3rd line as const {Schema, Node, DOMParser} = require("prosemirror-model"), the menu becomes [object HTMLDivElement]..., even for the basic example(https://glitch.com/edit/#!/remix/prosemirror-demo-basic) .

UI/DOM logic like that should really not go in a state field—those are just for creating and maintaining an extra value in the state, and should be pure. The error is happening because you failed to define an apply method for your state field. The fact that it doesn’t need one is a good hint that this should not be a state field. Look into using a plugin view instead (or just create your widget on demand in the function you pass to Decoration.widget).

So init and apply must be supplied both or not, right?

I put the code in init to create widget, since I find that decorations(state) is called very often, even when I just move the cursor. I don’t know if there is any better solution.

If you got the time, would you check again the demo https://glitch.com/edit/#!/verbena-wood?path=index.js:79:18

why it cannot duplicate twice or more. (only the first click on the button duplicates the values)