Merge pull request #11 from TibetOS/claude/export-options

feat: export format, scale presets, and copy-to-clipboard

Author: TibetOS

src/App.test.tsx

@@ -2,6 +2,16 @@ import { render, screen, fireEvent, waitFor } from "@testing-library/react"
 import { describe, it, expect, vi } from "vitest"
 import { App } from "./App"
 
+// jsdom cannot rasterize DOM nodes; return a stub canvas so export flows
+// can be exercised end-to-end.
+vi.mock("html-to-image", () => ({
+  toCanvas: vi.fn(async () => ({
+    toDataURL: () => "data:image/png;base64,AAAA",
+    toBlob: (cb: (b: Blob | null) => void) =>
+      cb(new Blob(["x"], { type: "image/png" })),
+  })),
+}))
+
 describe("App", () => {
   it("renders the app title", () => {
     render(<App />)
@@ -170,8 +180,7 @@ describe("reactions & replies", () => {
 
   it("adds a reply that renders the quoted message inside the bubble", () => {
     render(<App />)
-    // Default sender is the contact, so the only combobox is "Reply to".
-    const replySelect = screen.getByRole("combobox")
+    const replySelect = screen.getByLabelText("Reply to message")
     const options = replySelect.querySelectorAll("option")
     // options[0] is "None"; options[1] is the first quotable message.
     fireEvent.change(replySelect, { target: { value: options[1].value } })
@@ -216,7 +225,9 @@ describe("reactions & replies", () => {
     fireEvent.click(screen.getByRole("button", { name: "System" }))
 
     expect(screen.queryByPlaceholderText("👍 ❤️ 😂")).not.toBeInTheDocument()
-    expect(screen.queryByRole("combobox")).not.toBeInTheDocument()
+    expect(
+      screen.queryByLabelText("Reply to message"),
+    ).not.toBeInTheDocument()
   })
 })
 
@@ -293,6 +304,54 @@ describe("media messages", () => {
   })
 })
 
+describe("export options", () => {
+  it("downloads at the selected format and scale", async () => {
+    const { toCanvas } = await import("html-to-image")
+    const clickSpy = vi
+      .spyOn(HTMLAnchorElement.prototype, "click")
+      .mockImplementation(() => {})
+    render(<App />)
+
+    fireEvent.change(screen.getByLabelText("Export format"), {
+      target: { value: "webp" },
+    })
+    fireEvent.change(screen.getByLabelText("Export scale"), {
+      target: { value: "3" },
+    })
+    fireEvent.click(screen.getByRole("button", { name: "Download WEBP" }))
+
+    await waitFor(() => expect(clickSpy).toHaveBeenCalled())
+    expect(toCanvas).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({ pixelRatio: 3 }),
+    )
+    clickSpy.mockRestore()
+  })
+
+  it("copies a PNG to the clipboard", async () => {
+    const write = vi.fn(async () => {})
+    vi.stubGlobal("navigator", { ...navigator, clipboard: { write } })
+    vi.stubGlobal(
+      "ClipboardItem",
+      class {
+        items: Record<string, Blob>
+        constructor(items: Record<string, Blob>) {
+          this.items = items
+        }
+      },
+    )
+    try {
+      render(<App />)
+
+      fireEvent.click(screen.getByRole("button", { name: "Copy" }))
+
+      await waitFor(() => expect(write).toHaveBeenCalled())
+    } finally {
+      vi.unstubAllGlobals()
+    }
+  })
+})
+
 describe("voice notes", () => {
   it("adds a voice note without text and renders duration in the bubble", () => {
     render(<App />)

src/App.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useCallback } from "react"
-import { toPng } from "html-to-image"
-import type { Message, ChatConfig } from "./types"
+import { toCanvas } from "html-to-image"
+import type { Message, ChatConfig, ExportOptions } from "./types"
 import { ChatPreview } from "./components/ChatPreview"
 import { ControlPanel } from "./components/ControlPanel"
 
@@ -107,21 +107,57 @@ function App() {
     [],
   )
 
-  const handleExport = useCallback(async () => {
-    if (!phoneRef.current) return
-    try {
-      const dataUrl = await toPng(phoneRef.current, {
-        pixelRatio: 2,
-        cacheBust: true,
-      })
-      const link = document.createElement("a")
-      link.download = "whatsapp-chat.png"
-      link.href = dataUrl
-      link.click()
-    } catch (err) {
-      console.error("Export failed:", err)
-    }
-  }, [])
+  const handleExport = useCallback(
+    async ({ mode, format, scale }: ExportOptions) => {
+      if (!phoneRef.current) return
+      try {
+        const canvas = await toCanvas(phoneRef.current, {
+          pixelRatio: scale,
+          cacheBust: true,
+        })
+
+        if (mode === "copy") {
+          // Clipboard API needs a secure context (HTTPS) and a modern browser.
+          if (!navigator.clipboard || typeof ClipboardItem === "undefined") {
+            throw new Error(
+              "Copying images requires a modern browser and HTTPS.",
+            )
+          }
+          // Clipboard images are PNG-only across browsers.
+          const blob = await new Promise<Blob | null>((resolve) =>
+            canvas.toBlob(resolve, "image/png"),
+          )
+          if (!blob) throw new Error("Could not create image blob")
+          await navigator.clipboard.write([
+            new ClipboardItem({ "image/png": blob }),
+          ])
+          return
+        }
+
+        const mime =
+          format === "png"
+            ? "image/png"
+            : format === "jpeg"
+              ? "image/jpeg"
+              : "image/webp"
+        const link = document.createElement("a")
+        link.download = `whatsapp-chat.${format === "jpeg" ? "jpg" : format}`
+        link.href = canvas.toDataURL(mime, 0.95)
+        // Firefox ignores clicks on anchors that aren't in the document.
+        document.body.appendChild(link)
+        link.click()
+        link.remove()
+      } catch (err) {
+        console.error("Export failed:", err)
+        alert(
+          err instanceof Error && err.message
+            ? err.message
+            : "Export failed. Please try again.",
+        )
+      }
+    },
+    [],
+  )
 
   return (
     <div className="min-h-screen bg-gray-100 py-6 px-4">

src/components/ControlPanel.tsx

@@ -6,6 +6,8 @@ import type {
   MessageStatus,
   ChatConfig,
   PhoneType,
+  ExportFormat,
+  ExportOptions,
 } from "../types"
 
 type ControlPanelProps = {
@@ -16,7 +18,7 @@ type ControlPanelProps = {
   onDeleteMessage: (id: string) => void
   onMoveMessage: (id: string, direction: "up" | "down") => void
   onUpdateConfig: (config: ChatConfig) => void
-  onExport: () => void
+  onExport: (options: ExportOptions) => void
 }
 
 export function ControlPanel({
@@ -39,6 +41,8 @@ export function ControlPanel({
   const [image, setImage] = useState("")
   const [voiceDuration, setVoiceDuration] = useState("")
   const [editingId, setEditingId] = useState<string | null>(null)
+  const [exportFormat, setExportFormat] = useState<ExportFormat>("png")
+  const [exportScale, setExportScale] = useState(2)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
   const isSystem = sender === "system"
@@ -137,13 +141,75 @@ export function ControlPanel({
 
   return (
     <div className="flex flex-col gap-4 w-full max-w-md">
-      {/* Export button */}
-      <button
-        onClick={onExport}
-        className="w-full py-2.5 bg-[#008069] hover:bg-[#006b57] text-white rounded-lg font-medium transition-colors cursor-pointer"
-      >
-        Export as PNG
-      </button>
+      {/* Export */}
+      <div className="bg-white rounded-xl p-4 shadow-sm flex flex-col gap-3">
+        <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide">
+          Export
+        </h3>
+        <div className="flex gap-3">
+          <div className="flex-1">
+            <label
+              htmlFor="export-format"
+              className="block text-sm text-gray-600 mb-1"
+            >
+              Format
+            </label>
+            <select
+              id="export-format"
+              aria-label="Export format"
+              value={exportFormat}
+              onChange={(e) => setExportFormat(e.target.value as ExportFormat)}
+              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#008069]/30 focus:border-[#008069] bg-white"
+            >
+              <option value="png">PNG</option>
+              <option value="jpeg">JPEG</option>
+              <option value="webp">WebP</option>
+            </select>
+          </div>
+          <div className="flex-1">
+            <label
+              htmlFor="export-scale"
+              className="block text-sm text-gray-600 mb-1"
+            >
+              Scale
+            </label>
+            <select
+              id="export-scale"
+              aria-label="Export scale"
+              value={exportScale}
+              onChange={(e) => setExportScale(Number(e.target.value))}
+              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#008069]/30 focus:border-[#008069] bg-white"
+            >
+              <option value={1}>1× (375px)</option>
+              <option value={2}>2× (750px)</option>
+              <option value={3}>3× (1125px)</option>
+            </select>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={() =>
+              onExport({
+                mode: "download",
+                format: exportFormat,
+                scale: exportScale,
+              })
+            }
+            className="flex-1 py-2.5 bg-[#008069] hover:bg-[#006b57] text-white rounded-lg text-sm font-medium transition-colors cursor-pointer"
+          >
+            Download {exportFormat.toUpperCase()}
+          </button>
+          <button
+            onClick={() =>
+              onExport({ mode: "copy", format: "png", scale: exportScale })
+            }
+            className="px-4 py-2.5 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg text-sm font-medium transition-colors cursor-pointer"
+            title="Copy PNG to clipboard"
+          >
+            Copy
+          </button>
+        </div>
+      </div>
 
       {/* Chat Settings */}
       <div className="bg-white rounded-xl p-4 shadow-sm">
@@ -355,6 +421,7 @@ export function ControlPanel({
                   <span className="text-gray-400 font-normal">(optional)</span>
                 </label>
                 <select
+                  aria-label="Reply to message"
                   value={replyTo}
                   onChange={(e) => setReplyTo(e.target.value)}
                   className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#008069]/30 focus:border-[#008069] bg-white"

src/types.ts

@@ -37,3 +37,12 @@ export type ChatConfig = {
   // Renders a typing-dots bubble at the end of the conversation.
   showTyping: boolean
 }
+
+export type ExportFormat = "png" | "jpeg" | "webp"
+
+export type ExportOptions = {
+  mode: "download" | "copy"
+  format: ExportFormat
+  // Device-pixel multiplier for the rendered 375px-wide frame.
+  scale: number
+}