fix(deps): update dependency jquery to v4

apps/client/package.json

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

apps/client/src/layouts/desktop_layout.tsx

@@ -46,6 +46,8 @@ 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";
@@ -161,9 +163,11 @@ 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,13 +265,9 @@ 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);
@@ -322,8 +318,6 @@ 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") {
@@ -348,8 +342,9 @@ 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)
+    return (!noteContext?.hasNoteList() && isFullHeightNoteType && !isSqlNote)
         || noteContext?.viewScope?.viewMode === "attachments"
         || isBackendNote;
 }

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

@@ -1,20 +1,18 @@
+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 { 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";
+import { JSX } from "preact/jsx-runtime";
+import { isValidElement, RefObject } from "preact";
 
 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;
 }
@@ -45,9 +43,7 @@ export default function Tabulator<T>({ className, columns, data, modules, tabula
 
         tabulator.on("tableBuilt", () => {
             tabulatorRef.current = tabulator;
-            if (externalTabulatorRef) {
-                externalTabulatorRef.current = tabulator;
-            }
+            externalTabulatorRef.current = tabulator;
             onReady?.();
         });
 
@@ -66,12 +62,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,7 +7,6 @@ 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";
@@ -23,12 +22,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, type, viewScope));
+    const [ shown, setShown ] = useState(shouldShow(note?.noteId, type, viewScope));
     const containerRef = useRef<HTMLDivElement>(null);
     const [ titleHidden, setTitleHidden ] = useState(false);
 
     useLayoutEffect(() => {
-        setShown(shouldShow(note, type, viewScope));
+        setShown(shouldShow(note?.noteId, type, viewScope));
     }, [ note, type, viewScope ]);
 
     useLayoutEffect(() => {
@@ -70,10 +69,9 @@ export default function InlineTitle() {
     );
 }
 
-function shouldShow(note: FNote | null | undefined, type: NoteType | undefined, viewScope: ViewScope | undefined) {
+function shouldShow(noteId: string | undefined, type: NoteType | undefined, viewScope: ViewScope | undefined) {
     if (viewScope?.viewMode !== "default") return false;
-    if (note?.noteId?.startsWith("_options")) return true;
-    if (note?.isTriliumSqlite()) return false;
+    if (noteId?.startsWith("_options")) return true;
     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) && !note?.isTriliumSqlite() &&
+    return (currentNoteType && supportedNoteTypes.has(currentNoteType) &&
         <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" | "sqlConsole";
+export type ExtendedNoteType = Exclude<NoteType, "launcher" | "text" | "code"> | "empty" | "readOnlyCode" | "readOnlyText" | "editableText" | "editableCode" | "attachmentDetail" | "attachmentList" |  "protectedSession" | "aiChat";
 
 export type TypeWidget = ((props: TypeWidgetProps) => VNode | JSX.Element | undefined);
 type NoteTypeView = () => (Promise<{ default: TypeWidget } | TypeWidget> | TypeWidget);
@@ -140,10 +140,5 @@ 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,14 +1,11 @@
 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"
-        && !note?.isTriliumSqlite();
+    const isEnabled = ["text", "code"].includes(note?.type ?? "") && viewScope?.viewMode === "default";
 
     const refreshHeight = () => {
         if (!ref.current) return;
@@ -40,6 +37,6 @@ export default function ScrollPadding() {
             style={{ height }}
             onClick={() => parentComponent.triggerCommand("scrollToEnd", { ntxId })}
         />
-        : <div />
-    );
+        : <div></div>
+    )
 }

apps/client/src/widgets/sql_result.css

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

apps/client/src/widgets/sql_result.tsx

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,43 @@
+.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

@@ -0,0 +1,46 @@
+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

@@ -1,77 +0,0 @@
-.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

@@ -1,140 +0,0 @@
-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,15 +1,13 @@
-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;
@@ -17,7 +15,6 @@ export interface SplitEditorProps extends EditableCodeProps {
     splitOptions?: Split.Options;
     previewContent: ComponentChildren;
     previewButtons?: ComponentChildren;
-    editorBefore?: ComponentChildren;
 }
 
 /**
@@ -29,14 +26,13 @@ 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, editorBefore, ...editorProps }: SplitEditorProps) {
+export default function SplitEditor({ note, error, splitOptions, previewContent, previewButtons, className, ...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}
@@ -78,12 +74,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">) {
@@ -92,7 +88,7 @@ export function PreviewButton(props: Omit<ActionButtonProps, "titlePosition">) {
         className="tn-tool-button"
         noIconActionClass
         titlePosition="top"
-    />;
+    />
 }
 
 function useSplitOrientation() {

apps/server/src/app.ts

@@ -3,7 +3,6 @@ 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";
@@ -35,7 +34,8 @@ export default async function buildApp() {
 
     // view engine setup
     app.set("views", path.join(assetsDir, "views"));
-    app.engine("ejs", (filePath, options, callback) => renderFile(filePath, options, callback));
+    const ejs = await import("ejs");
+    app.engine("ejs", (filePath, options, callback) => ejs.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: 3.7.1
-        version: 3.7.1
+        specifier: 4.0.0
+        version: 4.0.0
       jquery.fancytree:
         specifier: 2.38.5
-        version: 2.38.5(jquery@3.7.1)
+        version: 2.38.5(jquery@4.0.0)
       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@3.7.1)
+        version: 2.38.5(jquery@4.0.0)
     devDependencies:
       '@electron-forge/cli':
         specifier: 7.11.1
@@ -9527,8 +9527,8 @@ packages:
     peerDependencies:
       jquery: '>=1.9'
 
-  jquery@3.7.1:
-    resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==}
+  jquery@4.0.0:
+    resolution: {integrity: sha512-TXCHVR3Lb6TZdtw1l3RTLf8RBWVGexdxL6AC8/e0xZKEpBflBsjh9/8LXw+dkNFuOyW9B7iB3O1sP7hS0Kiacg==}
 
   js-levenshtein@1.1.6:
     resolution: {integrity: sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==}
@@ -15086,8 +15086,6 @@ 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:
@@ -15228,16 +15226,12 @@ 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:
@@ -15430,8 +15424,6 @@ 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:
@@ -15441,8 +15433,6 @@ 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:
@@ -15452,8 +15442,6 @@ 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:
@@ -15463,6 +15451,8 @@ 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:
@@ -15485,6 +15475,8 @@ 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:
@@ -15510,8 +15502,6 @@ 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:
@@ -15543,6 +15533,8 @@ 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:
@@ -15567,8 +15559,6 @@ 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:
@@ -15643,8 +15633,6 @@ 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:
@@ -15690,6 +15678,8 @@ 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:
@@ -15702,6 +15692,8 @@ 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:
@@ -15713,6 +15705,8 @@ 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': {}
 
@@ -15722,6 +15716,8 @@ 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:
@@ -15746,6 +15742,8 @@ 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:
@@ -15769,6 +15767,8 @@ 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,6 +15806,8 @@ 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:
@@ -15815,6 +15817,8 @@ 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:
@@ -15827,6 +15831,8 @@ 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:
@@ -15835,6 +15841,8 @@ 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:
@@ -15889,6 +15897,8 @@ 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:
@@ -15952,8 +15962,6 @@ 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:
@@ -15998,6 +16006,8 @@ 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:
@@ -16010,6 +16020,8 @@ 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:
@@ -16057,6 +16069,8 @@ 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:
@@ -16069,6 +16083,8 @@ 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:
@@ -16179,6 +16195,8 @@ 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:
@@ -16198,6 +16216,8 @@ 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:
@@ -21664,6 +21684,8 @@ 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:
@@ -25263,11 +25285,11 @@ snapshots:
 
   jquery-hotkeys@0.2.2: {}
 
-  jquery.fancytree@2.38.5(jquery@3.7.1):
+  jquery.fancytree@2.38.5(jquery@4.0.0):
     dependencies:
-      jquery: 3.7.1
+      jquery: 4.0.0
 
-  jquery@3.7.1: {}
+  jquery@4.0.0: {}
 
   js-levenshtein@1.1.6: {}