button for selecting image in note editor for occlusion

toggle between note editor and mask editor

Author: krmanik

qt/aqt/editor.py

@@ -1171,6 +1171,30 @@ def collapseTags(self) -> None:
     def expandTags(self) -> None:
         aqt.mw.pm.set_tags_collapsed(self.editorMode, False)
 
+    def OnAttachImageForOcclusion(self) -> None:
+        """Show a file selection screen, then add the selected media."""
+        extension_filter = " ".join(
+            f"*.{extension}" for extension in sorted(itertools.chain(pics))
+        )
+        filter = f"{tr.editing_media()} ({extension_filter})"
+
+        def accept(file: str) -> None:
+            self.resolve_media(file)
+            self.web.eval(f"setMaskEditorImagePath('{file}')")
+
+        file = getFile(
+            parent=self.widget,
+            title=tr.editing_add_media(),
+            cb=cast(Callable[[Any], None], accept),
+            filter=filter,
+            key="media",
+        )
+
+        self.parentWindow.activateWindow()
+
+    def OnToggleMaskEditor(self) -> None:
+        self.web.eval("toggleMaskEditor()")
+
     # Links from HTML
     ######################################################################
 
@@ -1202,6 +1226,8 @@ def _init_links(self) -> None:
             toggleCloseHTMLTags=Editor.toggleCloseHTMLTags,
             expandTags=Editor.expandTags,
             collapseTags=Editor.collapseTags,
+            attachImageForOcclusion=Editor.OnAttachImageForOcclusion,
+            toggleMaskEditor=Editor.OnToggleMaskEditor,
         )
 
 
@@ -1448,9 +1474,10 @@ def reverse_url_quoting(txt: str, editor: Editor) -> str:
 def set_cloze_button(editor: Editor) -> None:
     action = "show" if editor.note.note_type()["type"] == MODEL_CLOZE else "hide"
     editor.web.eval(
-        'require("anki/ui").loaded.then(() =>'
-        f'require("anki/NoteEditor").instances[0].toolbar.toolbar.{action}("cloze")'
-        "); "
+        'require("anki/ui").loaded.then(() => {'
+        f'require("anki/NoteEditor").instances[0].toolbar.toolbar.{action}("cloze");\n'
+        f'require("anki/NoteEditor").instances[0].toolbar.toolbar.{action}("image-cloze");\n'
+        "}); "
     )
 
 

ts/editor/NoteEditor.svelte

@@ -55,6 +55,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import DynamicallySlottable from "../../components/DynamicallySlottable.svelte";
     import Item from "../../components/Item.svelte";
     import BlockButtons from "./BlockButtons.svelte";
+    import ImageOcclusionButton from "./ImageOcclusionButton.svelte";
     import InlineButtons from "./InlineButtons.svelte";
     import NotetypeButtons from "./NotetypeButtons.svelte";
     import OptionsButtons from "./OptionsButtons.svelte";
@@ -120,6 +121,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <Item id="cloze">
                 <RichTextClozeButtons />
             </Item>
+
+            <Item id="image-cloze">
+                <ImageOcclusionButton />
+            </Item>
         </DynamicallySlottable>
     </ButtonToolbar>
 </div>

ts/editor/editor-toolbar/EditorToolbar.svelte

@@ -0,0 +1,68 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import { bridgeCommand } from "@tslib/bridgecommand";
+    import { promiseWithResolver } from "@tslib/promise";
+    import { registerPackage } from "@tslib/runtime-require";
+    import ButtonGroup from "components/ButtonGroup.svelte";
+    import IconButton from "components/IconButton.svelte";
+    import { setFormat } from "editor/old-editor-adapter";
+    import type { RichTextInputAPI } from "editor/rich-text-input";
+    import { editingInputIsRichText } from "editor/rich-text-input";
+
+    import { context } from "../NoteEditor.svelte";
+    import { imagePlusIcon, maskEditorIcon } from "./icons";
+
+    const { focusedInput } = context.get();
+
+    let toogleButtonDisabled = true;
+    let mediaPromise: Promise<string>;
+    let resolve: (media: string) => void;
+
+    function resolveMedia(media: string): void {
+        resolve?.(media);
+    }
+
+    function attachImageForOcclusionOnFocus(): void {
+        if (disabled) {
+            return;
+        }
+
+        [mediaPromise, resolve] = promiseWithResolver<string>();
+        ($focusedInput as RichTextInputAPI).editable.focusHandler.focus.on(
+            async () => {
+                setFormat("inserthtml", await mediaPromise);
+                toogleButtonDisabled = false;
+            },
+            { once: true },
+        );
+        bridgeCommand("attachImageForOcclusion");
+    }
+
+    registerPackage("anki/TemplateButtons", {
+        resolveMedia,
+    });
+
+    $: disabled = !$focusedInput || !editingInputIsRichText($focusedInput);
+</script>
+
+<ButtonGroup>
+    <IconButton
+        {disabled}
+        on:click={() => {
+            attachImageForOcclusionOnFocus();
+        }}
+    >
+        {@html imagePlusIcon}
+    </IconButton>
+    <IconButton
+        disabled={toogleButtonDisabled}
+        on:click={() => {
+            bridgeCommand("toggleMaskEditor");
+        }}
+    >
+        {@html maskEditorIcon}
+    </IconButton>
+</ButtonGroup>

ts/editor/editor-toolbar/ImageOcclusionButton.svelte

@@ -10,7 +10,9 @@ export { default as textColorIcon } from "@mdi/svg/svg/format-color-text.svg";
 export { default as subscriptIcon } from "@mdi/svg/svg/format-subscript.svg";
 export { default as superscriptIcon } from "@mdi/svg/svg/format-superscript.svg";
 export { default as functionIcon } from "@mdi/svg/svg/function-variant.svg";
+export { default as imagePlusIcon } from "@mdi/svg/svg/image-plus.svg";
 export { default as paperclipIcon } from "@mdi/svg/svg/paperclip.svg";
+export { default as maskEditorIcon } from "@mdi/svg/svg/view-dashboard.svg";
 export { default as eraserIcon } from "bootstrap-icons/icons/eraser.svg";
 export { default as justifyFullIcon } from "bootstrap-icons/icons/justify.svg";
 export { default as olIcon } from "bootstrap-icons/icons/list-ol.svg";

ts/editor/editor-toolbar/icons.ts

@@ -7,7 +7,8 @@
         "symbols-overlay/*",
         "plain-text-input/*",
         "rich-text-input/*",
-        "editor-toolbar/*"
+        "editor-toolbar/*",
+        "../image-occlusion/*"
     ],
     "references": [
         { "path": "../components" },