feat: Implement the ability to copy and paste images (#577)

Author: charlesvien

apps/twig/src/main/trpc/routers/os.ts

@@ -149,4 +149,40 @@ export const osRouter = router({
    * Get the worktree base location (e.g., ~/.twig)
    */
   getWorktreeLocation: publicProcedure.query(() => getWorktreeLocation()),
+
+  /**
+   * Save clipboard image data to a temp file
+   * Returns the file path for use as a file attachment
+   */
+  saveClipboardImage: publicProcedure
+    .input(
+      z.object({
+        base64Data: z.string(),
+        mimeType: z.string(),
+        originalName: z.string().optional(),
+      }),
+    )
+    .mutation(async ({ input }) => {
+      const extension = input.mimeType.split("/")[1] || "png";
+      const isGenericName =
+        !input.originalName ||
+        input.originalName === "image.png" ||
+        input.originalName === "image.jpeg" ||
+        input.originalName === "image.jpg";
+      const displayName = isGenericName
+        ? `clipboard.${extension}`
+        : input.originalName!;
+      // Add timestamp to actual filename to avoid collisions
+      const baseName = displayName.replace(/\.[^.]+$/, "");
+      const filename = `${baseName}-${Date.now()}.${extension}`;
+      const tempDir = path.join(os.tmpdir(), "twig-clipboard");
+
+      await fsPromises.mkdir(tempDir, { recursive: true });
+      const filePath = path.join(tempDir, filename);
+
+      const buffer = Buffer.from(input.base64Data, "base64");
+      await fsPromises.writeFile(filePath, buffer);
+
+      return { path: filePath, name: displayName };
+    }),
 });

apps/twig/src/renderer/features/message-editor/tiptap/useTiptapEditor.ts

@@ -1,3 +1,4 @@
+import { trpcVanilla } from "@renderer/trpc/client";
 import { toast } from "@renderer/utils/toast";
 import { useSettingsStore } from "@stores/settingsStore";
 import { useEditor } from "@tiptap/react";
@@ -207,6 +208,63 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
 
           return false;
         },
+        handlePaste: (view, event) => {
+          const items = event.clipboardData?.items;
+          if (!items) return false;
+
+          const imageItems: DataTransferItem[] = [];
+          for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (item.type.startsWith("image/")) {
+              imageItems.push(item);
+            }
+          }
+
+          if (imageItems.length === 0) return false;
+
+          event.preventDefault();
+
+          (async () => {
+            for (const item of imageItems) {
+              const file = item.getAsFile();
+              if (!file) continue;
+
+              try {
+                const arrayBuffer = await file.arrayBuffer();
+                const base64 = btoa(
+                  new Uint8Array(arrayBuffer).reduce(
+                    (data, byte) => data + String.fromCharCode(byte),
+                    "",
+                  ),
+                );
+
+                const result = await trpcVanilla.os.saveClipboardImage.mutate({
+                  base64Data: base64,
+                  mimeType: file.type,
+                  originalName: file.name,
+                });
+
+                const chipNode = view.state.schema.nodes.mentionChip?.create({
+                  type: "file",
+                  id: result.path,
+                  label: result.name,
+                });
+
+                if (chipNode) {
+                  const { tr } = view.state;
+                  const pos = view.state.selection.from;
+                  tr.insert(pos, chipNode);
+                  tr.insertText(" ", pos + chipNode.nodeSize);
+                  view.dispatch(tr);
+                }
+              } catch (_error) {
+                toast.error("Failed to paste image");
+              }
+            }
+          })();
+
+          return true;
+        },
       },
       onCreate: ({ editor: e }) => {
         setIsReady(true);