Overview

import React from "react";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
// Or ariakit, shadcn, etc.

function MyEditor() {
  const editor = useCreateBlockNote();

  return <BlockNoteView editor={editor} />;
}

function EditorWithContent() {
  const editor = useCreateBlockNote({
    initialContent: [
      {
        type: "heading",
        content: "Welcome to BlockNote",
        props: { level: 1 },
      },
      {
        type: "paragraph",
        content: "This is a paragraph with some text.",
      },
      {
        type: "bulletListItem",
        content: "This is a bullet point",
      },
    ],
  });

  return <BlockNoteView editor={editor} />;
}

function EditorWithHandlers() {
  const editor = useCreateBlockNote();

  const handleChange = (editor: BlockNoteEditor<any, any, any>) => {
    // Get the current content as JSON
    const content = editor.document;
    console.log("Content changed:", content);
  };

  return <BlockNoteView editor={editor} onChange={handleChange} />;
}

function StyledEditor() {
  const editor = useCreateBlockNote();

  return (
    <div
      style={{ border: "1px solid #ccc", borderRadius: "8px", padding: "16px" }}
    >
      <BlockNoteView
        editor={editor}
        theme="dark"
        style={{ minHeight: "300px" }}
      />
    </div>
  );
}