Handle image occlusion drops

ts/routes/editor/NoteEditor.svelte

@@ -32,6 +32,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         openFilePickerForImageOcclusion,
         readImageFromClipboard,
         extractImagePathFromHtml,
+        extractImagePathFromData,
     } from "./rich-text-input/data-transfer";
     import contextProperty from "$lib/sveltelib/context-property";
     import lifecycleHooks from "$lib/sveltelib/lifecycle-hooks";
@@ -601,6 +602,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         await setupMaskEditorFromClipboard();
     }
 
+    async function handlePickerDrop(event: DragEvent) {
+        if($editorState === EditorState.ImageOcclusionPicker) {
+            const path = await extractImagePathFromData(event.dataTransfer!);
+            if (path) {
+                setupMaskEditor(path);
+                event.preventDefault();
+            }
+        }
+    }
+
     async function setupMaskEditor(filename: string) {
         if (mode == "add") {
             setupMaskEditorForNewNote(filename);
@@ -999,6 +1010,8 @@ components and functionality for general note editing.
     on:contextmenu={(event) => {
         onContextMenu(event, api, $focusedInput, contextMenu);
     }}
+    on:dragover|preventDefault
+    on:drop={handlePickerDrop}
 >
     <EditorToolbar {size} {wrap} api={toolbar}>
         <svelte:fragment slot="notetypeButtons">

ts/routes/editor/rich-text-input/data-transfer.ts

@@ -248,7 +248,6 @@ async function processUrls(
         url = lines[0];
         text += await urlToLink(url, allowedSuffixes);
     }
-
     return text;
 }
 
@@ -421,15 +420,18 @@ export async function extractImagePathFromHtml(html: string): Promise<string | n
     }
     return decodeURI(images[0]);
 }
+export async function extractImagePathFromData(data: DataTransfer | ClipboardItem): Promise<string | null> {
+    const html = await processUrls(data, Promise.resolve(false), imageSuffixes);
+    if (html) {
+        return await extractImagePathFromHtml(html);
+    }
+    return null;
+}
 
 export async function readImageFromClipboard(): Promise<string | null> {
     // TODO: check browser support and available formats
     for (const item of await navigator.clipboard.read()) {
-        let path: string | null = null;
+        let path = await extractImagePathFromData(item);
-        const html = await processUrls(item, Promise.resolve(false), imageSuffixes);
-        if (html) {
-            path = await extractImagePathFromHtml(html);
-        }
         if (!path) {
             const image = await getImageData(item);
             if (!image) {