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>