From 295fba6a0d96abb88ffe649591d3d0871ed8635c Mon Sep 17 00:00:00 2001
From: Palanikannan M <akashmalinimurugu@gmail.com>
Date: Thu, 19 Sep 2024 14:22:38 +0530
Subject: [PATCH] fix: minor fixes

---
 .../custom-image/components/image-block.tsx   |  5 +++--
 .../custom-image/components/image-node.tsx    | 20 +++++++++----------
 .../components/image-uploader.tsx             |  1 -
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/editor/src/core/extensions/custom-image/components/image-block.tsx b/packages/editor/src/core/extensions/custom-image/components/image-block.tsx
index 6112fe4439..5825ea1923 100644
--- a/packages/editor/src/core/extensions/custom-image/components/image-block.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/image-block.tsx
@@ -23,13 +23,14 @@ export const CustomImageBlock: React.FC<CustomImageNodeViewProps> = (props) => {
 
   const [isLoading, setIsLoading] = useState(true);
   const [initialResizeComplete, setInitialResizeComplete] = useState(false);
-  const isShimmerVisible = isLoading || !initialResizeComplete;
   const [editorContainer, setEditorContainer] = useState<HTMLElement | null>(null);
+  const [isResizing, setIsResizing] = useState(false);
 
   const containerRef = useRef<HTMLDivElement>(null);
   const containerRect = useRef<DOMRect | null>(null);
   const imageRef = useRef<HTMLImageElement>(null);
-  const [isResizing, setIsResizing] = useState(false);
+
+  const isShimmerVisible = isLoading || !initialResizeComplete;
 
   const handleImageLoad = useCallback(() => {
     const img = imageRef.current;
diff --git a/packages/editor/src/core/extensions/custom-image/components/image-node.tsx b/packages/editor/src/core/extensions/custom-image/components/image-node.tsx
index 4786d8f997..38c8efba41 100644
--- a/packages/editor/src/core/extensions/custom-image/components/image-node.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/image-node.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import { Node as ProsemirrorNode } from "@tiptap/pm/model";
 import { Editor, NodeViewWrapper } from "@tiptap/react";
 // extensions
@@ -33,16 +33,14 @@ export const CustomImageNode = (props: CustomImageNodeViewProps) => {
   const id = node.attrs.id as string;
   const editorStorage = editor.storage.imageComponent as UploadImageExtensionStorage | undefined;
 
-  const getUploadEntity = useCallback(
-    (): UploadEntity | undefined => editorStorage?.fileMap.get(id),
-    [editorStorage, id]
-  );
+  const getUploadEntity = useCallback((): UploadEntity | undefined => {
+    return editorStorage?.fileMap.get(id);
+  }, [editorStorage, id]);
 
   const onUpload = useCallback(
     (url: string) => {
       if (url) {
         setIsUploaded(true);
-        // Update the node view's src attribute
         updateAttributes({ src: url });
         editorStorage?.fileMap.delete(id);
       }
@@ -65,16 +63,16 @@ export const CustomImageNode = (props: CustomImageNodeViewProps) => {
         console.error("Error uploading file:", error);
       }
     },
-    [editor.commands, onUpload]
+    [editor, onUpload]
   );
 
   useEffect(() => {
     const uploadEntity = getUploadEntity();
 
-    if (uploadEntity) {
+    if (uploadEntity && !hasTriggeredFilePickerRef.current) {
       if (uploadEntity.event === "drop" && "file" in uploadEntity) {
         uploadFile(uploadEntity.file);
-      } else if (uploadEntity.event === "insert" && fileInputRef.current && !hasTriggeredFilePickerRef.current) {
+      } else if (uploadEntity.event === "insert" && fileInputRef.current) {
         const entity = editorStorage?.fileMap.get(id);
         if (entity && entity.hasOpenedFileInputOnce) return;
         fileInputRef.current.click();
@@ -83,7 +81,7 @@ export const CustomImageNode = (props: CustomImageNodeViewProps) => {
         editorStorage?.fileMap.set(id, { ...entity, hasOpenedFileInputOnce: true });
       }
     }
-  }, [getUploadEntity, uploadFile]);
+  }, [getUploadEntity, uploadFile, editorStorage?.fileMap, id]);
 
   useEffect(() => {
     if (node.attrs.src) {
@@ -91,7 +89,7 @@ export const CustomImageNode = (props: CustomImageNodeViewProps) => {
     }
   }, [node.attrs.src]);
 
-  const existingFile = React.useMemo(() => {
+  const existingFile = useMemo(() => {
     const entity = getUploadEntity();
     return entity && entity.event === "drop" ? entity.file : undefined;
   }, [getUploadEntity]);
diff --git a/packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx b/packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx
index 90ff57df93..bbb158bec8 100644
--- a/packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx
@@ -53,7 +53,6 @@ export const CustomImageUploader = (props: {
       const file = e.target.files?.[0];
       if (file) {
         if (isFileValid(file)) {
-          editor.storage.image.uploadInProgress = true;
           const reader = new FileReader();
           reader.onload = () => {
             setPreviewUrl(reader.result as string);