[WIKI-830] fix: copy clipboard functionality in the editor (#8229)

* feat: enhance clipboard functionality for markdown and HTML content

* fix: improve error handling and state management in CustomImageNodeView component

* fix: correct asset retrieval query by removing workspace filter in DuplicateAssetEndpoint

* fix: update meta tag creation in PasteAssetPlugin for clipboard HTML content

* feat: implement copyMarkdownToClipboard utility for enhanced clipboard functionality

* refactor: replace copyMarkdownToClipboard utility with copyTextToClipboard for simplified clipboard operations

* refactor: streamline clipboard operations by replacing copyTextToClipboard with copyMarkdownToClipboard in editor components

* refactor: simplify PasteAssetPlugin by removing unnecessary meta tag handling and streamlining HTML processing

* feat: implement asset duplication processing on paste for enhanced clipboard functionality

* chore:remove async from copy markdown method

* chore: add paste html

* remove:prevent default

* refactor: remove hasChanges from processAssetDuplication return type for simplified asset processing

* fix: format options-dropdown.tsx

Author: im-vipin

apps/api/plane/app/views/asset/v2.py

@@ -766,7 +766,7 @@ def get_entity_id_field(self, entity_type, entity_id):
 
         return {}
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE")
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
     def post(self, request, slug, asset_id):
         project_id = request.data.get("project_id", None)
         entity_id = request.data.get("entity_id", None)
@@ -792,7 +792,7 @@ def post(self, request, slug, asset_id):
 
         storage = S3Storage(request=request)
         original_asset = FileAsset.objects.filter(
-            workspace=workspace, id=asset_id, is_uploaded=True
+            id=asset_id, is_uploaded=True
         ).first()
 
         if not original_asset:

apps/web/core/components/core/description-versions/modal.tsx

@@ -59,13 +59,12 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
 
   const handleCopyMarkdown = useCallback(() => {
     if (!editorRef.current) return;
-    copyTextToClipboard(editorRef.current.getMarkDown()).then(() =>
-      setToast({
-        type: TOAST_TYPE.SUCCESS,
-        title: t("toast.success"),
-        message: "Markdown copied to clipboard.",
-      })
-    );
+    editorRef.current.copyMarkdownToClipboard();
+    setToast({
+      type: TOAST_TYPE.SUCCESS,
+      title: t("toast.success"),
+      message: "Markdown copied to clipboard.",
+    });
   }, [t]);
 
   if (!workspaceId) return null;

apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx

@@ -71,13 +71,12 @@ export const PageOptionsDropdown = observer(function PageOptionsDropdown(props:
           key: "copy-markdown",
           action: () => {
             if (!editorRef) return;
-            copyTextToClipboard(editorRef.getMarkDown()).then(() =>
-              setToast({
-                type: TOAST_TYPE.SUCCESS,
-                title: "Success!",
-                message: "Markdown copied to clipboard.",
-              })
-            );
+            editorRef.copyMarkdownToClipboard();
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Success!",
+              message: "Markdown copied to clipboard.",
+            });
           },
           title: "Copy markdown",
           icon: Clipboard,

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

@@ -56,16 +56,24 @@ export function CustomImageNodeView(props: CustomImageNodeViewProps) {
       return;
     }
 
+    setResolvedSrc(undefined);
+    setResolvedDownloadSrc(undefined);
+    setFailedToLoadImage(false);
+
     const getImageSource = async () => {
-      const url = await extension.options.getImageSource?.(imgNodeSrc);
-      setResolvedSrc(url);
-      const downloadUrl = await extension.options.getImageDownloadSource?.(imgNodeSrc);
-      setResolvedDownloadSrc(downloadUrl);
+      try {
+        const url = await extension.options.getImageSource?.(imgNodeSrc);
+        setResolvedSrc(url);
+        const downloadUrl = await extension.options.getImageDownloadSource?.(imgNodeSrc);
+        setResolvedDownloadSrc(downloadUrl);
+      } catch (error) {
+        console.error("Error fetching image source:", error);
+        setFailedToLoadImage(true);
+      }
     };
     getImageSource();
   }, [imgNodeSrc, extension.options]);
 
-  // Handle image duplication when status is duplicating
   useEffect(() => {
     const handleDuplication = async () => {
       if (status !== ECustomImageStatus.DUPLICATING || !extension.options.duplicateImage || !imgNodeSrc) {
@@ -87,11 +95,8 @@ export function CustomImageNodeView(props: CustomImageNodeViewProps) {
           throw new Error("Duplication returned invalid asset ID");
         }
 
-        // Update node with new source and success status
-        updateAttributes({
-          src: newAssetId,
-          status: ECustomImageStatus.UPLOADED,
-        });
+        setFailedToLoadImage(false);
+        updateAttributes({ src: newAssetId, status: ECustomImageStatus.UPLOADED });
       } catch (error: unknown) {
         console.error("Failed to duplicate image:", error);
         // Update status to failed
@@ -115,11 +120,13 @@ export function CustomImageNodeView(props: CustomImageNodeViewProps) {
   useEffect(() => {
     if (status === ECustomImageStatus.UPLOADED) {
       hasRetriedOnMount.current = false;
+      setFailedToLoadImage(false);
     }
   }, [status]);
 
   const hasDuplicationFailed = hasImageDuplicationFailed(status);
-  const shouldShowBlock = (isUploaded || imageFromFileSystem) && !failedToLoadImage;
+  const hasValidImageSource = imageFromFileSystem || (isUploaded && resolvedSrc);
+  const shouldShowBlock = hasValidImageSource && !failedToLoadImage && !hasDuplicationFailed;
 
   return (
     <NodeViewWrapper>

packages/editor/src/core/extensions/utility.ts

@@ -8,8 +8,6 @@ import type { TAdditionalActiveDropbarExtensions } from "@/plane-editor/types/ut
 import { DropHandlerPlugin } from "@/plugins/drop";
 import { FilePlugins } from "@/plugins/file/root";
 import { MarkdownClipboardPlugin } from "@/plugins/markdown-clipboard";
-// types
-import { PasteAssetPlugin } from "@/plugins/paste-asset";
 import type { IEditorProps, TEditorAsset, TFileHandler } from "@/types";
 
 type TActiveDropbarExtensions =
@@ -82,7 +80,6 @@ export const UtilityExtension = (props: Props) => {
           flaggedExtensions,
           editor: this.editor,
         }),
-        PasteAssetPlugin(),
       ];
     },
 

packages/editor/src/core/helpers/editor-ref.ts

@@ -89,6 +89,27 @@ export const getEditorRefHelpers = (args: TArgs): EditorRefApi => {
       });
       return markdown;
     },
+    copyMarkdownToClipboard: () => {
+      if (!editor) return;
+
+      const html = editor.getHTML();
+      const metaData = getEditorMetaData(html);
+      const markdown = convertHTMLToMarkdown({
+        description_html: html,
+        metaData,
+      });
+
+      const copyHandler = (event: ClipboardEvent) => {
+        event.preventDefault();
+        event.clipboardData?.setData("text/plain", markdown);
+        event.clipboardData?.setData("text/html", html);
+        event.clipboardData?.setData("text/plane-editor-html", html);
+        document.removeEventListener("copy", copyHandler);
+      };
+
+      document.addEventListener("copy", copyHandler);
+      document.execCommand("copy");
+    },
     isAnyDropbarOpen: () => {
       if (!editor) return false;
       const utilityStorage = editor.storage.utility;

packages/editor/src/core/helpers/paste-asset.ts

@@ -0,0 +1,28 @@
+import { assetDuplicationHandlers } from "@/plane-editor/helpers/asset-duplication";
+
+// Utility function to process HTML content with all registered handlers
+export const processAssetDuplication = (htmlContent: string): { processedHtml: string } => {
+  const tempDiv = document.createElement("div");
+  tempDiv.innerHTML = htmlContent;
+
+  let processedHtml = htmlContent;
+
+  // Process each registered component type
+  for (const [componentName, handler] of Object.entries(assetDuplicationHandlers)) {
+    const elements = tempDiv.querySelectorAll(componentName);
+
+    if (elements.length > 0) {
+      elements.forEach((element) => {
+        const result = handler({ element, originalHtml: processedHtml });
+        if (result.shouldProcess) {
+          processedHtml = result.modifiedHtml;
+        }
+      });
+
+      // Update tempDiv with processed HTML for next iteration
+      tempDiv.innerHTML = processedHtml;
+    }
+  }
+
+  return { processedHtml };
+};

packages/editor/src/core/plugins/markdown-clipboard.ts

@@ -32,6 +32,7 @@ export const MarkdownClipboardPlugin = (args: TArgs): Plugin => {
             });
             event.clipboardData?.setData("text/plain", markdown);
             event.clipboardData?.setData("text/html", clipboardHTML);
+            event.clipboardData?.setData("text/plane-editor-html", clipboardHTML);
             return true;
           } catch (error) {
             console.error("Failed to copy markdown content to clipboard:", error);

packages/editor/src/core/plugins/paste-asset.ts

@@ -1,6 +1,9 @@
+import { DOMParser } from "@tiptap/pm/model";
 import type { EditorProps } from "@tiptap/pm/view";
 // plane utils
 import { cn } from "@plane/utils";
+// helpers
+import { processAssetDuplication } from "@/helpers/paste-asset";
 
 type TArgs = {
   editorClassName: string;
@@ -27,5 +30,15 @@ export const CoreEditorProps = (props: TArgs): EditorProps => {
         }
       },
     },
+    handlePaste: (view, event) => {
+      if (!event.clipboardData) return false;
+
+      const htmlContent = event.clipboardData.getData("text/plane-editor-html");
+      if (!htmlContent) return false;
+
+      const { processedHtml } = processAssetDuplication(htmlContent);
+      view.pasteHTML(processedHtml);
+      return true;
+    },
   };
 };