From fddb2680a775caa8dea6afdfb4cfefd9081ad1fe Mon Sep 17 00:00:00 2001
From: Dlurak <84224239+Dlurak@users.noreply.github.com>
Date: Sun, 21 Jul 2024 03:56:21 +0200
Subject: [PATCH] Add the markdown editor to more pages

---
 .../AssignmentGrid/EditAssignmentBox.svelte           |  5 +++--
 src/lib/components/calendar/SidePanel/NewInner.svelte |  4 +++-
 src/lib/components/input/TextArea.svelte              | 11 ++++-------
 src/lib/components/notes/CreationInner.svelte         |  2 +-
 src/routes/calendar/[id]/+page.svelte                 |  2 ++
 5 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/assignment/AssignmentGrid/EditAssignmentBox.svelte b/src/lib/components/assignment/AssignmentGrid/EditAssignmentBox.svelte
index 6f203cc..d08175b 100644
--- a/src/lib/components/assignment/AssignmentGrid/EditAssignmentBox.svelte
+++ b/src/lib/components/assignment/AssignmentGrid/EditAssignmentBox.svelte
@@ -8,6 +8,7 @@
 	import { createEventDispatcher } from 'svelte';
 	import { deepEqual } from '$lib/utils/objects/deepEqual';
 	import TextArea from '$lib/components/input/TextArea.svelte';
+	import Store from '$lib/components/utils/Store.svelte';
 
 	export let assignment: Assignment;
 	export let disabled: boolean;
@@ -42,7 +43,7 @@
 </script>
 
 <TextInput placeholder={i('assignments.create.subject')} bind:value={subject} />
-<TextArea placeholder={i('assignments.create.description')} bind:value={description} />
+<TextArea markdown placeholder={i('assignments.create.description')} bind:value={description} />
 
 <DateSelector bind:date={fromDate} />
 <DateSelector bind:date={dueDate} />
@@ -53,5 +54,5 @@
 		dispatch('submit', { subject, description, fromDate, dueDate });
 	}}
 >
-	Submt
+	<Store store={i('update')} />
 </PrimaryButton>
diff --git a/src/lib/components/calendar/SidePanel/NewInner.svelte b/src/lib/components/calendar/SidePanel/NewInner.svelte
index e319985..eb8e148 100644
--- a/src/lib/components/calendar/SidePanel/NewInner.svelte
+++ b/src/lib/components/calendar/SidePanel/NewInner.svelte
@@ -13,6 +13,7 @@
 	import { createEventDispatcher } from 'svelte';
 	import type { Tag } from '$lib/components/tags/types';
 	import ChooseTag from '$lib/components/tags/ChooseTag.svelte';
+	import TextArea from '$lib/components/input/TextArea.svelte';
 
 	export let className: string | null;
 	export let schoolName: string;
@@ -62,7 +63,8 @@
 
 		<!-- TODO: i18n -->
 		<h4>Summary</h4>
-		<TextInput
+		<TextArea
+			markdown
 			placeholder={i('calendar.title.placeholder')}
 			bind:value={summary}
 			on:input={({ detail }) => {
diff --git a/src/lib/components/input/TextArea.svelte b/src/lib/components/input/TextArea.svelte
index b756e57..9ee01e3 100644
--- a/src/lib/components/input/TextArea.svelte
+++ b/src/lib/components/input/TextArea.svelte
@@ -5,11 +5,8 @@
 		const [newValue, offset1, offset2] = func(value, selectionStart, selectionEnd);
 		ele.focus();
 
-		// When the value is updated in the dom
-		ele.addEventListener(
-			'selectionchange',
-			() => ele && ele.setSelectionRange(selectionStart + offset1, selectionEnd + offset2),
-			{ once: true }
+		requestAnimationFrame(() =>
+			ele.setSelectionRange(selectionStart + offset1, selectionEnd + offset2)
 		);
 		return newValue;
 	}
@@ -68,9 +65,9 @@
 					value = handleMarkdownInsertion(ele, value, insertLink);
 				}}
 			/>
-		{/if}
 
-		<hr class="h-1 w-full border-zinc-300 dark:border-zinc-700" />
+			<hr class="h-1 w-full border-zinc-300 dark:border-zinc-700" />
+		{/if}
 
 		{#if viewMode === 'edit'}
 			<Inner
diff --git a/src/lib/components/notes/CreationInner.svelte b/src/lib/components/notes/CreationInner.svelte
index a39a311..a333bbe 100644
--- a/src/lib/components/notes/CreationInner.svelte
+++ b/src/lib/components/notes/CreationInner.svelte
@@ -25,7 +25,7 @@
 <TextInput placeholder={i('note.title.placeholder')} bind:value={title} />
 
 <h4><Store store={i('note.summary')} /></h4>
-<TextArea placeholder={i('note.summary.placeholder')} bind:value={summary} />
+<TextArea markdown placeholder={i('note.summary.placeholder')} bind:value={summary} />
 
 <h4><Store store={i('note.priority')} /></h4>
 <NotTyppable
diff --git a/src/routes/calendar/[id]/+page.svelte b/src/routes/calendar/[id]/+page.svelte
index ac0e255..9cc450c 100644
--- a/src/routes/calendar/[id]/+page.svelte
+++ b/src/routes/calendar/[id]/+page.svelte
@@ -131,6 +131,8 @@
 			{/each}
 		</div>
 
+		<hr class="border-1 border border-zinc-300 dark:border-zinc-700" />
+
 		{#if event.summary}
 			<Markdown markdown={event.summary} />
 		{/if}