fix: added back restoring logic for public images

packages/editor/src/core/extensions/custom-image/components/image-block.tsx

@@ -238,16 +238,15 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
         src={displayedImageSrc}
         onLoad={handleImageLoad}
         onError={async (e) => {
+          // for old image extension this command doesn't exist
+          if (!editor?.commands.restoreImage) {
+            setFailedToLoadImage(true);
+          }
+
           try {
             setOnFirstLoadError(true);
             // this is a type error from tiptap, don't remove await until it's fixed
-            await editor?.commands.restoreImage(remoteImageSrc);
-            console.log(
-              "imageRef width",
-              imageRef.current.naturalWidth,
-              imageRef.current.naturalHeight,
-              imageRef.current.src.split("/")[10]
-            );
+            await editor?.commands.restoreImage?.(remoteImageSrc);
             imageRef.current.src = remoteImageSrc;
           } catch {
             setFailedToLoadImage(true);

packages/editor/src/core/extensions/custom-image/custom-image.ts

@@ -5,7 +5,7 @@ import { v4 as uuidv4 } from "uuid";
 // extensions
 import { CustomImageNode } from "@/extensions/custom-image";
 // plugins
-import { TrackImageDeletionPlugin, isFileValid } from "@/plugins/image";
+import { TrackImageDeletionPlugin, TrackImageRestorationPlugin, isFileValid } from "@/plugins/image";
 // types
 import { TFileHandler } from "@/types";
 // helpers
@@ -41,8 +41,8 @@ export const CustomImageExtension = (props: TFileHandler) => {
   const {
     getAssetSrc,
     upload,
-    delete: deleteImage,
-    restore,
+    delete: deleteImageFn,
+    restore: restoreImageFn,
     validation: { maxFileSize },
   } = props;
 
@@ -94,7 +94,29 @@ export const CustomImageExtension = (props: TFileHandler) => {
     },
 
     addProseMirrorPlugins() {
-      return [TrackImageDeletionPlugin(this.editor, deleteImage, this.name)];
+      return [
+        TrackImageDeletionPlugin(this.editor, deleteImageFn, this.name),
+        TrackImageRestorationPlugin(this.editor, restoreImageFn, this.name),
+      ];
+    },
+
+    onCreate(this) {
+      const imageSources = new Set<string>();
+      this.editor.state.doc.descendants((node) => {
+        if (node.type.name === this.name) {
+          if (!node.attrs.src.startsWith("http")) {
+            return;
+          }
+          imageSources.add(node.attrs.src);
+        }
+      });
+      imageSources.forEach(async (src) => {
+        try {
+          await restoreImageFn(src);
+        } catch (error) {
+          console.error("Error restoring image: ", error);
+        }
+      });
     },
 
     addStorage() {
@@ -162,7 +184,7 @@ export const CustomImageExtension = (props: TFileHandler) => {
           return fileUrl;
         },
         restoreImage: (src: string) => async () => {
-          await restore(src);
+          await restoreImageFn(src);
         },
         getImageSource: (path: string) => () => getAssetSrc(path),
       };

packages/editor/src/core/extensions/image/extension.tsx

@@ -3,17 +3,17 @@ import { ReactNodeViewRenderer } from "@tiptap/react";
 // helpers
 import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
 // plugins
-import { ImageExtensionStorage, TrackImageDeletionPlugin } from "@/plugins/image";
+import { ImageExtensionStorage, TrackImageDeletionPlugin, TrackImageRestorationPlugin } from "@/plugins/image";
 // types
 import { TFileHandler } from "@/types";
 // extensions
 import { CustomImageNode } from "@/extensions";
 
 export const ImageExtension = (fileHandler: TFileHandler) => {
   const {
-    delete: deleteImage,
     getAssetSrc,
-    restore,
+    delete: deleteImageFn,
+    restore: restoreImageFn,
     validation: { maxFileSize },
   } = fileHandler;
 
@@ -24,8 +24,32 @@ export const ImageExtension = (fileHandler: TFileHandler) => {
         ArrowUp: insertEmptyParagraphAtNodeBoundaries("up", this.name),
       };
     },
+
     addProseMirrorPlugins() {
-      return [TrackImageDeletionPlugin(this.editor, deleteImage, this.name)];
+      return [
+        TrackImageDeletionPlugin(this.editor, deleteImageFn, this.name),
+        TrackImageRestorationPlugin(this.editor, restoreImageFn, this.name),
+      ];
+    },
+
+    onCreate(this) {
+      const imageSources = new Set<string>();
+      this.editor.state.doc.descendants((node) => {
+        if (node.type.name === this.name) {
+          console.log("node", node.attrs.src.startsWith("http"));
+          if (!node.attrs.src.startsWith("http")) {
+            return;
+          }
+          imageSources.add(node.attrs.src);
+        }
+      });
+      imageSources.forEach(async (src) => {
+        try {
+          await restoreImageFn(src);
+        } catch (error) {
+          console.error("Error restoring image: ", error);
+        }
+      });
     },
 
     // storage to keep track of image states Map<src, isDeleted>
@@ -55,9 +79,6 @@ export const ImageExtension = (fileHandler: TFileHandler) => {
     addCommands() {
       return {
         getImageSource: (path: string) => () => getAssetSrc(path),
-        restoreImage: (src: string) => async () => {
-          await restore(src);
-        },
       };
     },
 

packages/editor/src/core/plugins/image/restore-image.ts

@@ -25,6 +25,9 @@ export const TrackImageRestorationPlugin = (editor: Editor, restoreImage: Restor
           if (node.type.name !== nodeType) return;
           if (pos < 0 || pos > newState.doc.content.size) return;
           if (oldImageSources.has(node.attrs.src)) return;
+          // if the src is just a id (private bucket), then we don't need to handle restore from here but
+          // only while it fails to load
+          if (!node.attrs.src.startsWith("http")) return;
           addedImages.push(node as ImageNode);
         });