fix: refactor uploader

Author: Palanikannan1437

packages/editor/src/core/extensions/callout/logo-selector.tsx

@@ -53,27 +53,29 @@ export function CalloutBlockLogoSelector(props: Props) {
           };
           if (val.type === "emoji") {
             // val.value is now a string in decimal format (e.g. "128512")
+            const emojiValue = val.value as string;
             newLogoValue = {
-              "data-emoji-unicode": val.value,
+              "data-emoji-unicode": emojiValue,
               "data-emoji-url": undefined,
             };
             newLogoValueToStoreInLocalStorage = {
               in_use: "emoji",
               emoji: {
-                value: val.value,
+                value: emojiValue,
                 url: undefined,
               },
             };
           } else if (val.type === "icon") {
+            const iconValue = val.value as { name: string; color: string };
             newLogoValue = {
-              "data-icon-name": val.value.name,
-              "data-icon-color": val.value.color,
+              "data-icon-name": iconValue.name,
+              "data-icon-color": iconValue.color,
             };
             newLogoValueToStoreInLocalStorage = {
               in_use: "icon",
               icon: {
-                name: val.value.name,
-                color: val.value.color,
+                name: iconValue.name,
+                color: iconValue.color,
               },
             };
           }

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

@@ -40,6 +40,7 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
   // refs
   const fileInputRef = useRef<HTMLInputElement>(null);
   const hasTriggeredFilePickerRef = useRef(false);
+  const hasTriedUploadingOnMountRef = useRef(false);
   const { id: imageEntityId } = node.attrs;
   // derived values
   const imageComponentImageFileMap = useMemo(() => getImageComponentImageFileMap(editor), [editor]);
@@ -124,17 +125,16 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
     uploader: uploadFile,
   });
 
-  // the meta data of the image component
-  const meta = useMemo(
-    () => imageComponentImageFileMap?.get(imageEntityId ?? ""),
-    [imageComponentImageFileMap, imageEntityId]
-  );
-
   // after the image component is mounted we start the upload process based on
   // it's uploaded
   useEffect(() => {
+    if (hasTriedUploadingOnMountRef.current) return;
+
+    // the meta data of the image component
+    const meta = imageComponentImageFileMap?.get(imageEntityId ?? "");
     if (meta) {
       if (meta.event === "drop" && "file" in meta) {
+        hasTriedUploadingOnMountRef.current = true;
         uploadFile(meta.file);
       } else if (meta.event === "insert" && fileInputRef.current && !hasTriggeredFilePickerRef.current) {
         if (meta.hasOpenedFileInputOnce) return;
@@ -144,8 +144,10 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
         hasTriggeredFilePickerRef.current = true;
         imageComponentImageFileMap?.set(imageEntityId ?? "", { ...meta, hasOpenedFileInputOnce: true });
       }
+    } else {
+      hasTriedUploadingOnMountRef.current = true;
     }
-  }, [meta, uploadFile, imageComponentImageFileMap, imageEntityId, isTouchDevice]);
+  }, [imageEntityId, isTouchDevice, uploadFile, imageComponentImageFileMap]);
 
   const onFileChange = useCallback(
     async (e: ChangeEvent<HTMLInputElement>) => {

packages/editor/src/core/plugins/file/delete.ts

@@ -21,6 +21,7 @@ export const TrackFileDeletionPlugin = (editor: Editor, deleteHandler: TFileHand
         [nodeType: string]: Set<string> | undefined;
       } = {};
       if (!transactions.some((tr) => tr.docChanged)) return null;
+      if (transactions.some((tr) => tr.getMeta(CORE_EDITOR_META.SKIP_FILE_DELETION))) return null;
 
       newState.doc.descendants((node) => {
         const nodeType = node.type.name as keyof NodeFileMapType;
@@ -34,40 +35,35 @@ export const TrackFileDeletionPlugin = (editor: Editor, deleteHandler: TFileHand
         }
       });
 
-      transactions.forEach((transaction) => {
-        // if the transaction has meta of skipFileDeletion set to true, then return (like while clearing the editor content programmatically)
-        if (transaction.getMeta(CORE_EDITOR_META.SKIP_FILE_DELETION)) return;
+      const removedFiles: TFileNode[] = [];
 
-        const removedFiles: TFileNode[] = [];
-
-        // iterate through all the nodes in the old state
-        oldState.doc.descendants((node) => {
-          const nodeType = node.type.name as keyof NodeFileMapType;
-          const isAValidNode = NODE_FILE_MAP[nodeType];
-          // if the node doesn't match, then return as no point in checking
-          if (!isAValidNode) return;
-          // Check if the node has been deleted or replaced
-          if (!newFileSources[nodeType]?.has(node.attrs.src)) {
-            removedFiles.push(node as TFileNode);
-          }
-        });
+      // iterate through all the nodes in the old state
+      oldState.doc.descendants((node) => {
+        const nodeType = node.type.name as keyof NodeFileMapType;
+        const isAValidNode = NODE_FILE_MAP[nodeType];
+        // if the node doesn't match, then return as no point in checking
+        if (!isAValidNode) return;
+        // Check if the node has been deleted or replaced
+        if (!newFileSources[nodeType]?.has(node.attrs.src)) {
+          removedFiles.push(node as TFileNode);
+        }
+      });
 
-        removedFiles.forEach(async (node) => {
-          const nodeType = node.type.name as keyof NodeFileMapType;
-          const src = node.attrs.src;
-          const nodeFileSetDetails = NODE_FILE_MAP[nodeType];
-          if (!nodeFileSetDetails || !src) return;
-          try {
-            editor.storage[nodeType]?.[nodeFileSetDetails.fileSetName]?.set(src, true);
-            // update assets list storage value
-            editor.commands.updateAssetsList?.({
-              idToRemove: node.attrs.id,
-            });
-            await deleteHandler(src);
-          } catch (error) {
-            console.error("Error deleting file via delete utility plugin:", error);
-          }
-        });
+      removedFiles.forEach(async (node) => {
+        const nodeType = node.type.name as keyof NodeFileMapType;
+        const src = node.attrs.src;
+        const nodeFileSetDetails = NODE_FILE_MAP[nodeType];
+        if (!nodeFileSetDetails || !src) return;
+        try {
+          editor.storage[nodeType]?.[nodeFileSetDetails.fileSetName]?.set(src, true);
+          // update assets list storage value
+          editor.commands.updateAssetsList?.({
+            idToRemove: node.attrs.id,
+          });
+          await deleteHandler(src);
+        } catch (error) {
+          console.error("Error deleting file via delete utility plugin:", error);
+        }
       });
 
       return null;