Clipboard

async function clipboardPermission(
  name: "clipboard-read" | "clipboard-write",
): Promise<PermissionState | "unsupported"> {
  try {
    // PermissionName in lib.dom lacks the clipboard names
    const desc = { name } as unknown as PermissionDescriptor;
    return (await navigator.permissions.query(desc)).state;
  } catch {
    return "unsupported"; // Firefox, Safari
  }
}

declare const btn: HTMLButtonElement;
 
btn.addEventListener("click", async () => {
  await navigator.clipboard.writeText("npm i zod");
  const text = await navigator.clipboard.readText();
});

declare const pngBlob: Blob;
 
await navigator.clipboard.write([
  new ClipboardItem({
    "text/plain": "Chart: Q3 revenue",
    "image/png": pngBlob,
  }),
]);

const [item] = await navigator.clipboard.read();
if (item?.types.includes("image/png")) {
  const blob = await item.getType("image/png");
  const url = URL.createObjectURL(blob);
}

declare const btn: HTMLButtonElement;
 
btn.addEventListener("click", () => {
  const png = fetch("/chart.png").then((r) => r.blob());
  void navigator.clipboard.write([
    new ClipboardItem({ "image/png": png }),
  ]);
});

document.addEventListener("copy", (e) => {
  const sel = document.getSelection()?.toString() ?? "";
  if (!e.clipboardData || !sel) return;
  e.clipboardData.setData(
    "text/plain",
    `${sel}\n\nSource: ${location.href}`,
  );
  e.preventDefault(); // otherwise the default copy wins
});

export function legacyCopy(text: string): boolean {
  const ta = document.createElement("textarea");
  ta.value = text;
  ta.setAttribute("readonly", ""); // no mobile keyboard
  ta.style.position = "fixed";
  ta.style.opacity = "0";
  document.body.append(ta);
  ta.select();
  try {
    return document.execCommand("copy");
  } finally {
    ta.remove();
  }
}

const canUseAsyncClipboard =
  window.isSecureContext && "clipboard" in navigator;
const canWriteImages =
  typeof ClipboardItem !== "undefined" &&
  (!("supports" in ClipboardItem) ||
    ClipboardItem.supports("image/png"));

import { legacyCopy } from "./legacy-copy.ts";
 
async function copyText(text: string): Promise<boolean> {
  if (window.isSecureContext && navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(text);
      return true;
    } catch {
      // denied or unfocused: try the legacy path
    }
  }
  return legacyCopy(text);
}
 
declare const btn: HTMLButtonElement;
btn.addEventListener("click", async () => {
  const ok = await copyText(btn.dataset.copy ?? "");
  btn.textContent = ok ? "Copied!" : "Press Ctrl+C";
  setTimeout(() => (btn.textContent = "Copy"), 1500);
});

function onPastedImage(cb: (file: File) => void) {
  const handler = (e: ClipboardEvent) => {
    const files = e.clipboardData?.files ?? [];
    const img = [...files].find((f) =>
      f.type.startsWith("image/"),
    );
    if (!img) return; // let text paste through
    e.preventDefault();
    cb(img);
  };
  document.addEventListener("paste", handler);
  return () =>
    document.removeEventListener("paste", handler);
}

async function readClipboardImage(): Promise<Blob | null> {
  const items = await navigator.clipboard.read();
  for (const item of items) {
    const type = item.types.find((t) =>
      t.startsWith("image/"),
    );
    if (type) return item.getType(type);
  }
  return null;
}

async function copyRich(html: string, plain: string) {
  if (typeof ClipboardItem === "undefined") {
    return navigator.clipboard.writeText(plain);
  }
  const blob = (s: string, type: string) =>
    new Blob([s], { type });
  await navigator.clipboard.write([
    new ClipboardItem({
      "text/html": blob(html, "text/html"),
      "text/plain": blob(plain, "text/plain"),
    }),
  ]);
}
 
declare const table: HTMLTableElement;
await copyRich(table.outerHTML, table.innerText);

declare const canvas: HTMLCanvasElement;
 
function copyCanvas() {
  const png = new Promise<Blob>((resolve, reject) =>
    canvas.toBlob(
      (b) => (b ? resolve(b) : reject(new Error("empty"))),
      "image/png",
    ),
  );
  return navigator.clipboard.write([
    new ClipboardItem({ "image/png": png }),
  ]);
}