<script lang="ts">
    import {onDestroy, onMount} from "svelte";
    import EasyMDE from "easymde";
    import "easymde/dist/easymde.min.css"

    export let value: string;
    let editor: HTMLTextAreaElement;
    let mde: EasyMDE;

    onMount(() => {
        mde = new EasyMDE({
            element: editor,
            initialValue: value,
            spellChecker: false,
        })
        mde.codemirror.on("change", () => {
            value = mde.value();
        })
    })
    onDestroy(() => {
        mde.toTextArea();
        mde.cleanup();
    })
</script>

<textarea bind:this={editor} class="editor-preview">

</textarea>

<style>
    :global(.editor-preview) {
      & * {
          all: revert;
          color: black;
      }
    }
</style>