From 814af00402107a32914e1f3c99470b536817de4e Mon Sep 17 00:00:00 2001
From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
Date: Tue, 5 Sep 2023 01:52:42 +0530
Subject: [PATCH] added better ts support

---
 .../tiptap/plugins/delete-image.tsx           | 44 ++++++++++++-------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/web/components/tiptap/plugins/delete-image.tsx b/web/components/tiptap/plugins/delete-image.tsx
index bcb1bfaf8..85844178c 100644
--- a/web/components/tiptap/plugins/delete-image.tsx
+++ b/web/components/tiptap/plugins/delete-image.tsx
@@ -1,27 +1,36 @@
-import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { EditorState, Plugin, PluginKey, Transaction } from "@tiptap/pm/state";
 import { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import fileService from "services/file.service";
 
 const deleteKey = new PluginKey("delete-image");
 
-const TrackImageDeletionPlugin = () =>
+const IMAGE_NODE_TYPE = "image";
+
+interface ImageNode extends ProseMirrorNode {
+  attrs: {
+    src: string;
+    id: string;
+  };
+}
+
+const TrackImageDeletionPlugin = (): Plugin =>
   new Plugin({
     key: deleteKey,
-    appendTransaction: (transactions, oldState, newState) => {
+    appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
       transactions.forEach((transaction) => {
         if (!transaction.docChanged) return;
 
-        const removedImages: ProseMirrorNode[] = [];
+        const removedImages: ImageNode[] = [];
 
         oldState.doc.descendants((oldNode, oldPos) => {
-          if (oldNode.type.name !== "image") return;
-
+          if (oldNode.type.name !== IMAGE_NODE_TYPE) return;
           if (oldPos < 0 || oldPos > newState.doc.content.size) return;
           if (!newState.doc.resolve(oldPos).parent) return;
+
           const newNode = newState.doc.nodeAt(oldPos);
 
           // Check if the node has been deleted or replaced
-          if (!newNode || newNode.type.name !== "image") {
+          if (!newNode || newNode.type.name !== IMAGE_NODE_TYPE) {
             // Check if the node still exists elsewhere in the document
             let nodeExists = false;
             newState.doc.descendants((node) => {
@@ -30,15 +39,14 @@ const TrackImageDeletionPlugin = () =>
               }
             });
             if (!nodeExists) {
-              removedImages.push(oldNode as ProseMirrorNode);
+              removedImages.push(oldNode as ImageNode);
             }
           }
         });
 
-        removedImages.forEach((node) => {
+        removedImages.forEach(async (node) => {
           const src = node.attrs.src;
-          console.log("Image deleted: ", src, node.attrs.id)
-          onNodeDeleted(src);
+          await onNodeDeleted(src);
         });
       });
 
@@ -48,10 +56,14 @@ const TrackImageDeletionPlugin = () =>
 
 export default TrackImageDeletionPlugin;
 
-async function onNodeDeleted(src: string) {
-  const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
-  const resStatus = await fileService.deleteImage(assetUrlWithWorkspaceId);
-  if (resStatus === 204) {
-    console.log("Image deleted successfully");
+async function onNodeDeleted(src: string): Promise<void> {
+  try {
+    const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
+    const resStatus = await fileService.deleteImage(assetUrlWithWorkspaceId);
+    if (resStatus === 204) {
+      console.log("Image deleted successfully");
+    }
+  } catch (error) {
+    console.error("Error deleting image: ", error);
   }
 }