From 4991fabb1343158898af5d2927c690c05188e6c9 Mon Sep 17 00:00:00 2001
From: Chris Hubbard <chris@thehubbards.org>
Date: Thu, 15 Aug 2024 10:34:20 -0400
Subject: [PATCH] Focus textarea when new note page starts

---
 src/routes/notes/new/+page.svelte | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/routes/notes/new/+page.svelte b/src/routes/notes/new/+page.svelte
index 2ac68ec0..29f3cf2e 100644
--- a/src/routes/notes/new/+page.svelte
+++ b/src/routes/notes/new/+page.svelte
@@ -3,6 +3,7 @@
     import { t, selectedVerses } from '$lib/data/stores';
     import { DeleteIcon, CheckIcon } from '$lib/icons';
     import { addNote } from '$lib/data/notes';
+    import { onMount } from 'svelte';
 
     let text = '';
     const title = 'Annotation_Note_Add';
@@ -10,7 +11,7 @@
     function goBack() {
         history.back();
     }
-    
+
     function onBackNavigate(event) {
         event.preventDefault();
         goBack();
@@ -32,29 +33,42 @@
     async function deleteNote() {
         goBack();
     }
+
+    let textarea;
+    onMount(() => {
+        textarea.focus();
+    });
 </script>
 
 <div class="fullscreen-editor">
     <Navbar on:backNavigation={onBackNavigate}>
-        <label for="sidebar" slot="center" >
-            <div class="btn btn-ghost normal-case text-xl" >{$t[title]}</div>
+        <label for="sidebar" slot="center">
+            <div class="btn btn-ghost normal-case text-xl">{$t[title]}</div>
         </label>
 
         <div slot="right-buttons">
-            <button on:click={deleteNote} class="dy-btn dy-btn-ghost dy-btn-circle"><DeleteIcon color="white" /></button>
-            <button on:click={createNote} class="dy-btn dy-btn-ghost p-1"><CheckIcon color="white" /></button>
+            <button on:click={deleteNote} class="dy-btn dy-btn-ghost dy-btn-circle"
+                ><DeleteIcon color="white" /></button
+            >
+            <button on:click={createNote} class="dy-btn dy-btn-ghost p-1"
+                ><CheckIcon color="white" /></button
+            >
         </div>
     </Navbar>
 
     <div class="flex justify-center mt-7 h-full max-w-screen-md mx-auto">
-        <textarea bind:value={text} class="dy-textarea dy-textarea-bordered w-full h-5/6 shadow-md" />
+        <textarea
+            bind:value={text}
+            bind:this={textarea}
+            class="dy-textarea dy-textarea-bordered w-full h-5/6 shadow-md"
+        />
     </div>
 </div>
 
 <style>
-    .fullscreen-editor{
+    .fullscreen-editor {
         width: 100%;
         height: 100%;
         position: fixed;
     }
-</style>
\ No newline at end of file
+</style>