feat(ux): on note creation interraction , set focus to newly created note

first, set focus to file name with all text selected
then, on enter focus the text editor

Author: Keshav-writes-code

apps/app/src/components/sidebar/file_manager/toolbar.svelte

@@ -40,8 +40,21 @@
       )
         return;
       is_processing = true;
-      await add_new_note(focused_subtree, focused_directory, root_path);
+      opened_filenode = await add_new_note(
+        focused_subtree,
+        focused_directory,
+        root_path
+      );
       is_processing = false;
+
+      const input: HTMLInputElement | null = document.getElementById(
+        'note_file_name_input'
+      ) as HTMLInputElement | null;
+      if (!input) return;
+      setTimeout(() => {
+        input.focus();
+        input.select();
+      }, 50);
     }}
     ><div class="i-tabler:edit size-5"></div>
   </button>

apps/app/src/components/text_editor/index.svelte

@@ -5,6 +5,8 @@
   import Prosemark from './prosemark.svelte';
   import { toast } from 'svelte-sonner';
   import { current_platform_type } from '@/lib/file_tree';
+  import { type EditorView } from '@codemirror/view';
+
   let {
     filenode = $bindable(),
     root_path,
@@ -15,6 +17,7 @@
   let text_content: string | undefined = $state();
   let current_file_name: string | undefined = $state();
   let is_file_named_changed: boolean = $state(false);
+  let editor_view: EditorView | undefined = $state();
 
   $effect(() => {
     if (!filenode) return;
@@ -39,6 +42,7 @@
   <div class="max-w-170 w-full font-sans">
     <input
       type="text"
+      id="note_file_name_input"
       oninput={(e) => {
         current_file_name = current_file_name?.replace(
           /[^A-Za-z0-9 _.\-()]/g,
@@ -60,12 +64,19 @@
           if (e instanceof Error) toast.error(e.message);
         }
       }}
+      onkeydown={async (e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          if (editor_view) editor_view.focus();
+        }
+      }}
       bind:value={current_file_name}
       class="w-full outline-none b-0 focus:ring-0 mb-16 mt-10 font-semibold text-5xl"
     />
 
     <Prosemark
       {text_content}
+      bind:editor_view
       write_to_file={(content) => {
         if (!filenode) return;
         writeTextFile(filenode?.path, content);

apps/app/src/components/text_editor/prosemark.svelte

@@ -17,12 +17,13 @@
   let {
     text_content,
     write_to_file,
+    editor_view = $bindable(),
   }: {
     text_content: string | undefined;
+    editor_view: EditorView | undefined;
     write_to_file: (markdown_content_state: string) => void;
   } = $props();
   let element: HTMLDivElement | undefined = $state();
-  let editor: EditorView | undefined = $state();
   let is_contents_changed = $state(false);
   $effect(() => {
     let newEditor: EditorView | undefined;
@@ -51,7 +52,7 @@
         ],
       });
     }
-    editor = newEditor;
+    editor_view = newEditor;
 
     return () => {
       newEditor?.destroy();
@@ -62,8 +63,8 @@
 <div
   bind:this={element}
   onfocusout={() => {
-    if (!editor || !is_contents_changed) return;
-    write_to_file(editor.state.doc.toString());
+    if (!editor_view || !is_contents_changed) return;
+    write_to_file(editor_view.state.doc.toString());
     is_contents_changed = false;
   }}
   class="pb-50vh"

apps/app/src/lib/file_tree/operations.ts

@@ -64,6 +64,9 @@ export async function add_new_note(
     is_directory: false,
     children: [],
   });
+  const node = subtree.find((n) => n.path === new_file_path);
+  if (!node) throw new Error('Failed to find the newly created note node.');
+  return node;
 }
 export async function add_new_folder(
   subtree: FileNode[],