[Issue: Image not loading from localStorage after refreshing the page in BlockSuite ] BlockSuiteError: Blob not found in blob manager

[abdurrahman720]

I’ve integrated BlockSuite into my Next.js TypeScript app, and the page and edgeless editors work fine until I add an image and refresh the page.

Problem:

• Uploading an image works as expected, and the image is displayed in the editor.
• The editor data is saved in localStorage as JSON.
• However, after refreshing the page and retrieving the snapshot from localStorage, the image appears in a loading state and throws the following error:

BlockSuiteError: Blob ugvdz5OwUokGyUtWFLjUCqwaV4fHwOtIDPYht8IH1Hk= not found in blob manager

here's the relevant code:

1. Editor Initialization :

export function initEditor(edgeLess: boolean) {
  if (edgeLess) {
    const doc = createEmptyDoc().init();
    const editor = new EdgelessEditor();
    editor.doc = doc;
    const collection = null;
    return { editor, collection };
  } else {
    const schema = new Schema().register(AffineSchemas);
    const collection = new DocCollection({ schema });
    collection.meta.initialize();

    const doc = collection.createDoc({ id: "page1" });

    doc.load(() => {
      const pageBlockId = doc.addBlock("affine:page", {});
      doc.addBlock("affine:surface", {}, pageBlockId);
      const noteId = doc.addBlock("affine:note", {}, pageBlockId);
      doc.addBlock("affine:paragraph", {}, noteId);
    });
    const editor = new AffineEditorContainer();
    editor.doc = doc;
    //@ts-ignore
    editor.slots.docLinkClicked.on(({ docId }) => {
      const target = <Doc | null>collection.getDoc(docId);
      editor.doc = target as Doc;
    });

    return { editor, collection };
  }
}

2. Saving Document to LocalStorage:

 const saveJson = async () => {
      const doc = editor.doc;
      const { collection } = doc;
      const job = new Job({ collection });

      // Export current doc content to snapshot JSON
      const jsonData = await job.docToSnapshot(doc);

      localStorage.setItem(`pageInfo-${docId}`, JSON.stringify(jsonData));
      dispatchEvent(new Event("storage"));
    };

3. Retrieving and Loading Snapshot to Editor:

  useEffect(() => {
    if (!editor) return;

    // Function to load document from snapshot
    const loadDocument = async (dData: DocSnapshot, edgeLess: boolean) => {
      editor.doc.clear(); // Clear previous content

      if (edgeLess) {
        const doc = createEmptyDoc().init();
        const { collection } = doc;
        const job = new Job({ collection });
        const newDoc = await job.snapshotToDoc(dData);
        editor.doc = newDoc;
      } else {
        const schema = new Schema().register(AffineSchemas);
        const collection = new DocCollection({ schema });
        collection.meta.initialize();
        const job = new Job({ collection });
        const newDoc = await job.snapshotToDoc(dData);
        editor.doc = newDoc;
      }
    };

    // Check localStorage for saved data
    const jsonDoc = localStorage.getItem(`pageInfo-${docId}`);
    const dData: DocSnapshot | null = jsonDoc ? JSON.parse(jsonDoc) : null;

    // Load data if exists
    if (dData !== null) {
      loadDocument(dData, edgeLess);
    } else {
      // should be fetched from db
      //but must save editor data just after it loads on dom
    }

    // If there is an imported document, load it
    if (importedDoc !== null) {
      loadDocument(importedDoc, edgeLess);
    }

    // Cleanup: dispose of the editor document on component unmount
    return () => {
      localStorage.removeItem(`pageInfo-${docId}`);
      editor.doc.dispose(); // Wait for dispose to complete,
    };
  }, [collection, editor, edgeLess, docId, importedDoc]);

Error After Reloading:

• The image that was previously uploaded is stuck in a loading state.
• Here’s the error message and how the editor looks after reloading or retrieving the snapshot from localStorage:

and the editor looks like this:

Additional Context:

• I’m new to BlockSuite, and the documentation seems to only cover the method attributes but lacks detailed explanations about implementations etc

Any guidance on how to persist images correctly or fix the blob manager error would be greatly appreciated!