Is it possible to create a Controlled MilkdownEditor component (React)

[stuburger]

Is it possible to create a controlled Editor component using Milkdown?

export default function MilkdownEditor(props) {
  // if value changes, how do I update the editor?
  const {value, onMarkdownUpdated} = props
  const editor = useEditor((root) => {
    return Editor.make().config((ctx) => {
      ctx.set(defaultValueCtx, value)
      ctx.get(listenerCtx).markdownUpdated((ctx, markdown, prevMarkdown) => {
        onMarkdownUpdated(markdown)
        })
      })
   })

  return <ReactEditor editor={editor} />
}

I want to lift this state out of Milkdown into a parent component's state such that if the value prop changes I can update the value of the editor. value contains the markdown string. I could be missing something obvious, or maybe its not possible?

[Saul-Mirone]

You can use action to do this. Like here:
https://github.com/Saul-Mirone/milkdown/blob/main/gh-pages/component/MilkdownEditor/MilkdownEditor.tsx#L33

[ylc395]

this page is unavailable now. Is there another demo?

[zgrybus]

Bump

[ahamelers]

What is the new method for this? There are no docs on how to use useInstance in React

[natsuki-engr]

how about this?
https://github.com/Milkdown/examples/blob/6b954ef5d66db86b649e9aa90ae8cab31f77aafb/react-slash/components/Slash.tsx#L18-L21

[adaboese]

This is what I used to make controlled editor for https://aimd.app

export const MilkdownEditor = ({
  contentMarkdown,
  onChange,
  readOnly,
}: {
  readonly contentMarkdown: string;
  readonly onChange: (markdown: string) => void;
  readonly readOnly: boolean;
}) => {
  const editableRef = useRef<boolean>(!readOnly);

  const [loading, get] = useInstance();

  const action = useCallback(
    (fn: (ctx: Ctx) => void) => {
      if (loading) return null;
      return get().action(fn);
    },
    [get, loading],
  );

  useEditor((root) => {
    return Editor.make()
      .config((ctx) => {
        ctx.set(rootCtx, root);
        ctx.set(defaultValueCtx, contentMarkdown);
      })
      .config((ctx) => {
        ctx.update(editorViewOptionsCtx, (previous) => ({
          ...previous,
          attributes: {
            class: 'milkdown-aimd-theme',
          },
          editable: () => editableRef.current,
        }));

        const listener = ctx.get(listenerCtx);

        listener.markdownUpdated((context_, markdown, previousMarkdown) => {
          if (markdown !== previousMarkdown) {
            onChange(markdown);
          }
        });
      })
      .use(indent)
      .use(listener)
      .use(commonmark);
  }, []);

  useEffect(() => {
    if (loading) {
      return;
    }

    const currentMarkdown = action(getMarkdown()) as unknown as string;

    if (currentMarkdown === contentMarkdown) {
      return;
    }

    action(replaceAll(contentMarkdown));
  }, [action, contentMarkdown, loading]);

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

  return <Milkdown />;
};

I am not confident that this is the best way (as it feels a bit convoluted), but so far it works great.

Relevant documentation: https://milkdown.dev/docs/api/utils#macros

Relevant thread: #127 (comment)