From 3acb9cc80f375b1f6c06555652c6dc798d726d48 Mon Sep 17 00:00:00 2001
From: June <self@breadone.net>
Date: Tue, 3 Feb 2026 15:22:42 +1300
Subject: [PATCH] edit mode UI works

---
 src/lib/components/editor/imageTarget.svelte |  2 +-
 src/lib/components/editor/index.svelte       | 34 ++++++++++-----
 src/lib/components/editor/textEditor.svelte  | 46 ++++++++++----------
 src/lib/components/entrySummaryView.svelte   | 11 ++---
 src/lib/date.ts                              |  5 +++
 src/routes/+page.svelte                      |  2 +-
 6 files changed, 58 insertions(+), 42 deletions(-)
 create mode 100644 src/lib/date.ts

diff --git a/src/lib/components/editor/imageTarget.svelte b/src/lib/components/editor/imageTarget.svelte
index 39749ae..8565e8e 100644
--- a/src/lib/components/editor/imageTarget.svelte
+++ b/src/lib/components/editor/imageTarget.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     let { 
-      image = $bindable(''),
+      image = $bindable(),
       edit = $bindable(true)
     } = $props()
     
diff --git a/src/lib/components/editor/index.svelte b/src/lib/components/editor/index.svelte
index 413f3e7..e42a274 100644
--- a/src/lib/components/editor/index.svelte
+++ b/src/lib/components/editor/index.svelte
@@ -1,18 +1,30 @@
 <script lang="ts">
-    import ImageTarget from "./imageTarget.svelte"
-    import TextEditor from "./textEditor.svelte"
-    
+    import ImageTarget from "./imageTarget.svelte";
+    import TextEditor from "./textEditor.svelte";
+    import { formatDate } from "$lib/date.ts";
+
     let {
-      edit = $bindable(true),
-      image = $bindable(''),
-      content = $bindable(''),
-      editorState = $bindable({editor: null})
-    } = $props()
+      entry = $bindable(""), 
+      editorState = $bindable({ editor: null })
+    } = $props();
+
+    let edit = $state(false);
+    let editModeText = $derived(edit ? "done" : "edit")
 
     function getContent() {
-        return editorState.editor.getJSON()
+        return editorState.editor.getJSON();
     }
 </script>
 
-<ImageTarget bind:image bind:edit />
-<TextEditor bind:content bind:editorState bind:edit />
+<div class="flex flex-row mb-2">
+    <p class="text-3xl font-bold">{formatDate(entry.date)}</p>
+    <button
+        class="bg-white/20 px-3 rounded-lg ml-auto"
+        onclick={() => edit = !edit}
+    >
+        {editModeText}
+    </button>
+</div>
+
+<ImageTarget bind:image={entry.image} bind:edit />
+<TextEditor bind:content={entry.content} bind:editorState bind:edit />
diff --git a/src/lib/components/editor/textEditor.svelte b/src/lib/components/editor/textEditor.svelte
index af16124..6a508c2 100644
--- a/src/lib/components/editor/textEditor.svelte
+++ b/src/lib/components/editor/textEditor.svelte
@@ -1,37 +1,40 @@
 <script lang="ts">
     let {
-      content = $bindable(''),
-      edit = $bindable(false),
-      editorState = $bindable({editor: null})
-    } = $props()
-    
-    import { onMount, onDestroy } from 'svelte'
-    import { Editor } from '@tiptap/core'
-    import { StarterKit } from '@tiptap/starter-kit'
+        content = $bindable(),
+        edit = $bindable(false),
+        editorState = $bindable({ editor: null }),
+    } = $props();
+
+    import { onMount, onDestroy } from "svelte";
+    import { Editor } from "@tiptap/core";
+    import { StarterKit } from "@tiptap/starter-kit";
+
+    let element = $state();
 
-    let element = $state()
-    
     onMount(() => {
         editorState.editor = new Editor({
             element: element,
             editable: edit,
-            extensions: [
-                StarterKit,
-            ],
+            extensions: [StarterKit],
             content: content,
             onTransaction: ({ editor }) => {
                 // Update the state signal to force a re-render
-                editorState = { editor }
+                editorState = { editor };
             },
-        })
-    })
+        });
+    });
     onDestroy(() => {
-        editorState.editor?.destroy()
-    })
+        editorState.editor?.destroy();
+    });
+
+    $effect(() => editorState.editor.setOptions({ editable: edit }));
 </script>
 
 <div class="bg-white/20 rounded-2xl p-2 mt-4">
-    <div class="bg-white/10 rounded-xl p-2  text-white/90" bind:this={element}></div>
+    <div
+        class="bg-white/10 rounded-xl p-2 text-white/90"
+        bind:this={element}
+    ></div>
 </div>
 
 <style>
@@ -39,9 +42,8 @@
         background: black;
         color: white;
     }
-    
+
     :global(.tiptap) {
         min-height: 240px;
     }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/components/entrySummaryView.svelte b/src/lib/components/entrySummaryView.svelte
index d0ae9d8..2502eac 100644
--- a/src/lib/components/entrySummaryView.svelte
+++ b/src/lib/components/entrySummaryView.svelte
@@ -1,20 +1,17 @@
 <script lang="ts">
     import { generateHTML } from "@tiptap/html";
     import { StarterKit } from "@tiptap/starter-kit";
+    import { formatDate } from "$lib/date.ts";
 
     const { entry, clickCB } = $props();
-
-    const formatDate = (dateString) => {
-        const date = new Date(dateString);
-        const options = { year: "numeric", month: "long", day: "numeric" };
-        return date.toLocaleDateString(undefined, options);
-    };
+    
+    const formattedDate = formatDate(entry.date);
 </script>
 
 <li class="bg-white/30 rounded-2xl mb-4 p-3" onclick={clickCB}>
     <div class="flex flex-row">
         <div>
-            <p class="text-sm text-white/60">{formatDate(entry.date)}</p>
+            <p class="text-sm text-white/60">{formattedDate}</p>
             {@html generateHTML(entry.content, [StarterKit])}
         </div>
         <img
diff --git a/src/lib/date.ts b/src/lib/date.ts
new file mode 100644
index 0000000..f3ee89a
--- /dev/null
+++ b/src/lib/date.ts
@@ -0,0 +1,5 @@
+export const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    const options = { year: "numeric", month: "long", day: "numeric" };
+    return date.toLocaleDateString(undefined, options);
+};
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 77bdcfb..84a8945 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -29,7 +29,7 @@
         
         <div id="right" class="md:w-1/2">
             {#if selectedEntry}
-                <Editor bind:edit bind:image={selectedEntry.image} bind:content={selectedEntry.content} />
+                <Editor bind:edit bind:entry={selectedEntry} />
             {:else}
                 <div class="flex flex-col items-center justify-center h-full">
                     <p class="text-white/60">Select an entry to view/edit</p>