feat: handle image duplication for project pages

2025-12-16 11:57:56 +01:00 · 2025-10-28 18:58:40 +05:30
parent 56701442c2
commit 38bdcab1c3
11 changed files with 248 additions and 28 deletions
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
@@ -44,7 +44,7 @@ const PageDetailsPage = observer(() => {
    storeType,
  });
  const { getWorkspaceBySlug } = useWorkspace();
-  const { uploadEditorAsset } = useEditorAsset();
+  const { uploadEditorAsset, duplicateEditorAsset } = useEditorAsset();
  // derived values
  const workspaceId = workspaceSlug ? (getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "") : "";
  const { canCurrentUserAccessPage, id, name, updateDescription } = page ?? {};
@@ -131,11 +131,21 @@ const PageDetailsPage = observer(() => {
          });
          return asset_id;
        },
+        duplicateFile: async (assetId: string) => {
+          const { asset_id } = await duplicateEditorAsset({
+            assetId,
+            entityId: id ?? "",
+            entityType: EFileAssetType.PAGE_DESCRIPTION,
+            projectId: projectId?.toString() ?? "",
+            workspaceSlug: workspaceSlug?.toString() ?? "",
+          });
+          return asset_id;
+        },
        workspaceId,
        workspaceSlug: workspaceSlug?.toString() ?? "",
      }),
    }),
-    [getEditorFileHandlers, id, uploadEditorAsset, projectId, workspaceId, workspaceSlug]
+    [getEditorFileHandlers, projectId, workspaceId, workspaceSlug, uploadEditorAsset, id, duplicateEditorAsset]
  );

  const webhookConnectionParams: TWebhookConnectionQueryParams = useMemo(
--- a/apps/web/core/hooks/editor/use-editor-config.ts
+++ b/apps/web/core/hooks/editor/use-editor-config.ts
@@ -14,6 +14,7 @@ const fileService = new FileService();
 type TArgs = {
  projectId?: string;
  uploadFile: TFileHandler["upload"];
+  duplicateFile?: TFileHandler["duplicate"];
  workspaceId: string;
  workspaceSlug: string;
 };
@@ -27,7 +28,7 @@ export const useEditorConfig = () => {

  const getEditorFileHandlers = useCallback(
    (args: TArgs): TFileHandler => {
-      const { projectId, uploadFile, workspaceId, workspaceSlug } = args;
+      const { projectId, uploadFile, duplicateFile, workspaceId, workspaceSlug } = args;

      return {
        assetsUploadStatus: assetsUploadPercentage,
@@ -85,6 +86,7 @@ export const useEditorConfig = () => {
          }
        },
        upload: uploadFile,
+        duplicate: duplicateFile ?? (async () => ""),
        validation: {
          maxFileSize,
        },
--- a/apps/web/core/services/file.service.ts
+++ b/apps/web/core/services/file.service.ts
@@ -281,4 +281,20 @@ export class FileService extends APIService {
        throw err?.response?.data;
      });
  }
+
+  async duplicateAsset(
+    workspaceSlug: string,
+    assetId: string,
+    data: {
+      entity_id: string;
+      entity_type: string;
+      project_id?: string;
+    }
+  ): Promise<{ asset_id: string }> {
+    return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/duplicate-assets/${assetId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
--- a/apps/web/core/store/editor/asset.store.ts
+++ b/apps/web/core/store/editor/asset.store.ts
@@ -27,6 +27,19 @@ export interface IEditorAssetStore {
    projectId?: string;
    workspaceSlug: string;
  }) => Promise<TFileSignedURLResponse>;
+  duplicateEditorAsset: ({
+    assetId,
+    entityId,
+    entityType,
+    projectId,
+    workspaceSlug,
+  }: {
+    assetId: string;
+    entityId: string;
+    entityType: string;
+    projectId?: string;
+    workspaceSlug: string;
+  }) => Promise<{ asset_id: string }>;
 }

 export class EditorAssetStore implements IEditorAssetStore {
@@ -117,4 +130,13 @@ export class EditorAssetStore implements IEditorAssetStore {
      });
    }
  };
+  duplicateEditorAsset: IEditorAssetStore["duplicateEditorAsset"] = async (args) => {
+    const { assetId, entityId, entityType, projectId, workspaceSlug } = args;
+    const { asset_id } = await this.fileService.duplicateAsset(workspaceSlug?.toString() ?? "", assetId, {
+      entity_id: entityId,
+      entity_type: entityType,
+      project_id: projectId,
+    });
+    return { asset_id };
+  };
 }
--- a/packages/editor/src/core/extensions/custom-image/components/block.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/block.tsx
@@ -4,7 +4,7 @@ import React, { useRef, useState, useCallback, useLayoutEffect, useEffect } from
 import { cn } from "@plane/utils";
 // local imports
 import { Pixel, TCustomImageAttributes, TCustomImageSize } from "../types";
-import { ensurePixelString, getImageBlockId } from "../utils";
+import { ensurePixelString, getImageBlockId, isImageDuplicating } from "../utils";
 import type { CustomImageNodeViewProps } from "./node-view";
 import { ImageToolbarRoot } from "./toolbar";
 import { ImageUploadStatus } from "./upload-status";
@@ -42,6 +42,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
    aspectRatio: nodeAspectRatio,
    src: imgNodeSrc,
    alignment: nodeAlignment,
+    status,
  } = node.attrs;
  // states
  const [size, setSize] = useState<TCustomImageSize>({
@@ -202,15 +203,20 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
    [editor, getPos, isTouchDevice]
  );

-  // show the image loader if the remote image's src or preview image from filesystem is not set yet (while loading the image post upload) (or)
-  // if the initial resize (from 35% width and "auto" height attrs to the actual size in px) is not complete
-  const showImageLoader = !(resolvedImageSrc || imageFromFileSystem) || !initialResizeComplete || hasErroredOnFirstLoad;
-  // show the image upload status only when the resolvedImageSrc is not ready
-  const showUploadStatus = !resolvedImageSrc;
-  // show the image utils only if the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
-  const showImageToolbar = resolvedImageSrc && resolvedDownloadSrc && initialResizeComplete;
-  // show the image resizer only if the editor is editable, the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
-  const showImageResizer = editor.isEditable && resolvedImageSrc && initialResizeComplete;
+  // Check if image is duplicating
+  const isDuplicating = isImageDuplicating(status);
+
+  const showImageLoader =
+    (!resolvedImageSrc && !isDuplicating) || !initialResizeComplete || hasErroredOnFirstLoad || isDuplicating;
+
+  // show the image upload status only when not duplicating and no resolved source
+  const showUploadStatus = !resolvedImageSrc && !isDuplicating;
+
+  // show the image utils only if image is loaded and not duplicating
+  const showImageToolbar = resolvedImageSrc && resolvedDownloadSrc && initialResizeComplete && !isDuplicating;
+
+  // show the image resizer only if image is loaded and not duplicating
+  const showImageResizer = editor.isEditable && resolvedImageSrc && initialResizeComplete && !isDuplicating;
  // show the preview image from the file system if the remote image's src is not set
  const displayedImageSrc = resolvedImageSrc || imageFromFileSystem;

--- a/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
@@ -1,7 +1,8 @@
 import { type NodeViewProps, NodeViewWrapper } from "@tiptap/react";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 // local imports
 import type { CustomImageExtensionType, TCustomImageAttributes } from "../types";
+import { isImageDuplicationFailed } from "../utils";
 import { CustomImageBlock } from "./block";
 import { CustomImageUploader } from "./uploader";

@@ -14,8 +15,8 @@ export type CustomImageNodeViewProps = Omit<NodeViewProps, "extension" | "update
 };

 export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) => {
-  const { editor, extension, node } = props;
-  const { src: imgNodeSrc } = node.attrs;
+  const { editor, extension, node, updateAttributes } = props;
+  const { src: imgNodeSrc, status } = node.attrs;

  const [isUploaded, setIsUploaded] = useState(!!imgNodeSrc);
  const [resolvedSrc, setResolvedSrc] = useState<string | undefined>(undefined);
@@ -25,6 +26,7 @@ export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) =

  const [editorContainer, setEditorContainer] = useState<HTMLDivElement | null>(null);
  const imageComponentRef = useRef<HTMLDivElement>(null);
+  const hasRetriedOnMount = useRef(false);

  useEffect(() => {
    const closestEditorContainer = imageComponentRef.current?.closest(".editor-container");
@@ -60,10 +62,56 @@ export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) =
    getImageSource();
  }, [imgNodeSrc, extension.options]);

+  // Memoize the duplication function to prevent unnecessary re-runs
+  const handleDuplication = useCallback(async () => {
+    if (status !== "duplicating" || !extension.options.duplicateImage || !imgNodeSrc) {
+      return;
+    }
+
+    try {
+      hasRetriedOnMount.current = true;
+
+      const newAssetId = await extension.options.duplicateImage!(imgNodeSrc);
+      // Update node with new source and success status
+      updateAttributes({
+        src: newAssetId,
+        status: "duplicated",
+      });
+    } catch (error) {
+      console.error("Failed to duplicate image:", error);
+      // Update status to failed
+      updateAttributes({ status: "duplication-failed" });
+    }
+  }, [status, imgNodeSrc, extension.options.duplicateImage, updateAttributes]);
+
+  // Handle image duplication when status is duplicating
+  useEffect(() => {
+    if (status === "duplicating") {
+      handleDuplication();
+    }
+  }, [status, handleDuplication]);
+
+  useEffect(() => {
+    if (isImageDuplicationFailed(status) && !hasRetriedOnMount.current && imgNodeSrc) {
+      hasRetriedOnMount.current = true;
+      // Add a small delay before retrying to avoid immediate retries
+      updateAttributes({ status: "duplicating" });
+    }
+  }, [status, imgNodeSrc, updateAttributes]);
+
+  useEffect(() => {
+    if (status === "duplicated") {
+      hasRetriedOnMount.current = false;
+    }
+  }, [status]);
+
+  const isDuplicationFailed = isImageDuplicationFailed(status);
+  const shouldShowBlock = (isUploaded || imageFromFileSystem) && !failedToLoadImage;
+
  return (
    <NodeViewWrapper>
      <div className="p-0 mx-0 my-2" data-drag-handle ref={imageComponentRef}>
-        {(isUploaded || imageFromFileSystem) && !failedToLoadImage ? (
+        {shouldShowBlock && !isDuplicationFailed ? (
          <CustomImageBlock
            editorContainer={editorContainer}
            imageFromFileSystem={imageFromFileSystem}
@@ -76,6 +124,7 @@ export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) =
        ) : (
          <CustomImageUploader
            failedToLoadImage={failedToLoadImage}
+            isDuplicationFailed={isDuplicationFailed}
            loadImageFromFileSystem={setImageFromFileSystem}
            maxFileSize={editor.storage.imageComponent?.maxFileSize}
            setIsUploaded={setIsUploaded}
--- a/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
@@ -1,4 +1,4 @@
-import { ImageIcon } from "lucide-react";
+import { ImageIcon, RotateCcw } from "lucide-react";
 import { ChangeEvent, useCallback, useEffect, useMemo, useRef } from "react";
 // plane imports
 import { cn } from "@plane/utils";
@@ -15,6 +15,7 @@ import type { CustomImageNodeViewProps } from "./node-view";

 type CustomImageUploaderProps = CustomImageNodeViewProps & {
  failedToLoadImage: boolean;
+  isDuplicationFailed: boolean;
  loadImageFromFileSystem: (file: string) => void;
  maxFileSize: number;
  setIsUploaded: (isUploaded: boolean) => void;
@@ -32,6 +33,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
    selected,
    setIsUploaded,
    updateAttributes,
+    isDuplicationFailed,
  } = props;
  // refs
  const fileInputRef = useRef<HTMLInputElement>(null);
@@ -49,6 +51,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
        // Update the node view's src attribute post upload
        updateAttributes({
          src: url,
+          status: "uploaded",
        });
        imageComponentImageFileMap?.delete(imageEntityId);

@@ -108,6 +111,11 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
    onInvalidFile: handleInvalidFile,
    onUpload,
  });
+  useEffect(() => {
+    if (isImageBeingUploaded) {
+      updateAttributes({ status: "uploading" });
+    }
+  }, [isImageBeingUploaded, updateAttributes]);

  const { draggedInside, onDrop, onDragEnter, onDragLeave } = useDropZone({
    editor,
@@ -160,7 +168,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {

  const getDisplayMessage = useCallback(() => {
    const isUploading = isImageBeingUploaded;
-    if (failedToLoadImage) {
+    if (failedToLoadImage || isDuplicationFailed) {
      return "Error loading image";
    }

@@ -173,7 +181,17 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
    }

    return "Add an image";
-  }, [draggedInside, editor.isEditable, failedToLoadImage, isImageBeingUploaded]);
+  }, [draggedInside, editor.isEditable, failedToLoadImage, isImageBeingUploaded, isDuplicationFailed]);
+
+  const handleRetryClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (isDuplicationFailed && editor.isEditable) {
+        updateAttributes({ status: "duplicating" });
+      }
+    },
+    [isDuplicationFailed, editor.isEditable, updateAttributes]
+  );

  return (
    <div
@@ -184,10 +202,10 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
          "bg-custom-background-80 text-custom-text-200": draggedInside && editor.isEditable,
          "text-custom-primary-200 bg-custom-primary-100/10 border-custom-primary-200/10 hover:bg-custom-primary-100/10 hover:text-custom-primary-200":
            selected && editor.isEditable,
-          "text-red-500 cursor-default": failedToLoadImage,
-          "hover:text-red-500": failedToLoadImage && editor.isEditable,
-          "bg-red-500/10": failedToLoadImage && selected,
-          "hover:bg-red-500/10": failedToLoadImage && selected && editor.isEditable,
+          "text-red-500 cursor-default": failedToLoadImage || isDuplicationFailed,
+          "hover:text-red-500": (failedToLoadImage || isDuplicationFailed) && editor.isEditable,
+          "bg-red-500/10": (failedToLoadImage || isDuplicationFailed) && selected,
+          "hover:bg-red-500/10": (failedToLoadImage || isDuplicationFailed) && selected && editor.isEditable,
        }
      )}
      onDrop={onDrop}
@@ -195,13 +213,23 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
      onDragLeave={onDragLeave}
      contentEditable={false}
      onClick={() => {
-        if (!failedToLoadImage && editor.isEditable) {
+        if (!failedToLoadImage && editor.isEditable && !isDuplicationFailed) {
          fileInputRef.current?.click();
        }
      }}
    >
      <ImageIcon className="size-4" />
-      <div className="text-base font-medium">{getDisplayMessage()}</div>
+      <div className="text-base font-medium flex-1">{getDisplayMessage()}</div>
+      {isDuplicationFailed && editor.isEditable && (
+        <button
+          onClick={handleRetryClick}
+          className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-custom-text-200 bg-custom-background-80 hover:bg-custom-background-70 border border-custom-border-300 hover:border-custom-border-200 rounded-md transition-all duration-200 ease-in-out"
+          title="Retry duplication"
+        >
+          <RotateCcw className="size-3" />
+          Retry
+        </button>
+      )}
      <input
        className="size-0 overflow-hidden"
        ref={fileInputRef}
--- a/packages/editor/src/core/extensions/custom-image/extension.tsx
+++ b/packages/editor/src/core/extensions/custom-image/extension.tsx
@@ -1,3 +1,4 @@
+import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { ReactNodeViewRenderer } from "@tiptap/react";
 import { v4 as uuidv4 } from "uuid";
 // constants
@@ -29,13 +30,14 @@ export const CustomImageExtension = (props: Props) => {

    addOptions() {
      const upload = "upload" in fileHandler ? fileHandler.upload : undefined;
-
+      const duplicate = "duplicate" in fileHandler ? fileHandler.duplicate : undefined;
      return {
        ...this.parent?.(),
        getImageDownloadSource: getAssetDownloadSrc,
        getImageSource: getAssetSrc,
        restoreImage: restoreImageFn,
        uploadImage: upload,
+        duplicateImage: duplicate,
      };
    },

@@ -93,6 +95,7 @@ export const CustomImageExtension = (props: Props) => {

            const attributes = {
              id: fileId,
+              status: "pending",
            };

            if (props.pos) {
@@ -115,6 +118,64 @@ export const CustomImageExtension = (props: Props) => {
        ArrowUp: insertEmptyParagraphAtNodeBoundaries("up", this.name),
      };
    },
+    addProseMirrorPlugins() {
+      return [
+        new Plugin({
+          key: new PluginKey("paste-image-duplication"),
+          props: {
+            handlePaste: (view, event, _slice) => {
+              if (!event.clipboardData) return false;
+
+              const htmlContent = event.clipboardData.getData("text/html");
+              if (!htmlContent || htmlContent.includes('data-duplicated="true"')) return false;
+
+              const tempDiv = document.createElement("div");
+              tempDiv.innerHTML = htmlContent;
+              const imageComponents = tempDiv.querySelectorAll("image-component");
+
+              if (imageComponents.length === 0) return false;
+
+              event.preventDefault();
+              event.stopPropagation();
+
+              let updatedHtml = htmlContent;
+              imageComponents.forEach((component) => {
+                const src = component.getAttribute("src");
+                if (src) {
+                  const newId = uuidv4();
+                  const originalTag = component.outerHTML;
+                  const modifiedTag = originalTag
+                    .replace(`<image-component`, `<image-component status="duplicating"`)
+                    .replace(/id="[^"]*"/, `id="${newId}"`);
+                  updatedHtml = updatedHtml.replace(originalTag, modifiedTag);
+                }
+              });
+
+              updatedHtml = updatedHtml.replace(
+                "<meta charset='utf-8'>",
+                "<meta charset='utf-8' data-duplicated=\"true\">"
+              );
+
+              const newDataTransfer = new DataTransfer();
+              newDataTransfer.setData("text/html", updatedHtml);
+              if (event.clipboardData) {
+                newDataTransfer.setData("text/plain", event.clipboardData.getData("text/plain"));
+              }
+
+              const pasteEvent = new ClipboardEvent("paste", {
+                clipboardData: newDataTransfer,
+                bubbles: true,
+                cancelable: true,
+              });
+
+              view.dom.dispatchEvent(pasteEvent);
+
+              return true;
+            },
+          },
+        }),
+      ];
+    },

    addNodeView() {
      return ReactNodeViewRenderer((props) => (
--- a/packages/editor/src/core/extensions/custom-image/types.ts
+++ b/packages/editor/src/core/extensions/custom-image/types.ts
@@ -9,6 +9,7 @@ export enum ECustomImageAttributeNames {
  ASPECT_RATIO = "aspectRatio",
  SOURCE = "src",
  ALIGNMENT = "alignment",
+  STATUS = "status",
 }

 export type Pixel = `${number}px`;
@@ -23,6 +24,14 @@ export type TCustomImageSize = {

 export type TCustomImageAlignment = "left" | "center" | "right";

+export type TCustomImageStatus =
+  | "pending"
+  | "uploading"
+  | "uploaded"
+  | "duplicating"
+  | "duplicated"
+  | "duplication-failed";
+
 export type TCustomImageAttributes = {
  [ECustomImageAttributeNames.ID]: string | null;
  [ECustomImageAttributeNames.WIDTH]: PixelAttribute<"35%" | number> | null;
@@ -30,6 +39,7 @@ export type TCustomImageAttributes = {
  [ECustomImageAttributeNames.ASPECT_RATIO]: number | null;
  [ECustomImageAttributeNames.SOURCE]: string | null;
  [ECustomImageAttributeNames.ALIGNMENT]: TCustomImageAlignment;
+  [ECustomImageAttributeNames.STATUS]: TCustomImageStatus;
 };

 export type UploadEntity = ({ event: "insert" } | { event: "drop"; file: File }) & { hasOpenedFileInputOnce?: boolean };
@@ -45,6 +55,7 @@ export type CustomImageExtensionOptions = {
  getImageSource: TFileHandler["getAssetSrc"];
  restoreImage: TFileHandler["restore"];
  uploadImage?: TFileHandler["upload"];
+  duplicateImage?: TFileHandler["duplicate"];
 };

 export type CustomImageExtensionStorage = {
--- a/packages/editor/src/core/extensions/custom-image/utils.ts
+++ b/packages/editor/src/core/extensions/custom-image/utils.ts
@@ -1,7 +1,13 @@
 import type { Editor } from "@tiptap/core";
 import { AlignCenter, AlignLeft, AlignRight, type LucideIcon } from "lucide-react";
 // local imports
-import { ECustomImageAttributeNames, TCustomImageAlignment, type Pixel, type TCustomImageAttributes } from "./types";
+import {
+  ECustomImageAttributeNames,
+  TCustomImageAlignment,
+  TCustomImageStatus,
+  type Pixel,
+  type TCustomImageAttributes,
+} from "./types";

 export const DEFAULT_CUSTOM_IMAGE_ATTRIBUTES: TCustomImageAttributes = {
  [ECustomImageAttributeNames.SOURCE]: null,
@@ -10,6 +16,7 @@ export const DEFAULT_CUSTOM_IMAGE_ATTRIBUTES: TCustomImageAttributes = {
  [ECustomImageAttributeNames.HEIGHT]: "auto",
  [ECustomImageAttributeNames.ASPECT_RATIO]: null,
  [ECustomImageAttributeNames.ALIGNMENT]: "left",
+  [ECustomImageAttributeNames.STATUS]: "pending",
 };

 export const getImageComponentImageFileMap = (editor: Editor) => editor.storage.imageComponent?.fileMap;
@@ -51,3 +58,10 @@ export const IMAGE_ALIGNMENT_OPTIONS: {
  },
 ];
 export const getImageBlockId = (id: string) => `editor-image-block-${id}`;
+
+export const isImageDuplicating = (status: TCustomImageStatus) => status === "duplicating";
+
+export const isImageDuplicationComplete = (status: TCustomImageStatus) =>
+  status === "duplicated" || status === "duplication-failed";
+
+export const isImageDuplicationFailed = (status: TCustomImageStatus) => status === "duplication-failed";
--- a/packages/editor/src/core/types/config.ts
+++ b/packages/editor/src/core/types/config.ts
@@ -11,6 +11,7 @@ export type TFileHandler = {
  getAssetSrc: (path: string) => Promise<string>;
  restore: (assetSrc: string) => Promise<void>;
  upload: (blockId: string, file: File) => Promise<string>;
+  duplicate?: (assetId: string) => Promise<string>;
  validation: {
    /**
     * @description max file size in bytes