Error: Blocks with the following IDs could not be found in the editor

[pruthvidarji1993]

I'm currently implementing BlockNote in our app, and we are storing markdown in our database. After storing the markdown, we need to display the initial data in the editor. To do this, we have to convert the markdown to blocks. However, I am encountering the following runtime error during the conversion: Error: Blocks with the following IDs could not be found in the editor:b2f5efd8-367c-466b-a24b-98c1c7f88f9b

Could you please help me resolve this issue? I’m stuck and would appreciate any guidance.

Here is the code I am using to convert markdown to blocks:

useEffect(() => {
  async function loadInitialHTML() {
    const blocks = await editor.tryParseMarkdownToBlocks(planDetails?.noteBlock);
    console.log('blocks: ', blocks);

    editor.replaceBlocks(editor.document, blocks || []);
  }

  if (editor && planDetails?.noteBlock) {
    setTimeout(() => {
      loadInitialHTML();
    }, 1000);
  }
}, [editor, planDetails?.noteBlock]);

Current Specifications:

Next.js: ^13.2.4 BlockNote: ^0.14.0

Thank you in advance for your help!

[pruthvidarji1993]

@YousefED It would be really great if you can help me in this

[matthewlipski]

I'm not seeing any errors using this code:

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

const md = `# Heading

Paragraph

- List Item`;

export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    initialContent: [
      {
        type: "paragraph",
        content: "Paragraph 1",
      },
      {
        type: "paragraph",
        content: "Paragraph 2",
      },
      {
        type: "paragraph",
        content: "Paragraph 3",
      },
    ],
  });

  useEffect(() => {
    async function replaceContentWithMarkdown(markdown: string) {
      const blocks = await editor.tryParseMarkdownToBlocks(markdown);

      editor.replaceBlocks(editor.document, blocks);
    }

    // debugger;
    setTimeout(() => {
      replaceContentWithMarkdown(md);
    }, 1000);
  }, [editor]);

  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} />;
}

Can you post the values of planDetails?.noteBlock, blocks, and editor.document you get when calling editor.replaceBlocks?