Rerender node on actionCtx update

[emcfarlane]

I'm trying to controll a class on a node from an action. I have an toggleState based on the "Inject Slices" example here: https://milkdown.dev/plugin-factories

const toggleState = createSlice(false, 'toggle');
const toggle = createNode<string>(() => {
    const id = 'toggle';

    return {
        id,
        schema: (ctx) => {
            const myState = ctx.get(toggleState);
            toDOM: (node) => ["div", {class: /* Use state here */ }, 0],
        },
        // ...
    };
}, [toggleState]);

It works on new renders but not when updated. Trying to force the update with the forceUpdate() util doesn't seem to rerender the node.

Tried force update:

  useEffect(() => {
    if (!editorReady) return;
    const instance = editor.getInstance();
    if (!instance) return;
    instance.action((ctx) => ctx.set(toggleState, value));
    instance.action(forceUpdate());
  }, [editorReady, value]);

How can you accomplish this? I think I'm not understanding how state changes are handled.

[emcfarlane]

Potentially issue with my react useEditor have added useEditor(..., [value]). Works to rerender.

[Saul-Mirone]

toDOM is only used to create the node. If you want to update it. You need to set something as attr and use tr.setNodeMarkup to update it.