TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
https://www.blocknotejs.org/
Mozilla Public License 2.0
5.89k stars 381 forks source link

[Crashing] Could not convert the snapshot blocks structure to blocks #879

Closed tuhinpal closed 4 days ago

tuhinpal commented 4 days ago

Describe the bug BlockNote could not convert the snapshot structure to blocks, probably due to styles incompatibility. Possible buggy code.

To Reproduce

Here is my code

"use client";

import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useCreateBlockNote } from "@blocknote/react";
import { useEffect } from "react";

interface EditorProps {
  initialData: {
    markdown: string;
    blocks: any[] | null;
  };
  onChange: ({ blocks, markdown }: { markdown: string; blocks: any[] }) => void;
}

export default function Editor({ initialData, onChange }: EditorProps) {
  const editor = useCreateBlockNote({});

  useEffect(() => {
    async function handleMarkdownChange() {
      if (initialData.blocks === null) {
        const blocks = await editor.tryParseMarkdownToBlocks(
          initialData.markdown
        );
        editor.replaceBlocks(editor.document, blocks);
      } else if (Array.isArray(initialData.blocks)) {
        // this line throws error
        // editor.replaceBlocks(editor.document, initialData.blocks);
      }
    }

    handleMarkdownChange();
  }, []);

  return (
    <div className="w-full max-w-4xl border min-h-[95dvh] rounded-lg py-8 px-2">
      <BlockNoteView
        editor={editor}
        formattingToolbar={false}
        onChange={async () => {
          const blocks = editor.document;
          const markdown = await editor.blocksToMarkdownLossy();

          onChange({
            blocks: JSON.parse(JSON.stringify(blocks)),
            markdown,
          });
        }}
      />
    </div>
  );
}

Images: image image

Misc