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 updateSelection: () => void;
let edit = false; let edit = false;
function onUpdate(event: CustomEvent) {
activeImage!.parentElement!.dataset.mathjax = event.detail.mathjax;
setTimeout(updateSelection);
}
</script> </script>
<WithDropdown <WithDropdown
@ -40,7 +45,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
> >
<HandleBackground <HandleBackground
on:click={(event) => event.stopPropagation()} on:click={(event) => event.stopPropagation()}
on:dblclick={() => (edit = true)} on:dblclick={() => (edit = !edit)}
/> />
<HandleControl offsetX={1} offsetY={1} /> <HandleControl offsetX={1} offsetY={1} />
@ -50,6 +55,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<DropdownMenu> <DropdownMenu>
<MathjaxHandleEditor <MathjaxHandleEditor
initialValue={activeImage.parentElement?.dataset.mathjax ?? ""} initialValue={activeImage.parentElement?.dataset.mathjax ?? ""}
on:update={onUpdate}
/> />
</DropdownMenu> </DropdownMenu>
{:else} {: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 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--> -->
<script lang="typescript"> <script lang="typescript">
import { onMount, createEventDispatcher } from "svelte";
import * as CodeMirror from "codemirror/lib/codemirror"; import * as CodeMirror from "codemirror/lib/codemirror";
import "codemirror/mode/stex/stex"; import "codemirror/mode/stex/stex";
import "codemirror/addon/fold/foldcode"; 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); codeMirror.setCursor(codeMirror.lineCount(), 0);
} }
function autofocus(textarea: HTMLTextAreaElement): void { const dispatch = createEventDispatcher();
textarea.focus(); let textarea: HTMLTextAreaElement;
onMount(() => textarea.focus());
function onInput() {
dispatch("update", { mathjax: textarea.value });
} }
</script> </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> <div on:click|stopPropagation on:focus|stopPropagation on:keydown|stopPropagation>
<!-- TODO no focusin for now, as EditingArea will defer to Editable/Codable --> <!-- TODO no focusin for now, as EditingArea will defer to Editable/Codable -->
<textarea <textarea
bind:this={textarea}
value={initialValue} value={initialValue}
on:mouseup|preventDefault|stopPropagation on:mouseup|preventDefault|stopPropagation
on:keyup|stopPropagation
on:click|stopPropagation on:click|stopPropagation
on:focusin|stopPropagation on:focusin|stopPropagation
use:autofocus on:input={onInput}
/> />
</div> </div>