[PE-242, 243] refactor: editor file handling, image upload status (#6442)

* refactor: editor file handling

* refactor: asset store

* refactor: space app file handlers

* fix: separate webhook connection params

* chore: handle undefined status

* chore: add type to upload status

* chore: added transition for upload status update

web/core/hooks/editor/index.ts

@@ -0,0 +1,2 @@
+export * from "./use-editor-config";
+export * from "./use-editor-mention";

web/core/hooks/editor/use-editor-config.ts

@@ -0,0 +1,96 @@
+import { useCallback } from "react";
+// plane editor
+import { TFileHandler, TReadOnlyFileHandler } from "@plane/editor";
+// helpers
+import { getEditorAssetSrc } from "@/helpers/editor.helper";
+// hooks
+import { useEditorAsset } from "@/hooks/store";
+// plane web hooks
+import { useFileSize } from "@/plane-web/hooks/use-file-size";
+// services
+import { FileService } from "@/services/file.service";
+const fileService = new FileService();
+
+type TArgs = {
+  projectId?: string;
+  uploadFile: TFileHandler["upload"];
+  workspaceId: string;
+  workspaceSlug: string;
+};
+
+export const useEditorConfig = () => {
+  // store hooks
+  const { assetsUploadPercentage } = useEditorAsset();
+  // file size
+  const { maxFileSize } = useFileSize();
+
+  const getReadOnlyEditorFileHandlers = useCallback(
+    (args: Pick<TArgs, "projectId" | "workspaceId" | "workspaceSlug">): TReadOnlyFileHandler => {
+      const { projectId, workspaceId, workspaceSlug } = args;
+
+      return {
+        getAssetSrc: async (path) => {
+          if (!path) return "";
+          if (path?.startsWith("http")) {
+            return path;
+          } else {
+            return (
+              getEditorAssetSrc({
+                assetId: path,
+                projectId,
+                workspaceSlug,
+              }) ?? ""
+            );
+          }
+        },
+        restore: async (src: string) => {
+          if (src?.startsWith("http")) {
+            await fileService.restoreOldEditorAsset(workspaceId, src);
+          } else {
+            await fileService.restoreNewAsset(workspaceSlug, src);
+          }
+        },
+      };
+    },
+    []
+  );
+
+  const getEditorFileHandlers = useCallback(
+    (args: TArgs): TFileHandler => {
+      const { projectId, uploadFile, workspaceId, workspaceSlug } = args;
+
+      return {
+        ...getReadOnlyEditorFileHandlers({
+          projectId,
+          workspaceId,
+          workspaceSlug,
+        }),
+        assetsUploadStatus: assetsUploadPercentage,
+        upload: uploadFile,
+        delete: async (src: string) => {
+          if (src?.startsWith("http")) {
+            await fileService.deleteOldWorkspaceAsset(workspaceId, src);
+          } else {
+            await fileService.deleteNewAsset(
+              getEditorAssetSrc({
+                assetId: src,
+                projectId,
+                workspaceSlug,
+              }) ?? ""
+            );
+          }
+        },
+        cancel: fileService.cancelUpload,
+        validation: {
+          maxFileSize,
+        },
+      };
+    },
+    [assetsUploadPercentage, getReadOnlyEditorFileHandlers, maxFileSize]
+  );
+
+  return {
+    getEditorFileHandlers,
+    getReadOnlyEditorFileHandlers,
+  };
+};

web/core/hooks/store/index.ts

@@ -7,6 +7,7 @@ export * from "./use-command-palette";
 export * from "./use-cycle";
 export * from "./use-cycle-filter";
 export * from "./use-dashboard";
+export * from "./use-editor-asset";
 export * from "./use-event-tracker";
 export * from "./use-global-view";
 export * from "./use-inbox-issues";

web/core/hooks/store/use-editor-asset.ts

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+// store
+import { StoreContext } from "@/lib/store-context";
+import { IEditorAssetStore } from "@/store/editor/asset.store";
+
+export const useEditorAsset = (): IEditorAssetStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useEditorAsset must be used within StoreProvider");
+  return context.editorAssetStore;
+};