How to use crepe editor with react

[sytolk]

maybe useCrepe() hook is missing? https://milkdown.dev/docs/recipes/react

[KBHertzog]

You can instantiate a new Crepe instance within the useEditor hook. Just make sure to return the editor on the Crepe object.

useEditor(
    (root) =>
      new Crepe({root}).editor);

Something like the above should work in this case.

[seangwright]

This doesn't exactly work. The Crepe UI elements (<milkdown-link-preview>, <milkdown-block-handle>, <milkdown-toolbar>) won't render if you just return the crepe.editor.

Instead you need to return the Crepe instance from the callback you pass to useEditor.

Unfortunately this introduces its own problems with React re-renders, plugins that have already been initialized and the Crepe instance not being correctly cleaned up.

It's clear Crepe was not designed for this use case, unfortunately.

[Saul-Mirone]

I think just return Crepe is ok. What do you mean by the instance is not correctly cleaned up?

[HAHAHA44]

You can use crepe according to the way of milkdown website using it. Link

In short, initiate the Crepe in the useEffect hook, create a div DOM and set this DOM as root of Crepe.

import { Crepe } from "@milkdown/crepe";
import { FC, useLayoutEffect, useRef } from "react";

const HomeEditor: FC<{ value: string }> = ({ value }) => {
  const divRef = useRef<HTMLDivElement>(null);
  const loading = useRef(false);

  useLayoutEffect(() => {
    if (!divRef.current) return;
    loading.current = true;
    const crepe = new Crepe({
      root: divRef.current,
      defaultValue: value,
      features: {
        [Crepe.Feature.CodeMirror]: false,
        [Crepe.Feature.BlockEdit]: false,
      },
    });
    crepe.create().then(() => {
      loading.current = false;
    });

    return () => {
      crepe.destroy();
    };
  }, [ value]);

  return (
    <div
      ref={divRef}
      className="crepe !h-80 overflow-auto rounded-2xl border border-nord-outline shadow dark:border-nord-outline-dark md:!h-[480px]"
    />
  );
};

export default HomeEditor;

[sytolk]

There is PR for this but it's not ready for merge yet: #1561 (comment)

[Saul-Mirone]

Please follow https://milkdown.dev/docs/recipes/react#using-crepe

[chiraagb]

How can I add a event listener so that i can capture the state change in react??

  const [text, setText] = useState<string>("");

  <MilkdownProvider>
      <MilkdownEditor markdown={text} setMarkdown={setText} />
    </MilkdownProvider>

import { type FC } from "react";

import { Crepe } from "@milkdown/crepe";
import { Milkdown, useEditor } from "@milkdown/react";

import "@milkdown/crepe/theme/common/style.css";
import "@milkdown/crepe/theme/frame.css";

interface MilkdownEditorProps {
  markdown: string;
  setMarkdown: (markdown: string) => void;
}

export const MilkdownEditor: FC<MilkdownEditorProps> = ({
  markdown,
  setMarkdown,
}) => {
  useEditor(
    (root) => {
      const crepe = new Crepe({
        root,
        defaultValue: markdown,
      });

      return crepe;
    },
    [markdown]
  );

  return (
    <>
      <Milkdown />
    </>
  );
};

[adambirds]

Yes, it would be good to know, how to access the markdown or to be notified of a state change as I want to use this editor in a form and the react tuorial doesn't expakin how the markdown is exposed.

[chiraagb]

Hey, I have found a solution: we could use the listener plugin to be notified when the markdown is updated. Below is the code that implements this approach

import { type FC } from "react";

import { Crepe } from "@milkdown/crepe";
import { Milkdown, useEditor } from "@milkdown/react";

import "@milkdown/crepe/theme/common/style.css";
import "@milkdown/crepe/theme/frame.css";
import { listener, listenerCtx } from "@milkdown/plugin-listener";

interface MilkdownEditorProps {
  markdown: string;
  setMarkdown: (markdown: string) => void;
}

export const MilkdownEditor: FC<MilkdownEditorProps> = ({
  markdown,
  setMarkdown,
}) => {
  useEditor((root) => {
    const crepe = new Crepe({
      root,
      defaultValue: markdown,
    });

    crepe.editor.use(listener);
    crepe.editor.config((ctx) => {
      const listener = ctx.get(listenerCtx);

      listener.markdownUpdated((_, markdown, prevMarkdown) => {
        if (markdown !== prevMarkdown) {
          console.log("Markdown updated", markdown);
          setMarkdown(markdown);
        }
      });
    });

    return crepe;
  }, []);

  return (
    <>
      <Milkdown />
    </>
  );
};

[adambirds]

And you confirmed this worked for you?

[chiraagb]

Yes, confirmed. Let us know if this works.

[Saul-Mirone]

You don't need to use listener plugin manually. It's already included in crepe. You can use it like:

const crepe = new Crepe({
  root,
  defaultValue: markdown,
});
crepe.on(listener => {
  listener. markdownUpdated((_, markdown, prevMarkdown) => {
    ...
  });
});

[chiraagb]

thanks for the heads up.