noctbot/web/src/routes/rules/create.svelte

<script lang="typescript">
    import { onMount } from "svelte";
    import "easymde/dist/easymde.min.css";

    let vpHeight: number;
    let textArea!: HTMLElement;
    onMount(async () => {
        const EasyMDE = (await import("easymde")).default;
        let mde = new EasyMDE({
            element: textArea,
            maxHeight: `50vh`,
            minHeight: `50vh`,
            previewClass: "md-dark md-editor-preview md-body",
        });
    });
</script>

<style>
    @import "./markdown-dark.css";
    @import "./easymde-style.css";

    .viewport {
        @apply bg-gray-800 rounded-sm px-20 py-5 shadow-lg w-3/4;
        height: 80vh;
    }
</style>

<div class="viewport" bind:clientHeight={vpHeight}>
    <h1 class="text-white text-4xl font-light py-2">Edit rules</h1>
    <p class="text-white md-editor">
        <textarea id="easy-mde" bind:this={textArea}></textarea>
    </p>
    <a class="text-md float-right bg-green-600 hover:bg-green-800 p-2 px-3 text-white hover:text-gray-100 rounded-sm" href="#">Save</a>
  </div>