ankitects · dae · Nov 23, 2021 · Nov 18, 2021 · Nov 18, 2021 · Nov 18, 2021
diff --git a/.prettierignore b/.prettierignore
@@ -1,2 +1,6 @@
 licenses.json
 vendor
+node_modules
+bazel-*
+ftl/usage
+.mypy_cache
diff --git a/.prettierrc b/.prettierrc
@@ -2,5 +2,5 @@
     "trailingComma": "all",
     "printWidth": 88,
     "tabWidth": 4,
-    "semi": true,
+    "semi": true
 }
diff --git a/ftl/core/editing.ftl b/ftl/core/editing.ftl
@@ -30,6 +30,7 @@ editing-latex-math-env = LaTeX math env.
 editing-mathjax-block = MathJax block
 editing-mathjax-chemistry = MathJax chemistry
 editing-mathjax-inline = MathJax inline
+editing-mathjax-placeholder = Press { $accept } to accept, { $newline } for new line.
 editing-media = Media
 editing-ordered-list = Ordered list
 editing-outdent = Decrease indent

diff --git a/rslib/src/notetype/styling.css b/rslib/src/notetype/styling.css
@@ -1,7 +1,7 @@
 .card {
-  font-family: arial;
-  font-size: 20px;
-  text-align: center;
-  color: black;
-  background-color: white;
+    font-family: arial;
+    font-size: 20px;
+    text-align: center;
+    color: black;
+    background-color: white;
 }
diff --git a/sass/breakpoints.scss b/sass/breakpoints.scss
@@ -3,14 +3,7 @@
 @use "sass:list";
 @use "sass:map";
 
-$bps: (
-    "xs",
-    "sm",
-    "md",
-    "lg",
-    "xl",
-    "xxl",
-);
+$bps: ("xs", "sm", "md", "lg", "xl", "xxl");
 
 $breakpoints: (
     list.nth($bps, 2): 576px,
@@ -28,10 +21,10 @@ $breakpoints: (
     } @else {
         @content;
     }
-};
+}
 
 @mixin with-breakpoints($prefix, $dict) {
-    @each $property, $values in $dict  {
+    @each $property, $values in $dict {
         @each $bp, $value in $values {
             @if map.get($breakpoints, $bp) {
                 @media (min-width: map.get($breakpoints, $bp)) {
@@ -46,7 +39,7 @@ $breakpoints: (
             }
         }
     }
-};
+}
 
 @function breakpoints-upto($upto) {
     $result: ();
@@ -66,14 +59,14 @@ $breakpoints: (
     $result: ();
 
     @each $bp in breakpoints-upto($upto) {
-        $result: list.append($result, ".#{$prefix}-#{$bp}", $separator: comma)
+        $result: list.append($result, ".#{$prefix}-#{$bp}", $separator: comma);
     }
 
     @return $result;
 }
 
 @mixin with-breakpoints-upto($prefix, $dict) {
-    @each $property, $values in $dict  {
+    @each $property, $values in $dict {
         @each $bp, $value in $values {
             $selector: breakpoint-selector-upto($prefix, $bp);
 
@@ -90,4 +83,4 @@ $breakpoints: (
             }
         }
     }
-};
+} ;
diff --git a/ts/domlib/place-caret.ts b/ts/domlib/place-caret.ts
@@ -0,0 +1,14 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+import { getSelection } from "../lib/cross-browser";
+
+export function placeCaretAfter(node: Node): void {
+    const range = new Range();
+    range.setStartAfter(node);
+    range.collapse(false);
+
+    const selection = getSelection(node)!;
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
diff --git a/ts/editable/ContentEditable.svelte b/ts/editable/ContentEditable.svelte
@@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Writable } from "svelte/store";
     import { updateAllState } from "../components/WithState.svelte";
     import { saveSelection, restoreSelection } from "../domlib/location";
-    import { on } from "../lib/events";
+    import { on, preventDefault } from "../lib/events";
     import { registerShortcut } from "../lib/shortcuts";
 
     export let nodes: Writable<DocumentFragment>;
@@ -18,29 +18,31 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let inputManager: (editable: HTMLElement) => void;
 
-    /* must execute before DOMMirror */
-    function saveLocation(editable: HTMLElement) {
-        let removeOnFocus: () => void;
-        let removeOnPointerdown: () => void;
+    let removeOnFocus: () => void;
+    let removeOnPointerdown: () => void;
 
-        const removeOnBlur = on(editable, "blur", () => {
-            const location = saveSelection(editable);
+    function onBlur(): void {
+        const location = saveSelection(editable);
 
-            removeOnFocus = on(
-                editable,
-                "focus",
-                () => {
-                    if (location) {
-                        restoreSelection(editable, location);
-                    }
-                },
-                { once: true },
-            );
+        removeOnFocus = on(
+            editable,
+            "focus",
+            () => {
+                if (location) {
+                    restoreSelection(editable, location);
+                }
+            },
+            { once: true },
+        );
 
-            removeOnPointerdown = on(editable, "pointerdown", () => removeOnFocus?.(), {
-                once: true,
-            });
+        removeOnPointerdown = on(editable, "pointerdown", () => removeOnFocus?.(), {
+            once: true,
         });
+    }
+
+    /* must execute before DOMMirror */
+    function saveLocation(editable: HTMLElement) {
+        const removeOnBlur = on(editable, "blur", onBlur);
 
         return {
             destroy() {
@@ -54,10 +56,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let editable: HTMLElement;
 
     $: if (editable) {
-        registerShortcut((event) => event.preventDefault(), "Control+B", editable);
-        registerShortcut((event) => event.preventDefault(), "Control+U", editable);
-        registerShortcut((event) => event.preventDefault(), "Control+I", editable);
-        registerShortcut((event) => event.preventDefault(), "Control+R", editable);
+        for (const keyCombination of [
+            "Control+B",
+            "Control+U",
+            "Control+I",
+            "Control+R",
+        ]) {
+            registerShortcut(preventDefault, keyCombination, editable);
+        }
     }
 </script>
 

diff --git a/ts/editable/Mathjax.svelte b/ts/editable/Mathjax.svelte
@@ -2,67 +2,85 @@
 Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
+<script context="module" lang="ts">
+    import type { Writable } from "svelte/store";
+
+    const imageToHeightMap = new Map<string, Writable<number>>();
+    const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+        for (const entry of entries) {
+            const image = entry.target as HTMLImageElement;
+            const store = imageToHeightMap.get(image.dataset.uuid!)!;
+            store.set(entry.contentRect.height);
+
+            setTimeout(() => entry.target.dispatchEvent(new Event("resize")));
+        }
+    });
+</script>
+
 <script lang="ts">
-    import { onMount, onDestroy, getContext, tick } from "svelte";
+    import { onDestroy, getContext } from "svelte";
     import { nightModeKey } from "../components/context-keys";
     import { convertMathjax } from "./mathjax";
+    import { randomUUID } from "../lib/uuid";
+    import { writable } from "svelte/store";
 
     export let mathjax: string;
     export let block: boolean;
-    export let autofocus = false;
 
-    /* have fixed fontSize for normal */
-    export const fontSize: number = 20;
+    export let autofocus = false;
+    export let fontSize = 20;
 
     const nightMode = getContext<boolean>(nightModeKey);
-
     $: [converted, title] = convertMathjax(mathjax, nightMode, fontSize);
     $: empty = title === "MathJax";
+    $: encoded = encodeURIComponent(converted);
 
-    let encoded: string;
-    let imageHeight: number;
+    const uuid = randomUUID();
+    const imageHeight = writable(0);
+    imageToHeightMap.set(uuid, imageHeight);
 
-    $: encoded = encodeURIComponent(converted);
+    $: verticalCenter = -$imageHeight / 2 + fontSize / 4;
 
-    let image: HTMLImageElement;
+    function maybeAutofocus(image: Element): void {
+        if (!autofocus) {
+            return;
+        }
 
-    const observer = new ResizeObserver(async () => {
-        imageHeight = image.getBoundingClientRect().height;
-        await tick();
-        setTimeout(() => image.dispatchEvent(new Event("resize")));
-    });
+        // This should trigger a focusing of the Mathjax Handle
+        const focusEvent = new CustomEvent("focusmathjax", {
+            detail: image,
+            bubbles: true,
+            composed: true,
+        });
 
-    onMount(() => {
-        observer.observe(image);
+        image.dispatchEvent(focusEvent);
+    }
 
-        if (autofocus) {
-            // This should trigger a focusing of the Mathjax Handle
-            const focusEvent = new CustomEvent("focusmathjax", {
-                detail: image,
-                bubbles: true,
-                composed: true,
-            });
+    function observe(image: Element) {
+        observer.observe(image);
 
-            image.dispatchEvent(focusEvent);
-        }
-    });
+        return {
+            destroy() {
+                observer.unobserve(image);
+            },
+        };
+    }
 
-    onDestroy(() => {
-        observer.unobserve(image);
-        observer.disconnect();
-    });
+    onDestroy(() => imageToHeightMap.delete(uuid));
 </script>
 
 <img
-    bind:this={image}
     src="data:image/svg+xml,{encoded}"
     class:block
     class:empty
-    style="--vertical-center: {-imageHeight / 2 + fontSize / 4}px;"
+    style="--vertical-center: {verticalCenter}px;"
     alt="Mathjax"
     {title}
     data-anki="mathjax"
+    data-uuid={uuid}
     on:dragstart|preventDefault
+    use:maybeAutofocus
+    use:observe
 />
 
 <style lang="scss">
@@ -76,7 +94,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     .block {
         display: block;
-        margin: auto;
+        margin: 1rem auto;
     }
 
     .empty {

diff --git a/ts/editable/mathjax-element.ts b/ts/editable/mathjax-element.ts
@@ -9,6 +9,8 @@ import "mathjax/es5/tex-svg-full";
 
 import type { DecoratedElement, DecoratedElementConstructor } from "./decorated";
 import { nodeIsElement } from "../lib/dom";
+import { noop } from "../lib/functional";
+import { placeCaretAfter } from "../domlib/place-caret";
 import { nightModeKey } from "../components/context-keys";
 
 import Mathjax_svelte from "./Mathjax.svelte";
@@ -35,16 +37,6 @@ function moveNodeOutOfElement(
     return referenceNode;
 }
 
-function placeCaretAfter(node: Node): void {
-    const range = new Range();
-    range.setStartAfter(node);
-    range.collapse(false);
-
-    const selection = document.getSelection()!;
-    selection.removeAllRanges();
-    selection.addRange(range);
-}
-
 function moveNodesInsertedOutside(element: Element, allowedChild: Node): () => void {
     const observer = new MutationObserver(() => {
         if (element.childNodes.length === 1) {
@@ -123,9 +115,7 @@ export const Mathjax: DecoratedElementConstructor = class Mathjax
     }
 
     block = false;
-    disconnect: () => void = () => {
-        /* noop */
-    };
+    disconnect = noop;
     component?: Mathjax_svelte;
 
     static get observedAttributes(): string[] {