getting better, now using readOnly property instead of a new view each time

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();

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,9 +27,12 @@
 			],
 		},
 		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()
 		
@@ -28,8 +44,9 @@
 		
 		await uploadEntry(entry)
 	})
-
-	export function getHTML() {
-		return quill.getSemanticHTML()
-	}
 </script>
+
+
+<div class="bg-[#009FB75f] rounded-xl">
+	<div id="editor" />
+</div>

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>