How can you change editable after initialisation?

[abhinandshibu]

I know we can set editable on initialisation by passing ctx.set(editorViewOptionsCtx, { editable: () => editable }); into the config.

My question is: How can we change this value after initialisation?

I use React and I've passed a state variable into editable but it doesn't update automatically.

Ideally I'm looking for a command such as: editor.action(setEditable(true));.

[abhinandshibu]

Found a solution:

const editableRef = React.useRef(editable);
const { get } = useEditor((root) =>
    Editor.make()
      .config(nord)
      .config(async (ctx) => {
        ctx.set(rootCtx, root);
        ctx.set(editorViewOptionsCtx, { editable: () => editableRef.current });
      }));

useEffect(() => {
    editableRef.current = editable;
 }, [editable])

[adaboese]

Anyone know why something like this does not work?

useEffect(() => {
  const editorInstance = editor.get();

  if (!editorInstance) {
    return;
  }

  editorInstance.config((ctx: Ctx) => {
    ctx.update(editorViewOptionsCtx, (config) => {
      return {
        ...config,
        editable: () => !readOnly,
      };
    });
  });
}, [editor, readOnly]);

[abhinandshibu]

It's been quite a while since I've messed around with Milkdown, though I vaguely remember things got messy inside of a useEffect. It might be to do with .get() and .config() not working within a useEffect. Sorry currently quite busy, so don't have time to investigate further.