feat: editor attachment paste handling (#1975)

* reupload attachments if uploaded to a different page
* use image dimensions on paste/DnD

* tooltips withinPortal:false

* isolating attribute

apps/client/src/features/editor/components/common/editor-paste-handler.tsx

@@ -4,6 +4,20 @@ import { uploadAttachmentAction } from "../attachment/upload-attachment-action";
 import { createMentionAction } from "@/features/editor/components/link/internal-link-paste.ts";
 import { INTERNAL_LINK_REGEX } from "@/lib/constants.ts";
 import { Editor } from "@tiptap/core";
+import {
+  getAttachmentInfo,
+  uploadFile,
+} from "@/features/page/services/page-service.ts";
+
+const ATTACHMENT_NODE_TYPES = [
+  "image",
+  "video",
+  "attachment",
+  "excalidraw",
+  "drawio",
+];
+
+const ATTACHMENT_URL_RE = /\/api\/files\/([0-9a-f-]+)\//;
 
 export const handlePaste = (
   editor: Editor,
@@ -57,9 +71,152 @@ export const handlePaste = (
     }
     return true;
   }
+
+  const htmlData = event.clipboardData?.getData("text/html");
+  if (htmlData && ATTACHMENT_URL_RE.test(htmlData)) {
+    const pasteFrom = editor.state.selection.from;
+    setTimeout(() => {
+      reuploadPastedAttachments(editor, pageId, pasteFrom);
+    }, 0);
+  }
+
   return false;
 };
 
+async function reuploadPastedAttachments(
+  editor: Editor,
+  pageId: string,
+  pasteFrom: number,
+) {
+  const pasteEnd = editor.state.selection.from;
+  if (pasteEnd <= pasteFrom) return;
+
+  type PastedNode = {
+    pos: number;
+    attachmentId: string;
+    nodeTypeName: string;
+    src?: string;
+    url?: string;
+    fileName?: string;
+  };
+
+  const pastedNodes: PastedNode[] = [];
+  const seenAttachmentIds = new Set<string>();
+
+  editor.state.doc.nodesBetween(pasteFrom, pasteEnd, (node, pos) => {
+    if (!ATTACHMENT_NODE_TYPES.includes(node.type.name)) return;
+    const attachmentId = node.attrs.attachmentId;
+    if (!attachmentId) return;
+
+    const src = node.attrs.src || node.attrs.url || "";
+    const match = ATTACHMENT_URL_RE.exec(src);
+    if (!match) return;
+
+    const fileName =
+      node.attrs.name || src.split("/").pop() || "file";
+
+    pastedNodes.push({
+      pos,
+      attachmentId,
+      nodeTypeName: node.type.name,
+      src: node.attrs.src,
+      url: node.attrs.url,
+      fileName,
+    });
+    seenAttachmentIds.add(attachmentId);
+  });
+
+  if (pastedNodes.length === 0) return;
+
+  const attachmentPageMap = new Map<string, string | null>();
+  await Promise.all(
+    [...seenAttachmentIds].map(async (id) => {
+      try {
+        const info = await getAttachmentInfo(id);
+        attachmentPageMap.set(id, info.pageId);
+      } catch {
+        attachmentPageMap.set(id, null);
+      }
+    }),
+  );
+
+  const nodesToReupload = pastedNodes.filter((n) => {
+    const ownerPageId = attachmentPageMap.get(n.attachmentId);
+    return ownerPageId !== null && ownerPageId !== pageId;
+  });
+
+  if (nodesToReupload.length === 0) return;
+
+  const uniqueNodes = new Map<string, (typeof nodesToReupload)[0]>();
+  for (const node of nodesToReupload) {
+    if (!uniqueNodes.has(node.attachmentId)) {
+      uniqueNodes.set(node.attachmentId, node);
+    }
+  }
+
+  const reuploadResults = new Map<
+    string,
+    { id: string; fileName: string; fileSize: number; mimeType: string }
+  >();
+
+  await Promise.all(
+    [...uniqueNodes.values()].map(async (node) => {
+      const fileUrl = node.src || node.url;
+      if (!fileUrl) return;
+
+      try {
+        const response = await fetch(fileUrl, { credentials: "include" });
+        if (!response.ok) return;
+        const blob = await response.blob();
+        const file = new File([blob], node.fileName, { type: blob.type });
+        const newAttachment = await uploadFile(file, pageId);
+        reuploadResults.set(node.attachmentId, {
+          id: newAttachment.id,
+          fileName: newAttachment.fileName,
+          fileSize: newAttachment.fileSize,
+          mimeType: newAttachment.mimeType,
+        });
+      } catch {
+        // keep original reference on failure
+      }
+    }),
+  );
+
+  if (reuploadResults.size === 0) return;
+
+  editor.chain().command(({ tr }) => {
+    const sorted = [...nodesToReupload].sort((a, b) => b.pos - a.pos);
+
+    for (const pastedNode of sorted) {
+      const result = reuploadResults.get(pastedNode.attachmentId);
+      if (!result) continue;
+
+      const node = tr.doc.nodeAt(pastedNode.pos);
+      if (!node || node.attrs.attachmentId !== pastedNode.attachmentId)
+        continue;
+
+      const newAttrs = { ...node.attrs };
+      newAttrs.attachmentId = result.id;
+
+      if (newAttrs.src) {
+        newAttrs.src = `/api/files/${result.id}/${result.fileName}`;
+      }
+      if (newAttrs.url) {
+        newAttrs.url = `/api/files/${result.id}/${result.fileName}`;
+      }
+      if (pastedNode.nodeTypeName === "attachment") {
+        newAttrs.name = result.fileName;
+        newAttrs.mime = result.mimeType;
+        newAttrs.size = result.fileSize;
+      }
+
+      tr.setNodeMarkup(pastedNode.pos, undefined, newAttrs);
+    }
+
+    return true;
+  }).run();
+}
+
 export const handleFileDrop = (
   editor: Editor,
   event: DragEvent,