From 96fd8ab346e7af002a53281a25fbcfa2a87980e9 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Wed, 1 Mar 2023 05:24:01 +0800
Subject: [PATCH] Added layout for note editing

---
 assets/css/tailwind.css | 12 +++++++
 layouts/edit.vue        |  9 ++++++
 pages/notes/[id].vue    | 69 +++++++++++++++++++++--------------------
 3 files changed, 56 insertions(+), 34 deletions(-)
 create mode 100644 layouts/edit.vue

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index b5c61c9..9a1b24e 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body,
+html {
+	@apply bg-primary text-white;
+	-ms-overflow-style: none; /* IE and Edge */
+	scrollbar-width: none; /* Firefox */
+}
+
+body::-webkit-scrollbar,
+html::-webkit-scrollbar {
+	@apply hidden;
+}
diff --git a/layouts/edit.vue b/layouts/edit.vue
new file mode 100644
index 0000000..ae7347a
--- /dev/null
+++ b/layouts/edit.vue
@@ -0,0 +1,9 @@
+<template>
+	<div class="flex w-full flex-col items-center">
+		<Header />
+
+		<div class="flex w-full max-w-3xl flex-col py-8">
+			<slot name="content" />
+		</div>
+	</div>
+</template>
diff --git a/pages/notes/[id].vue b/pages/notes/[id].vue
index 80f48d7..ec1b43a 100644
--- a/pages/notes/[id].vue
+++ b/pages/notes/[id].vue
@@ -1,28 +1,8 @@
 <template>
-	<App class="p-4">
-		<div class="flex w-full max-w-2xl justify-end gap-4">
-			<ElementButton
-				class="hover:bg-blue-500 hover:text-black"
-				@click="submit(note)">
-				<Icon
-					v-if="isSubmitting"
-					name="loading" />
-				<Icon
-					v-if="!isSubmitting"
-					name="fa6-solid:floppy-disk" />
-			</ElementButton>
-			<ElementButton
-				class="hover:bg-red-500 hover:text-black"
-				@click="deleteNote">
-				<Icon
-					v-if="isDeleting"
-					name="loading" />
-				<Icon
-					v-if="!isDeleting"
-					name="fa6-solid:trash" />
-			</ElementButton>
-		</div>
-		<div class="h-full w-full max-w-2xl">
+	<NuxtLayout
+		name="edit"
+		@keydown.ctrl.s.prevent="submit(note)">
+		<template #content>
 			<div class="flex w-full justify-between">
 				<div
 					@click="toggleComp('text')"
@@ -37,16 +17,21 @@
 					Markdown
 				</div>
 			</div>
-			<textarea
-				v-if="comp === 'text'"
-				class="bg-secondary w-full resize-none border-none p-4 outline-none placeholder:text-zinc-700 focus:outline-none"
-				v-model="note.description">
-			</textarea>
-			<CardMarkdownRenderer
-				v-if="comp === 'md'"
-				:content="note.description" />
-		</div>
-	</App>
+			<div class="flex h-full w-full flex-col">
+				<textarea
+					ref="noteTextArea"
+					v-show="comp === 'text'"
+					class="bg-secondary h-fit w-full flex-grow resize-none border-none p-4 outline-none placeholder:text-zinc-700 focus:outline-none"
+					@input="resizeNoteTextArea()"
+					v-model="note.description">
+				</textarea>
+				<CardMarkdownRenderer
+					v-show="comp === 'md'"
+					:content="note.description"
+					:state="'description'" />
+			</div>
+		</template>
+	</NuxtLayout>
 </template>
 
 <script setup lang="ts">
@@ -63,6 +48,13 @@
 	const isSubmitting = ref<Boolean>(false)
 	const isDeleting = ref<Boolean>(false)
 	const comp = ref<Comp>('text')
+	const noteTextArea = ref()
+	const description = useDescription()
+
+	const resizeNoteTextArea = () => {
+		noteTextArea.value.style.height = '18px'
+		noteTextArea.value.style.height = noteTextArea.value.scrollHeight + 'px'
+	}
 
 	const toggleComp = (name: Comp) => {
 		comp.value = name
@@ -82,6 +74,8 @@
 			}
 			note.value.title = response._data.note.title
 			note.value.description = response._data.note.description
+			description.value = note.value.description
+			resizeNoteTextArea()
 		},
 	})
 
@@ -111,4 +105,11 @@
 		refresh()
 		isLoading.value = false
 	})
+
+	watch(
+		() => note.value.description,
+		() => {
+			description.value = note.value.description
+		}
+	)
 </script>