From 882a2710a9c3e4a91c214a3801b4ec3f64584912 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 6 Aug 2021 17:40:27 +0200
Subject: [PATCH] Autoupdate mathjax image

* propably should use changeTimer here
---
 ts/editor/MathjaxHandle.svelte       |  8 +++++++-
 ts/editor/MathjaxHandleEditor.svelte | 15 ++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/ts/editor/MathjaxHandle.svelte b/ts/editor/MathjaxHandle.svelte
index e6dd3d626..b4a7c2227 100644
--- a/ts/editor/MathjaxHandle.svelte
+++ b/ts/editor/MathjaxHandle.svelte
@@ -20,6 +20,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     let updateSelection: () => void;
     let edit = false;
+
+    function onUpdate(event: CustomEvent) {
+        activeImage!.parentElement!.dataset.mathjax = event.detail.mathjax;
+        setTimeout(updateSelection);
+    }
 </script>
 
 <WithDropdown
@@ -40,7 +45,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             <HandleBackground
                 on:click={(event) => event.stopPropagation()}
-                on:dblclick={() => (edit = true)}
+                on:dblclick={() => (edit = !edit)}
             />
 
             <HandleControl offsetX={1} offsetY={1} />
@@ -50,6 +55,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <DropdownMenu>
                 <MathjaxHandleEditor
                     initialValue={activeImage.parentElement?.dataset.mathjax ?? ""}
+                    on:update={onUpdate}
                 />
             </DropdownMenu>
         {:else}
diff --git a/ts/editor/MathjaxHandleEditor.svelte b/ts/editor/MathjaxHandleEditor.svelte
index ccbaae500..d204d2dde 100644
--- a/ts/editor/MathjaxHandleEditor.svelte
+++ b/ts/editor/MathjaxHandleEditor.svelte
@@ -3,6 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
+    import { onMount, createEventDispatcher } from "svelte";
+
     import * as CodeMirror from "codemirror/lib/codemirror";
     import "codemirror/mode/stex/stex";
     import "codemirror/addon/fold/foldcode";
@@ -39,8 +41,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         codeMirror.setCursor(codeMirror.lineCount(), 0);
     }
 
-    function autofocus(textarea: HTMLTextAreaElement): void {
-        textarea.focus();
+    const dispatch = createEventDispatcher();
+    let textarea: HTMLTextAreaElement;
+
+    onMount(() => textarea.focus());
+
+    function onInput() {
+        dispatch("update", { mathjax: textarea.value });
     }
 </script>
 
@@ -48,10 +55,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <div on:click|stopPropagation on:focus|stopPropagation on:keydown|stopPropagation>
     <!-- TODO no focusin for now, as EditingArea will defer to Editable/Codable -->
     <textarea
+        bind:this={textarea}
         value={initialValue}
         on:mouseup|preventDefault|stopPropagation
+        on:keyup|stopPropagation
         on:click|stopPropagation
         on:focusin|stopPropagation
-        use:autofocus
+        on:input={onInput}
     />
 </div>