Autoupdate mathjax image

* propably should use changeTimer here
This commit is contained in:
Henrik Giesel 2021-08-06 17:40:27 +02:00
parent ce2dbaafb9
commit 882a2710a9
2 changed files with 19 additions and 4 deletions

View file

@ -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}

View file

@ -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>