feat(react): basic implementation of note title

apps/client/src/widgets/basic_widget.ts

@@ -5,6 +5,7 @@ import { t } from "../services/i18n.js";
 import toastService from "../services/toast.js";
 import { renderReactWidget } from "./react/react_utils.jsx";
 import { EventNames, EventData } from "../components/app_context.js";
+import { Handler } from "leaflet";
 
 export class TypedBasicWidget<T extends TypedComponent<any>> extends TypedComponent<T> {
     protected attrs: Record<string, string>;
@@ -277,10 +278,12 @@ export function wrapReactWidgets<T extends TypedComponent<any>>(components: (T |
     return wrappedResult;
 }
 
+type EventHandler = ((data: any) => void);
+
 export class ReactWrappedWidget extends BasicWidget {
 
     private el: VNode;
-    listeners: Record<string, (data: any) => void> = {};
+    private listeners: Record<string, EventHandler[]> = {};
 
     constructor(el: VNode) {
         super();
@@ -292,8 +295,38 @@ export class ReactWrappedWidget extends BasicWidget {
     }
 
     handleEvent<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown[] | unknown> | null | undefined {
-        const listener = this.listeners[name];
+        if (!this.listeners[name]) {
-        listener?.(data);
+            return;
+        }
+
+        for (const listener of this.listeners[name]) {
+            listener(data);
+        }
+    }
+
+    registerHandler<T extends EventNames>(name: T, handler: EventHandler) {
+        if (!this.listeners[name]) {
+            this.listeners[name] = [];
+        }
+
+        if (this.listeners[name].includes(handler)) {
+            return;
+        }
+
+        this.listeners[name].push(handler);
+    }
+
+    removeHandler<T extends EventNames>(name: T, handler: EventHandler) {
+        if (!this.listeners[name]?.includes(handler)) {
+            return;
+        }
+
+        this.listeners[name] = this.listeners[name]
+            .filter(listener => listener !== handler);
+
+        if (!this.listeners[name].length) {
+            delete this.listeners[name];
+        }
     }
 
 }

apps/client/src/widgets/note_title.bak

@@ -37,8 +37,6 @@ const TPL = /*html*/`
         text-shadow: 4px 4px 4px var(--muted-text-color);
     }
     </style>
-
-    <input autocomplete="off" value="" placeholder="${t("note_title.placeholder")}" class="note-title" tabindex="100">
 </div>`;
 
 export default class NoteTitleWidget extends NoteContextAwareWidget {
@@ -51,13 +49,7 @@ export default class NoteTitleWidget extends NoteContextAwareWidget {
         super();
 
         this.spacedUpdate = new SpacedUpdate(async () => {
-            const title = this.$noteTitle.val();
             
-            if (this.note) {
-                protectedSessionHolder.touchProtectedSessionIfNecessary(this.note);
-            }
-
-            await server.put(`notes/${this.noteId}/title`, { title }, this.componentId);
         });
 
         this.deleteNoteOnEscape = false;

apps/client/src/widgets/note_title.tsx

@@ -1,11 +1,36 @@
-import { useNoteContext } from "./react/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { t } from "../services/i18n";
+import FormTextBox from "./react/FormTextBox";
+import { useNoteContext, useSpacedUpdate } from "./react/hooks";
+import protected_session_holder from "../services/protected_session_holder";
+import server from "../services/server";
 
 export default function NoteTitleWidget() {
-    const { ntxId, noteId, note } = useNoteContext();
+    const { note, noteId, componentId } = useNoteContext();
+    const [ title, setTitle ] = useState(note?.title);
+    useEffect(() => setTitle(note?.title), [ note?.title ]);
+
+    const spacedUpdate = useSpacedUpdate(async () => {
+        if (!note) {
+            return;
+        }
+        protected_session_holder.touchProtectedSessionIfNecessary(note);
+        await server.put<void>(`notes/${noteId}/title`, { title: title }, componentId);
+    });    
 
     return (
         <>
-            <p>{ ntxId }{ noteId }</p>
+            <FormTextBox
+                autocomplete="off"
+                currentValue={title}
+                placeholder={t("note_title.placeholder")}
+                className="note-title"
+                tabIndex={100}
+                onChange={(newValue) => {
+                    setTitle(newValue);
+                    spacedUpdate.scheduleUpdate();
+                }}
+            />
         </>
     );
 }

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

@@ -86,7 +86,9 @@ export default function useTriliumEvent<T extends EventNames>(eventName: T, hand
 
 export function useTriliumEventBeta<T extends EventNames>(eventName: T, handler: TriliumEventHandler<T>) {
     const parentComponent = useContext(ParentComponent) as ReactWrappedWidget;
-    parentComponent.listeners[eventName] = handler;
+    parentComponent.registerHandler(eventName, handler);
+
+    return (() => parentComponent.removeHandler(eventName, handler));
 }
 
 export function useSpacedUpdate(callback: () => Promise<void>, interval = 1000) {
@@ -248,12 +250,15 @@ export function useNoteContext() {
         setNotePath(notePath);
     });
     
+    const parentComponent = useContext(ParentComponent) as ReactWrappedWidget;
+
     return {
         note: noteContext?.note,
         noteId: noteContext?.note?.noteId,
         notePath: noteContext?.notePath,
         hoistedNoteId: noteContext?.hoistedNoteId,
-        ntxId: noteContext?.ntxId
+        ntxId: noteContext?.ntxId,
+        componentId: parentComponent.componentId
     };
 
 }