feat: copy image and text files to the clipboard from the file page

src/components/FileView.tsx

@@ -34,6 +34,10 @@ import HeaderButton from "./HeaderButton";
 import FileViewRenameForm from "./FileViewRenameForm";
 import { Slug } from "../lib/notes/types/Slug";
 import NavigationRail from "./NavigationRail";
+import {
+  copyImageToClipboard,
+  copyTextToClipboard,
+} from "../lib/clipboard";
 
 interface FileViewProps {
   slug: Slug,
@@ -48,6 +52,7 @@ const FileView = ({
   // status can be READY, BUSY
   const [notes, setNotes] = useState<NoteListItem[] | null>(null);
   const [text, setText] = useState<string>("");
+  const [copied, setCopied] = useState(false);
 
   const type = fileInfo
     ? getMediaTypeFromFilename(fileInfo.filename)
@@ -56,6 +61,8 @@ const FileView = ({
   const confirm = useConfirm();
 
   const canShowTextPreview = type === MediaType.TEXT;
+  const canCopyToClipboard = type === MediaType.IMAGE
+    || type === MediaType.TEXT;
   const isNenoScript = slug?.endsWith(NENO_SCRIPT_FILE_SUFFIX) ?? false;
 
   useEffect(() => {
@@ -113,6 +120,14 @@ const FileView = ({
     };
   }, [fileInfo]);
 
+  useEffect(() => {
+    if (!copied) return;
+    const timeout = setTimeout(() => setCopied(false), 1500);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [copied]);
+
   const canShowPreview = type !== MediaType.OTHER;
 
   return <div className="view">
@@ -163,6 +178,30 @@ const FileView = ({
           >
             {l("files.save-duplicate")}
           </HeaderButton>
+          {
+            canCopyToClipboard
+              ? <HeaderButton
+                icon={copied ? "done" : "content_copy"}
+                disabled={!objectUrl}
+                onClick={async () => {
+                  if (!objectUrl) return;
+
+                  if (type === MediaType.IMAGE) {
+                    await copyImageToClipboard(objectUrl);
+                  } else {
+                    await copyTextToClipboard(text);
+                  }
+                  setCopied(true);
+                }}
+              >
+                {
+                  copied
+                    ? l("files.copy-to-clipboard.copied")
+                    : l("files.copy-to-clipboard")
+                }
+              </HeaderButton>
+              : ""
+          }
           {
             isNenoScript
               ? <HeaderButton

src/intl/de-DE.json

@@ -55,6 +55,8 @@
   "editor.upload-in-progress": "Dateien werden hochgeladen",
   "files.confirm-delete": "Möchtest du diese Datei wirklich löschen? Das kann nicht rückgängig gemacht werden.",
   "files.confirm-delete.confirm": "Datei löschen",
+  "files.copy-to-clipboard": "In die Zwischenablage kopieren",
+  "files.copy-to-clipboard.copied": "Kopiert",
   "files.create-note-with-file": "Notiz mit dieser Datei erstellen",
   "files.create-script": "Skript erstellen",
   "files.create-script.create": "Erstellen",

src/intl/en-US.json

@@ -55,6 +55,8 @@
   "editor.upload-in-progress": "Upload in progress",
   "files.confirm-delete": "Do you really want to delete this file? This action cannot be undone.",
   "files.confirm-delete.confirm": "Delete file",
+  "files.copy-to-clipboard": "Copy to clipboard",
+  "files.copy-to-clipboard.copied": "Copied",
   "files.create-note-with-file": "Create note with file",
   "files.create-script": "Create script",
   "files.create-script.create": "Create",

src/lib/clipboard.ts

@@ -0,0 +1,56 @@
+/*
+  Chromium's async clipboard only accepts image/png for images, so every
+  other format (JPEG, WebP, GIF, SVG) is rasterized through a canvas
+  first. An animated GIF is copied as its first frame.
+*/
+const toPngBlob = async (blob: Blob): Promise<Blob> => {
+  if (blob.type === "image/png") return blob;
+
+  const objectUrl = URL.createObjectURL(blob);
+  try {
+    const image = new Image();
+    image.src = objectUrl;
+    await image.decode();
+
+    const canvas = document.createElement("canvas");
+    canvas.width = image.naturalWidth;
+    canvas.height = image.naturalHeight;
+    const context = canvas.getContext("2d");
+    if (!context) {
+      throw new Error("Could not get a 2D canvas context");
+    }
+    context.drawImage(image, 0, 0);
+
+    return await new Promise<Blob>((resolve, reject) => {
+      canvas.toBlob((pngBlob) => {
+        if (pngBlob) {
+          resolve(pngBlob);
+        } else {
+          reject(new Error("Could not encode image as PNG"));
+        }
+      }, "image/png");
+    });
+  } finally {
+    URL.revokeObjectURL(objectUrl);
+  }
+};
+
+
+/*
+  The PNG is handed to ClipboardItem as a promise, so the write is
+  started while the click's user activation is still fresh.
+*/
+export const copyImageToClipboard = (objectUrl: string): Promise<void> => {
+  const pngBlob = fetch(objectUrl)
+    .then((response) => response.blob())
+    .then(toPngBlob);
+
+  return navigator.clipboard.write([
+    new ClipboardItem({ "image/png": pngBlob }),
+  ]);
+};
+
+
+export const copyTextToClipboard = (text: string): Promise<void> => {
+  return navigator.clipboard.writeText(text);
+};