fix(web): read all clipboard flavors so iOS paste keeps the URL

On iOS the copied product link lives in a separate clipboard flavor
(text/uri-list / URL) from the visible product name (text/plain); reading only
'text' dropped the URL (link field stayed empty). Add web/lib/clipboard.ts to
gather every flavor on paste, and use the rich Clipboard read() for the
'Paste from clipboard' button. Applied to the /add screen and dashboard.

Author: mayur-tolexo

web/app/add/add-form.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { toast } from "sonner";
 import { addSharedItem, createCart, uploadImage } from "@/lib/api-client";
 import { parseShare, type ParsedShare } from "@/lib/parse-share";
+import { richClipboardData, readRichClipboard } from "@/lib/clipboard";
 
 type CartOpt = { id: string; title: string; slug: string };
 const LAST_CART_KEY = "shoplit:lastCart";
@@ -41,12 +42,12 @@ export function AddForm({ carts, initial }: { carts: CartOpt[]; initial: ParsedS
     if (p.priceText) setPriceText(p.priceText);
   };
 
-  // Explicit clipboard read — the reliable path on iOS Safari, where a
-  // textarea's onChange often doesn't fire for a long-press "Paste".
+  // Explicit clipboard read — the reliable path on iOS Safari (reads the URL
+  // flavor, not just the product name).
   const pasteFromClipboard = async () => {
     try {
-      const t = await navigator.clipboard.readText();
-      if (t.trim()) applyPasted(t);
+      const raw = await readRichClipboard();
+      if (raw) applyPasted(raw);
       else toast.error("Clipboard is empty — copy the product link first.");
     } catch {
       toast.error("Couldn't read the clipboard — paste into the box instead.");
@@ -148,10 +149,11 @@ export function AddForm({ carts, initial }: { carts: CartOpt[]; initial: ParsedS
           onChange={(e) => applyPasted(e.target.value)}
           onPaste={(e) => {
             // Capture the paste directly — iOS Safari doesn't reliably fire
-            // onChange for a long-press paste. preventDefault so we set the
-            // value ourselves (no double insert).
+            // onChange for a long-press paste, and stores the link in a
+            // separate clipboard flavor from the product name. Read all
+            // flavors so the URL isn't dropped.
             e.preventDefault();
-            applyPasted(e.clipboardData.getData("text"));
+            applyPasted(richClipboardData(e.clipboardData));
           }}
           placeholder={'Paste the link or the whole “Check out this product…” text'}
           className={inputCls}

web/components/paste-url-preview.tsx

@@ -5,6 +5,7 @@ import { Loader2, Link2, Plus } from "lucide-react";
 import { toast } from "sonner";
 import { fetchOG, uploadImage } from "@/lib/api-client";
 import { parseShare } from "@/lib/parse-share";
+import { richClipboardData } from "@/lib/clipboard";
 import type { Product, Retailer } from "@/lib/types";
 import { RetailerIcon, retailerLabel } from "./retailer-icon";
 
@@ -125,9 +126,10 @@ export function PasteUrlPreview({ onResolved }: PasteUrlPreviewProps) {
             onChange={(e) => handlePaste(e.target.value)}
             onPaste={(e) => {
               // iOS Safari doesn't reliably fire onChange for a long-press
-              // paste — capture the clipboard data directly.
+              // paste, and stores the link in a separate flavor from the
+              // product name — read all flavors so the URL isn't dropped.
               e.preventDefault();
-              handlePaste(e.clipboardData.getData("text"));
+              handlePaste(richClipboardData(e.clipboardData));
             }}
             placeholder="Paste here — e.g. “Check out this product… https://www.myntra.com/…”"
             className="w-full resize-y rounded-lg border border-rule bg-cream py-3 pl-10 pr-4 text-base leading-relaxed focus:outline-none focus:ring-2 focus:ring-accent focus:border-accent"

web/lib/clipboard.ts

@@ -0,0 +1,47 @@
+// Clipboard helpers that survive iOS Safari's behaviour: a copied product link
+// is stored in a separate clipboard flavor (text/uri-list or URL) from the
+// visible text (text/plain — often just the product name). Reading only "text"
+// drops the URL, so these gather every flavor and join them for the parser.
+
+const URL_FLAVORS = ["text/uri-list", "URL", "text/plain", "text"];
+
+// From a paste event's DataTransfer.
+export function richClipboardData(dt: DataTransfer): string {
+  const parts: string[] = [];
+  for (const t of URL_FLAVORS) {
+    let v = "";
+    try {
+      v = dt.getData(t);
+    } catch {
+      /* flavor not available */
+    }
+    if (v && !parts.includes(v)) parts.push(v);
+  }
+  return parts.join("\n");
+}
+
+// From the async Clipboard API (for an explicit "Paste" button). Uses the rich
+// read() to get the URL flavor; falls back to readText() (text/plain only).
+export async function readRichClipboard(): Promise<string> {
+  const nav = navigator.clipboard as Clipboard & {
+    read?: () => Promise<ClipboardItem[]>;
+  };
+  if (nav.read) {
+    try {
+      const items = await nav.read();
+      const parts: string[] = [];
+      for (const item of items) {
+        for (const type of ["text/uri-list", "text/plain"]) {
+          if (item.types.includes(type)) {
+            parts.push(await (await item.getType(type)).text());
+          }
+        }
+      }
+      const raw = parts.join("\n").trim();
+      if (raw) return raw;
+    } catch {
+      /* fall through to readText */
+    }
+  }
+  return (await navigator.clipboard.readText()).trim();
+}