From 7865fa2c2d6cd435323d8e03b378eba616508e8a Mon Sep 17 00:00:00 2001
From: June <self@breadone.net>
Date: Fri, 16 Jan 2026 08:57:57 +1300
Subject: [PATCH] getting better, now using readOnly property instead of a new
 view each time

---
 src/component/calendar.astro |  2 +-
 src/component/editor.astro   | 37 ++++++++++++++++++++++++++----------
 src/pages/index.astro        | 29 +++++-----------------------
 3 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/src/component/calendar.astro b/src/component/calendar.astro
index 64a5413..4bba72e 100644
--- a/src/component/calendar.astro
+++ b/src/component/calendar.astro
@@ -25,7 +25,7 @@ let calendar = new Calendar(calendarEl, {
   },
   datesSet: function(info) {
     // Called when the date range changes (e.g., when navigating months)
-    console.log(info);
+    // console.log(info);
   }
 });
 calendar.render();
diff --git a/src/component/editor.astro b/src/component/editor.astro
index f3db6c8..28661a5 100644
--- a/src/component/editor.astro
+++ b/src/component/editor.astro
@@ -1,11 +1,24 @@
+---
+const {
+	entry,
+	editMode
+} = Astro.props
+---
 
-<div id="editor" />
+<!-- Share the data from the server -->
+<div id="data-entry" hidden>{entry}</div> 
+<div id="data-editMode" hidden>{editMode}</div> 
 
 <script>
 	import Quill from "quill";
 	import { uploadEntry } from '../utils/quill'
 	import type { Entry } from "../utils/quill";
-
+	
+	const entry = JSON.parse(document.getElementById('data-entry')!.innerText)
+	const editMode = document.getElementById('data-editMode')!.innerText === 'true' ? true : false
+	
+	console.log(editMode)
+	
 	const quill = new Quill('#editor', {
 		modules: {
 			toolbar: [
@@ -14,22 +27,26 @@
 			],
 		},
 		placeholder: 'Compose an epic...',
-		theme: 'snow', // or 'bubble'
+		theme: 'bubble',
+		readOnly: !editMode
 	});
-
+	
+	quill.setContents(entry.content)
+	
 	document.querySelector("#upload")?.addEventListener('click', async () => {
 		const contents = quill.getContents()
-
+		
 		let entry: Entry = {
 			content: contents,
 			date: '2026-01-13T10:49:43Z',
 			location: null
 		}
-
+		
 		await uploadEntry(entry)
 	})
+</script>
 
-	export function getHTML() {
-		return quill.getSemanticHTML()
-	}
-</script>
\ No newline at end of file
+
+<div class="bg-[#009FB75f] rounded-xl">
+	<div id="editor" />
+</div>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4ecd3f0..1d65b64 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,31 +3,12 @@ import "../styles/global.css"
 import Layout from "../component/core/layout.astro"
 import Calendar from "../component/calendar.astro"
 import Editor from "../component/editor.astro"
+
+
+const res = await fetch(new URL('/api/entry?id=5', Astro.url))
+const en = await res.json()
 ---
 
-<script>
-    import type { Entry } from "@util/quill";
-
-    const urlParams = new URLSearchParams(window.location.search);
-    const monthList = urlParams.get('month');
-    
-    
-    const res = await fetch('/api/entry?month=' + monthList);
-    const entries = await res.json();
-    
-    const el = document.getElementById('entry-list')!;
-
-    entries.forEach((entry: Entry) => {
-        const entryDiv = document.createElement('div');
-        entryDiv.className = 'entry-item p-2 border-b cursor-pointer hover:bg-gray-100';
-        entryDiv.innerText = `${new Date(entry.date).toLocaleString()}`
-        entryDiv.onclick = () => {
-            window.location.href = `/api/entry?id=${entry.id}`;
-        };
-        el.appendChild(entryDiv);
-    });
-
-</script>
 
 <Layout>
     <div class="flex flex-col md:flex-row md:space-x-4 space-y-4 w-full">
@@ -37,7 +18,7 @@ import Editor from "../component/editor.astro"
         </div>
         
         <div id="right" class="md:w-1/2">
-            <Editor />
+            <Editor entry={JSON.stringify(en)} editMode={false} />
         </div>
     </div>
 </Layout>
\ No newline at end of file