New Code Editor and fun

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>