Unify anki-mathjax-* to just anki-mathjax

ts/editable/Mathjax.svelte

@@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { convertMathjax } from "./mathjax";
 
     export let mathjax: string;
-    export let type: "inline" | "block" | "chemistry";
+    export let block: boolean;
 
     $: converted = convertMathjax(mathjax);
     $: encoded = encodeURIComponent(converted);
@@ -14,7 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <img
     src="data:image/svg+xml,{encoded}"
-    class:block={type === "block"}
+    class:block
     alt="Mathjax"
     data-anki="mathjax"
     data-mathjax={mathjax}

ts/editable/editable.ts

@@ -25,7 +25,12 @@ function containsInlineContent(element: Element): boolean {
     return true;
 }
 
-const components = ["anki-mathjax-block", "anki-mathjax-inline"];
+interface DecoratedElement extends HTMLElement {
+    decorate(): void;
+    undecorate(): void;
+}
+
+const decoratedTags = ["anki-mathjax"];
 
 export class Editable extends HTMLElement {
     set fieldHTML(content: string) {
@@ -39,9 +44,9 @@ export class Editable extends HTMLElement {
     get fieldHTML(): string {
         const clone = this.cloneNode(true) as Element;
 
-        for (const component of components) {
+        for (const component of decoratedTags) {
             for (const element of clone.getElementsByTagName(component)) {
-                (element as any).undecorate();
+                (element as DecoratedElement).undecorate();
             }
         }
 

ts/editable/index.ts

@@ -4,4 +4,4 @@
 import "./editable-base.css";
 import "./editable-container";
 import "./editable";
-import "./mathjax-components";
+import "./mathjax-component";

ts/editable/mathjax-component.ts

@@ -0,0 +1,72 @@
+import "mathjax/es5/tex-svg-full";
+
+import Mathjax_svelte from "./Mathjax.svelte";
+
+class Mathjax extends HTMLElement {
+    block: boolean = false;
+
+    static get observedAttributes(): string[] {
+        return ["block"];
+    }
+
+    connectedCallback(): void {
+        this.decorate();
+    }
+
+    attributeChangedCallback(_name: string, _old: string, newValue: string): void {
+        this.block = newValue !== "false";
+    }
+
+    decorate(): void {
+        const mathjax = (this.dataset.mathjax = this.innerText);
+        this.innerHTML = "";
+
+        new Mathjax_svelte({
+            target: this,
+            props: { mathjax, block: this.block },
+        });
+    }
+
+    undecorate(): void {
+        this.innerHTML = this.dataset.mathjax ?? "";
+        delete this.dataset.mathjax;
+
+        if (this.block) {
+            this.setAttribute("block", "true");
+        } else {
+            this.removeAttribute("block");
+        }
+    }
+}
+
+customElements.define("anki-mathjax", Mathjax);
+
+// TODO mathjax regex will prob. fail at double quotes
+const mathjaxTagPattern =
+    /<anki-mathjax(?:[^>]*?block="(.*?)")?[^>]*?>(.*?)<\/anki-mathjax>/gsu;
+
+export function toMathjaxDelimiters(html: string): string {
+    return html.replace(
+        mathjaxTagPattern,
+        (_match: string, block: string | undefined, text: string) =>
+            typeof block === "string" && block !== "false"
+                ? `\\[${text}\\]`
+                : `\\(${text}\\)`
+    );
+}
+
+const mathjaxBlockDelimiterPattern = /\\\[(.*?)\\\]/gsu;
+const mathjaxInlineDelimiterPattern = /\\\((.*?)\\\)/gsu;
+
+export function toMathjaxTags(html: string): string {
+    return html
+        .replace(
+            mathjaxBlockDelimiterPattern,
+            (_match: string, text: string) =>
+                `<anki-mathjax block="true">${text}</anki-mathjax>`
+        )
+        .replace(
+            mathjaxInlineDelimiterPattern,
+            (_match: string, text: string) => `<anki-mathjax>${text}</anki-mathjax>`
+        );
+}

ts/editable/mathjax-components.ts

@@ -1,84 +0,0 @@
-import Mathjax_svelte from "./Mathjax.svelte";
-
-class MathjaxInline extends HTMLElement {
-    connectedCallback() {
-        this.decorate();
-    }
-
-    decorate(): void {
-        const mathjax = (this.dataset.mathjax = this.innerText);
-        const type = "inline";
-        this.innerHTML = "";
-
-        new Mathjax_svelte({
-            target: this,
-            props: { mathjax, type },
-        });
-    }
-
-    undecorate(): void {
-        this.innerHTML = this.dataset.mathjax ?? "";
-        delete this.dataset.mathjax;
-    }
-}
-
-customElements.define("anki-mathjax-inline", MathjaxInline);
-
-class MathjaxBlock extends HTMLElement {
-    connectedCallback() {
-        this.decorate();
-    }
-
-    decorate(): void {
-        const mathjax = (this.dataset.mathjax = this.innerText);
-        const type = "block";
-        this.innerHTML = "";
-
-        new Mathjax_svelte({
-            target: this,
-            props: { mathjax, type },
-        });
-    }
-
-    undecorate(): void {
-        this.innerHTML = this.dataset.mathjax ?? "";
-        delete this.dataset.mathjax;
-    }
-}
-
-customElements.define("anki-mathjax-block", MathjaxBlock);
-
-// TODO mathjax regex will prob. fail at double quotes
-const mathjaxInlineTagPattern =
-    /<anki-mathjax-inline[^>]*?data-mathjax="(.*?)"[^>]*?>.*?<\/anki-mathjax-inline>/gsu;
-const mathjaxBlockTagPattern =
-    /<anki-mathjax-block[^>]*?data-mathjax="(.*?)"[^>]*?>.*?<\/anki-mathjax-block>/gsu;
-
-export function toMathjaxDelimiters(html: string): string {
-    return html
-        .replace(
-            mathjaxInlineTagPattern,
-            (_match: string, text: string) => `\\(${text}\\)`
-        )
-        .replace(
-            mathjaxBlockTagPattern,
-            (_match: string, text: string) => `\\[${text}\\]`
-        );
-}
-
-const mathjaxInlineDelimiterPattern = /\\\((.*?)\\\)/gsu;
-const mathjaxBlockDelimiterPattern = /\\\[(.*?)\\\]/gsu;
-
-export function toMathjaxTags(html: string): string {
-    return html
-        .replace(
-            mathjaxInlineDelimiterPattern,
-            (_match: string, text: string) =>
-                `<anki-mathjax-inline>${text}</anki-mathjax-inline>`
-        )
-        .replace(
-            mathjaxBlockDelimiterPattern,
-            (_match: string, text: string) =>
-                `<anki-mathjax-block>${text}</anki-mathjax-block>`
-        );
-}

ts/editable/mathjax.ts

@@ -1,8 +1,6 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import "mathjax/es5/tex-svg-full";
-
 export function convertMathjax(input: string): string {
     const svg = globalThis.MathJax.tex2svg(input).children[0];
 

ts/editor/codable.ts

@@ -21,9 +21,7 @@ const latex = {
 const htmlanki = {
     name: "htmlmixed",
     tags: {
-        "anki-mathjax-inline": [[null, null, latex]],
+        "anki-mathjax": [[null, null, latex]],
-        "anki-mathjax-block": [[null, null, latex]],
-        "anki-mathjax-chemistry": [[null, null, latex]],
     },
 };
 

ts/editor/editing-area.ts

@@ -17,7 +17,7 @@ import { bridgeCommand } from "./lib";
 import { onInput, onKey, onKeyUp } from "./input-handlers";
 import { onFocus, onBlur } from "./focus-handlers";
 import { nightModeKey } from "components/context-keys";
-import { toMathjaxTags, toMathjaxDelimiters } from "editable/mathjax-components";
+import { toMathjaxTags, toMathjaxDelimiters } from "editable/mathjax-component";
 
 function onCutOrCopy(): void {
     bridgeCommand("cutOrCopy");

ts/editor/index.ts

@@ -29,7 +29,7 @@ import type { EditorField } from "./editor-field";
 import { EditingArea } from "./editing-area";
 import "editable/editable-container";
 import "editable/editable";
-import "editable/mathjax-components";
+import "editable/mathjax-component";
 
 import { initToolbar, fieldFocused } from "./toolbar";
 import { initTagEditor } from "./tag-editor";