feat: editor keyboard shortcuts (quit/save)

web/src/app.css

@@ -280,7 +280,7 @@
 	}
 
 	.note-textarea {
-		@apply h-full max-h-full w-full resize-none rounded-2xl bg-transparent p-3.5 font-mono outline-none focus:border-4 focus:border-[var(--light-accent)]/60;
+		@apply h-full max-h-full min-h-1/2 w-full resize-none rounded-2xl bg-transparent p-3.5 font-mono outline-none focus:border-4 focus:border-[var(--light-accent)]/60;
 	}
 
 	.note-save-button {

web/src/lib/components/NoteEditor.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from "svelte"
-	import { marked, Renderer } from "marked"
+	import { marked } from "marked"
 	import { TITLE_MAX_LENGTH } from "$lib/const"
 	import type { FullNote } from "$lib/client"
 
@@ -46,6 +46,23 @@
 		}
 	}
 
+	const exitEditMode = () => {
+		isEditing = false
+	}
+
+	const handleKeyDown = (event: KeyboardEvent) => {
+		// Ctrl+Enter or Command+Enter keyboard shortcut for saving the current note
+		if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+			event.preventDefault()
+			handleSave()
+		}
+		// Esc keyboard shortcut for quitting edit mode
+		else if (event.key === "Escape") {
+			event.preventDefault()
+			exitEditMode()
+		}
+	}
+
 	const handleSave = () => {
 		saveNote(editableTitle, editableContent)
 	}
@@ -105,8 +122,6 @@
 	}
 </script>
 
-<!-- TODO: capture Ctrl+Enter keyboard shortcut to save the note contents -->
-
 <div class="flex h-full flex-col">
 	<!-- Note title -->
 	<div class="mb-4">
@@ -115,6 +130,7 @@
 				type="text"
 				bind:value={editableTitle}
 				on:input={handleTitleChange}
+				on:keydown={handleKeyDown}
 				placeholder="Title"
 				class="note-title-input"
 			/>
@@ -132,7 +148,7 @@
 			<h1 class="border-[var(--light-text)]/20 border-b pb-2 text-2xl font-bold">
 				{note.title || "Untitled Note"}
 			</h1>
-			<div class="note-char-count ml-1">
+			<div class="note-char-count">
 				Last updated: {new Date(note.noteUpdatedAt).toLocaleString()}
 				{#if !isEditing}
 					<!-- Minus 1 due to versioning beginning at 2 in the DB -->
@@ -150,6 +166,7 @@
 					bind:this={textarea}
 					bind:value={editableContent}
 					on:input={handleContentChange}
+					on:keydown={handleKeyDown}
 					placeholder="Markdown contents"
 					class="note-textarea"
 				></textarea>

web/src/lib/components/NoteView.svelte

@@ -191,7 +191,7 @@
 		<!-- Note content area -->
 		<main class="main-content">
 			{#if $currentFullNote}
-				<NoteEditor note={$currentFullNote} {isEditing} {saveNote} />
+				<NoteEditor note={$currentFullNote} bind:isEditing {saveNote} />
 			{:else}
 				<div class="flex h-full flex-col items-center justify-center">
 					<p class="mb-4 text-lg">None selected</p>