<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2023 SteamWar.de-Serverteam
  -
  -   This program is free software: you can redistribute it and/or modify
  -   it under the terms of the GNU Affero General Public License as published by
  -   the Free Software Foundation, either version 3 of the License, or
  -   (at your option) any later version.
  -
  -   This program is distributed in the hope that it will be useful,
  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  -   GNU Affero General Public License for more details.
  -
  -   You should have received a copy of the GNU Affero General Public License
  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  -->

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

  interface Props {
    value: string;
    dirty?: boolean;
  }

  let { value = $bindable(), dirty = $bindable(false) }: Props = $props();

    let editor: HTMLTextAreaElement = $state();
    let mde: EasyMDE;

    onMount(async () => {
        mde = new EasyMDE({
            element: editor,
            initialValue: value,
            spellChecker: false
        });
        mde.codemirror.on("change", () => {
            value = mde.value();
            dirty = true;
        });
    });

    onDestroy(() => {
        mde.toTextArea();
        mde.cleanup();
    });
</script>

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

</textarea>

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

    :global(.CodeMirror) {
        font-family: monospace !important;
    }
</style>