Changes

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

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import {Spinner, Toolbar, ToolbarButton, ToolbarGroup, Tooltip} from "flowbite-svelte";
+    import {markdown} from "@codemirror/lang-markdown";
+    import CodeMirror from "svelte-codemirror-editor";
+    import {pageRepo} from "../../repo/repo.ts";
+    import {base64ToBytes} from "../../util.ts";
+    import type {Page} from "../../types/page.ts";
+    import {materialDark} from '@ddietr/codemirror-themes/material-dark.js'
+    import {EditOutline} from "flowbite-svelte-icons";
+
+    export let pageId: number;
+    export let branch: string;
+    $: pageFuture = $pageRepo.getPage(pageId).then(getPage);
+    let pageContent = "";
+    let page: Page | null = null;
+
+    function getPage(value: Page): Page {
+        page = value;
+        pageContent = new TextDecoder().decode(base64ToBytes(value.content));
+        return value;
+    }
+
+    function savePage() {
+        let message = window.prompt("Commit message:")
+        if (message) {
+            $pageRepo.updatePage(pageId, pageContent, page!.sha, message)
+        } else {
+            alert("Commit message is required")
+        }
+    }
+</script>
+
+{#await pageFuture}
+    <Spinner />
+{:then p}
+    <div>
+        <div>
+            <Toolbar class="!bg-gray-900">
+                <ToolbarGroup slot="end">
+                    <ToolbarButton color="primary" on:click={savePage}>
+                        Save
+                    </ToolbarButton>
+                </ToolbarGroup>
+            </Toolbar>
+        </div>
+        <CodeMirror bind:value={pageContent} lang={markdown()} theme={materialDark} />
+    </div>
+{:catch error}
+    <p>{error.message}</p>
+{/await}