edit mode UI works

src/lib/components/editor/imageTarget.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     let { 
-      image = $bindable(''),
+      image = $bindable(),
       edit = $bindable(true)
     } = $props()
     

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 />

src/lib/components/editor/textEditor.svelte

@@ -1,37 +1,40 @@
 <script lang="ts">
     let {
-      content = $bindable(''),
-      edit = $bindable(false),
-      editorState = $bindable({editor: null})
-    } = $props()
+        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'
+    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>
@@ -43,5 +46,4 @@
     :global(.tiptap) {
         min-height: 240px;
     }
-
 </style>

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

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);
+};

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>