chore(react/note_title): delete new notes on escape

apps/client/src/widgets/note_title.bak

@@ -8,7 +8,6 @@ export default class NoteTitleWidget extends NoteContextAwareWidget {
 
     private $noteTitle!: JQuery<HTMLElement>;
     private deleteNoteOnEscape: boolean;
-    private spacedUpdate: SpacedUpdate;
 
     constructor() {
         super();
@@ -20,15 +19,7 @@ export default class NoteTitleWidget extends NoteContextAwareWidget {
         this.$widget = $(TPL);
         this.$noteTitle = this.$widget.find(".note-title");
         this.$noteTitle.on("blur", () => {
-            this.spacedUpdate.updateNowIfNecessary();
             
-            this.deleteNoteOnEscape = false;
-        });
-
-        shortcutService.bindElShortcut(this.$noteTitle, "esc", () => {
-            if (this.deleteNoteOnEscape && this.noteContext?.isActive() && this.noteContext?.note) {
-                branchService.deleteNotes(Object.values(this.noteContext.note.parentToBranch));
-            }
         });
 
     }
@@ -45,17 +36,4 @@ export default class NoteTitleWidget extends NoteContextAwareWidget {
         }
     }
 
-    focusOnTitleEvent() {
-        if (this.noteContext && this.noteContext.isActive()) {
-            this.$noteTitle.trigger("focus");
-        }
-    }
-
-    focusAndSelectTitleEvent({ isNewNote } = { isNewNote: false }) {
-        if (this.noteContext && this.noteContext.isActive()) {
-            this.$noteTitle.trigger("focus").trigger("select");
-
-            this.deleteNoteOnEscape = isNewNote;
-        }
-    }
 }

apps/client/src/widgets/note_title.tsx

@@ -1,12 +1,13 @@
 import { useEffect, useRef, useState } from "preact/hooks";
 import { t } from "../services/i18n";
 import FormTextBox from "./react/FormTextBox";
-import { useBeforeUnload, useNoteContext, useNoteProperty, useSpacedUpdate } from "./react/hooks";
+import { useNoteContext, useNoteProperty, useSpacedUpdate, useTriliumEventBeta } from "./react/hooks";
 import protected_session_holder from "../services/protected_session_holder";
 import server from "../services/server";
 import "./note_title.css";
 import { isLaunchBarConfig } from "../services/utils";
 import appContext from "../components/app_context";
+import branches from "../services/branches";
 
 export default function NoteTitleWidget() {
     const { note, noteId, componentId, viewScope, noteContext, parentComponent } = useNoteContext();    
@@ -17,6 +18,7 @@ export default function NoteTitleWidget() {
     const [ isReadOnly, setReadOnly ] = useState<boolean>(false);
     const [ navigationTitle, setNavigationTitle ] = useState<string | null>(null);    
     
+    // Manage read-only
     useEffect(() => {
         const isReadOnly = note === null
             || note === undefined
@@ -26,12 +28,14 @@ export default function NoteTitleWidget() {
         setReadOnly(isReadOnly);
     }, [ note, note?.noteId, note?.isProtected, viewScope?.viewMode ]);
 
+    // Manage the title for read-only notes
     useEffect(() => {
         if (isReadOnly) {
             noteContext?.getNavigationTitle().then(setNavigationTitle);
         }
     }, [isReadOnly]);
 
+    // Save changes to title.
     const spacedUpdate = useSpacedUpdate(async () => {
         if (!note) {
             return;
@@ -40,13 +44,31 @@ export default function NoteTitleWidget() {
         await server.put<void>(`notes/${noteId}/title`, { title: newTitle.current }, componentId);
     });    
 
+    // Prevent user from navigating away if the spaced update is not done.
     useEffect(() => {
         appContext.addBeforeUnloadListener(() => spacedUpdate.isAllSavedAndTriggerUpdate());        
     }, []);
 
+    // Manage focus.
+    const textBoxRef = useRef<HTMLInputElement>(null);
+    const isNewNote = useRef<boolean>();
+    useTriliumEventBeta("focusOnTitle", () => {
+        if (noteContext?.isActive() && textBoxRef.current) {
+            console.log(textBoxRef.current);
+            textBoxRef.current.focus();
+        }
+    });
+    useTriliumEventBeta("focusAndSelectTitle", ({ isNewNote: _isNewNote } ) => {
+        if (noteContext?.isActive() && textBoxRef.current) {
+            textBoxRef.current.focus();
+            isNewNote.current = _isNewNote;
+        }
+    });
+
     return (
         <div className="note-title-widget">
             {note && <FormTextBox
+                inputRef={textBoxRef}
                 autocomplete="off"
                 currentValue={(!isReadOnly ? title : navigationTitle) ?? ""}
                 placeholder={t("note_title.placeholder")}
@@ -64,6 +86,14 @@ export default function NoteTitleWidget() {
                         parentComponent.triggerCommand("focusOnDetail", { ntxId: noteContext?.ntxId });
                         return;
                     }
+
+                    if (e.key === "Escape" && isNewNote.current && noteContext?.isActive() && note) {
+                        branches.deleteNotes(Object.values(note.parentToBranch));
+                    }
+                }}
+                onBlur={() => {
+                    spacedUpdate.updateNowIfNecessary();
+                    isNewNote.current = false;
                 }}
             />}
         </div>

apps/client/src/widgets/react/hooks.tsx

@@ -101,7 +101,7 @@ export function useSpacedUpdate(callback: () => Promise<void>, interval = 1000)
     // Update callback ref when it changes
     useEffect(() => {
         callbackRef.current = callback;
-    });
+    }, [callback]);
 
     // Create SpacedUpdate instance only once
     if (!spacedUpdateRef.current) {