From b0378690c0f4290259deddab0b5e6160e12d4e9c Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 4 Aug 2021 05:38:45 +0200
Subject: [PATCH] Enable edit mode for mathjax blocks

---
 ts/editable/Mathjax.svelte | 33 ++++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/ts/editable/Mathjax.svelte b/ts/editable/Mathjax.svelte
index 532fb5f85..4ae075a3b 100644
--- a/ts/editable/Mathjax.svelte
+++ b/ts/editable/Mathjax.svelte
@@ -8,16 +8,39 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let mathjax: string;
     export let type: "inline" | "block" | "chemistry";
 
-    $: delimiters = type === "inline" ? ["\\[", "\\]"] : ["\\(", "\\)"];
+    let edit = false;
+    $: delimiters = type === "inline" ? ["\\(", "\\)"] : ["\\[", "\\]"];
     $: converted = convertMathjax(`${delimiters[0]}${mathjax}${delimiters[1]}`);
+
+    function autofocus(element: HTMLElement): void {
+        element.focus();
+    }
 </script>
 
-<div on:click={console.log}>
-    {@html converted}
-</div>
+{#if edit}
+    {#if type === "block"}
+        <div
+            contenteditable="true"
+            bind:innerHTML={mathjax}
+            on:blur={() => (edit = false)}
+            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">
-    div {
+    .d-contents {
         display: contents;
     }
 </style>