Survive to Codable and back

ts/editable/Mathjax.svelte

@@ -6,7 +6,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { convertMathjax } from "./mathjax";
 
     export let mathjax: string;
-    $: converted = convertMathjax(`\\(${mathjax}\\)`);
+    export let type: "inline" | "block" | "chemistry";
+
+    $: delimiters = type === "inline" ? ["\\[", "\\]"] : ["\\(", "\\)"];
+    $: converted = convertMathjax(`${delimiters[0]}${mathjax}${delimiters[1]}`);
 </script>
 
 {@html converted}

ts/editable/editable.ts

@@ -25,6 +25,8 @@ function containsInlineContent(element: Element): boolean {
     return true;
 }
 
+const components = ["anki-mathjax-block", "anki-mathjax-inline"];
+
 export class Editable extends HTMLElement {
     set fieldHTML(content: string) {
         this.innerHTML = content;
@@ -35,9 +37,17 @@ export class Editable extends HTMLElement {
     }
 
     get fieldHTML(): string {
-        return containsInlineContent(this) && this.innerHTML.endsWith("<br>")
+        const clone = this.cloneNode(true) as Element;
-            ? this.innerHTML.slice(0, -4) // trim trailing <br>
+
-            : this.innerHTML;
+        for (const component of components) {
+            for (const element of clone.getElementsByTagName(component)) {
+                (element as any).undecorate();
+            }
+        }
+
+        return containsInlineContent(clone) && this.innerHTML.endsWith("<br>")
+            ? clone.innerHTML.slice(0, -4) // trim trailing <br>
+            : clone.innerHTML;
     }
 
     connectedCallback(): void {

ts/editable/mathjax-components.ts

@@ -1,35 +1,74 @@
-import MathjaxBlock_svelte from "./MathjaxBlock.svelte";
+import Mathjax_svelte from "./Mathjax.svelte";
 
-class MathjaxBlock extends HTMLElement {
+class MathjaxInline extends HTMLElement {
     connectedCallback() {
+        this.decorate();
+    }
+
+    decorate(): void {
         this.contentEditable = "false";
 
         const mathjax = (this.dataset.mathjax = this.innerText);
+        const type = "inline";
         this.innerHTML = "";
 
-        new MathjaxBlock_svelte({
+        new Mathjax_svelte({
             target: this,
-            props: { mathjax },
+            props: { mathjax, type },
         });
     }
+
+    undecorate(): void {
+        this.removeAttribute("contentEditable");
+        this.innerHTML = this.dataset.mathjax ?? "";
+        delete this.dataset.mathjax;
+    }
+}
+
+customElements.define("anki-mathjax-inline", MathjaxInline);
+
+class MathjaxBlock extends HTMLElement {
+    connectedCallback() {
+        this.decorate();
+    }
+
+    decorate(): void {
+        this.contentEditable = "false";
+
+        const mathjax = (this.dataset.mathjax = this.innerText);
+        const type = "block";
+        this.innerHTML = "";
+
+        new Mathjax_svelte({
+            target: this,
+            props: { mathjax, type },
+        });
+    }
+
+    undecorate(): void {
+        this.removeAttribute("contentEditable");
+        this.innerHTML = this.dataset.mathjax ?? "";
+        delete this.dataset.mathjax;
+    }
 }
 
-// customElements.define("anki-mathjax-inline", MathjaxInline);
 customElements.define("anki-mathjax-block", MathjaxBlock);
 
+// TODO mathjax regex will prob. fail at double quotes
 const mathjaxInlineTagPattern =
-    /<anki-mathjax-inline.*?>(.*?)<\/anki-mathjax-inline>/gsu;
+    /<anki-mathjax-inline[^>]*?data-mathjax="(.*?)"[^>]*?>.*?<\/anki-mathjax-inline>/gsu;
-const mathjaxBlockTagPattern = /<anki-mathjax-block.*?>(.*?)<\/anki-mathjax-block>/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}\)`
+            (_match: string, text: string) => `\\(${text}\\)`
         )
         .replace(
             mathjaxBlockTagPattern,
-            (_match: string, text: string) => `\[${text}\]`
+            (_match: string, text: string) => `\\[${text}\\]`
         );
 }