anki/ts/editor/MathjaxHandleEditor.svelte

<!--
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 { ChangeTimer } from "./change-timer";
    import { CodeMirror, latex, baseOptions } from "./codeMirror";

    export let initialValue: string;

    const codeMirrorOptions = {
        mode: latex,
        ...baseOptions,
    };

    let codeMirror: CodeMirror.EditorFromTextArea;
    const changeTimer = new ChangeTimer();

    function onInput() {
        changeTimer.schedule(
            () => dispatch("update", { mathjax: codeMirror.getValue() }),
            400
        );
    }

    function openCodemirror(textarea: HTMLTextAreaElement): void {
        codeMirror = CodeMirror.fromTextArea(textarea, codeMirrorOptions);
        codeMirror.on("change", onInput);
    }

    const dispatch = createEventDispatcher();
    let textarea: HTMLTextAreaElement;

    onMount(() => {
        codeMirror.focus();
        codeMirror.setCursor(codeMirror.lineCount(), 0);
    });
</script>

<!-- <textarea bind:value use:openCodemirror /> -->
<div
    on:click|stopPropagation
    on:focus|stopPropagation
    on:keydown|stopPropagation
    on:focusin|stopPropagation
    on:keyup|stopPropagation
    on:mouseup|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
        on:input={onInput}
        use:openCodemirror
    />
</div>