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

[doorkey]

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

Please check the comments in the code for the exact line that throws error.

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>
  );
}

Misc

• Node version: 20.10.0
• Package manager: npm
• Browser: Chrome latest
• [x] I'm a sponsor and would appreciate if you could look into this sooner than later 💖

[YousefED]

Hi @doorkey, thanks for reporting this!

Could you share the json of the blocks that you're trying to load?

[doorkey]

Hi @doorkey, thanks for reporting this!

Could you share the json of the blocks that you're trying to load?

[
{
"id": "588f083d-c190-477b-8d63-dc5f63019840",
"type": "heading",
"props": {
"textColor": "default",
"backgroundColor": "default",
"textAlignment": "left",
"level": 2
},
"content": [
{
"type": "text",
"text": "This is a test doc"
}
],
"children": []
},
{
"id": "1bb7080a-0975-4c13-8d96-a71ca52a1ec6",
"type": "paragraph",
"props": {
"textColor": "default",
"backgroundColor": "default",
"textAlignment": "left"
},
"content": [
{
"type": "text",
"text": "Nice"
},
{
"type": "text",
"text": " job",
"styles": {
"italic": true
}
}
],
"children": []
},
{
"id": "368781c7-7bab-4734-a629-ff9f70f581c9",
"type": "paragraph",
"props": {
"textColor": "default",
"backgroundColor": "default",
"textAlignment": "left"
},
"content": [],
"children": []
},
{
"id": "cae662cf-3d54-40fa-ad58-31fa8f70a2d2",
"type": "paragraph",
"props": {
"textColor": "default",
"backgroundColor": "default",
"textAlignment": "left"
},
"content": [],
"children": []
}
]

[doorkey]

@YousefED please check above and let me know if you need anything else.

[YousefED]

Thanks. Both these items:

"content": [
            {
                "type": "text",
                "text": "This is a test doc"
            }
        ],

and

"content": [
            {
                "type": "text",
                "text": "Nice"
            },

I'm missing a styles key. Normally, I'd expect this:

"content": [
            {
                "type": "text",
                "text": "Nice",
"styles": {}
            },

When you access editor.document, it should always contain this empty styles object. Do you know where you are losing this information?

[doorkey]

@YousefED thanks, we will change our modal and try it. Appreciate.