Support for pasting screenshots as file attachments.

web-client/components/EditPost.svelte

@@ -9,7 +9,12 @@
             bind:offsetMinutes
             bind:errors={timestampErrors}
         />
-        <ExpandingTextarea bind:value={text} bind:this={textarea} placeholder="Your post here 😊"/>
+        <ExpandingTextarea
+            bind:value={text}
+            bind:this={textarea}
+            on:paste={onPaste}
+            placeholder="Your post here 😊"
+        />
         <FileAttachments bind:files on:fileAdded={fileAdded}/>
     </div>
 </div>
@@ -21,7 +26,7 @@ import TimestampEditor from "./TimestampEditor.svelte"
 import { Attachments, File, Item, Post } from "../protos/feoblog";
 import moment from "moment";
 import FileAttachments from "./FileAttachments.svelte"
-import type {FileInfo} from "../ts/common"
+import {FileInfo} from "../ts/common"
 
 export let files: FileInfo[] = []
 
@@ -74,6 +79,7 @@ $: validationErrors = function(): string[] {
     return errs
 }()
 
+// A file was added via FileAttachments drag & drop.
 function fileAdded(event: CustomEvent<FileInfo>) {
     let fi = event.detail
 
@@ -84,6 +90,33 @@ function fileAdded(event: CustomEvent<FileInfo>) {
     })
 }
 
+// Manually add a file:
+function addFile(fi: FileInfo) {
+    files = [...files, fi]
+    textarea.addLink({
+        text: fi.name,
+        href: `files/${fi.name}`,
+        asImage: fi.isImage
+    })
+}
+
+async function onPaste(event: CustomEvent<ClipboardEvent>) {
+    let data = event.detail.clipboardData
+    if (!data) return;
+
+    for (let i = 0; i < data.files.length; i++) {
+        let file = data.files[i]
+        if (file.type == "image/png") {
+            let fileInfo = await FileInfo.from(file)
+            // Firefox just gives us a generic "image.png" which could easily be a duplicate:
+            fileInfo.name = `paste_${file.lastModified}.png`
+            addFile(fileInfo)            
+        } else {
+            console.warn("Pasted unknown file type:", file.type)
+        }
+    }
+}
+
 </script>
 
 <style>

web-client/components/ExpandingTextarea.svelte

@@ -10,7 +10,7 @@
 
 
 <script lang="ts">
-import { tick } from "svelte";
+import { createEventDispatcher, tick } from "svelte";
 
 
 export let value: string
@@ -19,6 +19,8 @@ export let placeholder = ""
 
 export let size: "medium"|"small"|"oneLine" = "medium"
 
+let dispatcher = createEventDispatcher()
+
 $: medium = size == "medium"
 $: small = size == "small"
 $: oneLine = size == "oneLine"
@@ -40,6 +42,16 @@ function expandTextarea(textarea: HTMLElement) {
     }
 }
 
+$: {
+    if (textarea) {
+        textarea.addEventListener("paste", onPaste)
+    }
+}
+
+function onPaste(event: ClipboardEvent) {
+    dispatcher("paste", event)
+}
+
 // Treating the text as Markdown, add a link to it, respecting the current position.
 // Keeps link refs at the bottom of the text.
 export async function addLink({text, href, asImage}: LinkOptions) {

web-client/ts/common.ts

@@ -561,16 +561,18 @@ export function bytesToHex(bytes: Uint8Array): string {
 // Wraps a (browser) File with some extra info.
 export class FileInfo {
     readonly file: File
+    name: string
     readonly objectURL: string
     hash: Hash
 
-    private constructor(file: File) {
+    private constructor(file: File, name: string) {
         this.file = file
+        this.name = name
         this.objectURL = URL.createObjectURL(file)
     }
 
     static async from(file: File): Promise<FileInfo> {
-        let fi = new FileInfo(file)
+        let fi = new FileInfo(file, file.name)
 
         // TODO: Not supported in Safari?
         let bytes = await file.arrayBuffer()
@@ -579,7 +581,6 @@ export class FileInfo {
         return fi
     }
 
-    get name() { return this.file.name }
     get type() { return this.file.type }
     get size() { return this.file.size }