Nicely portray mathjax with right color + alignment in Editor

ts/editable/BUILD.bazel

@@ -50,6 +50,7 @@ ts_library(
         "//ts:image_module_support",
         "@npm//svelte",
         "@npm//mathjax-full",
+        "@npm//mathjax",
     ] + svelte_names,
 )
 

ts/editable/Mathjax.svelte

@@ -8,39 +8,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let mathjax: string;
     export let type: "inline" | "block" | "chemistry";
 
-    let edit = false;
+    $: converted = convertMathjax(mathjax);
-    $: delimiters = type === "inline" ? ["\\(", "\\)"] : ["\\[", "\\]"];
+    $: encoded = encodeURIComponent(converted);
-    $: converted = convertMathjax(`${delimiters[0]}${mathjax}${delimiters[1]}`);
-
-    function autofocus(element: HTMLElement): void {
-        element.focus();
-    }
 </script>
 
-{#if edit}
+<img
-    {#if type === "block"}
+    src="data:image/svg+xml,{encoded}"
-        <div
+    class:block={type === "block"}
-            contenteditable="true"
+    alt="Mathjax"
-            bind:innerHTML={mathjax}
+    data-anki="mathjax"
-            on:blur={() => (edit = false)}
+    data-mathjax={mathjax}
-            use:autofocus
+/>
-        />
-    {:else}
-        <span
-            contenteditable="true"
-            bind:innerHTML={mathjax}
-            on:blur={() => (edit = false)}
-            use:autofocus
-        />
-    {/if}
-{:else}
-    <div class="d-contents" on:click={() => (edit = true)}>
-        {@html converted}
-    </div>
-{/if}
 
 <style lang="scss">
-    .d-contents {
+    img {
-        display: contents;
+        vertical-align: middle;
+
+        &.block {
+            display: block;
+            text-align: center;
+        }
     }
 </style>

ts/editable/mathjax-components.ts

@@ -6,8 +6,6 @@ class MathjaxInline extends HTMLElement {
     }
 
     decorate(): void {
-        this.contentEditable = "false";
-
         const mathjax = (this.dataset.mathjax = this.innerText);
         const type = "inline";
         this.innerHTML = "";
@@ -19,7 +17,6 @@ class MathjaxInline extends HTMLElement {
     }
 
     undecorate(): void {
-        this.removeAttribute("contentEditable");
         this.innerHTML = this.dataset.mathjax ?? "";
         delete this.dataset.mathjax;
     }
@@ -33,8 +30,6 @@ class MathjaxBlock extends HTMLElement {
     }
 
     decorate(): void {
-        this.contentEditable = "false";
-
         const mathjax = (this.dataset.mathjax = this.innerText);
         const type = "block";
         this.innerHTML = "";
@@ -46,7 +41,6 @@ class MathjaxBlock extends HTMLElement {
     }
 
     undecorate(): void {
-        this.removeAttribute("contentEditable");
         this.innerHTML = this.dataset.mathjax ?? "";
         delete this.dataset.mathjax;
     }

ts/editable/mathjax.ts

@@ -1,38 +1,16 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { mathjax } from "mathjax-full/js/mathjax";
+import "mathjax/es5/tex-svg-full";
-import { TeX } from "mathjax-full/js/input/tex";
-import { CHTML } from "mathjax-full/js/output/chtml";
-import { HTMLAdaptor } from "mathjax-full/js/adaptors/HTMLAdaptor";
-import { RegisterHTMLHandler } from "mathjax-full/js/handlers/html";
-
-import { AllPackages } from "mathjax-full/js/input/tex/AllPackages.js";
-import "mathjax-full/js/util/entities/all";
-
-// @ts-expect-error Minor interface mismatch: document.documentElement.nodeValue might be null
-const adaptor = new HTMLAdaptor(window);
-RegisterHTMLHandler(adaptor);
-
-const texOptions = {
-    displayMath: [["\\[", "\\]"]],
-    processRefs: false,
-    processEnvironments: false,
-    processEscapes: false,
-    packages: AllPackages,
-};
 
 export function convertMathjax(input: string): string {
-    const tex = new TeX(texOptions);
+    const svg = globalThis.MathJax.tex2svg(input).children[0];
-    const chtml = new CHTML({
-        fontURL: "/_anki/js/vendor/mathjax/output/chtml/fonts/woff-v2",
-    });
 
-    const html = mathjax.document(input, { InputJax: tex, OutputJax: chtml });
+    const style = document.createElement("style") as HTMLStyleElement;
-    html.render();
 
-    return (
+    const styles = `svg { color: white; font-size: 24px; }`;
-        adaptor.innerHTML(adaptor.head(html.document)) +
+    style.appendChild(document.createTextNode(styles));
-        adaptor.innerHTML(adaptor.body(html.document))
+
-    );
+    svg.insertBefore(style, svg.children[0]);
+    return svg.outerHTML;
 }