From 256d1863d27703cfabec3d1e1e11665e42c8c7c4 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 20 Sep 2025 12:16:51 +0300 Subject: [PATCH] chore(react/type_widget): port backend log --- .../widgets/type_widgets/ContentWidget.tsx | 9 +-- .../widgets/type_widgets/code/BackendLog.tsx | 44 +++++++++++++ .../src/widgets/type_widgets/code/Code.tsx | 11 ++-- .../widgets/type_widgets/code/CodeMirror.tsx | 2 +- .../src/widgets/type_widgets/code/code.css | 16 +++++ .../type_widgets_old/content/backend_log.ts | 63 ------------------- 6 files changed, 73 insertions(+), 72 deletions(-) create mode 100644 apps/client/src/widgets/type_widgets/code/BackendLog.tsx delete mode 100644 apps/client/src/widgets/type_widgets_old/content/backend_log.ts diff --git a/apps/client/src/widgets/type_widgets/ContentWidget.tsx b/apps/client/src/widgets/type_widgets/ContentWidget.tsx index 9e5c42bd7..c91df0d0b 100644 --- a/apps/client/src/widgets/type_widgets/ContentWidget.tsx +++ b/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 JSX.Element> = { +const CONTENT_WIDGETS: Record JSX.Element> = { _optionsAppearance: AppearanceSettings, _optionsShortcuts: ShortcutSettings, _optionsTextNotes: TextNoteSettings, @@ -37,7 +38,7 @@ const CONTENT_WIDGETS: Record JSX.Element> = _optionsOther: OtherSettings, _optionsLocalization: InternationalizationOptions, _optionsAdvanced: AdvancedSettings, - _backendLog: () => <> // FIXME + _backendLog: BackendLog } /** @@ -46,13 +47,13 @@ const CONTENT_WIDGETS: Record 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 (
{Content - ? + ? : (t("content_widget.unknown_widget", { id: note.noteId }))}
diff --git a/apps/client/src/widgets/type_widgets/code/BackendLog.tsx b/apps/client/src/widgets/type_widgets/code/BackendLog.tsx new file mode 100644 index 000000000..f045ed562 --- /dev/null +++ b/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(); + const editorRef = useRef(null); + + function refresh() { + server.get("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 ( +
+ +
+ ) +} diff --git a/apps/client/src/widgets/type_widgets/code/Code.tsx b/apps/client/src/widgets/type_widgets/code/Code.tsx index 85c71c6bc..7516ab400 100644 --- a/apps/client/src/widgets/type_widgets/code/Code.tsx +++ b/apps/client/src/widgets/type_widgets/code/Code.tsx @@ -25,7 +25,7 @@ export function ReadOnlyCode({ note, viewScope, ntxId, parentComponent }: TypeWi return (
& Pick) { +export function CodeEditor({ parentComponent, ntxId, containerRef: externalContainerRef, editorRef: externalEditorRef, mime, onInitialized, ...editorProps }: Omit & Pick) { const codeEditorRef = useRef(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 } diff --git a/apps/client/src/widgets/type_widgets/code/CodeMirror.tsx b/apps/client/src/widgets/type_widgets/code/CodeMirror.tsx index b6ba38fbe..04aa7d53f 100644 --- a/apps/client/src/widgets/type_widgets/code/CodeMirror.tsx +++ b/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 { - content: string; + content?: string; mime: string; className?: string; editorRef?: RefObject; diff --git a/apps/client/src/widgets/type_widgets/code/code.css b/apps/client/src/widgets/type_widgets/code/code.css index 5ee6953fd..3a8f25287 100644 --- a/apps/client/src/widgets/type_widgets/code/code.css +++ b/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 */ \ No newline at end of file diff --git a/apps/client/src/widgets/type_widgets_old/content/backend_log.ts b/apps/client/src/widgets/type_widgets_old/content/backend_log.ts deleted file mode 100644 index b6f78f9fa..000000000 --- a/apps/client/src/widgets/type_widgets_old/content/backend_log.ts +++ /dev/null @@ -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*/`
- - - 
`;
-
-export default class BackendLogWidget extends AbstractCodeTypeWidget {
-
-    private $refreshBackendLog!: JQuery;
-
-    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 {
-        return {
-            readOnly: true,
-            preferPerformance: true
-        };
-    }
-
-    async load() {
-        const content = await server.get("backend-log");
-        await this.initialized;
-
-        this._update(
-            {
-                mime: "text/plain"
-            },
-            content
-        );
-        this.show();
-        this.scrollToEnd();
-    }
-
-}