Compose: Bild aus Zwischenablage per Strg+V einfügen
paste-Listener am Formular übernimmt ein Clipboard-Bild in den File-Input (via DataTransfer), benennt es zu zwischenablage.<ext> und zeigt einen grauen Hinweis über dem Datei-Input. Kein Bild -> normaler Text-Paste. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -46,6 +46,7 @@
|
|||||||
<section id="compose" hidden>
|
<section id="compose" hidden>
|
||||||
<form id="entry-form">
|
<form id="entry-form">
|
||||||
<textarea name="content" rows="4" maxlength="1000" placeholder="Was gibt's Neues?"></textarea>
|
<textarea name="content" rows="4" maxlength="1000" placeholder="Was gibt's Neues?"></textarea>
|
||||||
|
<p class="muted" id="paste-msg"></p>
|
||||||
<input name="file" type="file" accept="image/*">
|
<input name="file" type="file" accept="image/*">
|
||||||
<button type="submit">Posten</button>
|
<button type="submit">Posten</button>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -88,6 +88,7 @@ document.getElementById("entry-form").addEventListener("submit", async (e) => {
|
|||||||
const msg = document.getElementById("entry-msg");
|
const msg = document.getElementById("entry-msg");
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
msg.textContent = "";
|
msg.textContent = "";
|
||||||
|
document.getElementById("paste-msg").textContent = "";
|
||||||
e.target.reset();
|
e.target.reset();
|
||||||
feed.reset();
|
feed.reset();
|
||||||
} else {
|
} else {
|
||||||
@@ -95,6 +96,34 @@ 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.";
|
||||||
|
});
|
||||||
|
|
||||||
// --- Statuszeile unter dem Titel ---
|
// --- Statuszeile unter dem Titel ---
|
||||||
// Tage ohne Datenverlust (fester Startpunkt, Kontinuität seit der alten
|
// Tage ohne Datenverlust (fester Startpunkt, Kontinuität seit der alten
|
||||||
// Version) plus aktuelle Kennzahlen aus /stats.
|
// Version) plus aktuelle Kennzahlen aus /stats.
|
||||||
|
|||||||
Reference in New Issue
Block a user