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