chore(react/type_widget): port backend log

apps/client/src/widgets/type_widgets/ContentWidget.tsx

@@ -18,10 +18,11 @@ import InternationalizationOptions from "./options/i18n";
 import AdvancedSettings from "./options/advanced";
 import "./ContentWidget.css";
 import { t } from "../../services/i18n";
+import BackendLog from "./code/BackendLog";
 
 export type OptionPages = "_optionsAppearance" | "_optionsShortcuts" | "_optionsTextNotes" | "_optionsCodeNotes" | "_optionsImages" | "_optionsSpellcheck" | "_optionsPassword" | "_optionsMFA" | "_optionsEtapi" | "_optionsBackup" | "_optionsSync" | "_optionsAi" | "_optionsOther" | "_optionsLocalization" | "_optionsAdvanced";
 
-const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", () => JSX.Element> = {
+const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", (props: TypeWidgetProps) => JSX.Element> = {
     _optionsAppearance: AppearanceSettings,
     _optionsShortcuts: ShortcutSettings,
     _optionsTextNotes: TextNoteSettings,
@@ -37,7 +38,7 @@ const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", () => JSX.Element> =
     _optionsOther: OtherSettings,
     _optionsLocalization: InternationalizationOptions,
     _optionsAdvanced: AdvancedSettings,
-    _backendLog: () => <></> // FIXME
+    _backendLog: BackendLog
 }
 
 /**
@@ -46,13 +47,13 @@ const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", () => JSX.Element> =
  * @param param0
  * @returns
  */
-export default function ContentWidget({ note }: TypeWidgetProps) {
+export default function ContentWidget({ note, ...restProps }: TypeWidgetProps) {
     const Content = CONTENT_WIDGETS[note.noteId];
     return (
         <div className="note-detail-content-widget note-detail-printable">
             <div className={`note-detail-content-widget-content ${note.noteId.startsWith("_options") ? "options" : ""}`}>
                 {Content
-                    ? <Content />
+                    ? <Content note={note} {...restProps} />
                     : (t("content_widget.unknown_widget", { id: note.noteId }))}
             </div>
         </div>

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

@@ -0,0 +1,44 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import "./code.css";
+import { CodeEditor } from "./Code";
+import CodeMirror from "@triliumnext/codemirror";
+import server from "../../../services/server";
+import { useTriliumEvent } from "../../react/hooks";
+import { TypeWidgetProps } from "../type_widget";
+
+export default function BackendLog({ ntxId, parentComponent }: TypeWidgetProps) {
+    const [ content, setContent ] = useState<string>();
+    const editorRef = useRef<CodeMirror>(null);
+
+    function refresh() {
+        server.get<string>("backend-log").then(content => {
+            setContent(content);
+        });
+    }
+
+    useEffect(refresh, []);
+
+    // Scroll to end
+    useEffect(() => {
+        requestAnimationFrame(() => editorRef.current?.scrollToEnd());
+    }, [ content ]);
+
+    // React to refresh button.
+    useTriliumEvent("refreshData", ({ ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId) return;
+        refresh();
+    });
+
+    return (
+        <div className="backend-log-editor-container">
+            <CodeEditor
+                editorRef={editorRef}
+                ntxId={ntxId} parentComponent={parentComponent}
+                content={content ?? ""}
+                mime="text/plain"
+                readOnly
+                preferPerformance
+            />
+        </div>
+    )
+}

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

@@ -25,7 +25,7 @@ export function ReadOnlyCode({ note, viewScope, ntxId, parentComponent }: TypeWi
     return (
         <div className="note-detail-readonly-code note-detail-printable">
             <CodeEditor
-                ntxId={ntxId} note={note} parentComponent={parentComponent}
+                ntxId={ntxId} parentComponent={parentComponent}
                 className="note-detail-readonly-code-content"
                 content={content}
                 mime={note.mime}
@@ -63,8 +63,9 @@ export function EditableCode({ note, ntxId, debounceUpdate, parentComponent }: T
     return (
         <div className="note-detail-code note-detail-printable">
             <CodeEditor
-                ntxId={ntxId} note={note} parentComponent={parentComponent}
+                ntxId={ntxId} parentComponent={parentComponent}
                 editorRef={editorRef} containerRef={containerRef}
+                mime={note.mime}
                 className="note-detail-code-editor"
                 placeholder={t("editable_code.placeholder")}
                 vimKeybindings={vimKeymapEnabled}
@@ -86,7 +87,7 @@ export function EditableCode({ note, ntxId, debounceUpdate, parentComponent }: T
     )
 }
 
-function CodeEditor({ note, parentComponent, ntxId, containerRef: externalContainerRef, editorRef: externalEditorRef, ...editorProps }: Omit<CodeMirrorProps, "onThemeChange" | "lineWrapping"> & Pick<TypeWidgetProps, "note" | "parentComponent" | "ntxId">) {
+export function CodeEditor({ parentComponent, ntxId, containerRef: externalContainerRef, editorRef: externalEditorRef, mime, onInitialized, ...editorProps }: Omit<CodeMirrorProps, "onThemeChange" | "lineWrapping"> & Pick<TypeWidgetProps, "parentComponent" | "ntxId">) {
     const codeEditorRef = useRef<VanillaCodeMirror>(null);
     const containerRef = useSyncedRef(externalContainerRef);
     const initialized = useRef($.Deferred());
@@ -109,7 +110,7 @@ function CodeEditor({ note, parentComponent, ntxId, containerRef: externalContai
             const theme = getThemeById(codeNoteTheme.substring(DEFAULT_PREFIX.length));
             if (theme) {
                 codeEditorRef.current.setTheme(theme).then(() => {
-                    if (note?.mime === "text/x-sqlite;schema=trilium") return;
+                    if (mime === "text/x-sqlite;schema=trilium") return;
                     const editor = containerRef.current?.querySelector(".cm-editor");
                     if (!editor) return;
                     const style = window.getComputedStyle(editor);
@@ -145,6 +146,7 @@ function CodeEditor({ note, parentComponent, ntxId, containerRef: externalContai
 
     return <CodeMirror
         {...editorProps}
+        mime={mime}
         editorRef={codeEditorRef}
         containerRef={containerRef}
         lineWrapping={codeLineWrapEnabled}
@@ -156,6 +158,7 @@ function CodeEditor({ note, parentComponent, ntxId, containerRef: externalContai
                 externalEditorRef.current = codeEditorRef.current;
             }
             initialized.current.resolve();
+            onInitialized?.();
         }}
     />
 }

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

@@ -4,7 +4,7 @@ import { useSyncedRef } from "../../react/hooks";
 import { RefObject } from "preact";
 
 export interface CodeMirrorProps extends Omit<EditorConfig, "parent"> {
-    content: string;
+    content?: string;
     mime: string;
     className?: string;
     editorRef?: RefObject<VanillaCodeMirror>;

apps/client/src/widgets/type_widgets/code/code.css

@@ -16,3 +16,19 @@
     height: 100%;
 }
 /* #endregion */
+
+/* #region Backend log */
+.backend-log-editor-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.backend-log-editor {
+    flex-grow: 1;
+    width: 100%;
+    border: none;
+    resize: none;
+    margin-bottom: 0;
+}
+/* #endregion */

apps/client/src/widgets/type_widgets_old/content/backend_log.ts

@@ -1,63 +0,0 @@
-import server from "../../../services/server.js";
-import AbstractCodeTypeWidget from "../abstract_code_type_widget.js";
-import type { EventData } from "../../../components/app_context.js";
-import type { EditorConfig } from "@triliumnext/codemirror";
-
-const TPL = /*html*/`<div style="height: 100%; display: flex; flex-direction: column;">
-    <style>
-        .backend-log-editor {
-            flex-grow: 1;
-            width: 100%;
-            border: none;
-            resize: none;
-            margin-bottom: 0;
-        }
-    </style>
-
-    <pre class="backend-log-editor"></pre
-</div>`;
-
-export default class BackendLogWidget extends AbstractCodeTypeWidget {
-
-    private $refreshBackendLog!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$editor = this.$widget.find(".backend-log-editor");
-        super.doRender();
-    }
-
-    async refresh() {
-        await this.load();
-    }
-
-    async refreshDataEvent({ ntxId }: EventData<"refreshData">) {
-        if (ntxId !== this.noteContext?.ntxId) {
-            return;
-        }
-
-        this.refresh();
-    }
-
-    getExtraOpts(): Partial<EditorConfig> {
-        return {
-            readOnly: true,
-            preferPerformance: true
-        };
-    }
-
-    async load() {
-        const content = await server.get<string>("backend-log");
-        await this.initialized;
-
-        this._update(
-            {
-                mime: "text/plain"
-            },
-            content
-        );
-        this.show();
-        this.scrollToEnd();
-    }
-
-}