chore(sql_console): fix lint warnings

apps/client/package.json

@@ -46,7 +46,7 @@
     "globals": "17.0.0",
     "i18next": "25.7.4",
     "i18next-http-backend": "3.0.2",
-    "jquery": "4.0.0",
+    "jquery": "3.7.1",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
     "katex": "0.16.27",

apps/client/src/layouts/desktop_layout.tsx

@@ -46,8 +46,6 @@ import ScrollPadding from "../widgets/scroll_padding.js";
 import SearchResult from "../widgets/search_result.jsx";
 import SharedInfo from "../widgets/shared_info.jsx";
 import RightPanelContainer from "../widgets/sidebar/RightPanelContainer.jsx";
-import SqlResults from "../widgets/sql_result.js";
-import SqlTableSchemas from "../widgets/sql_table_schemas.js";
 import TabRowWidget from "../widgets/tab_row.js";
 import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx";
 import TitleBarButtons from "../widgets/title_bar_buttons.jsx";
@@ -163,11 +161,9 @@ export default class DesktopLayout {
                                                                     .child(<SharedInfo />)
                                                                 )
                                                                 .optChild(!isNewLayout, <PromotedAttributes />)
-                                                                .child(<SqlTableSchemas />)
                                                                 .child(<NoteDetail />)
                                                                 .child(<NoteList media="screen" />)
                                                                 .child(<SearchResult />)
-                                                                .child(<SqlResults />)
                                                                 .child(<ScrollPadding />)
                                                         )
                                                         .child(<ApiLog />)

apps/client/src/widgets/NoteDetail.tsx

@@ -265,9 +265,13 @@ function useNoteInfo() {
     const [ note, setNote ] = useState<FNote | null | undefined>();
     const [ type, setType ] = useState<ExtendedNoteType>();
     const [ mime, setMime ] = useState<string>();
+    const refreshIdRef = useRef(0);
 
     function refresh() {
+        const refreshId = ++refreshIdRef.current;
+
         getExtendedWidgetType(actualNote, noteContext).then(type => {
+            if (refreshId !== refreshIdRef.current) return;
             setNote(actualNote);
             setType(type);
             setMime(actualNote?.mime);
@@ -318,6 +322,8 @@ export async function getExtendedWidgetType(note: FNote | null | undefined, note
         resultingType = "noteMap";
     } else if (type === "text" && (await noteContext?.isReadOnly())) {
         resultingType = "readOnlyText";
+    } else if (note.isTriliumSqlite()) {
+        resultingType = "sqlConsole";
     } else if ((type === "code" || type === "mermaid") && (await noteContext?.isReadOnly())) {
         resultingType = "readOnlyCode";
     } else if (type === "text") {
@@ -342,9 +348,8 @@ export function checkFullHeight(noteContext: NoteContext | undefined, type: Exte
 
     // https://github.com/zadam/trilium/issues/2522
     const isBackendNote = noteContext?.noteId === "_backendLog";
-    const isSqlNote = noteContext.note?.mime === "text/x-sqlite;schema=trilium";
     const isFullHeightNoteType = type && TYPE_MAPPINGS[type].isFullHeight;
-    return (!noteContext?.hasNoteList() && isFullHeightNoteType && !isSqlNote)
+    return (!noteContext?.hasNoteList() && isFullHeightNoteType)
         || noteContext?.viewScope?.viewMode === "attachments"
         || isBackendNote;
 }

apps/client/src/widgets/collections/table/tabulator.tsx

@@ -1,18 +1,20 @@
-import { useContext, useEffect, useLayoutEffect, useRef } from "preact/hooks";
-import { EventCallBackMethods, Module, Options, Tabulator as VanillaTabulator } from "tabulator-tables";
 import "tabulator-tables/dist/css/tabulator.css";
 import "../../../../src/stylesheets/table.css";
-import { ParentComponent, renderReactWidget } from "../../react/react_utils";
-import { JSX } from "preact/jsx-runtime";
+
 import { isValidElement, RefObject } from "preact";
+import { useContext, useEffect, useLayoutEffect, useRef } from "preact/hooks";
+import { JSX } from "preact/jsx-runtime";
+import { EventCallBackMethods, Module, Options, Tabulator as VanillaTabulator } from "tabulator-tables";
+
+import { ParentComponent, renderReactWidget } from "../../react/react_utils";
 
 interface TableProps<T> extends Omit<Options, "data" | "footerElement" | "index"> {
-    tabulatorRef: RefObject<VanillaTabulator>;
+    tabulatorRef?: RefObject<VanillaTabulator>;
     className?: string;
     data?: T[];
     modules?: (new (table: VanillaTabulator) => Module)[];
     events?: Partial<EventCallBackMethods>;
-    index: keyof T;
+    index?: keyof T;
     footerElement?: string | HTMLElement | JSX.Element;
     onReady?: () => void;
 }
@@ -43,7 +45,9 @@ export default function Tabulator<T>({ className, columns, data, modules, tabula
 
         tabulator.on("tableBuilt", () => {
             tabulatorRef.current = tabulator;
-            externalTabulatorRef.current = tabulator;
+            if (externalTabulatorRef) {
+                externalTabulatorRef.current = tabulator;
+            }
             onReady?.();
         });
 
@@ -62,12 +66,12 @@ export default function Tabulator<T>({ className, columns, data, modules, tabula
             for (const [ eventName, handler ] of Object.entries(events)) {
                 tabulator.off(eventName as keyof EventCallBackMethods, handler);
             }
-        }
+        };
     }, Object.values(events ?? {}));
 
     // Change in data.
-    useEffect(() => { tabulatorRef.current?.setData(data) }, [ data ]);
-    useEffect(() => { columns && tabulatorRef.current?.setColumns(columns)}, [ data]);
+    useEffect(() => { tabulatorRef.current?.setData(data); }, [ data ]);
+    useEffect(() => { columns && tabulatorRef.current?.setColumns(columns); }, [ data ]);
 
     return (
         <div ref={containerRef} className={className} />

apps/client/src/widgets/layout/InlineTitle.tsx

@@ -7,6 +7,7 @@ import { ComponentChild } from "preact";
 import { useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
 import { Trans } from "react-i18next";
 
+import FNote from "../../entities/fnote";
 import { ViewScope } from "../../services/link";
 import { formatDateTime } from "../../utils/formatters";
 import NoteIcon from "../note_icon";
@@ -22,12 +23,12 @@ const supportedNoteTypes = new Set<NoteType>([
 export default function InlineTitle() {
     const { note, parentComponent, viewScope } = useNoteContext();
     const type = useNoteProperty(note, "type");
-    const [ shown, setShown ] = useState(shouldShow(note?.noteId, type, viewScope));
+    const [ shown, setShown ] = useState(shouldShow(note, type, viewScope));
     const containerRef = useRef<HTMLDivElement>(null);
     const [ titleHidden, setTitleHidden ] = useState(false);
 
     useLayoutEffect(() => {
-        setShown(shouldShow(note?.noteId, type, viewScope));
+        setShown(shouldShow(note, type, viewScope));
     }, [ note, type, viewScope ]);
 
     useLayoutEffect(() => {
@@ -69,9 +70,10 @@ export default function InlineTitle() {
     );
 }
 
-function shouldShow(noteId: string | undefined, type: NoteType | undefined, viewScope: ViewScope | undefined) {
+function shouldShow(note: FNote | null | undefined, type: NoteType | undefined, viewScope: ViewScope | undefined) {
     if (viewScope?.viewMode !== "default") return false;
-    if (noteId?.startsWith("_options")) return true;
+    if (note?.noteId?.startsWith("_options")) return true;
+    if (note?.isTriliumSqlite()) return false;
     return type && supportedNoteTypes.has(type);
 }
 

apps/client/src/widgets/layout/NoteTypeSwitcher.tsx

@@ -39,7 +39,7 @@ export default function NoteTypeSwitcher() {
     const currentNoteTypeData = useMemo(() => NOTE_TYPES.find(t => t.type === currentNoteType), [ currentNoteType ]);
     const { builtinTemplates, collectionTemplates } = useBuiltinTemplates();
 
-    return (currentNoteType && supportedNoteTypes.has(currentNoteType) &&
+    return (currentNoteType && supportedNoteTypes.has(currentNoteType) && !note?.isTriliumSqlite() &&
         <div
             className="note-type-switcher"
             onWheel={onWheelHorizontalScroll}

apps/client/src/widgets/note_types.tsx

@@ -12,7 +12,7 @@ import { TypeWidgetProps } from "./type_widgets/type_widget";
  * A `NoteType` altered by the note detail widget, taking into consideration whether the note is editable or not and adding special note types such as an empty one,
  * for protected session or attachment information.
  */
-export type ExtendedNoteType = Exclude<NoteType, "launcher" | "text" | "code"> | "empty" | "readOnlyCode" | "readOnlyText" | "editableText" | "editableCode" | "attachmentDetail" | "attachmentList" |  "protectedSession" | "aiChat";
+export type ExtendedNoteType = Exclude<NoteType, "launcher" | "text" | "code"> | "empty" | "readOnlyCode" | "readOnlyText" | "editableText" | "editableCode" | "attachmentDetail" | "attachmentList" |  "protectedSession" | "aiChat" | "sqlConsole";
 
 export type TypeWidget = ((props: TypeWidgetProps) => VNode | JSX.Element | undefined);
 type NoteTypeView = () => (Promise<{ default: TypeWidget } | TypeWidget> | TypeWidget);
@@ -140,5 +140,10 @@ export const TYPE_MAPPINGS: Record<ExtendedNoteType, NoteTypeMapping> = {
         view: () => import("./type_widgets/AiChat"),
         className: "ai-chat-widget-container",
         isFullHeight: true
+    },
+    sqlConsole: {
+        view: () => import("./type_widgets/SqlConsole"),
+        className: "sql-console-widget-container",
+        isFullHeight: true
     }
 };

apps/client/src/widgets/scroll_padding.tsx

@@ -1,11 +1,14 @@
 import { useEffect, useRef, useState } from "preact/hooks";
+
 import { useNoteContext } from "./react/hooks";
 
 export default function ScrollPadding() {
     const { note, parentComponent, ntxId, viewScope } = useNoteContext();
     const ref = useRef<HTMLDivElement>(null);
     const [height, setHeight] = useState<number>(10);
-    const isEnabled = ["text", "code"].includes(note?.type ?? "") && viewScope?.viewMode === "default";
+    const isEnabled = ["text", "code"].includes(note?.type ?? "")
+        && viewScope?.viewMode === "default"
+        && !note?.isTriliumSqlite();
 
     const refreshHeight = () => {
         if (!ref.current) return;
@@ -37,6 +40,6 @@ export default function ScrollPadding() {
             style={{ height }}
             onClick={() => parentComponent.triggerCommand("scrollToEnd", { ntxId })}
         />
-        : <div></div>
-    )
+        : <div />
+    );
 }

apps/client/src/widgets/sql_result.css

@@ -1,7 +0,0 @@
-.sql-result-widget {
-    padding: 15px;
-}
-
-.sql-console-result-container td {
-    white-space: preserve;
-}

apps/client/src/widgets/sql_result.tsx

@@ -1,63 +0,0 @@
-import { SqlExecuteResults } from "@triliumnext/commons";
-import { useNoteContext, useTriliumEvent } from "./react/hooks";
-import "./sql_result.css";
-import { useState } from "preact/hooks";
-import Alert from "./react/Alert";
-import { t } from "../services/i18n";
-
-export default function SqlResults() {
-    const { note, ntxId } = useNoteContext();
-    const [ results, setResults ] = useState<SqlExecuteResults>();
-
-    useTriliumEvent("sqlQueryResults", ({ ntxId: eventNtxId, results }) => {
-        if (eventNtxId !== ntxId) return;
-        setResults(results);
-    })
-
-    const isEnabled = note?.mime === "text/x-sqlite;schema=trilium";
-    return (
-        <div className={`sql-result-widget ${!isEnabled ? "hidden-ext" : ""}`}>
-            {isEnabled && (
-                results?.length === 1 && Array.isArray(results[0]) && results[0].length === 0 ? (
-                    <Alert type="info">
-                        {t("sql_result.no_rows")}
-                    </Alert>
-                ) : (
-                    <div className="sql-console-result-container selectable-text">
-                        {results?.map(rows => {
-                            // inserts, updates
-                            if (typeof rows === "object" && !Array.isArray(rows)) {
-                                return <pre>{JSON.stringify(rows, null, "\t")}</pre>
-                            }
-
-                            // selects
-                            return <SqlResultTable rows={rows} />
-                        })}
-                    </div>
-                )
-            )}
-        </div>
-    )
-}
-
-function SqlResultTable({ rows }: { rows: object[] }) {
-    if (!rows.length) return;
-
-    return (
-        <table className="table table-striped">
-            <thead>
-                <tr>
-                    {Object.keys(rows[0]).map(key => <th>{key}</th>)}
-                </tr>
-            </thead>
-
-            <tbody>
-                {rows.map(row => (
-                    <tr>
-                        {Object.values(row).map(cell => <td>{cell}</td>)}
-                    </tr>
-                ))}
-            </tbody>
-        </table>
-    )
-}

apps/client/src/widgets/sql_table_schemas.css

@@ -1,43 +0,0 @@
-.sql-table-schemas-widget {
-    padding: 12px;
-    padding-inline-end: 10%;
-    contain: none !important;
-}
-
-.sql-table-schemas > .dropdown {
-    display: inline-block !important;
-}
-
-.sql-table-schemas button.btn {
-    padding: 0.25rem 0.4rem;
-    font-size: 0.875rem;
-    line-height: 0.5;
-    border: 1px solid var(--button-border-color);
-    border-radius: var(--button-border-radius);
-    background: var(--button-background-color);
-    color: var(--button-text-color);
-    cursor: pointer;
-}
-
-.sql-console-result-container {
-    width: 100%;
-    font-size: smaller;
-    margin-top: 10px;
-    flex-grow: 1;
-    overflow: auto;
-    min-height: 0;
-}
-
-.table-schema td {
-    padding: 5px;
-}
-
-.dropdown .table-schema {
-    font-family: var(--monospace-font-family);
-    font-size: .85em;
-}
-
-/* Data type */
-.dropdown .table-schema td:nth-child(2) {
-    color: var(--muted-text-color);
-}

apps/client/src/widgets/sql_table_schemas.tsx

@@ -1,46 +0,0 @@
-import { useEffect, useState } from "preact/hooks";
-import { t } from "../services/i18n";
-import { useNoteContext } from "./react/hooks";
-import "./sql_table_schemas.css";
-import { SchemaResponse } from "@triliumnext/commons";
-import server from "../services/server";
-import Dropdown from "./react/Dropdown";
-
-export default function SqlTableSchemas() {
-    const { note } = useNoteContext();
-    const [ schemas, setSchemas ] = useState<SchemaResponse[]>();
-
-    useEffect(() => {
-        server.get<SchemaResponse[]>("sql/schema").then(setSchemas);
-    }, []);
-
-    const isEnabled = note?.mime === "text/x-sqlite;schema=trilium" && schemas;
-    return (
-        <div className={`sql-table-schemas-widget ${!isEnabled ? "hidden-ext" : ""}`}>
-            {isEnabled && (
-                <>
-                    {t("sql_table_schemas.tables")}{": "}
-
-                    <span class="sql-table-schemas">
-                        {schemas.map(({ name, columns }) => (
-                            <>
-                                <Dropdown text={name} noSelectButtonStyle hideToggleArrow
-                                >
-                                    <table className="table-schema">
-                                        {columns.map(column => (
-                                            <tr>
-                                                <td>{column.name}</td>
-                                                <td>{column.type}</td>
-                                            </tr>
-                                        ))}
-                                    </table>
-                                </Dropdown>
-                                {" "}
-                            </>
-                        ))}
-                    </span>
-                </>
-            )}
-        </div>
-    )
-}

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

@@ -0,0 +1,77 @@
+.sql-console-widget-container {
+    .note-detail-split.split-vertical {
+        flex-direction: column-reverse;
+    }
+
+    .note-detail-split-preview {
+        overflow: auto;
+    }
+
+    .sql-result-widget  {
+        height: 100%;
+
+        > .sql-console-result-container {
+            width: 100%;
+            height: 100%;
+            font-size: smaller;
+            flex-grow: 1;
+            overflow: auto;
+            min-height: 0;
+
+            > .tabulator {
+                height: 100%;
+                --cell-vert-padding-size: 4px;
+
+                > .tabulator-tableholder {
+                    padding: 0;
+                }
+
+                .tabulator-col-content {
+                    padding: 4px !important;
+                }
+            }
+        }
+    }
+
+    .sql-table-schemas-widget {
+        padding: 12px;
+        padding-inline-end: 10%;
+        contain: none !important;
+
+        .sql-table-schemas {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.25em;
+        }
+
+        > .dropdown {
+            display: inline-block !important;
+        }
+
+        button.btn {
+            padding: 0.25rem 0.4rem;
+            font-size: 0.875rem;
+            line-height: 0.5;
+            border: 1px solid var(--button-border-color);
+            border-radius: var(--button-border-radius);
+            background: var(--button-background-color);
+            color: var(--button-text-color);
+            cursor: pointer;
+        }
+
+        .table-schema td {
+            padding: 5px;
+        }
+
+        .dropdown .table-schema {
+            font-family: var(--monospace-font-family);
+            font-size: .85em;
+        }
+
+        /* Data type */
+        .dropdown .table-schema td:nth-child(2) {
+            color: var(--muted-text-color);
+        }
+    }
+}
+

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

@@ -0,0 +1,140 @@
+import "./SqlConsole.css";
+
+import { SchemaResponse, SqlExecuteResults } from "@triliumnext/commons";
+import { useEffect, useState } from "preact/hooks";
+import { Fragment } from "preact/jsx-runtime";
+import { ClipboardModule, EditModule, ExportModule, FilterModule, FormatModule, FrozenColumnsModule, KeybindingsModule, ResizeColumnsModule, SelectRangeModule, SelectRowModule, SortModule } from "tabulator-tables";
+
+import { t } from "../../services/i18n";
+import server from "../../services/server";
+import Tabulator from "../collections/table/tabulator";
+import Alert from "../react/Alert";
+import Dropdown from "../react/Dropdown";
+import { useTriliumEvent } from "../react/hooks";
+import SplitEditor from "./helpers/SplitEditor";
+import { TypeWidgetProps } from "./type_widget";
+
+export default function SqlConsole(props: TypeWidgetProps) {
+    return (
+        <>
+            <SplitEditor
+                noteType="code"
+                {...props}
+                editorBefore={<SqlTableSchemas {...props} />}
+                previewContent={<SqlResults {...props} />}
+                splitOptions={{
+                    sizes: [ 70, 30 ]
+                }}
+            />
+        </>
+    );
+}
+
+function SqlResults({ note, ntxId }: TypeWidgetProps) {
+    const [ results, setResults ] = useState<SqlExecuteResults>();
+
+    useTriliumEvent("sqlQueryResults", ({ ntxId: eventNtxId, results }) => {
+        if (eventNtxId !== ntxId) return;
+        setResults(results);
+    });
+
+    const isEnabled = note?.mime === "text/x-sqlite;schema=trilium";
+    return (
+        <div className={`sql-result-widget ${!isEnabled ? "hidden-ext" : ""}`}>
+            {isEnabled && (
+                results?.length === 1 && Array.isArray(results[0]) && results[0].length === 0 ? (
+                    <Alert type="info">
+                        {t("sql_result.no_rows")}
+                    </Alert>
+                ) : (
+                    <div className="sql-console-result-container selectable-text">
+                        {results?.map((rows, index) => {
+                            // inserts, updates
+                            if (typeof rows === "object" && !Array.isArray(rows)) {
+                                return <pre key={index}>{JSON.stringify(rows, null, "\t")}</pre>;
+                            }
+
+                            // selects
+                            return <SqlResultTable key={index} rows={rows} />;
+                        })}
+                    </div>
+                )
+            )}
+        </div>
+    );
+}
+
+function SqlResultTable({ rows }: { rows: object[] }) {
+    if (!rows.length) return;
+
+    return (
+        <Tabulator
+            layout="fitDataFill"
+            modules={[ ResizeColumnsModule, SortModule, SelectRangeModule, ClipboardModule, KeybindingsModule, EditModule, ExportModule, SelectRowModule, FormatModule, FrozenColumnsModule, FilterModule ]}
+            selectableRange
+            clipboard="copy"
+            clipboardCopyRowRange="range"
+            clipboardCopyConfig={{
+                rowHeaders: false,
+                columnHeaders: false
+            }}
+            columns={[
+                {
+                    title: "#",
+                    formatter: "rownum",
+                    width: 60,
+                    hozAlign: "right",
+                    frozen: true
+                },
+                ...Object.keys(rows[0]).map(key => ({
+                    title: key,
+                    field: key,
+                    width: 250,
+                    minWidth: 100,
+                    widthGrow: 1,
+                    resizable: true,
+                    headerFilter: true as const
+                }))
+            ]}
+            data={rows}
+        />
+    );
+}
+
+export function SqlTableSchemas({ note }: TypeWidgetProps) {
+    const [ schemas, setSchemas ] = useState<SchemaResponse[]>();
+
+    useEffect(() => {
+        server.get<SchemaResponse[]>("sql/schema").then(setSchemas);
+    }, []);
+
+    const isEnabled = note?.mime === "text/x-sqlite;schema=trilium" && schemas;
+    return (
+        <div className={`sql-table-schemas-widget ${!isEnabled ? "hidden-ext" : ""}`}>
+            {isEnabled && (
+                <>
+                    {t("sql_table_schemas.tables")}{": "}
+
+                    <span class="sql-table-schemas">
+                        {schemas.map(({ name, columns }) => (
+                            <Fragment key={name}>
+                                <Dropdown text={name} noSelectButtonStyle hideToggleArrow
+                                >
+                                    <table className="table-schema">
+                                        {columns.map(column => (
+                                            <tr key={column.name}>
+                                                <td>{column.name}</td>
+                                                <td>{column.type}</td>
+                                            </tr>
+                                        ))}
+                                    </table>
+                                </Dropdown>
+                                {" "}
+                            </Fragment>
+                        ))}
+                    </span>
+                </>
+            )}
+        </div>
+    );
+}

apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx

@@ -1,13 +1,15 @@
+import "./SplitEditor.css";
+
+import Split from "@triliumnext/split.js";
+import { ComponentChildren } from "preact";
 import { useEffect, useRef } from "preact/hooks";
+
+import { DEFAULT_GUTTER_SIZE } from "../../../services/resizer";
 import utils, { isMobile } from "../../../services/utils";
+import ActionButton, { ActionButtonProps } from "../../react/ActionButton";
 import Admonition from "../../react/Admonition";
 import { useNoteLabelBoolean, useTriliumOption } from "../../react/hooks";
-import "./SplitEditor.css";
-import Split from "@triliumnext/split.js";
-import { DEFAULT_GUTTER_SIZE } from "../../../services/resizer";
 import { EditableCode, EditableCodeProps } from "../code/Code";
-import { ComponentChildren } from "preact";
-import ActionButton, { ActionButtonProps } from "../../react/ActionButton";
 
 export interface SplitEditorProps extends EditableCodeProps {
     className?: string;
@@ -15,6 +17,7 @@ export interface SplitEditorProps extends EditableCodeProps {
     splitOptions?: Split.Options;
     previewContent: ComponentChildren;
     previewButtons?: ComponentChildren;
+    editorBefore?: ComponentChildren;
 }
 
 /**
@@ -26,13 +29,14 @@ export interface SplitEditorProps extends EditableCodeProps {
  * - Can display errors to the user via {@link setError}.
  * - Horizontal or vertical orientation for the editor/preview split, adjustable via the switch split orientation button floating button.
  */
-export default function SplitEditor({ note, error, splitOptions, previewContent, previewButtons, className, ...editorProps }: SplitEditorProps) {
+export default function SplitEditor({ note, error, splitOptions, previewContent, previewButtons, className, editorBefore, ...editorProps }: SplitEditorProps) {
     const splitEditorOrientation = useSplitOrientation();
     const [ readOnly ] = useNoteLabelBoolean(note, "readOnly");
     const containerRef = useRef<HTMLDivElement>(null);
 
     const editor = (!readOnly &&
         <div className="note-detail-split-editor-col">
+            {editorBefore}
             <div className="note-detail-split-editor">
                 <EditableCode
                     note={note}
@@ -74,12 +78,12 @@ export default function SplitEditor({ note, error, splitOptions, previewContent,
     }, [ readOnly, splitEditorOrientation ]);
 
     return (
-        <div ref={containerRef} className={`note-detail-split note-detail-printable ${"split-" + splitEditorOrientation} ${readOnly ? "split-read-only" : ""} ${className ?? ""}`}>
+        <div ref={containerRef} className={`note-detail-split note-detail-printable ${`split-${  splitEditorOrientation}`} ${readOnly ? "split-read-only" : ""} ${className ?? ""}`}>
             {splitEditorOrientation === "horizontal"
-            ? <>{editor}{preview}</>
-            : <>{preview}{editor}</>}
+                ? <>{editor}{preview}</>
+                : <>{preview}{editor}</>}
         </div>
-    )
+    );
 }
 
 export function PreviewButton(props: Omit<ActionButtonProps, "titlePosition">) {
@@ -88,7 +92,7 @@ export function PreviewButton(props: Omit<ActionButtonProps, "titlePosition">) {
         className="tn-tool-button"
         noIconActionClass
         titlePosition="top"
-    />
+    />;
 }
 
 function useSplitOrientation() {

apps/server/src/app.ts

@@ -3,6 +3,7 @@ import "./becca/becca_loader.js";
 
 import compression from "compression";
 import cookieParser from "cookie-parser";
+import { renderFile } from "ejs";
 import express from "express";
 import { auth } from "express-openid-connect";
 import helmet from "helmet";
@@ -34,8 +35,7 @@ export default async function buildApp() {
 
     // view engine setup
     app.set("views", path.join(assetsDir, "views"));
-    const ejs = await import("ejs");
-    app.engine("ejs", (filePath, options, callback) => ejs.renderFile(filePath, options, callback));
+    app.engine("ejs", (filePath, options, callback) => renderFile(filePath, options, callback));
     app.set("view engine", "ejs");
 
     app.use((req, res, next) => {

pnpm-lock.yaml

@@ -254,11 +254,11 @@ importers:
         specifier: 3.0.2
         version: 3.0.2(encoding@0.1.13)
       jquery:
-        specifier: 4.0.0
-        version: 4.0.0
+        specifier: 3.7.1
+        version: 3.7.1
       jquery.fancytree:
         specifier: 2.38.5
-        version: 2.38.5(jquery@4.0.0)
+        version: 2.38.5(jquery@3.7.1)
       jsplumb:
         specifier: 2.15.6
         version: 2.15.6
@@ -394,7 +394,7 @@ importers:
         version: 0.2.2
       jquery.fancytree:
         specifier: 2.38.5
-        version: 2.38.5(jquery@4.0.0)
+        version: 2.38.5(jquery@3.7.1)
     devDependencies:
       '@electron-forge/cli':
         specifier: 7.11.1
@@ -9527,8 +9527,8 @@ packages:
     peerDependencies:
       jquery: '>=1.9'
 
-  jquery@4.0.0:
-    resolution: {integrity: sha512-TXCHVR3Lb6TZdtw1l3RTLf8RBWVGexdxL6AC8/e0xZKEpBflBsjh9/8LXw+dkNFuOyW9B7iB3O1sP7hS0Kiacg==}
+  jquery@3.7.1:
+    resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==}
 
   js-levenshtein@1.1.6:
     resolution: {integrity: sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==}
@@ -15086,6 +15086,8 @@ snapshots:
       '@ckeditor/ckeditor5-core': 47.4.0
       '@ckeditor/ckeditor5-upload': 47.4.0
       ckeditor5: 47.4.0
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-ai@47.4.0(bufferutil@4.0.9)(utf-8-validate@6.0.5)':
     dependencies:
@@ -15226,12 +15228,16 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.4.0
       '@ckeditor/ckeditor5-widget': 47.4.0
       es-toolkit: 1.39.5
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-cloud-services@47.4.0':
     dependencies:
       '@ckeditor/ckeditor5-core': 47.4.0
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-code-block@47.4.0(patch_hash=2361d8caad7d6b5bddacc3a3b4aa37dbfba260b1c1b22a450413a79c1bb1ce95)':
     dependencies:
@@ -15424,6 +15430,8 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
       es-toolkit: 1.39.5
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-editor-classic@47.4.0':
     dependencies:
@@ -15433,6 +15441,8 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
       es-toolkit: 1.39.5
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-editor-decoupled@47.4.0':
     dependencies:
@@ -15442,6 +15452,8 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
       es-toolkit: 1.39.5
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-editor-inline@47.4.0':
     dependencies:
@@ -15451,8 +15463,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-editor-multi-root@47.4.0':
     dependencies:
@@ -15475,8 +15485,6 @@ snapshots:
       '@ckeditor/ckeditor5-table': 47.4.0
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-emoji@47.4.0':
     dependencies:
@@ -15502,6 +15510,8 @@ snapshots:
       '@ckeditor/ckeditor5-core': 47.4.0
       '@ckeditor/ckeditor5-engine': 47.4.0
       '@ckeditor/ckeditor5-utils': 47.4.0
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-essentials@47.4.0':
     dependencies:
@@ -15533,8 +15543,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.4.0
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-export-word@47.4.0':
     dependencies:
@@ -15559,6 +15567,8 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
       es-toolkit: 1.39.5
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-font@47.4.0':
     dependencies:
@@ -15633,6 +15643,8 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.4.0
       '@ckeditor/ckeditor5-widget': 47.4.0
       ckeditor5: 47.4.0
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-html-embed@47.4.0':
     dependencies:
@@ -15678,8 +15690,6 @@ snapshots:
       '@ckeditor/ckeditor5-widget': 47.4.0
       ckeditor5: 47.4.0
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-import-word@47.4.0':
     dependencies:
@@ -15692,8 +15702,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.4.0
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-indent@47.4.0':
     dependencies:
@@ -15705,8 +15713,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.4.0
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-inspector@5.0.0': {}
 
@@ -15716,8 +15722,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.4.0
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-line-height@47.4.0':
     dependencies:
@@ -15742,8 +15746,6 @@ snapshots:
       '@ckeditor/ckeditor5-widget': 47.4.0
       ckeditor5: 47.4.0
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-list-multi-level@47.4.0':
     dependencies:
@@ -15767,8 +15769,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.4.0
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-markdown-gfm@47.4.0':
     dependencies:
@@ -15806,8 +15806,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.4.0
       '@ckeditor/ckeditor5-widget': 47.4.0
       ckeditor5: 47.4.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-mention@47.4.0(patch_hash=5981fb59ba35829e4dff1d39cf771000f8a8fdfa7a34b51d8af9549541f2d62d)':
     dependencies:
@@ -15817,8 +15815,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-merge-fields@47.4.0':
     dependencies:
@@ -15831,8 +15827,6 @@ snapshots:
       '@ckeditor/ckeditor5-widget': 47.4.0
       ckeditor5: 47.4.0
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-minimap@47.4.0':
     dependencies:
@@ -15841,8 +15835,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.4.0
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-operations-compressor@47.4.0':
     dependencies:
@@ -15897,8 +15889,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.4.0
       '@ckeditor/ckeditor5-widget': 47.4.0
       ckeditor5: 47.4.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-pagination@47.4.0':
     dependencies:
@@ -15962,6 +15952,8 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.4.0
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-restricted-editing@47.4.0':
     dependencies:
@@ -16006,8 +15998,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.4.0
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-slash-command@47.4.0':
     dependencies:
@@ -16020,8 +16010,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.4.0
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-source-editing-enhanced@47.4.0':
     dependencies:
@@ -16069,8 +16057,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-table@47.4.0':
     dependencies:
@@ -16083,8 +16069,6 @@ snapshots:
       '@ckeditor/ckeditor5-widget': 47.4.0
       ckeditor5: 47.4.0
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-template@47.4.0':
     dependencies:
@@ -16195,8 +16179,6 @@ snapshots:
       '@ckeditor/ckeditor5-engine': 47.4.0
       '@ckeditor/ckeditor5-utils': 47.4.0
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-widget@47.4.0':
     dependencies:
@@ -16216,8 +16198,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@codemirror/autocomplete@6.18.6':
     dependencies:
@@ -21684,8 +21664,6 @@ snapshots:
   ckeditor5-collaboration@47.4.0:
     dependencies:
       '@ckeditor/ckeditor5-collaboration-core': 47.4.0
-    transitivePeerDependencies:
-      - supports-color
 
   ckeditor5-premium-features@47.4.0(bufferutil@4.0.9)(ckeditor5@47.4.0)(utf-8-validate@6.0.5):
     dependencies:
@@ -25285,11 +25263,11 @@ snapshots:
 
   jquery-hotkeys@0.2.2: {}
 
-  jquery.fancytree@2.38.5(jquery@4.0.0):
+  jquery.fancytree@2.38.5(jquery@3.7.1):
     dependencies:
-      jquery: 4.0.0
+      jquery: 3.7.1
 
-  jquery@4.0.0: {}
+  jquery@3.7.1: {}
 
   js-levenshtein@1.1.6: {}