Focus on mount when using Mathjax shortcuts

ts/editable/Mathjax.svelte

@@ -3,12 +3,14 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { getContext } from "svelte";
+    import { onMount, getContext } from "svelte";
     import { nightModeKey } from "components/context-keys";
     import { convertMathjax } from "./mathjax";
 
     export let mathjax: string;
     export let block: boolean;
+    export let autofocus = false;
+
     /* have fixed fontSize for normal */
     export const fontSize: number = 20;
 
@@ -17,9 +19,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: [converted, title] = convertMathjax(mathjax, nightMode, fontSize);
     $: empty = title === "MathJax";
     $: encoded = encodeURIComponent(converted);
+
+    let image: HTMLImageElement;
+
+    onMount(() => {
+        if (autofocus) {
+            image.click();
+        }
+    });
 </script>
 
 <img
+    bind:this={image}
     src="data:image/svg+xml,{encoded}"
     class:block
     class:empty

ts/editable/mathjax-component.ts

@@ -163,7 +163,11 @@ export const Mathjax: DecoratedElementConstructor = class Mathjax
 
         this.component = new Mathjax_svelte({
             target: this,
-            props: { mathjax, block: this.block },
+            props: {
+                mathjax,
+                block: this.block,
+                autofocus: this.hasAttribute("focusonmount"),
+            },
             context,
         } as any);
     }
@@ -172,6 +176,7 @@ export const Mathjax: DecoratedElementConstructor = class Mathjax
         this.innerHTML = this.dataset.mathjax ?? "";
         delete this.dataset.mathjax;
         this.removeAttribute("style");
+        this.removeAttribute("focusonmount");
 
         this.component?.$destroy();
         this.component = undefined;

ts/editable/mathjax.ts

@@ -8,7 +8,7 @@ const parser = new DOMParser();
 function getCSS(nightMode: boolean, fontSize: number): string {
     const color = nightMode ? "white" : "black";
     /* color is set for Maths, fill for the empty icon */
-    return `svg { color: ${color}; fill: ${color}; font-size: ${fontSize}px; }`;
+    return `svg { color: ${color}; fill: ${color}; font-size: ${fontSize}px; };`;
 }
 
 function getStyle(css: string): HTMLStyleElement {

ts/editor/TemplateButtons.svelte

@@ -102,7 +102,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 >
                     <DropdownItem
                         on:click={() =>
-                            wrapCurrent("<anki-mathjax>", "</anki-mathjax>")}
+                            wrapCurrent(
+                                "<anki-mathjax focusonmount>",
+                                "</anki-mathjax>"
+                            )}
                         on:mount={withButton(createShortcut)}
                     >
                         {tr.editingMathjaxInline()}
@@ -118,7 +121,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     <DropdownItem
                         on:click={() =>
                             wrapCurrent(
-                                '<anki-mathjax block="true">',
+                                '<anki-mathjax block="true" focusonmount>',
                                 "</anki-matjax>"
                             )}
                         on:mount={withButton(createShortcut)}
@@ -135,7 +138,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 >
                     <DropdownItem
                         on:click={() =>
-                            wrapCurrent("<anki-mathjax>\\ce{", "}</anki-mathjax>")}
+                            wrapCurrent(
+                                "<anki-mathjax focusonmount>\\ce{",
+                                "}</anki-mathjax>"
+                            )}
                         on:mount={withButton(createShortcut)}
                     >
                         {tr.editingMathjaxChemistry()}

ts/editor/editing-area.ts

@@ -238,18 +238,19 @@ export class EditingArea extends HTMLDivElement {
 
     async showHandles(event: MouseEvent): Promise<void> {
         if (event.target instanceof HTMLImageElement) {
+            const image = event.target as HTMLImageElement;
             await this.resetHandles();
 
-            if (!event.target.dataset.anki) {
+            if (!image.dataset.anki) {
                 await this.imageHandle.then((imageHandle) =>
                     (imageHandle as any).$set({
-                        activeImage: event.target,
+                        activeImage: image,
                         isRtl: this.isRightToLeft(),
                     })
                 );
-            } else if (event.target.dataset.anki === "mathjax") {
+            } else if (image.dataset.anki === "mathjax") {
                 (this.mathjaxHandle as any).$set({
-                    activeImage: event.target,
+                    activeImage: image,
                     isRtl: this.isRightToLeft(),
                 });
             }