From e4389de288fc9149c3c3d61303a23d9a53010fe4 Mon Sep 17 00:00:00 2001
From: irrlicht <david@bernet.it>
Date: Mon, 29 Jun 2026 00:16:58 +0200
Subject: [PATCH] Image from clipboard also in replies

---
 web/entry.html  |  1 +
 web/js/app.js   | 30 ++++--------------------------
 web/js/entry.js |  6 +++++-
 web/js/feed.js  | 30 ++++++++++++++++++++++++++++++
 4 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/web/entry.html b/web/entry.html
index 3bf939d..2c24446 100644
--- a/web/entry.html
+++ b/web/entry.html
@@ -26,6 +26,7 @@
     <section id="reply-box" hidden>
       <form id="reply-form">
         <textarea name="content" rows="3" maxlength="1000" placeholder="Antworten…"></textarea>
+        <p class="muted" id="reply-paste-msg"></p>
         <input name="file" type="file" accept="image/*">
         <button type="submit">Antworten</button>
       </form>
diff --git a/web/js/app.js b/web/js/app.js
index 3e14109..92af15e 100644
--- a/web/js/app.js
+++ b/web/js/app.js
@@ -97,32 +97,10 @@ document.getElementById("entry-form").addEventListener("submit", async (e) => {
 });
 
 // --- Bild aus der Zwischenablage einfügen ---
-// Strg+V im Textfeld: liegt ein Bild in der Zwischenablage, übernehmen wir es in
-// den File-Input (über DataTransfer, weil sich .files nicht direkt setzen lässt).
-// Liegt kein Bild vor (Text o. Ä.), tun wir nichts und lassen den normalen Paste
-// durchlaufen -> preventDefault nur, wenn wir wirklich ein Bild gegriffen haben.
-document.getElementById("entry-form").addEventListener("paste", (e) => {
-  const item = [...(e.clipboardData?.items ?? [])].find(
-    (it) => it.kind === "file" && it.type.startsWith("image/")
-  );
-  if (!item) return;
-
-  const original = item.getAsFile();
-  if (!original) return;
-  e.preventDefault();
-
-  // Browser benennt Clipboard-Bilder uneinheitlich ("grafik.png" o. Ä.) -> neu
-  // verpacken mit sprechendem Namen. Endung aus dem MIME-Typ, sonst png.
-  const ext = (original.type.split("/")[1] || "png").toLowerCase();
-  const file = new File([original], `zwischenablage.${ext}`, { type: original.type });
-
-  const input = document.querySelector("#entry-form input[name='file']");
-  const dt = new DataTransfer();
-  dt.items.add(file);
-  input.files = dt.files;
-
-  document.getElementById("paste-msg").textContent = "Bild aus Zwischenablage übernommen.";
-});
+setupClipboardPaste(
+  document.getElementById("entry-form"),
+  document.getElementById("paste-msg")
+);
 
 // --- Statuszeile unter dem Titel ---
 // Tage ohne Datenverlust (fester Startpunkt, Kontinuität seit der alten
diff --git a/web/js/entry.js b/web/js/entry.js
index 072115f..ed49e3e 100644
--- a/web/js/entry.js
+++ b/web/js/entry.js
@@ -3,7 +3,10 @@
 // pid aus dem Pfad /e/<pid>.
 const pid = location.pathname.split("/")[2] || "";
 
-document.getElementById("reply-form").addEventListener("submit", async (e) => {
+const replyForm = document.getElementById("reply-form");
+setupClipboardPaste(replyForm, document.getElementById("reply-paste-msg"));
+
+replyForm.addEventListener("submit", async (e) => {
   e.preventDefault();
   const fd = new FormData(e.target);
   fd.append("reply_to", pid);
@@ -11,6 +14,7 @@ document.getElementById("reply-form").addEventListener("submit", async (e) => {
   if (res.ok) {
     e.target.reset();
     document.getElementById("reply-msg").textContent = "";
+    document.getElementById("reply-paste-msg").textContent = "";
     load();
   } else {
     document.getElementById("reply-msg").textContent =
diff --git a/web/js/feed.js b/web/js/feed.js
index c4bd4be..c464b28 100644
--- a/web/js/feed.js
+++ b/web/js/feed.js
@@ -40,6 +40,36 @@ function linkify(s) {
     .replace(/\n/g, "<br>");
 }
 
+// setupClipboardPaste erlaubt Strg+V eines Bildes aus der Zwischenablage direkt
+// im Formular: das Bild wandert in den File-Input (über DataTransfer, weil sich
+// .files nicht direkt setzen lässt). Liegt kein Bild vor (Text o. Ä.), tun wir
+// nichts und lassen den normalen Paste durchlaufen -> preventDefault nur, wenn
+// wir wirklich ein Bild gegriffen haben. msgEl (optional) zeigt den Hinweis.
+function setupClipboardPaste(form, msgEl) {
+  form.addEventListener("paste", (e) => {
+    const item = [...(e.clipboardData?.items ?? [])].find(
+      (it) => it.kind === "file" && it.type.startsWith("image/")
+    );
+    if (!item) return;
+
+    const original = item.getAsFile();
+    if (!original) return;
+    e.preventDefault();
+
+    // Browser benennt Clipboard-Bilder uneinheitlich ("grafik.png" o. Ä.) -> neu
+    // verpacken mit sprechendem Namen. Endung aus dem MIME-Typ, sonst png.
+    const ext = (original.type.split("/")[1] || "png").toLowerCase();
+    const file = new File([original], `zwischenablage.${ext}`, { type: original.type });
+
+    const input = form.querySelector("input[name='file']");
+    const dt = new DataTransfer();
+    dt.items.add(file);
+    input.files = dt.files;
+
+    if (msgEl) msgEl.textContent = "Bild aus Zwischenablage übernommen.";
+  });
+}
+
 function renderEntry(e) {
   const el = document.createElement("article");
   el.className = "card";