GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-11-07 13:17:12 -05:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Handle image occlusion drops

Browse source
This commit is contained in:
Abdo 2025-06-28 14:51:53 +03:00
parent 91bba5f429
commit 33fb6bf400
2 changed files with 21 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
ts/routes/editor/NoteEditor.svelte
View file

@ -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">

14
ts/routes/editor/rich-text-input/data-transfer.ts
View file

@ -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;
const html = await processUrls(item, Promise.resolve(false), imageSuffixes);
if (html) {
path = await extractImagePathFromHtml(html);
}
let path = await extractImagePathFromData(item);
if (!path) {
const image = await getImageData(item);
if (!image) {