npm install @milkdown/core @milkdown/react @milkdown/preset-commonmark @milkdown/theme-nord

import { Editor, rootCtx, defaultValueCtx } from "@milkdown/core";
import { nord } from "@milkdown/theme-nord";
import { ReactEditor, useEditor } from "@milkdown/react";
import { commonmark } from "@milkdown/preset-commonmark";

import "@milkdown/theme-nord/style.css";

export function MarkdownEditor() {
  const { get } = useEditor((root) =>
    Editor.make()
      .config((ctx) => {
        ctx.set(rootCtx, root);
        ctx.set(defaultValueCtx, "# Hello Milkdown\n\nStart typing here...");
      })
      .use(nord)
      .use(commonmark)
  );

  return <ReactEditor editor={get()} />;
}

import { getMarkdown } from "@milkdown/utils";

function SaveButton({ editorRef }) {
  function handleSave() {
    const markdown = editorRef.get()?.action(getMarkdown());
    console.log(markdown); // clean Markdown string
    // save to your database
  }

  return <button onClick={handleSave}>Save</button>;
}

import { gfm } from "@milkdown/preset-gfm";

Editor.make()
  .config(...)
  .use(nord)
  .use(commonmark)
  .use(gfm) // adds tables, strikethrough, task lists
  .create();