New Code Editor and fun

src/components/admin/pages/Event.svelte

@@ -6,7 +6,7 @@
     import {eventRepo} from "../../repo/repo.js";
     import TeamList from "./event/TeamList.svelte";
 
-    export let params: { id: number } = {};
+    export let params: { id: number };
 
     let id = params.id;
     let event = $eventRepo.getEvent(id.toString());

src/components/admin/pages/Perms.svelte

@@ -4,20 +4,21 @@
     import {players} from "../../stores/stores.ts";
     import {permsRepo} from "../../repo/repo.ts";
     import {capitalize} from "../util.ts";
+    import type {Player} from "../../types/data.ts";
 
     let search = "";
     $: lowerCaseSearch = search.toLowerCase();
     $: filteredPlayers = $players.filter(value => value.name.toLowerCase().includes(lowerCaseSearch));
 
-    let selectedPlayer = null;
+    let selectedPlayer: number | null = null;
     $: player = $players.find(value => value.id === selectedPlayer);
     let playerPerms = loadPlayer(selectedPlayer);
     $: playerPerms = loadPlayer(selectedPlayer);
 
     let prefixEdit = "PREFIX_NONE";
-    let activePerms = [];
+    let activePerms: string[] = [];
 
-    function loadPlayer(id: number) {
+    function loadPlayer(id: number | null) {
         if (!id) {
             return;
         }
@@ -39,20 +40,20 @@
     }
 
     function save() {
-        playerPerms.then(async perms => {
+        playerPerms!.then(async perms => {
             if (perms.prefix.name != prefixEdit) {
-                await $permsRepo.setPrefix(selectedPlayer, prefixEdit);
+                await $permsRepo.setPrefix(selectedPlayer!, prefixEdit);
             }
 
             for (let value of activePerms) {
                 if (!perms.perms.includes(value)) {
-                    await $permsRepo.addPerm(selectedPlayer, value);
+                    await $permsRepo.addPerm(selectedPlayer!, value);
                 }
             }
 
             for (let value of perms.perms) {
                 if (!activePerms.includes(value)) {
-                    await $permsRepo.removePerm(selectedPlayer, value);
+                    await $permsRepo.removePerm(selectedPlayer!, value);
                 }
             }
 

src/components/admin/pages/edit/Editor.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import {Spinner, Toolbar, ToolbarButton, ToolbarGroup, Tooltip} from "flowbite-svelte";
-    import {markdown} from "@codemirror/lang-markdown";
     import {json} from "@codemirror/lang-json";
     import CodeMirror from "svelte-codemirror-editor";
     import {pageRepo} from "../../../repo/repo.ts";
@@ -8,6 +7,7 @@
     import type {Page} from "../../../types/page.ts";
     import {materialDark} from '@ddietr/codemirror-themes/material-dark.js'
     import {createEventDispatcher} from "svelte";
+    import MDEMarkdownEditor from "./MDEMarkdownEditor.svelte";
 
     export let pageId: number;
     export let branch: string;
@@ -56,7 +56,11 @@
                 </ToolbarGroup>
             </Toolbar>
         </div>
-        <CodeMirror bind:value={pageContent} lang={page?.name.endsWith("md") ? markdown() : json()} theme={materialDark} />
+        {#if page?.name.endsWith("md")}
+            <MDEMarkdownEditor bind:value={pageContent} />
+        {:else}
+            <CodeMirror bind:value={pageContent} lang={json()} theme={materialDark} />
+        {/if}
     </div>
 {:catch error}
     <p>{error.message}</p>

src/components/admin/pages/edit/MDEMarkdownEditor.svelte

@@ -0,0 +1,37 @@
+<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>