[PE-69] fix: image restoration fixed for new images in private bucket

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

@@ -59,19 +59,20 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
     src: remoteImageSrc,
     setEditorContainer,
   } = props;
-  const { width, height, aspectRatio } = node.attrs;
+  const { width: nodeWidth, height: nodeHeight, aspectRatio: nodeAspectRatio } = node.attrs as ImageAttributes;
   // states
   const [size, setSize] = useState<Size>({
-    width: ensurePixelString(width, "35%"),
-    height: ensurePixelString(height, "auto"),
-    aspectRatio: aspectRatio || 1,
+    width: ensurePixelString(nodeWidth, "35%"),
+    height: ensurePixelString(nodeHeight, "auto"),
+    aspectRatio: nodeAspectRatio || null,
   });
   const [isResizing, setIsResizing] = useState(false);
   const [initialResizeComplete, setInitialResizeComplete] = useState(false);
   // refs
   const containerRef = useRef<HTMLDivElement>(null);
   const containerRect = useRef<DOMRect | null>(null);
   const imageRef = useRef<HTMLImageElement>(null);
+  const [onFirstLoadError, setOnFirstLoadError] = useState(false);
 
   const updateAttributesSafely = useCallback(
     (attributes: Partial<ImageAttributes>, errorMessage: string) => {
@@ -104,17 +105,17 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
     }
 
     setEditorContainer(closestEditorContainer);
-    const aspectRatio = img.naturalWidth / img.naturalHeight;
+    const aspectRatioCalculated = img.naturalWidth / img.naturalHeight;
 
-    if (width === "35%") {
+    if (nodeWidth === "35%") {
       const editorWidth = closestEditorContainer.clientWidth;
       const initialWidth = Math.max(editorWidth * 0.35, MIN_SIZE);
-      const initialHeight = initialWidth / aspectRatio;
+      const initialHeight = initialWidth / aspectRatioCalculated;
 
       const initialComputedSize = {
         width: `${Math.round(initialWidth)}px` satisfies Pixel,
         height: `${Math.round(initialHeight)}px` satisfies Pixel,
-        aspectRatio: aspectRatio,
+        aspectRatio: aspectRatioCalculated,
       };
 
       setSize(initialComputedSize);
@@ -124,9 +125,10 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
       );
     } else {
       // as the aspect ratio in not stored for old images, we need to update the attrs
-      if (!aspectRatio) {
+      // or if aspectRatioCalculated from the image's width and height doesn't match stored aspectRatio then also we'll update the attrs
+      if (!nodeAspectRatio || nodeAspectRatio !== aspectRatioCalculated) {
         setSize((prevSize) => {
-          const newSize = { ...prevSize, aspectRatio };
+          const newSize = { ...prevSize, aspectRatio: aspectRatioCalculated };
           updateAttributesSafely(
             newSize,
             "Failed to update attributes while initializing images with width but no aspect ratio:"
@@ -136,16 +138,17 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
       }
     }
     setInitialResizeComplete(true);
-  }, [width, updateAttributes, editorContainer, aspectRatio]);
+  }, [nodeWidth, updateAttributes, editorContainer, nodeAspectRatio, size.aspectRatio]);
 
   // for real time resizing
   useLayoutEffect(() => {
     setSize((prevSize) => ({
       ...prevSize,
-      width: ensurePixelString(width),
-      height: ensurePixelString(height),
+      width: ensurePixelString(nodeWidth),
+      height: ensurePixelString(nodeHeight),
+      aspectRatio: nodeAspectRatio,
     }));
-  }, [width, height]);
+  }, [nodeWidth, nodeHeight, nodeAspectRatio]);
 
   const handleResize = useCallback(
     (e: MouseEvent | TouchEvent) => {
@@ -158,7 +161,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
 
       setSize((prevSize) => ({ ...prevSize, width: `${newWidth}px`, height: `${newHeight}px` }));
     },
-    [size]
+    [size.aspectRatio]
   );
 
   const handleResizeEnd = useCallback(() => {
@@ -181,11 +184,15 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
       window.addEventListener("mousemove", handleResize);
       window.addEventListener("mouseup", handleResizeEnd);
       window.addEventListener("mouseleave", handleResizeEnd);
+      window.addEventListener("touchmove", handleResize, { passive: false });
+      window.addEventListener("touchend", handleResizeEnd);
 
       return () => {
         window.removeEventListener("mousemove", handleResize);
         window.removeEventListener("mouseup", handleResizeEnd);
         window.removeEventListener("mouseleave", handleResizeEnd);
+        window.removeEventListener("touchmove", handleResize);
+        window.removeEventListener("touchend", handleResizeEnd);
       };
     }
   }, [isResizing, handleResize, handleResizeEnd]);
@@ -202,7 +209,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
 
   // show the image loader if the remote image's src or preview image from filesystem is not set yet (while loading the image post upload) (or)
   // if the initial resize (from 35% width and "auto" height attrs to the actual size in px) is not complete
-  const showImageLoader = !(remoteImageSrc || imageFromFileSystem) || !initialResizeComplete;
+  const showImageLoader = !(remoteImageSrc || imageFromFileSystem) || !initialResizeComplete || onFirstLoadError;
   // show the image utils only if the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
   const showImageUtils = remoteImageSrc && initialResizeComplete;
   // show the image resizer only if the editor is editable, the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
@@ -217,7 +224,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
       onMouseDown={handleImageMouseDown}
       style={{
         width: size.width,
-        aspectRatio: size.aspectRatio,
+        ...(size.aspectRatio && { aspectRatio: size.aspectRatio }),
       }}
     >
       {showImageLoader && (
@@ -230,9 +237,23 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
         ref={imageRef}
         src={displayedImageSrc}
         onLoad={handleImageLoad}
-        onError={(e) => {
-          console.error("Error loading image", e);
-          setFailedToLoadImage(true);
+        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);
+            imageRef.current.src = remoteImageSrc;
+          } catch {
+            setFailedToLoadImage(true);
+            console.log("Error while loading image", e);
+          } finally {
+            setOnFirstLoadError(false);
+          }
         }}
         width={size.width}
         className={cn("image-component block rounded-md", {
@@ -243,7 +264,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
         })}
         style={{
           width: size.width,
-          aspectRatio: size.aspectRatio,
+          ...(size.aspectRatio && { aspectRatio: size.aspectRatio }),
         }}
       />
       {showImageUtils && (
@@ -283,6 +304,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
               }
             )}
             onMouseDown={handleResizeStart}
+            onTouchStart={handleResizeStart}
           />
         </>
       )}

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

@@ -1,21 +1,23 @@
 import { useEffect, useRef, useState } from "react";
-import { Node as ProsemirrorNode } from "@tiptap/pm/model";
-import { Editor, NodeViewWrapper } from "@tiptap/react";
+import { Editor, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 // extensions
 import { CustomImageBlock, CustomImageUploader, ImageAttributes } from "@/extensions/custom-image";
 
-export type CustomImageNodeViewProps = {
+export type CustomImageComponentProps = {
   getPos: () => number;
   editor: Editor;
-  node: ProsemirrorNode & {
+  node: NodeViewProps["node"] & {
     attrs: ImageAttributes;
   };
   updateAttributes: (attrs: Record<string, any>) => void;
   selected: boolean;
 };
 
+export type CustomImageNodeViewProps = NodeViewProps & CustomImageComponentProps;
+
 export const CustomImageNode = (props: CustomImageNodeViewProps) => {
   const { getPos, editor, node, updateAttributes, selected } = props;
+  const { src: remoteImageSrc } = node.attrs;
 
   const [isUploaded, setIsUploaded] = useState(false);
   const [imageFromFileSystem, setImageFromFileSystem] = useState<string | undefined>(undefined);
@@ -37,14 +39,13 @@ export const CustomImageNode = (props: CustomImageNodeViewProps) => {
   // the image is already uploaded if the image-component node has src attribute
   // and we need to remove the blob from our file system
   useEffect(() => {
-    const remoteImageSrc = node.attrs.src;
     if (remoteImageSrc) {
       setIsUploaded(true);
       setImageFromFileSystem(undefined);
     } else {
       setIsUploaded(false);
     }
-  }, [node.attrs.src]);
+  }, [remoteImageSrc]);
 
   return (
     <NodeViewWrapper>
@@ -55,7 +56,7 @@ export const CustomImageNode = (props: CustomImageNodeViewProps) => {
             editorContainer={editorContainer}
             editor={editor}
             // @ts-expect-error function not expected here, but will still work
-            src={editor?.commands?.getImageSource?.(node.attrs.src)}
+            src={editor?.commands?.getImageSource?.(remoteImageSrc)}
             getPos={getPos}
             node={node}
             setEditorContainer={setEditorContainer}

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

@@ -1,27 +1,20 @@
 import { ChangeEvent, useCallback, useEffect, useMemo, useRef } from "react";
-import { Node as ProsemirrorNode } from "@tiptap/pm/model";
-import { Editor } from "@tiptap/core";
 import { ImageIcon } from "lucide-react";
 // helpers
 import { cn } from "@/helpers/common";
 // hooks
 import { useUploader, useDropZone, uploadFirstImageAndInsertRemaining } from "@/hooks/use-file-upload";
 // extensions
-import { getImageComponentImageFileMap, ImageAttributes } from "@/extensions/custom-image";
+import { type CustomImageComponentProps, getImageComponentImageFileMap } from "@/extensions/custom-image";
 
-export const CustomImageUploader = (props: {
-  editor: Editor;
-  failedToLoadImage: boolean;
-  getPos: () => number;
-  loadImageFromFileSystem: (file: string) => void;
+type CustomImageUploaderProps = CustomImageComponentProps & {
   maxFileSize: number;
-  node: ProsemirrorNode & {
-    attrs: ImageAttributes;
-  };
-  selected: boolean;
+  loadImageFromFileSystem: (file: string) => void;
+  failedToLoadImage: boolean;
   setIsUploaded: (isUploaded: boolean) => void;
-  updateAttributes: (attrs: Record<string, any>) => void;
-}) => {
+};
+
+export const CustomImageUploader = (props: CustomImageUploaderProps) => {
   const {
     editor,
     failedToLoadImage,
@@ -36,8 +29,8 @@ export const CustomImageUploader = (props: {
   // refs
   const fileInputRef = useRef<HTMLInputElement>(null);
   const hasTriggeredFilePickerRef = useRef(false);
+  const { id: imageEntityId } = node.attrs;
   // derived values
-  const imageEntityId = node.attrs.id;
   const imageComponentImageFileMap = useMemo(() => getImageComponentImageFileMap(editor), [editor]);
 
   const onUpload = useCallback(

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

@@ -22,6 +22,7 @@ declare module "@tiptap/core" {
     imageComponent: {
       insertImageComponent: ({ file, pos, event }: InsertImageComponentProps) => ReturnType;
       uploadImage: (file: File) => () => Promise<string> | undefined;
+      restoreImage: (src: string) => () => Promise<void>;
       getImageSource?: (path: string) => () => string;
     };
   }
@@ -40,8 +41,8 @@ export const CustomImageExtension = (props: TFileHandler) => {
   const {
     getAssetSrc,
     upload,
-    delete: deleteImage,
-    restore: restoreImage,
+    delete: deleteImageFn,
+    restore: restoreImageFn,
     validation: { maxFileSize },
   } = props;
 
@@ -85,36 +86,39 @@ export const CustomImageExtension = (props: TFileHandler) => {
       return ["image-component", mergeAttributes(HTMLAttributes)];
     },
 
+    addKeyboardShortcuts() {
+      return {
+        ArrowDown: insertEmptyParagraphAtNodeBoundaries("down", this.name),
+        ArrowUp: insertEmptyParagraphAtNodeBoundaries("up", this.name),
+      };
+    },
+
+    addProseMirrorPlugins() {
+      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 restoreImage(src);
+          await restoreImageFn(src);
         } catch (error) {
           console.error("Error restoring image: ", error);
         }
       });
     },
 
-    addKeyboardShortcuts() {
-      return {
-        ArrowDown: insertEmptyParagraphAtNodeBoundaries("down", this.name),
-        ArrowUp: insertEmptyParagraphAtNodeBoundaries("up", this.name),
-      };
-    },
-
-    addProseMirrorPlugins() {
-      return [
-        TrackImageDeletionPlugin(this.editor, deleteImage, this.name),
-        TrackImageRestorationPlugin(this.editor, restoreImage, this.name),
-      ];
-    },
-
     addStorage() {
       return {
         fileMap: new Map(),
@@ -179,6 +183,9 @@ export const CustomImageExtension = (props: TFileHandler) => {
           const fileUrl = await upload(file);
           return fileUrl;
         },
+        restoreImage: (src: string) => async () => {
+          await restoreImageFn(src);
+        },
         getImageSource: (path: string) => () => getAssetSrc(path),
       };
     },