chore(react/type_widget): bring back focusing after tab switch

apps/client/src/widgets/NoteDetail.tsx

@@ -1,8 +1,8 @@
 import { NoteType } from "@triliumnext/commons";
-import { useNoteContext } from "./react/hooks"
+import { useNoteContext, useTriliumEvent } from "./react/hooks"
 import FNote from "../entities/fnote";
 import protected_session_holder from "../services/protected_session_holder";
-import { useContext, useEffect, useMemo, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import NoteContext from "../components/note_context";
 import Empty from "./type_widgets/Empty";
 import { VNode } from "preact";
@@ -28,6 +28,7 @@ type ExtendedNoteType = Exclude<NoteType, "launcher" | "text" | "code"> | "empty
  *
  * Apart from that:
  * - It applies a full-height style depending on the content type (e.g. canvas notes).
+ * - Focuses the content when switching tabs.
  */
 export default function NoteDetail() {
     const { note, type, noteContext, parentComponent } = useNoteInfo();
@@ -43,6 +44,14 @@ export default function NoteDetail() {
     };
     useEffect(() => setCorrespondingWidget(getCorrespondingWidget(type, props)), [ note, viewScope, type ]);
 
+    // Automatically focus the editor.
+    useTriliumEvent("activeNoteChanged", () => {
+        // Restore focus to the editor when switching tabs, but only if the note tree is not already focused.
+        if (!document.activeElement?.classList.contains("fancytree-title")) {
+            parentComponent.triggerCommand("focusOnDetail", { ntxId });
+        }
+    });
+
     return (
         <div class={`note-detail ${isFullHeight ? "full-height" : ""}`}>
             {correspondingWidget || <p>Note detail goes here! {note?.title} of {type}</p>}

apps/client/src/widgets/note_detail.ts.bak

@@ -138,17 +138,6 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
         return this.typeWidgets[this.type];
     }
 
-    async focusOnDetailEvent({ ntxId }: EventData<"focusOnDetail">) {
-        if (this.noteContext?.ntxId !== ntxId) {
-            return;
-        }
-
-        await this.refresh();
-        const widget = this.getTypeWidget();
-        await widget.initialized;
-        widget.focus();
-    }
-
     async beforeNoteSwitchEvent({ noteContext }: EventData<"beforeNoteSwitch">) {
         if (this.isNoteContext(noteContext.ntxId)) {
             await this.spacedUpdate.updateNowIfNecessary();

apps/client/src/widgets/type_widgets/code/Code.tsx

@@ -138,6 +138,12 @@ function CodeEditor({ note, parentComponent, ntxId, containerRef: externalContai
         editor.focus();
     });
 
+    useTriliumEvent("focusOnDetail", ({ ntxId: eventNtxId }) => {
+        console.log("Focus on ", ntxId, eventNtxId)
+        if (eventNtxId !== ntxId) return;
+        codeEditorRef.current?.focus();
+    });
+
     return <CodeMirror
         {...editorProps}
         editorRef={codeEditorRef}

apps/client/src/widgets/type_widgets_old/type_widget.ts

@@ -69,17 +69,6 @@ export default abstract class TypeWidget extends NoteContextAwareWidget {
         }
     }
 
-    activeNoteChangedEvent() {
-        if (!this.isActiveNoteContext()) {
-            return;
-        }
-
-        // Restore focus to the editor when switching tabs, but only if the note tree is not already focused.
-        if (!document.activeElement?.classList.contains("fancytree-title")) {
-            this.focus();
-        }
-    }
-
     /**
      * {@inheritdoc}
      *