From e297f7f98f658098250dc11583f83b32f58a9063 Mon Sep 17 00:00:00 2001
From: Palanikannan M <akashmalinimurugu@gmail.com>
Date: Mon, 16 Sep 2024 12:51:41 +0530
Subject: [PATCH] fix: drop upload fixed

---
 .../extensions/custom-image/components/image-node.tsx | 11 ++++++++---
 .../src/core/extensions/custom-image/custom-image.ts  |  2 +-
 .../extensions/custom-image/read-only-custom-image.ts |  2 +-
 .../image/image-component-without-props.tsx           |  2 +-
 packages/editor/src/core/hooks/use-file-upload.ts     |  7 ++++---
 5 files changed, 15 insertions(+), 9 deletions(-)

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 17aa0b90c4..639036e2fe 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
@@ -53,10 +53,15 @@ export const CustomImageNode = (props: CustomImageNodeViewProps) => {
   const uploadFile = useCallback(
     async (file: File) => {
       try {
-        const result = await editor.commands.uploadImage(file)();
-        if (result) {
-          onUpload(result);
+        // @ts-expect-error - TODO: fix typings, and don't remove await from
+        // here for now
+        const url: string = await editor?.commands.uploadImage(file);
+        console.log("url drop", url);
+
+        if (!url) {
+          throw new Error("Something went wrong while uploading the image");
         }
+        onUpload(url);
       } catch (error) {
         console.error("Error uploading file:", error);
         // Handle error state here if needed
diff --git a/packages/editor/src/core/extensions/custom-image/custom-image.ts b/packages/editor/src/core/extensions/custom-image/custom-image.ts
index d84f443aa7..86c0c22285 100644
--- a/packages/editor/src/core/extensions/custom-image/custom-image.ts
+++ b/packages/editor/src/core/extensions/custom-image/custom-image.ts
@@ -29,7 +29,7 @@ export type UploadEntity = ({ event: "insert" } | { event: "drop"; file: File })
 export const CustomImageExtension = (props: TFileHandler) => {
   const { upload, delete: deleteImage, restore: restoreImage } = props;
 
-  return Image.extend<{}, UploadImageExtensionStorage>({
+  return Image.extend<Record<string, unknown>, UploadImageExtensionStorage>({
     name: "imageComponent",
     selectable: true,
     group: "block",
diff --git a/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts b/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts
index eb75de63c8..4f9c7d3cd4 100644
--- a/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts
+++ b/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts
@@ -5,7 +5,7 @@ import { ReactNodeViewRenderer } from "@tiptap/react";
 import { CustomImageNode, UploadImageExtensionStorage } from "@/extensions/custom-image";
 
 export const CustomReadOnlyImageExtension = () =>
-  Image.extend<{}, UploadImageExtensionStorage>({
+  Image.extend<Record<string, unknown>, UploadImageExtensionStorage>({
     name: "imageComponent",
     selectable: false,
     group: "block",
diff --git a/packages/editor/src/core/extensions/image/image-component-without-props.tsx b/packages/editor/src/core/extensions/image/image-component-without-props.tsx
index 770a336e71..2141f6445d 100644
--- a/packages/editor/src/core/extensions/image/image-component-without-props.tsx
+++ b/packages/editor/src/core/extensions/image/image-component-without-props.tsx
@@ -5,7 +5,7 @@ import { Image } from "@tiptap/extension-image";
 import { CustomImageNode, UploadImageExtensionStorage } from "@/extensions";
 
 export const CustomImageComponentWithoutProps = () =>
-  Image.extend<{}, UploadImageExtensionStorage>({
+  Image.extend<Record<string, unknown>, UploadImageExtensionStorage>({
     name: "imageComponent",
     selectable: true,
     group: "block",
diff --git a/packages/editor/src/core/hooks/use-file-upload.ts b/packages/editor/src/core/hooks/use-file-upload.ts
index 7d6a806ed1..c0f6af2c26 100644
--- a/packages/editor/src/core/hooks/use-file-upload.ts
+++ b/packages/editor/src/core/hooks/use-file-upload.ts
@@ -9,7 +9,10 @@ export const useUploader = ({ onUpload, editor }: { onUpload: (url: string) => v
     async (file: File) => {
       setLoading(true);
       try {
-        const url = await editor?.commands.uploadImage(file);
+        // @ts-expect-error - TODO: fix typings, and don't remove await from
+        // here for now
+        const url: string = await editor?.commands.uploadImage(file);
+        console.log("url upload", url);
 
         if (!url) {
           throw new Error("Something went wrong while uploading the image");
@@ -41,7 +44,6 @@ export const useFileUpload = () => {
 export const useDropZone = ({ uploader }: { uploader: (file: File) => void }) => {
   const [isDragging, setIsDragging] = useState<boolean>(false);
   const [draggedInside, setDraggedInside] = useState<boolean>(false);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   useEffect(() => {
     const dragStartHandler = () => {
@@ -64,7 +66,6 @@ export const useDropZone = ({ uploader }: { uploader: (file: File) => void }) =>
   const onDrop = useCallback(
     (e: DragEvent<HTMLDivElement>) => {
       setDraggedInside(false);
-      setErrorMessage(null);
       if (e.dataTransfer.files.length === 0) {
         return;
       }