Merge remote-tracking branch 'origin/develop' into feature/rtl

; Conflicts:
;	src/public/app/widgets/floating_buttons/help_button.ts

.prettierignore

@@ -3,3 +3,4 @@
 *.yml
 libraries/*
 docs/*
+src/public/app/doc_notes/**/*

bin/build-server.sh

@@ -66,8 +66,6 @@ chmod 755 $PKG_DIR/trilium.sh
 cp bin/tpl/anonymize-database.sql $PKG_DIR/
 
 cp -r translations $PKG_DIR/
-cp -r dump-db $PKG_DIR/
-rm -rf $PKG_DIR/dump-db/node_modules
 
 VERSION=`jq -r ".version" package.json`
 

bin/generate-openapi.ts

@@ -1,6 +1,6 @@
 import { fileURLToPath } from "url";
 import { dirname, join } from "path";
-import swaggerJsdoc from 'swagger-jsdoc';
+import swaggerJsdoc from "swagger-jsdoc";
 import fs from "fs";
 
 /*
@@ -12,27 +12,29 @@ import fs from "fs";
 
 const options = {
     definition: {
-    openapi: '3.1.1',
+        openapi: "3.1.1",
         info: {
-      title: 'Trilium Notes - Sync server API',
+            title: "Trilium Notes - Sync server API",
-      version: '0.96.6',
+            version: "0.96.6",
-      description: "This is the internal sync server API used by Trilium Notes / TriliumNext Notes.\n\n_If you're looking for the officially supported External Trilium API, see [here](https://triliumnext.github.io/Docs/Wiki/etapi.html)._\n\nThis page does not yet list all routes. For a full list, see the [route controller](https://github.com/TriliumNext/Notes/blob/v0.91.6/src/routes/routes.ts).",
+            description:
+                "This is the internal sync server API used by Trilium Notes / TriliumNext Notes.\n\n_If you're looking for the officially supported External Trilium API, see [here](https://triliumnext.github.io/Docs/Wiki/etapi.html)._\n\nThis page does not yet list all routes. For a full list, see the [route controller](https://github.com/TriliumNext/Notes/blob/v0.91.6/src/routes/routes.ts).",
             contact: {
                 name: "TriliumNext issue tracker",
-        url: "https://github.com/TriliumNext/Notes/issues",
+                url: "https://github.com/TriliumNext/Notes/issues"
             },
             license: {
                 name: "GNU Free Documentation License 1.3 (or later)",
-        url: "https://www.gnu.org/licenses/fdl-1.3",
+                url: "https://www.gnu.org/licenses/fdl-1.3"
-      },
+            }
-    },
+        }
     },
     apis: [
         // Put individual files here to have them ordered first.
-    './src/routes/api/setup.ts',
+        "./src/routes/api/setup.ts",
         // all other files
-    './src/routes/api/*.ts', './bin/generate-openapi.js'
+        "./src/routes/api/*.ts",
-  ],
+        "./bin/generate-openapi.js"
+    ]
 };
 
 const openapiSpecification = swaggerJsdoc(options);

e2e/i18n.spec.ts

@@ -11,16 +11,14 @@ test("Displays translation on desktop", async ({ page, context }) => {
     const app = new App(page, context);
     await app.goto();
 
-    await expect(page.locator("#left-pane .quick-search input"))
+    await expect(page.locator("#left-pane .quick-search input")).toHaveAttribute("placeholder", "Quick search");
-        .toHaveAttribute("placeholder", "Quick search");
 });
 
 test("Displays translation on mobile", async ({ page, context }) => {
     const app = new App(page, context);
     await app.goto({ isMobile: true });
 
-    await expect(page.locator("#mobile-sidebar-wrapper .quick-search input"))
+    await expect(page.locator("#mobile-sidebar-wrapper .quick-search input")).toHaveAttribute("placeholder", "Quick search");
-        .toHaveAttribute("placeholder", "Quick search");
 });
 
 test("Displays translations in Settings", async ({ page, context }) => {

e2e/layout/tab_bar.spec.ts

@@ -19,13 +19,13 @@ test("Can drag tabs around", async ({ page, context }) => {
     let tab = app.getTab(0);
 
     // Drag the first tab at the end
-    await tab.dragTo(app.getTab(2), { targetPosition: { x: 50, y: 0 }});
+    await tab.dragTo(app.getTab(2), { targetPosition: { x: 50, y: 0 } });
 
     tab = app.getTab(2);
     await expect(tab).toContainText(NOTE_TITLE);
 
     // Drag the tab to the left
-    await tab.dragTo(app.getTab(0), { targetPosition: { x: 50, y: 0 }});
+    await tab.dragTo(app.getTab(0), { targetPosition: { x: 50, y: 0 } });
     await expect(app.getTab(0)).toContainText(NOTE_TITLE);
 });
 

e2e/note_types/code.spec.ts

@@ -39,7 +39,9 @@ test("Displays lint errors for backend script", async ({ page, context }) => {
 });
 
 async function expectTooltip(page: Page, tooltip: string) {
-    await expect(page.locator(".CodeMirror-lint-tooltip:visible", {
+    await expect(
-        "hasText": tooltip
+        page.locator(".CodeMirror-lint-tooltip:visible", {
-    })).toBeVisible();
+            hasText: tooltip
+        })
+    ).toBeVisible();
 }

e2e/note_types/mermaid.spec.ts

@@ -3,7 +3,8 @@ import App from "../support/app";
 
 test("renders ELK flowchart", async ({ page, context }) => {
     await testAriaSnapshot({
-        page, context,
+        page,
+        context,
         noteTitle: "Flowchart ELK on",
         snapshot: `
             - document:
@@ -22,12 +23,13 @@ test("renders ELK flowchart", async ({ page, context }) => {
                 - paragraph: Guarantee
                 - text: Interfaces for B
         `
-    })
+    });
 });
 
 test("renders standard flowchart", async ({ page, context }) => {
     await testAriaSnapshot({
-        page, context,
+        page,
+        context,
         noteTitle: "Flowchart ELK off",
         snapshot: `
             - document:
@@ -46,7 +48,7 @@ test("renders standard flowchart", async ({ page, context }) => {
                 - paragraph: C
                 - text: Interfaces for B
         `
-    })
+    });
 });
 
 interface AriaTestOpts {

e2e/note_types/text.spec.ts

@@ -44,8 +44,8 @@ test("Highlights list is displayed", async ({ page, context }) => {
 
     await expect(app.sidebar).toContainText("Highlights List");
     const rootList = app.sidebar.locator(".highlights-list ol");
-    let index=0;
+    let index = 0;
-    for (const highlightedEl of [ "Bold 1", "Italic 1", "Underline 1", "Colored text 1", "Background text 1", "Bold 2", "Italic 2", "Underline 2", "Colored text 2", "Background text 2" ]) {
+    for (const highlightedEl of ["Bold 1", "Italic 1", "Underline 1", "Colored text 1", "Background text 1", "Bold 2", "Italic 2", "Underline 2", "Colored text 2", "Background text 2"]) {
         await expect(rootList.locator("li").nth(index++)).toContainText(highlightedEl);
     }
 });
@@ -54,7 +54,7 @@ test("Displays math popup", async ({ page, context }) => {
     const app = new App(page, context);
     await app.goto();
     await app.goToNoteInNewTab("Empty text");
-    const noteContent = app.currentNoteSplit.locator(".note-detail-editable-text-editor")
+    const noteContent = app.currentNoteSplit.locator(".note-detail-editable-text-editor");
     await noteContent.fill("Hello world");
     await noteContent.press("ControlOrMeta+M");
 

e2e/support/app.ts

@@ -25,7 +25,7 @@ export default class App {
         this.tabBar = page.locator(".tab-row-widget-container");
         this.noteTree = page.locator(".tree-wrapper");
         this.launcherBar = page.locator("#launcher-container");
-        this.currentNoteSplit = page.locator(".note-split:not(.hidden-ext)")
+        this.currentNoteSplit = page.locator(".note-split:not(.hidden-ext)");
         this.sidebar = page.locator("#right-pane");
     }
 
@@ -46,8 +46,7 @@ export default class App {
 
         // Wait for the page to load.
         if (url === "/") {
-            await expect(this.page.locator(".tree"))
+            await expect(this.page.locator(".tree")).toContainText("Trilium Integration Test");
-                .toContainText("Trilium Integration Test");
             await this.closeAllTabs();
         }
     }
@@ -109,11 +108,12 @@ export default class App {
         });
 
         expect(csrfToken).toBeTruthy();
-        await expect(await this.page.request.put(`${BASE_URL}/api/options/${key}/${value}`, {
+        await expect(
+            await this.page.request.put(`${BASE_URL}/api/options/${key}/${value}`, {
                 headers: {
                     "x-csrf-token": csrfToken
                 }
-        })).toBeOK();
+            })
+        ).toBeOK();
     }
-
 }

eslint.config.js

@@ -0,0 +1,43 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+    eslint.configs.recommended,
+    tseslint.configs.recommended,
+    // consider using rules below, once we have a full TS codebase and can be more strict
+    // tseslint.configs.strictTypeChecked,
+    // tseslint.configs.stylisticTypeChecked,
+    // tseslint.configs.recommendedTypeChecked,
+    {
+        languageOptions: {
+            parserOptions: {
+                projectService: true,
+                tsconfigRootDir: import.meta.dirname
+            }
+        }
+    },
+    {
+        rules: {
+            // add rule overrides here
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "@typescript-eslint/no-unused-vars": [
+                "error",
+                {
+                    "argsIgnorePattern": "^_",
+                    "varsIgnorePattern": "^_",
+                }
+            ]
+        }
+    },
+    {
+        ignores: [
+            "build/*",
+            "dist/*",
+            "docs/*",
+            "libraries/*",
+            "src/public/app-dist/*",
+            "src/public/app/doc_notes/*"
+        ]
+    }
+);

package.json

@@ -57,6 +57,8 @@
     "dev:watch-dist": "tsx ./bin/watch-dist.ts",
     "dev:prettier-check": "prettier . --check",
     "dev:prettier-fix": "prettier . --write",
+    "dev:linter-check": "eslint .",
+    "dev:linter-fix": "eslint . --fix",
     "chore:update-build-info": "tsx bin/update-build-info.ts",
     "chore:ci-update-nightly-version": "tsx ./bin/update-nightly-version.ts",
     "chore:generate-document": "cross-env nodemon ./bin/generate_document.ts 1000",
@@ -103,7 +105,6 @@
     "express-session": "1.18.1",
     "force-graph": "1.49.2",
     "fs-extra": "11.3.0",
-    "happy-dom": "17.1.8",
     "helmet": "8.0.0",
     "html": "1.0.0",
     "html2plaintext": "2.1.4",
@@ -123,7 +124,6 @@
     "jsdom": "26.0.0",
     "jsplumb": "2.15.6",
     "katex": "0.16.21",
-    "knockout": "3.5.1",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.1.2",
     "mark.js": "8.11.1",
@@ -150,7 +150,6 @@
     "striptags": "3.2.0",
     "swagger-ui-express": "5.0.1",
     "tmp": "0.2.3",
-    "ts-loader": "9.5.2",
     "turndown": "7.2.0",
     "unescape": "1.0.1",
     "vanilla-js-wheel-zoom": "9.0.4",
@@ -168,6 +167,7 @@
     "@electron-forge/maker-zip": "7.7.0",
     "@electron-forge/plugin-auto-unpack-natives": "7.7.0",
     "@electron/rebuild": "3.7.1",
+    "@eslint/js": "9.21.0",
     "@playwright/test": "1.50.1",
     "@popperjs/core": "2.11.8",
     "@types/archiver": "6.0.3",
@@ -216,14 +216,17 @@
     "cross-env": "7.0.3",
     "css-loader": "7.1.2",
     "electron": "34.3.0",
+    "eslint": "9.21.0",
     "esm": "3.2.25",
+    "happy-dom": "17.2.2",
     "i18next-http-backend": "3.0.2",
     "jsdoc": "4.0.4",
+    "knockout": "3.5.1",
     "lorem-ipsum": "2.0.8",
     "mini-css-extract-plugin": "2.9.2",
     "nodemon": "3.1.9",
     "postcss-loader": "8.1.1",
-    "prettier": "3.5.2",
+    "prettier": "3.5.3",
     "rcedit": "4.0.1",
     "rimraf": "6.0.1",
     "sass": "1.85.1",
@@ -231,10 +234,12 @@
     "split.js": "1.6.5",
     "supertest": "7.0.0",
     "swagger-jsdoc": "6.2.8",
+    "ts-loader": "9.5.2",
     "tslib": "2.8.1",
     "tsx": "4.19.3",
     "typedoc": "0.27.9",
     "typescript": "5.8.2",
+    "typescript-eslint": "8.26.0",
     "vitest": "3.0.7",
     "webpack": "5.98.0",
     "webpack-cli": "6.0.1",

playwright.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
 
-const SERVER_URL = 'http://127.0.0.1:8082';
+const SERVER_URL = "http://127.0.0.1:8082";
 
 /**
  * Read environment variables from file.
@@ -14,7 +14,7 @@ const SERVER_URL = 'http://127.0.0.1:8082';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: './e2e',
+    testDir: "./e2e",
     /* Run tests in files in parallel */
     fullyParallel: true,
     /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -24,22 +24,22 @@ export default defineConfig({
     /* Opt out of parallel tests on CI. */
     workers: process.env.CI ? 1 : undefined,
     /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+    reporter: "html",
     /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
     use: {
         /* Base URL to use in actions like `await page.goto('/')`. */
         baseURL: SERVER_URL,
 
         /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+        trace: "on-first-retry"
     },
 
     /* Configure projects for major browsers */
     projects: [
         {
-      name: 'chromium',
+            name: "chromium",
-      use: { ...devices['Desktop Chrome'] },
+            use: { ...devices["Desktop Chrome"] }
-    },
+        }
 
         // {
         //   name: 'firefox',
@@ -73,9 +73,11 @@ export default defineConfig({
     ],
 
     /* Run your local dev server before starting the tests */
-  webServer: !process.env.TRILIUM_DOCKER ? {
+    webServer: !process.env.TRILIUM_DOCKER
-    command: 'npm run test:integration-mem-db-dev',
+        ? {
+              command: "npm run test:integration-mem-db-dev",
               url: SERVER_URL,
-    reuseExistingServer: !process.env.CI,
+              reuseExistingServer: !process.env.CI
-  } : undefined,
+          }
+        : undefined
 });

src/becca/entities/btask.ts

@@ -14,7 +14,7 @@ export default class BTask extends AbstractBeccaEntity<BOption> {
     }
 
     static get hashedProperties() {
-        return [ "taskId", "parentNoteId", "title", "dueDate", "isDone", "isDeleted" ];
+        return ["taskId", "parentNoteId", "title", "dueDate", "isDone", "isDeleted"];
     }
 
     taskId?: string;

src/public/app/components/app_context.ts

@@ -24,6 +24,7 @@ import type NoteTreeWidget from "../widgets/note_tree.js";
 import type { default as NoteContext, GetTextEditorCallback } from "./note_context.js";
 import type { ContextMenuEvent } from "../menus/context_menu.js";
 import type TypeWidget from "../widgets/type_widgets/type_widget.js";
+import type EditableTextTypeWidget from "../widgets/type_widgets/editable_text.js";
 
 interface Layout {
     getRootWidget: (appContext: AppContext) => RootWidget;
@@ -62,7 +63,7 @@ export interface NoteCommandData extends CommandData {
 }
 
 export interface ExecuteCommandData<T> extends CommandData {
-    resolve: (data: T) => void
+    resolve: (data: T) => void;
 }
 
 /**
@@ -70,7 +71,7 @@ export interface ExecuteCommandData<T> extends CommandData {
  */
 export type CommandMappings = {
     "api-log-messages": CommandData;
-    focusTree: CommandData,
+    focusTree: CommandData;
     focusOnTitle: CommandData;
     focusOnDetail: CommandData;
     focusOnSearchDefinition: Required<CommandData>;
@@ -108,7 +109,7 @@ export type CommandMappings = {
     showInfoDialog: ConfirmWithMessageOptions;
     showConfirmDialog: ConfirmWithMessageOptions;
     showRecentChanges: CommandData & { ancestorNoteId: string };
-    showImportDialog: CommandData & { noteId: string; };
+    showImportDialog: CommandData & { noteId: string };
     openNewNoteSplit: NoteCommandData;
     openInWindow: NoteCommandData;
     openNoteInNewTab: CommandData;
@@ -131,8 +132,10 @@ export type CommandMappings = {
     editNoteTitle: ContextMenuCommandData;
     protectSubtree: ContextMenuCommandData;
     unprotectSubtree: ContextMenuCommandData;
-    openBulkActionsDialog: ContextMenuCommandData | {
+    openBulkActionsDialog:
-        selectedOrActiveNoteIds?: string[]
+    | ContextMenuCommandData
+    | {
+        selectedOrActiveNoteIds?: string[];
     };
     editBranchPrefix: ContextMenuCommandData;
     convertNoteToAttachment: ContextMenuCommandData;
@@ -221,11 +224,11 @@ export type CommandMappings = {
     moveTabToNewWindow: CommandData;
     copyTabToNewWindow: CommandData;
     closeActiveTab: CommandData & {
-        $el: JQuery<HTMLElement>
+        $el: JQuery<HTMLElement>;
-    },
+    };
     setZoomFactorAndSave: {
         zoomFactor: string;
-    }
+    };
 
     reEvaluateRightPaneVisibility: CommandData;
     runActiveNote: CommandData;
@@ -234,18 +237,18 @@ export type CommandMappings = {
     };
     scrollToEnd: CommandData;
     closeThisNoteSplit: CommandData;
-    moveThisNoteSplit: CommandData & { isMovingLeft: boolean; };
+    moveThisNoteSplit: CommandData & { isMovingLeft: boolean };
 
     // Geomap
-    deleteFromMap: { noteId: string },
+    deleteFromMap: { noteId: string };
-    openGeoLocation: { noteId: string, event: JQuery.MouseDownEvent }
+    openGeoLocation: { noteId: string; event: JQuery.MouseDownEvent };
 
     toggleZenMode: CommandData;
 
     updateAttributeList: CommandData & { attributes: Attribute[] };
     saveAttributes: CommandData;
     reloadAttributes: CommandData;
-    refreshNoteList: CommandData & { noteId: string; };
+    refreshNoteList: CommandData & { noteId: string };
 
     refreshResults: {};
     refreshSearchDefinition: {};
@@ -348,7 +351,7 @@ type EventMappings = {
         ntxId: string | null | undefined; // TODO: deduplicate ntxId
     };
     tabReorder: {
-        ntxIdsInOrder: string[]
+        ntxIdsInOrder: string[];
     };
     refreshNoteList: {
         noteId: string;
@@ -359,6 +362,12 @@ type EventMappings = {
     relationMapResetPanZoom: { ntxId: string | null | undefined };
     relationMapResetZoomIn: { ntxId: string | null | undefined };
     relationMapResetZoomOut: { ntxId: string | null | undefined };
+    activeNoteChangedEvent: {};
+    showAddLinkDialog: {
+        textTypeWidget: EditableTextTypeWidget;
+        text: string;
+    };
+
 };
 
 export type EventListener<T extends EventNames> = {

src/public/app/components/component.ts

@@ -18,7 +18,7 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
     children: ChildT[];
     initialized: Promise<void> | null;
     parent?: TypedComponent<any>;
-    position!: number;
+    _position!: number;
 
     constructor() {
         this.componentId = `${this.sanitizedClassName}-${utils.randomString(8)}`;
@@ -31,6 +31,14 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
         return this.constructor.name.replace(/[^A-Z0-9]/gi, "_");
     }
 
+    get position() {
+        return this._position;
+    }
+
+    set position(newPosition: number) {
+        this._position = newPosition;
+    }
+
     setParent(parent: TypedComponent<any>) {
         this.parent = parent;
         return this;

src/public/app/components/shortcut_component.ts

@@ -17,7 +17,7 @@ export default class ShortcutComponent extends Component implements EventListene
     }
 
     bindNoteShortcutHandler(labelOrRow: AttributeRow) {
-        const handler = () => appContext.tabManager.getActiveContext().setNote(labelOrRow.noteId);
+        const handler = () => appContext.tabManager.getActiveContext()?.setNote(labelOrRow.noteId);
         const namespace = labelOrRow.attributeId;
 
         if (labelOrRow.isDeleted) {

src/public/app/components/tab_manager.js

@@ -248,7 +248,7 @@ export default class TabManager extends Component {
         await noteContext.setEmpty();
     }
 
-    async openEmptyTab(ntxId = null, hoistedNoteId = "root", mainNtxId = null) {
+    async openEmptyTab(ntxId = null, hoistedNoteId = "root", mainNtxId) {
         const noteContext = new NoteContext(ntxId, hoistedNoteId, mainNtxId);
 
         const existingNoteContext = this.children.find((nc) => nc.ntxId === noteContext.ntxId);

src/public/app/entities/fnote.ts

@@ -37,7 +37,25 @@ const NOTE_TYPE_ICONS = {
  * end user. Those types should be used only for checking against, they are
  * not for direct use.
  */
-export type NoteType = "file" | "image" | "search" | "noteMap" | "launcher" | "doc" | "contentWidget" | "text" | "relationMap" | "render" | "canvas" | "mermaid" | "book" | "webView" | "code" | "mindMap" | "geoMap" | "taskList";
+export type NoteType =
+    | "file"
+    | "image"
+    | "search"
+    | "noteMap"
+    | "launcher"
+    | "doc"
+    | "contentWidget"
+    | "text"
+    | "relationMap"
+    | "render"
+    | "canvas"
+    | "mermaid"
+    | "book"
+    | "webView"
+    | "code"
+    | "mindMap"
+    | "geoMap"
+    | "taskList";
 
 export interface NotePathRecord {
     isArchived: boolean;

src/public/app/layouts/desktop_layout.js

@@ -264,7 +264,7 @@ export default class DesktopLayout {
             .child(new InfoDialog())
             .child(new ConfirmDialog())
             .child(new PromptDialog())
-            .child(new CloseZenButton())
+            .child(new CloseZenButton());
     }
 
     #buildLauncherPane(isHorizontal) {

src/public/app/login.ts

@@ -4,7 +4,7 @@ import "../stylesheets/bootstrap.scss";
 // Required for correct loading of scripts in Electron
 if (typeof module === 'object') {window.module = module; module = undefined;}
 
-const device = getDeviceType()
+const device = getDeviceType();
 console.log("Setting device cookie to:", device);
 setCookie("trilium-device", device);
 
@@ -16,17 +16,17 @@ function setCookie(name: string, value?: string) {
 }
 
 function getDeviceType() {
-    if (window.location.search === '?desktop') return "desktop";
+    if (window.location.search === "?desktop") return "desktop";
-    if (window.location.search === '?mobile') return "mobile";
+    if (window.location.search === "?mobile") return "mobile";
     return isMobile() ? "mobile" : "desktop";
 }
 
 // https://stackoverflow.com/a/73731646/944162
 function isMobile() {
-    const mQ = matchMedia?.('(pointer:coarse)');
+    const mQ = matchMedia?.("(pointer:coarse)");
-    if (mQ?.media === '(pointer:coarse)') return !!mQ.matches;
+    if (mQ?.media === "(pointer:coarse)") return !!mQ.matches;
 
-    if ('orientation' in window) return true;
+    if ("orientation" in window) return true;
-    const userAgentsRegEx = /\b(Android|iPhone|iPad|iPod|Windows Phone|BlackBerry|webOS|IEMobile)\b/i
+    const userAgentsRegEx = /\b(Android|iPhone|iPad|iPod|Windows Phone|BlackBerry|webOS|IEMobile)\b/i;
-    return userAgentsRegEx.test(navigator.userAgent)
+    return userAgentsRegEx.test(navigator.userAgent);
 }

src/public/app/menus/launcher_context_menu.ts

@@ -34,8 +34,8 @@ export default class LauncherContextMenu implements SelectMenuItemEventListener<
 
         const isVisibleRoot = note?.noteId === "_lbVisibleLaunchers";
         const isAvailableRoot = note?.noteId === "_lbAvailableLaunchers";
-        const isVisibleItem = (parentNoteId === "_lbVisibleLaunchers" || parentNoteId === "_lbMobileVisibleLaunchers");
+        const isVisibleItem = parentNoteId === "_lbVisibleLaunchers" || parentNoteId === "_lbMobileVisibleLaunchers";
-        const isAvailableItem = (parentNoteId === "_lbAvailableLaunchers" || parentNoteId === "_lbMobileAvailableLaunchers");
+        const isAvailableItem = parentNoteId === "_lbAvailableLaunchers" || parentNoteId === "_lbMobileAvailableLaunchers";
         const isItem = isVisibleItem || isAvailableItem;
         const canBeDeleted = !note?.noteId.startsWith("_"); // fixed notes can't be deleted
         const canBeReset = !canBeDeleted && note?.isLaunchBarConfig();

src/public/app/menus/tree_context_menu.ts

@@ -44,7 +44,7 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
         const note = this.node.data.noteId ? await froca.getNote(this.node.data.noteId) : null;
         const branch = froca.getBranch(this.node.data.branchId);
         const isNotRoot = note?.noteId !== "root";
-        const isHoisted = note?.noteId === appContext.tabManager.getActiveContext().hoistedNoteId;
+        const isHoisted = note?.noteId === appContext.tabManager.getActiveContext()?.hoistedNoteId;
         const parentNote = isNotRoot && branch ? await froca.getNote(branch.parentNoteId) : null;
 
         // some actions don't support multi-note, so they are disabled when notes are selected,
@@ -226,8 +226,8 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
                 templateNoteId: templateNoteId
             });
         } else if (command === "openNoteInSplit") {
-            const subContexts = appContext.tabManager.getActiveContext().getSubContexts();
+            const subContexts = appContext.tabManager.getActiveContext()?.getSubContexts();
-            const { ntxId } = subContexts[subContexts.length - 1];
+            const { ntxId } = subContexts?.[subContexts.length - 1] ?? {};
 
             this.treeWidget.triggerCommand("openNewNoteSplit", { ntxId, notePath });
         } else if (command === "convertNoteToAttachment") {

src/public/app/services/attribute_parser.spec.ts

@@ -1,7 +1,6 @@
 import { describe, it, expect } from "vitest";
 import attributeParser from "./attribute_parser.js";
 
-
 describe("Lexing", () => {
     it("simple label", () => {
         expect(attributeParser.lex("#label").map((t: any) => t.text)).toEqual(["#label"]);

src/public/app/services/attribute_renderer.ts

@@ -79,7 +79,7 @@ async function renderAttributes(attributes: FAttribute[], renderIsInheritable: b
     return $container;
 }
 
-const HIDDEN_ATTRIBUTES = [ "originalFileName", "fileSize", "template", "inherit", "cssClass", "iconClass", "pageSize", "viewType", "geolocation", "docName" ];
+const HIDDEN_ATTRIBUTES = ["originalFileName", "fileSize", "template", "inherit", "cssClass", "iconClass", "pageSize", "viewType", "geolocation", "docName"];
 
 async function renderNormalAttributes(note: FNote) {
     const promotedDefinitionAttributes = note.getPromotedDefinitionAttributes();

src/public/app/services/branches.ts

@@ -152,10 +152,10 @@ async function deleteNotes(branchIdsToDelete: string[], forceDeleteAllClones = f
 async function activateParentNotePath() {
     // this is not perfect, maybe we should find the next/previous sibling, but that's more complex
     const activeContext = appContext.tabManager.getActiveContext();
-    const parentNotePathArr = activeContext.notePathArray.slice(0, -1);
+    const parentNotePathArr = activeContext?.notePathArray.slice(0, -1);
 
-    if (parentNotePathArr.length > 0) {
+    if (parentNotePathArr && parentNotePathArr.length > 0) {
-        activeContext.setNote(parentNotePathArr.join("/"));
+        activeContext?.setNote(parentNotePathArr.join("/"));
     }
 }
 

src/public/app/services/frontend_script_api.ts

@@ -457,13 +457,13 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
     this.BasicWidget = BasicWidget;
 
     this.activateNote = async (notePath) => {
-        await appContext.tabManager.getActiveContext().setNote(notePath);
+        await appContext.tabManager.getActiveContext()?.setNote(notePath);
     };
 
     this.activateNewNote = async (notePath) => {
         await ws.waitForMaxKnownEntityChangeId();
 
-        await appContext.tabManager.getActiveContext().setNote(notePath);
+        await appContext.tabManager.getActiveContext()?.setNote(notePath);
         await appContext.triggerEvent("focusAndSelectTitle", {});
     };
 
@@ -480,8 +480,8 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
     this.openSplitWithNote = async (notePath, activate) => {
         await ws.waitForMaxKnownEntityChangeId();
 
-        const subContexts = appContext.tabManager.getActiveContext().getSubContexts();
+        const subContexts = appContext.tabManager.getActiveContext()?.getSubContexts();
-        const { ntxId } = subContexts[subContexts.length - 1];
+        const { ntxId } = subContexts?.[subContexts.length - 1] ?? {};
 
         await appContext.triggerCommand("openNewNoteSplit", { ntxId, notePath });
 
@@ -591,15 +591,48 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
 
     this.addTextToActiveContextEditor = (text) => appContext.triggerCommand("addTextToActiveEditor", { text });
 
-    this.getActiveContextNote = () => appContext.tabManager.getActiveContextNote();
+    this.getActiveContextNote = (): FNote => {
-    this.getActiveContext = () => appContext.tabManager.getActiveContext();
+        const note = appContext.tabManager.getActiveContextNote();
-    this.getActiveMainContext = () => appContext.tabManager.getActiveMainContext();
+        if (!note) {
+            throw new Error("No active context note found");
+        }
+        return note;
+    };
+
+    this.getActiveContext = (): NoteContext => {
+        const context = appContext.tabManager.getActiveContext();
+        if (!context) {
+            throw new Error("No active context found");
+        }
+        return context;
+    };
+
+    this.getActiveMainContext = (): NoteContext => {
+        const context = appContext.tabManager.getActiveMainContext();
+        if (!context) {
+            throw new Error("No active main context found");
+        }
+        return context;
+    };
 
     this.getNoteContexts = () => appContext.tabManager.getNoteContexts();
     this.getMainNoteContexts = () => appContext.tabManager.getMainNoteContexts();
 
-    this.getActiveContextTextEditor = () => appContext.tabManager.getActiveContext()?.getTextEditor();
+    this.getActiveContextTextEditor = () => {
-    this.getActiveContextCodeEditor = () => appContext.tabManager.getActiveContext()?.getCodeEditor();
+        const context = appContext.tabManager.getActiveContext();
+        if (!context) {
+            throw new Error("No active context found");
+        }
+        return context.getTextEditor();
+    };
+
+    this.getActiveContextCodeEditor = () => {
+        const context = appContext.tabManager.getActiveContext();
+        if (!context) {
+            throw new Error("No active context found");
+        }
+        return context.getCodeEditor();
+    };
 
     this.getActiveNoteDetailWidget = () => new Promise((resolve) => appContext.triggerCommand("executeInActiveNoteDetailWidget", { callback: resolve }));
     this.getActiveContextNotePath = () => appContext.tabManager.getActiveContextNotePath();
@@ -665,5 +698,5 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
 }
 
 export default FrontendScriptApi as any as {
-    new (startNote: FNote, currentNote: FNote, originEntity: Entity | null, $container: JQuery<HTMLElement> | null): Api;
+    new(startNote: FNote, currentNote: FNote, originEntity: Entity | null, $container: JQuery<HTMLElement> | null): Api;
 };

src/public/app/services/import.ts

@@ -80,7 +80,7 @@ ws.subscribeToMessages(async (message) => {
         toastService.showPersistent(toast);
 
         if (message.result.importedNoteId) {
-            await appContext.tabManager.getActiveContext().setNote(message.result.importedNoteId);
+            await appContext.tabManager.getActiveContext()?.setNote(message.result.importedNoteId);
         }
     }
 });
@@ -102,7 +102,7 @@ ws.subscribeToMessages(async (message) => {
         toastService.showPersistent(toast);
 
         if (message.result.parentNoteId) {
-            await appContext.tabManager.getActiveContext().setNote(message.result.importedNoteId, {
+            await appContext.tabManager.getActiveContext()?.setNote(message.result.importedNoteId, {
                 viewScope: {
                     viewMode: "attachments"
                 }

src/public/app/services/library_loader.ts

@@ -99,8 +99,8 @@ const HIGHLIGHT_JS: Library = {
 };
 
 const LEAFLET: Library = {
-    css: [ "node_modules/leaflet/dist/leaflet.css" ],
+    css: ["node_modules/leaflet/dist/leaflet.css"]
-}
+};
 
 async function requireLibrary(library: Library) {
     if (library.css) {

src/public/app/services/link.ts

@@ -274,8 +274,8 @@ function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent
     const { notePath, viewScope } = parseNavigationStateFromUrl(hrefLink);
 
     const ctrlKey = utils.isCtrlKey(evt);
-    const isLeftClick = ("which" in evt && evt.which === 1);
+    const isLeftClick = "which" in evt && evt.which === 1;
-    const isMiddleClick = ("which" in evt && evt.which === 2);
+    const isMiddleClick = "which" in evt && evt.which === 2;
     const openInNewTab = (isLeftClick && ctrlKey) || isMiddleClick;
 
     if (notePath) {

src/public/app/services/note_autocomplete.ts

@@ -322,9 +322,7 @@ function init() {
 
     $.fn.setSelectedNotePath = function (notePath) {
         notePath = notePath || "";
-
         $(this).attr(SELECTED_NOTE_PATH_KEY, notePath);
-
         $(this).closest(".input-group").find(".go-to-selected-note-button").toggleClass("disabled", !notePath.trim()).attr("href", `#${notePath}`); // we also set href here so tooltip can be displayed
     };
 
@@ -336,11 +334,9 @@ function init() {
         }
     };
 
-    $.fn.setSelectedExternalLink = function (externalLink) {
+    $.fn.setSelectedExternalLink = function (externalLink: string | null) {
-        if (externalLink) {
+        $(this).attr(SELECTED_EXTERNAL_LINK_KEY, externalLink);
-            // TODO: This doesn't seem to do anything with the external link, is it normal?
         $(this).closest(".input-group").find(".go-to-selected-note-button").toggleClass("disabled", true);
-        }
     };
 
     $.fn.setNote = async function (noteId) {

src/public/app/services/note_create.ts

@@ -86,8 +86,8 @@ async function createNote(parentNotePath: string | undefined, options: CreateNot
 
     await ws.waitForMaxKnownEntityChangeId();
 
-    if (options.activate) {
     const activeNoteContext = appContext.tabManager.getActiveContext();
+    if (activeNoteContext && options.activate) {
         await activeNoteContext.setNote(`${parentNotePath}/${note.noteId}`);
 
         if (options.focus === "title") {
@@ -152,8 +152,7 @@ async function duplicateSubtree(noteId: string, parentNotePath: string) {
 
     await ws.waitForMaxKnownEntityChangeId();
 
-    const activeNoteContext = appContext.tabManager.getActiveContext();
+    appContext.tabManager.getActiveContext()?.setNote(`${parentNotePath}/${note.noteId}`);
-    activeNoteContext.setNote(`${parentNotePath}/${note.noteId}`);
 
     const origNote = await froca.getNote(noteId);
     toastService.showMessage(t("note_create.duplicated", { title: origNote?.title }));

src/public/app/services/note_list_renderer.ts

@@ -18,7 +18,7 @@ export default class NoteListRenderer {
             parentNote,
             noteIds,
             showNotePath
-        }
+        };
 
         if (this.viewType === "list" || this.viewType === "grid") {
             this.viewMode = new ListOrGridView(this.viewType, args);

src/public/app/services/note_tooltip.ts

@@ -147,11 +147,11 @@ async function renderTooltip(note: FNote | null) {
         tooltip: true,
         trim: true
     });
-    const isContentEmpty = ($renderedContent[0].innerHTML.length === 0);
+    const isContentEmpty = $renderedContent[0].innerHTML.length === 0;
 
     let content = "";
     if (noteTitleWithPathAsSuffix) {
-        const classes = [ "note-tooltip-title" ];
+        const classes = ["note-tooltip-title"];
         if (isContentEmpty) {
             classes.push("note-no-content");
         }

src/public/app/services/utils.ts

@@ -36,20 +36,20 @@ function parseDate(str: string) {
 
 // Source: https://stackoverflow.com/a/30465299/4898894
 function getMonthsInDateRange(startDate: string, endDate: string) {
-    const start = startDate.split('-');
+    const start = startDate.split("-");
-    const end = endDate.split('-');
+    const end = endDate.split("-");
     const startYear = parseInt(start[0]);
     const endYear = parseInt(end[0]);
     const dates = [];
 
     for (let i = startYear; i <= endYear; i++) {
         const endMonth = i != endYear ? 11 : parseInt(end[1]) - 1;
-        const startMon = i === startYear ? parseInt(start[1])-1 : 0;
+        const startMon = i === startYear ? parseInt(start[1]) - 1 : 0;
 
-        for(let j = startMon; j <= endMonth; j = j > 12 ? j % 12 || 11 : j+1) {
+        for (let j = startMon; j <= endMonth; j = j > 12 ? j % 12 || 11 : j + 1) {
-            const month = j+1;
+            const month = j + 1;
-            const displayMonth = month < 10 ? '0'+month : month;
+            const displayMonth = month < 10 ? "0" + month : month;
-            dates.push([i, displayMonth].join('-'));
+            dates.push([i, displayMonth].join("-"));
         }
     }
     return dates;
@@ -164,7 +164,7 @@ function escapeHtml(str: string) {
 }
 
 export function escapeQuotes(value: string) {
-    return value.replaceAll("\"", "&quot;");
+    return value.replaceAll('"', "&quot;");
 }
 
 function formatSize(size: number) {

src/public/app/types-fancytree.d.ts

@@ -11,7 +11,7 @@
 
 interface JQueryStatic {
     ui: JQueryUI.UI;
-};
+}
 
 declare namespace JQueryUI {
     interface UI {
@@ -679,13 +679,13 @@ declare namespace Fancytree {
         activate = 1,
         expand = 2,
         activate_and_expand = 3,
-        activate_dblclick_expands = 4,
+        activate_dblclick_expands = 4
     }
 
     enum FancytreeSelectMode {
         single = 1,
         multi = 2,
-        mutlti_hier = 3,
+        mutlti_hier = 3
     }
 
     /** Context object passed to events and hook functions. */

src/public/app/types-lib.d.ts

@@ -13,7 +13,7 @@ declare module "draggabilly" {
             containment: HTMLElement
         });
         element: HTMLElement;
-        on(event: "pointerDown" | "dragStart" | "dragEnd" | "dragMove", callback: Callback)
+        on(event: "pointerDown" | "dragStart" | "dragEnd" | "dragMove", callback: Callback);
         dragEnd();
         isDragging: boolean;
         positionDrag: () => void;
@@ -21,6 +21,6 @@ declare module "draggabilly" {
     }
 }
 
-declare module '@mind-elixir/node-menu' {
+declare module "@mind-elixir/node-menu" {
     export default mindmap;
 }

src/public/app/types.d.ts

@@ -85,7 +85,7 @@ declare global {
         getSelectedNotePath(): string | undefined;
         getSelectedNoteId(): string | null;
         setSelectedNotePath(notePath: string | null | undefined);
-        getSelectedExternalLink(this: HTMLElement): string | undefined;
+        getSelectedExternalLink(): string | undefined;
         setSelectedExternalLink(externalLink: string | null | undefined);
         setNote(noteId: string);
         markRegExp(regex: RegExp, opts: {

src/public/app/widgets/bookmark_buttons.ts

@@ -41,7 +41,7 @@ export default class BookmarkButtons extends FlexContainer<Component> {
                 : new OpenNoteButtonWidget(note).class("launcher-button");
 
             if (this.settings.titlePlacement) {
-                if (!('settings' in buttonWidget)) {
+                if (!("settings" in buttonWidget)) {
                     (buttonWidget as any).settings = {};
                 }
 

src/public/app/widgets/buttons/attachments_actions.ts

@@ -8,7 +8,7 @@ import appContext from "../../components/app_context.js";
 import openService from "../../services/open.js";
 import utils from "../../services/utils.js";
 import { Dropdown } from "bootstrap";
-import type attachmentsApiRoute from "../../../../routes/api/attachments.js"
+import type attachmentsApiRoute from "../../../../routes/api/attachments.js";
 import type FAttachment from "../../entities/fattachment.js";
 import type AttachmentDetailWidget from "../attachment_detail.js";
 
@@ -105,7 +105,6 @@ export default class AttachmentActionsWidget extends BasicWidget {
 
         this.$uploadNewRevisionInput = this.$widget.find(".attachment-upload-new-revision-input");
         this.$uploadNewRevisionInput.on("change", async () => {
-
             const fileToUpload = this.$uploadNewRevisionInput[0].files?.item(0); // copy to allow reset below
             this.$uploadNewRevisionInput.val("");
             if (fileToUpload) {
@@ -131,7 +130,6 @@ export default class AttachmentActionsWidget extends BasicWidget {
             const $openAttachmentCustomButton = this.$widget.find("[data-trigger-command='openAttachmentCustom']");
             $openAttachmentCustomButton.addClass("disabled").append($('<span class="bx bx-info-circle disabled-tooltip" />').attr("title", t("attachments_actions.open_custom_client_only")));
         }
-
     }
 
     async openAttachmentCommand() {
@@ -170,11 +168,10 @@ export default class AttachmentActionsWidget extends BasicWidget {
             return;
         }
 
-
         const { note: newNote } = await server.post<ReturnType<typeof attachmentsApiRoute.convertAttachmentToNote>>(`attachments/${this.attachmentId}/convert-to-note`);
         toastService.showMessage(t("attachments_actions.convert_success", { title: this.attachment.title }));
         await ws.waitForMaxKnownEntityChangeId();
-        await appContext.tabManager.getActiveContext().setNote(newNote.noteId);
+        await appContext.tabManager.getActiveContext()?.setNote(newNote.noteId);
     }
 
     async renameAttachmentCommand() {

src/public/app/widgets/buttons/calendar.ts

@@ -149,7 +149,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
                 const note = await dateNoteService.getDayNote(date);
 
                 if (note) {
-                    appContext.tabManager.getActiveContext().setNote(note.noteId);
+                    appContext.tabManager.getActiveContext()?.setNote(note.noteId);
                     this.dropdown?.hide();
                 } else {
                     toastService.showError(t("calendar.cannot_find_day_note"));
@@ -189,10 +189,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
 
     async dropdownShown() {
         await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
-
+        this.init(appContext.tabManager.getActiveContextNote()?.getOwnedLabelValue("dateNote") ?? null);
-        const activeNote = appContext.tabManager.getActiveContextNote();
-
-        this.init(activeNote?.getOwnedLabelValue("dateNote"));
     }
 
     init(activeDate: string | null) {

src/public/app/widgets/buttons/launcher/note_launcher.ts

@@ -78,7 +78,7 @@ export default class NoteLauncher extends AbstractLauncher {
     }
 
     getHoistedNoteId() {
-        return this.launcherNote.getRelationValue("hoistedNote") || appContext.tabManager.getActiveContext().hoistedNoteId;
+        return this.launcherNote.getRelationValue("hoistedNote") || appContext.tabManager.getActiveContext()?.hoistedNoteId;
     }
 
     getTitle() {

src/public/app/widgets/buttons/launcher/today_launcher.ts

@@ -10,6 +10,6 @@ export default class TodayLauncher extends NoteLauncher {
     }
 
     getHoistedNoteId() {
-        return appContext.tabManager.getActiveContext().hoistedNoteId;
+        return appContext.tabManager.getActiveContext()?.hoistedNoteId;
     }
 }

src/public/app/widgets/buttons/note_actions.ts

@@ -228,7 +228,7 @@ export default class NoteActionsWidget extends NoteContextAwareWidget {
 
         toastService.showMessage(t("note_actions.convert_into_attachment_successful", { title: newAttachment.title }));
         await ws.waitForMaxKnownEntityChangeId();
-        await appContext.tabManager.getActiveContext().setNote(newAttachment.ownerId, {
+        await appContext.tabManager.getActiveContext()?.setNote(newAttachment.ownerId, {
             viewScope: {
                 viewMode: "attachments",
                 attachmentId: newAttachment.attachmentId

src/public/app/widgets/containers/left_pane_container.ts

@@ -24,8 +24,7 @@ export default class LeftPaneContainer extends FlexContainer<Component> {
             if (visible) {
                 this.triggerEvent("focusTree", {});
             } else {
-                const activeNoteContext = appContext.tabManager.getActiveContext();
+                this.triggerEvent("focusOnDetail", { ntxId: appContext.tabManager.getActiveContext()?.ntxId });
-                this.triggerEvent("focusOnDetail", { ntxId: activeNoteContext.ntxId });
             }
         }
     }

src/public/app/widgets/containers/ribbon_container.ts

@@ -139,7 +139,8 @@ export default class RibbonContainer extends NoteContextAwareWidget {
         return super.isEnabled() && this.noteContext?.viewScope?.viewMode === "default";
     }
 
-    ribbon(widget: NoteContextAwareWidget) { // TODO: Base class
+    ribbon(widget: NoteContextAwareWidget) {
+        // TODO: Base class
         super.child(widget);
 
         this.ribbonWidgets.push(widget);
@@ -236,7 +237,12 @@ export default class RibbonContainer extends NoteContextAwareWidget {
             const $ribbonTitle = $('<div class="ribbon-tab-title">')
                 .attr("data-ribbon-component-id", ribbonWidget.componentId)
                 .attr("data-ribbon-component-name", (ribbonWidget as any).name as string) // TODO: base class for ribbon widgets
-                .append($('<span class="ribbon-tab-title-icon">').addClass(ret.icon).attr("title", ret.title).attr("data-toggle-command", (ribbonWidget as any).toggleCommand)) // TODO: base class
+                .append(
+                    $('<span class="ribbon-tab-title-icon">')
+                        .addClass(ret.icon)
+                        .attr("title", ret.title)
+                        .attr("data-toggle-command", (ribbonWidget as any).toggleCommand)
+                ) // TODO: base class
                 .append(" ")
                 .append($('<span class="ribbon-tab-title-label">').text(ret.title));
 

src/public/app/widgets/containers/split_note_container.ts

@@ -1,8 +1,29 @@
 import FlexContainer from "./flex_container.js";
 import appContext from "../../components/app_context.js";
+import NoteContext from "../../components/note_context.js";
+import type { CommandMappings, EventNames, EventData } from "../../components/app_context.js";
+import type BasicWidget from "../basic_widget.js";
 
-export default class SplitNoteContainer extends FlexContainer {
+interface NoteContextEvent {
-    constructor(widgetFactory) {
+    noteContext: NoteContext;
+}
+
+interface SplitNoteWidget extends BasicWidget {
+    hasBeenAlreadyShown?: boolean;
+    ntxId?: string;
+}
+
+type WidgetFactory = () => SplitNoteWidget;
+
+interface Widgets {
+    [key: string]: SplitNoteWidget;
+}
+
+export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
+    private widgetFactory: WidgetFactory;
+    private widgets: Widgets;
+
+    constructor(widgetFactory: WidgetFactory) {
         super("row");
 
         this.widgetFactory = widgetFactory;
@@ -13,7 +34,7 @@ export default class SplitNoteContainer extends FlexContainer {
         this.collapsible();
     }
 
-    async newNoteContextCreatedEvent({ noteContext }) {
+    async newNoteContextCreatedEvent({ noteContext }: NoteContextEvent) {
         const widget = this.widgetFactory();
 
         const $renderedWidget = widget.render();
@@ -23,20 +44,32 @@ export default class SplitNoteContainer extends FlexContainer {
 
         this.$widget.append($renderedWidget);
 
-        widget.handleEvent("initialRenderComplete");
+        widget.handleEvent("initialRenderComplete", {});
 
         widget.toggleExt(false);
 
+        if (noteContext.ntxId) {
             this.widgets[noteContext.ntxId] = widget;
+        }
 
         await widget.handleEvent("setNoteContext", { noteContext });
 
         this.child(widget);
     }
 
-    async openNewNoteSplitEvent({ ntxId, notePath, hoistedNoteId, viewScope }) {
+    async openNewNoteSplitEvent({ ntxId, notePath, hoistedNoteId, viewScope }: {
+        ntxId: string;
+        notePath?: string;
+        hoistedNoteId?: string;
+        viewScope?: any;
+    }) {
         const mainNtxId = appContext.tabManager.getActiveMainContext().ntxId;
 
+        if (!mainNtxId) {
+            logError("empty mainNtxId!");
+            return;
+        }
+
         if (!ntxId) {
             logError("empty ntxId!");
 
@@ -53,7 +86,7 @@ export default class SplitNoteContainer extends FlexContainer {
         // insert the note context after the originating note context
         ntxIds.splice(ntxIds.indexOf(ntxId) + 1, 0, noteContext.ntxId);
 
-        this.triggerCommand("noteContextReorder", { ntxIdsInOrder: ntxIds });
+        this.triggerCommand("noteContextReorder" as keyof CommandMappings, { ntxIdsInOrder: ntxIds });
 
         // move the note context rendered widget after the originating widget
         this.$widget.find(`[data-ntx-id="${noteContext.ntxId}"]`).insertAfter(this.$widget.find(`[data-ntx-id="${ntxId}"]`));
@@ -67,11 +100,11 @@ export default class SplitNoteContainer extends FlexContainer {
         }
     }
 
-    closeThisNoteSplitCommand({ ntxId }) {
+    closeThisNoteSplitCommand({ ntxId }: { ntxId: string }): void {
         appContext.tabManager.removeNoteContext(ntxId);
     }
 
-    async moveThisNoteSplitCommand({ ntxId, isMovingLeft }) {
+    async moveThisNoteSplitCommand({ ntxId, isMovingLeft }: { ntxId: string; isMovingLeft: boolean }): Promise<void> {
         if (!ntxId) {
             logError("empty ntxId!");
             return;
@@ -96,7 +129,7 @@ export default class SplitNoteContainer extends FlexContainer {
         const newNtxIds = [...ntxIds.slice(0, leftIndex), ntxIds[leftIndex + 1], ntxIds[leftIndex], ...ntxIds.slice(leftIndex + 2)];
         const isChangingMainContext = !contexts[leftIndex].mainNtxId;
 
-        this.triggerCommand("noteContextReorder", {
+        this.triggerCommand("noteContextReorder" as keyof CommandMappings, {
             ntxIdsInOrder: newNtxIds,
             oldMainNtxId: isChangingMainContext ? ntxIds[leftIndex] : null,
             newMainNtxId: isChangingMainContext ? ntxIds[leftIndex + 1] : null
@@ -109,16 +142,16 @@ export default class SplitNoteContainer extends FlexContainer {
         await appContext.tabManager.activateNoteContext(isMovingLeft ? ntxIds[leftIndex + 1] : ntxIds[leftIndex]);
     }
 
-    activeContextChangedEvent() {
+    activeContextChangedEvent(): void {
         this.refresh();
     }
 
-    noteSwitchedAndActivatedEvent() {
+    noteSwitchedAndActivatedEvent(): void {
         this.refresh();
     }
 
-    noteContextRemovedEvent({ ntxIds }) {
+    noteContextRemovedEvent({ ntxIds }: { ntxIds: string[] }): void {
-        this.children = this.children.filter((c) => !ntxIds.includes(c.ntxId));
+        this.children = this.children.filter((c) => c.ntxId && !ntxIds.includes(c.ntxId));
 
         for (const ntxId of ntxIds) {
             this.$widget.find(`[data-ntx-id="${ntxId}"]`).remove();
@@ -127,7 +160,7 @@ export default class SplitNoteContainer extends FlexContainer {
         }
     }
 
-    contextsReopenedEvent({ ntxId, afterNtxId }) {
+    contextsReopenedEvent({ ntxId, afterNtxId }: { ntxId?: string; afterNtxId?: string }): void {
         if (ntxId === undefined || afterNtxId === undefined) {
             // no single split reopened
             return;
@@ -135,13 +168,11 @@ export default class SplitNoteContainer extends FlexContainer {
         this.$widget.find(`[data-ntx-id="${ntxId}"]`).insertAfter(this.$widget.find(`[data-ntx-id="${afterNtxId}"]`));
     }
 
-    async refresh() {
+    async refresh(): Promise<void> {
         this.toggleExt(true);
     }
 
-    toggleInt(show) {} // not needed
+    toggleExt(show: boolean): void {
-
-    toggleExt(show) {
         const activeMainContext = appContext.tabManager.getActiveMainContext();
         const activeNtxId = activeMainContext ? activeMainContext.ntxId : null;
 
@@ -149,7 +180,7 @@ export default class SplitNoteContainer extends FlexContainer {
             const noteContext = appContext.tabManager.getNoteContextById(ntxId);
 
             const widget = this.widgets[ntxId];
-            widget.toggleExt(show && activeNtxId && [noteContext.ntxId, noteContext.mainNtxId].includes(activeNtxId));
+            widget.toggleExt(show && activeNtxId !== null && [noteContext.ntxId, noteContext.mainNtxId].includes(activeNtxId));
         }
     }
 
@@ -158,41 +189,50 @@ export default class SplitNoteContainer extends FlexContainer {
      * are not executed, we're waiting for the first tab activation, and then we update the tab. After this initial
      * activation, further note switches are always propagated to the tabs.
      */
-    handleEventInChildren(name, data) {
+    handleEventInChildren<T extends EventNames>(name: T, data: EventData<T>): Promise<any> | null {
         if (["noteSwitched", "noteSwitchedAndActivated"].includes(name)) {
             // this event is propagated only to the widgets of a particular tab
-            const widget = this.widgets[data.noteContext.ntxId];
+            const noteContext = (data as NoteContextEvent).noteContext;
+            const widget = noteContext.ntxId ? this.widgets[noteContext.ntxId] : undefined;
 
             if (!widget) {
                 return Promise.resolve();
             }
 
-            if (widget.hasBeenAlreadyShown || name === "noteSwitchedAndActivated" || appContext.tabManager.getActiveMainContext() === data.noteContext.getMainContext()) {
+            if (widget.hasBeenAlreadyShown || name === "noteSwitchedAndActivatedEvent" || appContext.tabManager.getActiveMainContext() === noteContext.getMainContext()) {
                 widget.hasBeenAlreadyShown = true;
 
-                return [widget.handleEvent("noteSwitched", data), this.refreshNotShown(data)];
+                return Promise.all([
+                    widget.handleEvent("noteSwitched", { noteContext, notePath: noteContext.notePath }),
+                    this.refreshNotShown({ noteContext })
+                ]);
             } else {
                 return Promise.resolve();
             }
         }
 
         if (name === "activeContextChanged") {
-            return this.refreshNotShown(data);
+            return this.refreshNotShown(data as NoteContextEvent);
         } else {
             return super.handleEventInChildren(name, data);
         }
     }
 
-    refreshNotShown(data) {
+    private refreshNotShown(data: NoteContextEvent): Promise<any> {
-        const promises = [];
+        const promises: Promise<any>[] = [];
 
         for (const subContext of data.noteContext.getMainContext().getSubContexts()) {
+            if (!subContext.ntxId) {
+                continue;
+            }
+
             const widget = this.widgets[subContext.ntxId];
 
             if (!widget.hasBeenAlreadyShown) {
                 widget.hasBeenAlreadyShown = true;
 
-                promises.push(widget.handleEvent("activeContextChanged", { noteContext: subContext }));
+                const eventPromise = widget.handleEvent("activeContextChanged", { noteContext: subContext });
+                promises.push(eventPromise || Promise.resolve());
             }
         }
 

src/public/app/widgets/dialogs/about.ts

@@ -5,6 +5,15 @@ import openService from "../../services/open.js";
 import server from "../../services/server.js";
 import utils from "../../services/utils.js";
 
+interface AppInfo {
+    appVersion: string;
+    dbVersion: number;
+    syncVersion: number;
+    buildDate: string;
+    buildRevision: string;
+    dataDirectory: string;
+}
+
 const TPL = `
 <div class="about-dialog modal fade mx-auto" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg" role="document">
@@ -35,12 +44,10 @@ const TPL = `
                         <th>${t("about.build_date")}</th>
                         <td class="build-date"></td>
                     </tr>
-
                     <tr>
                         <th>${t("about.build_revision")}</th>
-                        <td><a class="tn-link" href="" class="build-revision external" target="_blank"></a></td>
+                        <td><a class="tn-link build-revision external" href="" target="_blank"></a></td>
                     </tr>
-
                     <tr>
                         <th>${t("about.data_directory")}</th>
                         <td class="data-directory"></td>
@@ -59,7 +66,14 @@ const TPL = `
 `;
 
 export default class AboutDialog extends BasicWidget {
-    doRender() {
+    private $appVersion!: JQuery<HTMLElement>;
+    private $dbVersion!: JQuery<HTMLElement>;
+    private $syncVersion!: JQuery<HTMLElement>;
+    private $buildDate!: JQuery<HTMLElement>;
+    private $buildRevision!: JQuery<HTMLElement>;
+    private $dataDirectory!: JQuery<HTMLElement>;
+
+    doRender(): void {
         this.$widget = $(TPL);
         this.$appVersion = this.$widget.find(".app-version");
         this.$dbVersion = this.$widget.find(".db-version");
@@ -70,11 +84,11 @@ export default class AboutDialog extends BasicWidget {
     }
 
     async refresh() {
-        const appInfo = await server.get("app-info");
+        const appInfo = await server.get<AppInfo>("app-info");
 
         this.$appVersion.text(appInfo.appVersion);
-        this.$dbVersion.text(appInfo.dbVersion);
+        this.$dbVersion.text(appInfo.dbVersion.toString());
-        this.$syncVersion.text(appInfo.syncVersion);
+        this.$syncVersion.text(appInfo.syncVersion.toString());
         this.$buildDate.text(formatDateTime(appInfo.buildDate));
         this.$buildRevision.text(appInfo.buildRevision);
         this.$buildRevision.attr("href", `https://github.com/TriliumNext/Notes/commit/${appInfo.buildRevision}`);
@@ -84,9 +98,9 @@ export default class AboutDialog extends BasicWidget {
                     href: "#",
                     class: "tn-link",
                     text: appInfo.dataDirectory
-                })
+                }).prop("outerHTML")
             );
-            this.$dataDirectory.find("a").on("click", (event) => {
+            this.$dataDirectory.find("a").on("click", (event: JQuery.ClickEvent) => {
                 event.preventDefault();
                 openService.openDirectory(appInfo.dataDirectory);
             });
@@ -97,7 +111,6 @@ export default class AboutDialog extends BasicWidget {
 
     async openAboutDialogEvent() {
         await this.refresh();
-
         utils.openDialog(this.$widget);
     }
 }

src/public/app/widgets/dialogs/add_link.ts

@@ -3,6 +3,9 @@ import treeService from "../../services/tree.js";
 import noteAutocompleteService from "../../services/note_autocomplete.js";
 import utils from "../../services/utils.js";
 import BasicWidget from "../basic_widget.js";
+import type { Suggestion } from "../../services/note_autocomplete.js";
+import type { default as TextTypeWidget } from "../type_widgets/editable_text.js";
+import type { EventData } from "../../components/app_context.js";
 
 const TPL = `
 <div class="add-link-dialog modal mx-auto" tabindex="-1" role="dialog">
@@ -56,6 +59,14 @@ const TPL = `
 </div>`;
 
 export default class AddLinkDialog extends BasicWidget {
+    private $form!: JQuery<HTMLElement>;
+    private $autoComplete!: JQuery<HTMLElement>;
+    private $linkTitle!: JQuery<HTMLElement>;
+    private $addLinkTitleSettings!: JQuery<HTMLElement>;
+    private $addLinkTitleRadios!: JQuery<HTMLElement>;
+    private $addLinkTitleFormGroup!: JQuery<HTMLElement>;
+    private textTypeWidget: TextTypeWidget | null = null;
+
     doRender() {
         this.$widget = $(TPL);
         this.$form = this.$widget.find(".add-link-form");
@@ -65,20 +76,17 @@ export default class AddLinkDialog extends BasicWidget {
         this.$addLinkTitleRadios = this.$widget.find(".add-link-title-radios");
         this.$addLinkTitleFormGroup = this.$widget.find(".add-link-title-form-group");
 
-        /** @var TextTypeWidget */
-        this.textTypeWidget = null;
-
         this.$form.on("submit", () => {
             if (this.$autoComplete.getSelectedNotePath()) {
                 this.$widget.modal("hide");
 
                 const linkTitle = this.getLinkType() === "reference-link" ? null : this.$linkTitle.val();
 
-                this.textTypeWidget.addLink(this.$autoComplete.getSelectedNotePath(), linkTitle);
+                this.textTypeWidget?.addLink(this.$autoComplete.getSelectedNotePath()!, linkTitle);
             } else if (this.$autoComplete.getSelectedExternalLink()) {
                 this.$widget.modal("hide");
 
-                this.textTypeWidget.addLink(this.$autoComplete.getSelectedExternalLink(), this.$linkTitle.val());
+                this.textTypeWidget?.addLink(this.$autoComplete.getSelectedExternalLink()!, this.$linkTitle.val(), true);
             } else {
                 logError("No link to add.");
             }
@@ -87,12 +95,12 @@ export default class AddLinkDialog extends BasicWidget {
         });
     }
 
-    async showAddLinkDialogEvent({ textTypeWidget, text = "" }) {
+    async showAddLinkDialogEvent({ textTypeWidget, text = "" }: EventData<"showAddLinkDialog">) {
         this.textTypeWidget = textTypeWidget;
 
         this.$addLinkTitleSettings.toggle(!this.textTypeWidget.hasSelection());
 
-        this.$addLinkTitleSettings.find("input[type=radio]").on("change", (e) => this.updateTitleSettingsVisibility(e));
+        this.$addLinkTitleSettings.find("input[type=radio]").on("change", () => this.updateTitleSettingsVisibility());
 
         // with selection hyperlink is implied
         if (this.textTypeWidget.hasSelection()) {
@@ -108,9 +116,8 @@ export default class AddLinkDialog extends BasicWidget {
         this.$autoComplete.val("");
         this.$linkTitle.val("");
 
-        const setDefaultLinkTitle = async (noteId) => {
+        const setDefaultLinkTitle = async (noteId: string) => {
             const noteTitle = await treeService.getNoteTitle(noteId);
-
             this.$linkTitle.val(noteTitle);
         };
 
@@ -119,7 +126,7 @@ export default class AddLinkDialog extends BasicWidget {
             allowCreatingNotes: true
         });
 
-        this.$autoComplete.on("autocomplete:noteselected", (event, suggestion, dataset) => {
+        this.$autoComplete.on("autocomplete:noteselected", (event: JQuery.Event, suggestion: Suggestion) => {
             if (!suggestion.notePath) {
                 return false;
             }
@@ -133,7 +140,7 @@ export default class AddLinkDialog extends BasicWidget {
             }
         });
 
-        this.$autoComplete.on("autocomplete:externallinkselected", (event, suggestion, dataset) => {
+        this.$autoComplete.on("autocomplete:externallinkselected", (event: JQuery.Event, suggestion: Suggestion) => {
             if (!suggestion.externalLink) {
                 return false;
             }
@@ -143,11 +150,11 @@ export default class AddLinkDialog extends BasicWidget {
             this.$linkTitle.val(suggestion.externalLink);
         });
 
-        this.$autoComplete.on("autocomplete:cursorchanged", (event, suggestion, dataset) => {
+        this.$autoComplete.on("autocomplete:cursorchanged", (event: JQuery.Event, suggestion: Suggestion) => {
             if (suggestion.externalLink) {
                 this.$linkTitle.val(suggestion.externalLink);
             } else {
-                const noteId = treeService.getNoteIdFromUrl(suggestion.notePath);
+                const noteId = treeService.getNoteIdFromUrl(suggestion.notePath!);
 
                 if (noteId) {
                     setDefaultLinkTitle(noteId);
@@ -164,7 +171,7 @@ export default class AddLinkDialog extends BasicWidget {
         this.$autoComplete.trigger("focus").trigger("select"); // to be able to quickly remove entered text
     }
 
-    getLinkType() {
+    private getLinkType() {
         if (this.$autoComplete.getSelectedExternalLink()) {
             return "external-link";
         }
@@ -172,7 +179,7 @@ export default class AddLinkDialog extends BasicWidget {
         return this.$addLinkTitleSettings.find("input[type=radio]:checked").val();
     }
 
-    updateTitleSettingsVisibility() {
+    private updateTitleSettingsVisibility() {
         const linkType = this.getLinkType();
 
         this.$addLinkTitleFormGroup.toggle(linkType !== "reference-link");

src/public/app/widgets/dialogs/export.ts

@@ -250,7 +250,7 @@ ws.subscribeToMessages(async (message) => {
             message: message,
             icon: "arrow-square-up-right"
         };
-    };
+    }
 
     if (message.taskType !== "export") {
         return;

src/public/app/widgets/dialogs/revisions.ts

@@ -320,7 +320,8 @@ export default class RevisionsDialog extends BasicWidget {
                         // as a URL to be used in a note. Instead, if they copy and paste it into a note, it will be uploaded as a new note
                         .attr("src", `data:${fullRevision.mime};base64,${fullRevision.content}`)
                         .css("max-width", "100%")
-                        .css("max-height", "100%").html()
+                        .css("max-height", "100%")
+                        .html()
                 );
             }
         } else if (revisionItem.type === "file") {

src/public/app/widgets/floating_buttons/code_buttons.ts

@@ -65,7 +65,7 @@ export default class CodeButtonsWidget extends NoteContextAwareWidget {
 
             await ws.waitForMaxKnownEntityChangeId();
 
-            await appContext.tabManager.getActiveContext().setNote(notePath);
+            await appContext.tabManager.getActiveContext()?.setNote(notePath);
 
             toastService.showMessage(t("code_buttons.sql_console_saved_message", { notePath: await treeService.getNotePathTitle(notePath) }));
         });

src/public/app/widgets/floating_buttons/geo_map_button.ts

@@ -1,5 +1,5 @@
 import { t } from "../../services/i18n.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js"
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
 
 const TPL = `\
 <div class="geo-map-buttons">

src/public/app/widgets/floating_buttons/zpetne_odkazy.ts

@@ -157,7 +157,7 @@ export default class BacklinksWidget extends NoteContextAwareWidget {
             if (backlink.relationName) {
                 $item.append($("<p>").text(`${t("zpetne_odkazy.relation")}: ${backlink.relationName}`));
             } else {
-                $item.append(...backlink.excerpts ?? []);
+                $item.append(...(backlink.excerpts ?? []));
             }
 
             this.$items.append($item);

src/public/app/widgets/geo_map.ts

@@ -19,10 +19,10 @@ const TPL = `\
     </style>
 
     <div class="geo-map-container"></div>
-</div>`
+</div>`;
 
 export type Leaflet = typeof import("leaflet");
-export type InitCallback = ((L: Leaflet) => void);
+export type InitCallback = (L: Leaflet) => void;
 
 export default class GeoMapWidget extends NoteContextAwareWidget {
 
@@ -40,8 +40,7 @@ export default class GeoMapWidget extends NoteContextAwareWidget {
 
         this.$container = this.$widget.find(".geo-map-container");
 
-        library_loader.requireLibrary(library_loader.LEAFLET)
+        library_loader.requireLibrary(library_loader.LEAFLET).then(async () => {
-            .then(async () => {
             const L = (await import("leaflet")).default;
 
             const map = L.map(this.$container[0], {
@@ -53,7 +52,7 @@ export default class GeoMapWidget extends NoteContextAwareWidget {
                 this.initCallback(L);
             }
 
-                L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
                 attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                 detectRetina: true
             }).addTo(map);

src/public/app/widgets/mermaid.ts

@@ -66,7 +66,7 @@ export default class MermaidWidget extends NoteContextAwareWidget {
 
         mermaid.mermaidAPI.initialize({
             startOnLoad: false,
-            ...getMermaidConfig() as any
+            ...(getMermaidConfig() as any)
         });
 
         this.$display.empty();

src/public/app/widgets/mobile_widgets/mobile_detail_menu.ts

@@ -28,8 +28,8 @@ class MobileDetailMenuWidget extends BasicWidget {
                 x: e.pageX,
                 y: e.pageY,
                 items: [
-                    { title: t("mobile_detail_menu.insert_child_note"), command: "insertChildNote", uiIcon: "bx bx-plus", enabled: note.type !== "search" },
+                    { title: t("mobile_detail_menu.insert_child_note"), command: "insertChildNote", uiIcon: "bx bx-plus", enabled: note?.type !== "search" },
-                    { title: t("mobile_detail_menu.delete_this_note"), command: "delete", uiIcon: "bx bx-trash", enabled: note.noteId !== "root" }
+                    { title: t("mobile_detail_menu.delete_this_note"), command: "delete", uiIcon: "bx bx-trash", enabled: note?.noteId !== "root" }
                 ],
                 selectMenuItemHandler: async ({ command }) => {
                     if (command === "insertChildNote") {

src/public/app/widgets/note_detail.ts

@@ -81,7 +81,16 @@ const typeWidgetClasses = {
  * 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.
  */
-type ExtendedNoteType = Exclude<NoteType, "mermaid" | "launcher" | "text" | "code"> | "empty" | "readOnlyCode" | "readOnlyText" | "editableText" | "editableCode" | "attachmentDetail" | "attachmentList" | "protectedSession";
+type ExtendedNoteType =
+    | Exclude<NoteType, "mermaid" | "launcher" | "text" | "code">
+    | "empty"
+    | "readOnlyCode"
+    | "readOnlyText"
+    | "editableText"
+    | "editableCode"
+    | "attachmentDetail"
+    | "attachmentList"
+    | "protectedSession";
 
 export default class NoteDetailWidget extends NoteContextAwareWidget {
 
@@ -332,7 +341,9 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
 
             const label = attrs.find(
                 (attr) =>
-                    attr.type === "label" && ["readOnly", "autoReadOnlyDisabled", "cssClass", "displayRelations", "hideRelations"].includes(attr.name ?? "") && attributeService.isAffecting(attr, this.note)
+                    attr.type === "label" &&
+                    ["readOnly", "autoReadOnlyDisabled", "cssClass", "displayRelations", "hideRelations"].includes(attr.name ?? "") &&
+                    attributeService.isAffecting(attr, this.note)
             );
 
             const relation = attrs.find((attr) => attr.type === "relation" && ["template", "inherit", "renderNote"].includes(attr.name ?? "") && attributeService.isAffecting(attr, this.note));

src/public/app/widgets/note_map.ts

@@ -139,7 +139,7 @@ interface NotesAndRelationsData {
         source: string;
         target: string;
         name: string;
-    }[]
+    }[];
 }
 
 // Replace
@@ -152,7 +152,7 @@ interface ResponseLink {
 
 interface PostNotesMapResponse {
     notes: string[];
-    links: ResponseLink[],
+    links: ResponseLink[];
     noteIdToDescendantCountMap: Record<string, number>;
 }
 
@@ -160,7 +160,7 @@ interface GroupedLink {
     id: string;
     sourceNoteId: string;
     targetNoteId: string;
-    names: string[]
+    names: string[];
 }
 
 interface CssData {
@@ -313,9 +313,7 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
                 ctx.fillStyle = color;
                 ctx.beginPath();
                 if (node.x && node.y) {
-                    ctx.arc(node.x, node.y,
+                    ctx.arc(node.x, node.y, this.noteIdToSizeMap[node.id], 0, 2 * Math.PI, false);
-                        this.noteIdToSizeMap[node.id], 0,
-                        2 * Math.PI, false);
                 }
                 ctx.fill();
             })
@@ -324,7 +322,7 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
             .warmupTicks(30)
             .onNodeClick((node) => {
                 if (node.id) {
-                    appContext.tabManager.getActiveContext().setNote((node as Node).id);
+                    appContext.tabManager.getActiveContext()?.setNote((node as Node).id);
                 }
             })
             .onNodeRightClick((node, e) => {
@@ -373,7 +371,7 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
         if (mapRootNoteId === "hoisted") {
             mapRootNoteId = hoistedNoteService.getHoistedNoteId();
         } else if (!mapRootNoteId) {
-            mapRootNoteId = appContext.tabManager.getActiveContext().parentNoteId;
+            mapRootNoteId = appContext.tabManager.getActiveContext()?.parentNoteId;
         }
 
         return mapRootNoteId ?? "";
@@ -467,13 +465,13 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
         }
 
         if (source.x && source.y && target.x && target.y) {
-            const x = ((source.x) + (target.x)) / 2;
+            const x = (source.x + target.x) / 2;
-            const y = ((source.y) + (target.y)) / 2;
+            const y = (source.y + target.y) / 2;
             ctx.save();
             ctx.translate(x, y);
 
-            const deltaY = (source.y) - (target.y);
+            const deltaY = source.y - target.y;
-            const deltaX = (source.x) - (target.x);
+            const deltaX = source.x - target.x;
 
             let angle = Math.atan2(deltaY, deltaX);
             let moveY = 2;

src/public/app/widgets/note_title.ts

@@ -94,7 +94,7 @@ export default class NoteTitleWidget extends NoteContextAwareWidget {
             || utils.isLaunchBarConfig(note.noteId)
             || this.noteContext?.viewScope?.viewMode !== "default";
 
-        this.$noteTitle.val(isReadOnly ? await this.noteContext?.getNavigationTitle() || "" : note.title);
+        this.$noteTitle.val(isReadOnly ? (await this.noteContext?.getNavigationTitle()) || "" : note.title);
         this.$noteTitle.prop("readonly", isReadOnly);
 
         this.setProtectedStatus(note);

src/public/app/widgets/note_tree.ts

@@ -159,11 +159,11 @@ interface CreateLauncherResponse {
     message: string;
     note: {
         noteId: string;
-    }
+    };
 }
 
 interface ExpandedSubtreeResponse {
-    branchIds: string[]
+    branchIds: string[];
 }
 
 interface Node extends Fancytree.NodeData {
@@ -180,7 +180,6 @@ interface RefreshContext {
 }
 
 export default class NoteTreeWidget extends NoteContextAwareWidget {
-
     private $tree!: JQuery<HTMLElement>;
     private $treeActions!: JQuery<HTMLElement>;
     private $treeSettingsButton!: JQuery<HTMLElement>;
@@ -425,10 +424,10 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
 
                 const activeNoteContext = appContext.tabManager.getActiveContext();
                 const opts: SetNoteOpts = {};
-                if (activeNoteContext.viewScope?.viewMode === "contextual-help") {
+                if (activeNoteContext?.viewScope?.viewMode === "contextual-help") {
                     opts.viewScope = activeNoteContext.viewScope;
                 }
-                await activeNoteContext.setNote(notePath, opts);
+                await activeNoteContext?.setNote(notePath, opts);
             },
             expand: (event, data) => this.setExpanded(data.node.data.branchId, true),
             collapse: (event, data) => this.setExpanded(data.node.data.branchId, false),
@@ -571,10 +570,13 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
             clones: {
                 highlightActiveClones: true
             },
-            enhanceTitle: async function (event: Event, data: {
+            enhanceTitle: async function (
+                event: Event,
+                data: {
                     node: Fancytree.FancytreeNode;
                     noteId: string;
-            }) {
+                }
+            ) {
                 const node = data.node;
 
                 if (!node.data.noteId) {
@@ -1756,6 +1758,6 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
 
         await ws.waitForMaxKnownEntityChangeId();
 
-        appContext.tabManager.getActiveContext().setNote(resp.note.noteId);
+        appContext.tabManager.getActiveContext()?.setNote(resp.note.noteId);
     }
 }

src/public/app/widgets/ribbon_widgets/book_properties.ts

@@ -126,7 +126,7 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
             return;
         }
 
-        if (![ "list", "grid", "calendar"].includes(type)) {
+        if (!["list", "grid", "calendar"].includes(type)) {
             throw new Error(t("book_properties.invalid_view_type", { type }));
         }
 

src/public/app/widgets/ribbon_widgets/note_map.ts

@@ -122,7 +122,7 @@ export default class NoteMapRibbonWidget extends NoteContextAwareWidget {
         const { top } = this.$widget[0].getBoundingClientRect();
 
         const height = ($(window).height() ?? 0) - top;
-        const width = (this.$widget.width() ?? 0);
+        const width = this.$widget.width() ?? 0;
 
         this.$widget.find(".note-map-container")
             .height(height)

src/public/app/widgets/ribbon_widgets/note_paths.ts

@@ -135,8 +135,7 @@ export default class NotePathsWidget extends NoteContextAwareWidget {
     }
 
     entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.getBranchRows().find((branch) => branch.noteId === this.noteId) ||
+        if (loadResults.getBranchRows().find((branch) => branch.noteId === this.noteId) || (this.noteId != null && loadResults.isNoteReloaded(this.noteId))) {
-            (this.noteId != null && loadResults.isNoteReloaded(this.noteId))) {
             this.refresh();
         }
     }

src/public/app/widgets/ribbon_widgets/note_properties.ts

@@ -46,6 +46,9 @@ export default class NotePropertiesWidget extends NoteContextAwareWidget {
     async refreshWithNote(note: FNote) {
         const pageUrl = note.getLabelValue("pageUrl");
 
-        this.$pageUrl.attr("href", pageUrl).attr("title", pageUrl).text(pageUrl ?? "");
+        this.$pageUrl
+            .attr("href", pageUrl)
+            .attr("title", pageUrl)
+            .text(pageUrl ?? "");
     }
 }

src/public/app/widgets/ribbon_widgets/search_definition.ts

@@ -246,7 +246,7 @@ export default class SearchDefinitionWidget extends NoteContextAwareWidget {
 
             await ws.waitForMaxKnownEntityChangeId();
 
-            await appContext.tabManager.getActiveContext().setNote(notePath);
+            await appContext.tabManager.getActiveContext()?.setNote(notePath);
             // Note the {{- notePathTitle}} in json file is not typo, it's unescaping
             // See https://www.i18next.com/translation-function/interpolation#unescape
             toastService.showMessage(t("search_definition.search_note_saved", { notePathTitle: await treeService.getNotePathTitle(notePath) }));

src/public/app/widgets/ribbon_widgets/similar_notes.ts

@@ -40,7 +40,6 @@ interface SimilarNote {
     noteId: string;
 }
 
-
 export default class SimilarNotesWidget extends NoteContextAwareWidget {
 
     private $similarNotesWrapper!: JQuery<HTMLElement>;

src/public/app/widgets/switch.ts

@@ -185,7 +185,7 @@ export default class SwitchWidget extends NoteContextAwareWidget {
 
     /** Gets or sets whether the switch is enabled. */
     get canToggle() {
-        return (!this.$switchButton.hasClass("disabled"));
+        return !this.$switchButton.hasClass("disabled");
     }
 
     set canToggle(isEnabled) {

src/public/app/widgets/sync_status.ts

@@ -79,7 +79,7 @@ export default class SyncStatusWidget extends BasicWidget {
     settings: {
         // TriliumNextTODO: narrow types and use TitlePlacement Type
         titlePlacement: string;
-    }
+    };
 
     constructor() {
         super();
@@ -106,7 +106,6 @@ export default class SyncStatusWidget extends BasicWidget {
             return;
         }
 
-
         Tooltip.getOrCreateInstance(this.$widget.find(`.sync-status-${className}`)[0], {
             html: true,
             placement: this.settings.titlePlacement,

src/public/app/widgets/tab_row.ts

@@ -15,7 +15,7 @@ const TAB_CONTAINER_MIN_WIDTH = 24;
 const TAB_CONTAINER_MAX_WIDTH = 240;
 const TAB_CONTAINER_LEFT_PADDING = 5;
 const NEW_TAB_WIDTH = 32;
-const MIN_FILLER_WIDTH = (isDesktop ? 50 : 15);
+const MIN_FILLER_WIDTH = isDesktop ? 50 : 15;
 const MARGIN_WIDTH = 5;
 
 const TAB_SIZE_SMALL = 84;

src/public/app/widgets/toc.ts

@@ -55,8 +55,8 @@ const TPL = `<div class="toc-widget">
 </div>`;
 
 interface Toc {
-    $toc: JQuery<HTMLElement>,
+    $toc: JQuery<HTMLElement>;
-    headingCount: number
+    headingCount: number;
 }
 
 export default class TocWidget extends RightPanelWidget {
@@ -89,8 +89,8 @@ export default class TocWidget extends RightPanelWidget {
             return false;
         }
 
-        const isHelpNote = (this.note.type === "doc" && this.note.noteId.startsWith("_help"));
+        const isHelpNote = this.note.type === "doc" && this.note.noteId.startsWith("_help");
-        const isTextNote = (this.note.type === "text");
+        const isTextNote = this.note.type === "text";
         const isNoteSupported = isTextNote || isHelpNote;
 
         return isNoteSupported
@@ -156,7 +156,7 @@ export default class TocWidget extends RightPanelWidget {
 
         const tocLabelValue = this.tocLabelValue;
 
-        const visible = (tocLabelValue === "" || tocLabelValue === "show") || headingCount >= (options.getInt("minTocHeadings") ?? 0);
+        const visible = tocLabelValue === "" || tocLabelValue === "show" || headingCount >= (options.getInt("minTocHeadings") ?? 0);
         this.toggleInt(visible);
         if (this.noteContext?.viewScope) {
             this.noteContext.viewScope.tocPreviousVisible = visible;

src/public/app/widgets/type_widgets/attachment_detail.ts

@@ -63,7 +63,7 @@ export default class AttachmentDetailTypeWidget extends TypeWidget {
 
         this.$linksWrapper.empty().append(
             t("attachment_detail.owning_note"),
-            (await linkService.createLink(this.noteId)),
+            await linkService.createLink(this.noteId),
             t("attachment_detail.you_can_also_open"),
             await linkService.createLink(this.noteId, {
                 title: t("attachment_detail.list_of_all_attachments"),
@@ -74,7 +74,7 @@ export default class AttachmentDetailTypeWidget extends TypeWidget {
             $helpButton
         );
 
-        const attachment = (this.attachmentId) ? await froca.getAttachment(this.attachmentId, true) : null;
+        const attachment = this.attachmentId ? await froca.getAttachment(this.attachmentId, true) : null;
 
         if (!attachment) {
             this.$wrapper.html("<strong>" + t("attachment_detail.attachment_deleted") + "</strong>");

src/public/app/widgets/type_widgets/attachment_list.ts

@@ -66,7 +66,7 @@ export default class AttachmentListTypeWidget extends TypeWidget {
                     .text(t("attachment_list.upload_attachments"))
                     .on("click", () => {
                         if (this.noteId) {
-                            this.triggerCommand("showUploadAttachmentsDialog", { noteId: this.noteId })
+                            this.triggerCommand("showUploadAttachmentsDialog", { noteId: this.noteId });
                         }
                     }),
                 $helpButton

src/public/app/widgets/type_widgets/book.ts

@@ -36,9 +36,7 @@ export default class BookTypeWidget extends TypeWidget {
     }
 
     async doRefresh(note: FNote) {
-        this.$helpNoChildren.toggle(
+        this.$helpNoChildren.toggle(!this.note?.hasChildren() && this.note?.getAttributeValue("label", "viewType") !== "calendar");
-            !this.note?.hasChildren()
-            && this.note?.getAttributeValue("label", "viewType") !== "calendar");
     }
 
     entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {

src/public/app/widgets/type_widgets/canvas.ts

@@ -59,9 +59,9 @@ const TPL = `
 `;
 
 interface CanvasContent {
-    elements: ExcalidrawElement[],
+    elements: ExcalidrawElement[];
-    files: BinaryFileData[],
+    files: BinaryFileData[];
-    appState: Partial<AppState>
+    appState: Partial<AppState>;
 }
 
 interface AttachmentMetadata {
@@ -198,7 +198,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
         }
         (window.process.env as any).PREACT = false;
 
-        const excalidraw = (await import("@excalidraw/excalidraw"));
+        const excalidraw = await import("@excalidraw/excalidraw");
         this.excalidrawLib = excalidraw;
 
         const { createRoot } = await import("react-dom/client");
@@ -476,7 +476,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
     createExcalidrawReactApp(react: typeof React, excalidrawComponent: React.MemoExoticComponent<(props: ExcalidrawProps) => JSX.Element>) {
         const excalidrawWrapperRef = react.useRef<HTMLElement>(null);
         this.excalidrawWrapperRef = excalidrawWrapperRef;
-        const [dimensions, setDimensions] = react.useState<{ width?: number, height?: number}>({
+        const [dimensions, setDimensions] = react.useState<{ width?: number; height?: number }>({
             width: undefined,
             height: undefined
         });
@@ -541,10 +541,6 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
                     excalidrawAPI: (api: ExcalidrawImperativeAPI) => {
                         this.excalidrawApi = api;
                     },
-                    onPaste: (data: unknown, event: unknown) => {
-                        console.log("Verbose: excalidraw internal paste. No trilium action implemented.", data, event);
-                        return false;
-                    },
                     onLibraryChange: () => {
                         this.libraryChanged = true;
 

src/public/app/widgets/type_widgets/ckeditor/toolbars.ts

@@ -7,91 +7,78 @@ export function buildConfig() {
         image: {
             styles: {
                 options: [
-                    'inline',
+                    "inline",
-                    'alignBlockLeft',
+                    "alignBlockLeft",
-                    'alignCenter',
+                    "alignCenter",
-                    'alignBlockRight',
+                    "alignBlockRight",
-                    'alignLeft',
+                    "alignLeft",
-                    'alignRight',
+                    "alignRight",
-                    'full', // full and side are for BC since the old images have been created with these styles
+                    "full", // full and side are for BC since the old images have been created with these styles
-                    'side'
+                    "side"
                 ]
             },
             resizeOptions: [
                 {
-                    name: 'imageResize:original',
+                    name: "imageResize:original",
                     value: null,
-                    icon: 'original'
+                    icon: "original"
                 },
                 {
-                    name: 'imageResize:25',
+                    name: "imageResize:25",
-                    value: '25',
+                    value: "25",
-                    icon: 'small'
+                    icon: "small"
                 },
                 {
-                    name: 'imageResize:50',
+                    name: "imageResize:50",
-                    value: '50',
+                    value: "50",
-                    icon: 'medium'
+                    icon: "medium"
                 },
                 {
-                    name: 'imageResize:75',
+                    name: "imageResize:75",
-                    value: '75',
+                    value: "75",
-                    icon: 'medium'
+                    icon: "medium"
                 }
             ],
             toolbar: [
                 // Image styles, see https://ckeditor.com/docs/ckeditor5/latest/features/images/images-styles.html#demo.
-                'imageStyle:inline',
+                "imageStyle:inline",
-                'imageStyle:alignCenter',
+                "imageStyle:alignCenter",
                 {
                     name: "imageStyle:wrapText",
                     title: "Wrap text",
-                    items: [
+                    items: ["imageStyle:alignLeft", "imageStyle:alignRight"],
-                        'imageStyle:alignLeft',
+                    defaultItem: "imageStyle:alignRight"
-                        'imageStyle:alignRight',
-                    ],
-                    defaultItem: 'imageStyle:alignRight'
                 },
                 {
                     name: "imageStyle:block",
                     title: "Block align",
-                    items: [
+                    items: ["imageStyle:alignBlockLeft", "imageStyle:alignBlockRight"],
-                        'imageStyle:alignBlockLeft',
+                    defaultItem: "imageStyle:alignBlockLeft"
-                        'imageStyle:alignBlockRight'
-                    ],
-                    defaultItem: "imageStyle:alignBlockLeft",
                 },
-                '|',
+                "|",
-                'imageResize:25',
+                "imageResize:25",
-                'imageResize:50',
+                "imageResize:50",
-                'imageResize:original',
+                "imageResize:original",
-                '|',
+                "|",
-                'toggleImageCaption'
+                "toggleImageCaption"
             ],
             upload: {
-                types: [ 'jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff', 'svg', 'svg+xml', 'avif' ]
+                types: ["jpeg", "png", "gif", "bmp", "webp", "tiff", "svg", "svg+xml", "avif"]
             }
         },
         heading: {
             options: [
-                { model: 'paragraph' as const, title: 'Paragraph', class: 'ck-heading_paragraph' },
+                { model: "paragraph" as const, title: "Paragraph", class: "ck-heading_paragraph" },
                 // // heading1 is not used since that should be a note's title
-                { model: 'heading2' as const, view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
+                { model: "heading2" as const, view: "h2", title: "Heading 2", class: "ck-heading_heading2" },
-                { model: 'heading3' as const, view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
+                { model: "heading3" as const, view: "h3", title: "Heading 3", class: "ck-heading_heading3" },
-                { model: 'heading4' as const, view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
+                { model: "heading4" as const, view: "h4", title: "Heading 4", class: "ck-heading_heading4" },
-                { model: 'heading5' as const, view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
+                { model: "heading5" as const, view: "h5", title: "Heading 5", class: "ck-heading_heading5" },
-                { model: 'heading6' as const, view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
+                { model: "heading6" as const, view: "h6", title: "Heading 6", class: "ck-heading_heading6" }
             ]
         },
         table: {
-            contentToolbar: [
+            contentToolbar: ["tableColumn", "tableRow", "mergeTableCells", "tableProperties", "tableCellProperties", "toggleTableCaption"]
-                'tableColumn',
-                'tableRow',
-                'mergeTableCells',
-                'tableProperties',
-                'tableCellProperties',
-                'toggleTableCaption'
-            ]
         },
         list: {
             properties: {
@@ -101,17 +88,17 @@ export function buildConfig() {
             }
         },
         link: {
-            defaultProtocol: 'https://',
+            defaultProtocol: "https://",
             allowedProtocols: ALLOWED_PROTOCOLS
         },
         // This value must be kept in sync with the language defined in webpack.config.js.
-        language: 'en'
+        language: "en"
-    }
+    };
 }
 
 export function buildToolbarConfig(isClassicToolbar: boolean) {
     if (isClassicToolbar) {
-        const multilineToolbar = utils.isDesktop() && options.get("textNoteEditorMultilineToolbar") === "true"
+        const multilineToolbar = utils.isDesktop() && options.get("textNoteEditorMultilineToolbar") === "true";
         return buildClassicToolbar(multilineToolbar);
     } else {
         return buildFloatingToolbar();
@@ -123,101 +110,92 @@ function buildClassicToolbar(multilineToolbar: boolean) {
     return {
         toolbar: {
             items: [
-                'heading', 'fontSize',
+                "heading",
-                '|',
+                "fontSize",
-                'bold', 'italic',
+                "|",
+                "bold",
+                "italic",
                 {
                     label: "Text formatting",
                     icon: "text",
-                    items: [
+                    items: ["underline", "strikethrough", "superscript", "subscript", "code"]
-                        'underline',
-                        'strikethrough',
-                        'superscript',
-                        'subscript',
-                        'code',
-                    ],
                 },
-                '|',
+                "|",
-                'fontColor', 'fontBackgroundColor', 'removeFormat',
+                "fontColor",
-                '|',
+                "fontBackgroundColor",
-                'bulletedList', 'numberedList', 'todoList',
+                "removeFormat",
-                '|',
+                "|",
-                'blockQuote', 'insertTable', 'codeBlock', 'footnote',
+                "bulletedList",
+                "numberedList",
+                "todoList",
+                "|",
+                "blockQuote",
+                "insertTable",
+                "codeBlock",
+                "footnote",
                 {
                     label: "Insert",
                     icon: "plus",
-                    items: [
+                    items: ["imageUpload", "|", "link", "internallink", "includeNote", "|", "specialCharacters", "math", "mermaid", "horizontalLine", "pageBreak"]
-                        'imageUpload',
-                        '|',
-                        'link',
-                        'internallink',
-                        'includeNote',
-                        '|',
-                        'specialCharacters',
-                        'math',
-                        'mermaid',
-                        'horizontalLine',
-                        'pageBreak'
-                    ]
                 },
-                '|',
+                "|",
-                'outdent', 'indent',
+                "outdent",
-                '|',
+                "indent",
-                'markdownImport', 'cuttonote', 'findAndReplace'
+                "|",
+                "markdownImport",
+                "cuttonote",
+                "findAndReplace"
             ],
             shouldNotGroupWhenFull: multilineToolbar
         }
-    }
+    };
 }
 
 function buildFloatingToolbar() {
     return {
         toolbar: {
             items: [
-				'fontSize',
+                "fontSize",
-				'bold',
+                "bold",
-				'italic',
+                "italic",
-				'underline',
+                "underline",
-				'strikethrough',
+                "strikethrough",
-				'superscript',
+                "superscript",
-				'subscript',
+                "subscript",
-				'fontColor',
+                "fontColor",
-				'fontBackgroundColor',
+                "fontBackgroundColor",
-				'code',
+                "code",
-				'link',
+                "link",
-				'removeFormat',
+                "removeFormat",
-				'internallink',
+                "internallink",
-				'cuttonote'
+                "cuttonote"
             ]
         },
 
         blockToolbar: [
-			'heading',
+            "heading",
-			'|',
+            "|",
-			'bulletedList', 'numberedList', 'todoList',
+            "bulletedList",
-			'|',
+            "numberedList",
-			'blockQuote', 'codeBlock', 'insertTable',
+            "todoList",
-			'footnote',
+            "|",
+            "blockQuote",
+            "codeBlock",
+            "insertTable",
+            "footnote",
             {
                 label: "Insert",
                 icon: "plus",
-				items: [
+                items: ["internallink", "includeNote", "|", "math", "mermaid", "horizontalLine", "pageBreak"]
-					'internallink',
-					'includeNote',
-					'|',
-					'math',
-					'mermaid',
-					'horizontalLine',
-					'pageBreak'
-				]
             },
-			'|',
+            "|",
-			'outdent', 'indent',
+            "outdent",
-			'|',
+            "indent",
-			'imageUpload',
+            "|",
-			'markdownImport',
+            "imageUpload",
-			'specialCharacters',
+            "markdownImport",
-			'findAndReplace'
+            "specialCharacters",
+            "findAndReplace"
         ]
     };
 }

src/public/app/widgets/type_widgets/content_widget.ts

@@ -15,7 +15,7 @@ import CodeMimeTypesOptions from "./options/code_notes/code_mime_types.js";
 import ImageOptions from "./options/images/images.js";
 import SpellcheckOptions from "./options/spellcheck.js";
 import PasswordOptions from "./options/password/password.js";
-import ProtectedSessionTimeoutOptions from "./options/password/protected_session_timeout.js"
+import ProtectedSessionTimeoutOptions from "./options/password/protected_session_timeout.js";
 import EtapiOptions from "./options/etapi.js";
 import BackupOptions from "./options/backup.js";
 import SyncOptions from "./options/sync.js";

src/public/app/widgets/type_widgets/editable_text.js

@@ -313,7 +313,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
         this.watchdog?.editor.editing.view.focus();
     }
 
-    show() {}
+    show() { }
 
     getEditor() {
         return this.watchdog?.editor;
@@ -360,14 +360,14 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
         this.addTextToEditor(text);
     }
 
-    async addLink(notePath, linkTitle) {
+    async addLink(notePath, linkTitle, externalLink = false) {
         await this.initialized;
 
         if (linkTitle) {
             if (this.hasSelection()) {
-                this.watchdog.editor.execute("link", `#${notePath}`);
+                this.watchdog.editor.execute("link", externalLink ? `${notePath}` : `#${notePath}`);
             } else {
-                await this.addLinkToEditor(`#${notePath}`, linkTitle);
+                await this.addLinkToEditor(externalLink ? `${notePath}` : `#${notePath}`, linkTitle);
             }
         } else {
             this.watchdog.editor.execute("referenceLink", { href: "#" + notePath });

src/public/app/widgets/type_widgets/geo_map.ts

@@ -1,7 +1,7 @@
 import { GPX, Marker, type LatLng, type LeafletMouseEvent } from "leaflet";
 import type FNote from "../../entities/fnote.js";
 import GeoMapWidget, { type InitCallback, type Leaflet } from "../geo_map.js";
-import TypeWidget from "./type_widget.js"
+import TypeWidget from "./type_widget.js";
 import server from "../../services/server.js";
 import toastService from "../../services/toast.js";
 import dialogService from "../../services/dialog.js";
@@ -75,21 +75,21 @@ const TPL = `\
 
 const LOCATION_ATTRIBUTE = "geolocation";
 const CHILD_NOTE_ICON = "bx bx-pin";
-const DEFAULT_COORDINATES: [ number, number ] = [ 3.878638227135724, 446.6630455551659 ];
+const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
 const DEFAULT_ZOOM = 2;
 
 interface MapData {
     view?: {
-        center?: LatLng | [ number, number ];
+        center?: LatLng | [number, number];
         zoom?: number;
-    }
+    };
 }
 
 // TODO: Deduplicate
 interface CreateChildResponse {
     note: {
         noteId: string;
-    }
+    };
 }
 
 enum State {
@@ -220,7 +220,7 @@ export default class GeoMapTypeWidget extends TypeWidget {
             return;
         }
 
-        const [ lat, lng ] = latLng.split(",", 2).map((el) => parseFloat(el));
+        const [lat, lng] = latLng.split(",", 2).map((el) => parseFloat(el));
         const L = this.L;
         const icon = this.#buildIcon(note.getIcon(), note.getColorClass(), note.title);
 
@@ -228,10 +228,10 @@ export default class GeoMapTypeWidget extends TypeWidget {
             icon,
             draggable: true,
             autoPan: true,
-            autoPanSpeed: 5,
+            autoPanSpeed: 5
         })
             .addTo(map)
-            .on("moveend", e => {
+            .on("moveend", (e) => {
                 this.moveMarker(note.noteId, (e.target as Marker).getLatLng());
             });
         marker.on("mousedown", ({ originalEvent }) => {
@@ -264,9 +264,9 @@ export default class GeoMapTypeWidget extends TypeWidget {
                 <img class="icon-shadow" src="${asset_path}/node_modules/leaflet/dist/images/marker-shadow.png" />
                 <span class="bx ${bxIconClass} ${colorClass}"></span>
                 <span class="title-label">${title}</span>`,
-            iconSize: [ 25, 41 ],
+            iconSize: [25, 41],
-            iconAnchor: [ 12, 41 ]
+            iconAnchor: [12, 41]
-        })
+        });
     }
 
     #changeState(newState: State) {
@@ -296,7 +296,7 @@ export default class GeoMapTypeWidget extends TypeWidget {
     }
 
     async moveMarker(noteId: string, latLng: LatLng | null) {
-        const value = (latLng ? [latLng.lat, latLng.lng].join(",") : "");
+        const value = latLng ? [latLng.lat, latLng.lng].join(",") : "";
         await attributes.setLabel(noteId, LOCATION_ATTRIBUTE, value);
     }
 
@@ -361,7 +361,7 @@ export default class GeoMapTypeWidget extends TypeWidget {
         // If any of note has its location attribute changed.
         // TODO: Should probably filter by parent here as well.
         const attributeRows = loadResults.getAttributeRows();
-        if (attributeRows.find((at) => [ LOCATION_ATTRIBUTE, "color" ].includes(at.name ?? ""))) {
+        if (attributeRows.find((at) => [LOCATION_ATTRIBUTE, "color"].includes(at.name ?? ""))) {
             this.#reloadMarkers();
         }
     }

src/public/app/widgets/type_widgets/mind_map.ts

@@ -259,7 +259,7 @@ export default class MindMapWidget extends TypeWidget {
         return await this.mind.exportSvg().text();
     }
 
-    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded"> ) {
+    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         if (this.noteId && loadResults.isNoteReloaded(this.noteId)) {
             this.refresh();
         }

src/public/app/widgets/type_widgets/options/appearance/code_block.ts

@@ -60,7 +60,7 @@ interface Theme {
     val: string;
 }
 
-type Response = Record<string, Theme[]>
+type Response = Record<string, Theme[]>;
 
 /**
  * Contains appearance settings for code blocks within text notes, such as the theme for the syntax highlighter.

src/public/app/widgets/type_widgets/options/appearance/electron_integration.ts

@@ -32,7 +32,7 @@ const TPL = `
         </label>
     </div>
 
-    <button class="btn btn-micro restart-app-button">${t("electron_integration.restart-app-button")}</button>
+    <button class="btn btn-secondary btn-micro restart-app-button">${t("electron_integration.restart-app-button")}</button>
 </div>
 `;
 

src/public/app/widgets/type_widgets/options/appearance/theme.ts

@@ -94,10 +94,12 @@ export default class ThemeOptions extends OptionsWidget {
         this.$themeSelect.empty();
 
         for (const theme of themes) {
-            this.$themeSelect.append($("<option>")
+            this.$themeSelect.append(
+                $("<option>")
                     .attr("value", theme.val)
                     .attr("data-note-id", theme.noteId || "")
-                .text(theme.title));
+                    .text(theme.title)
+            );
         }
 
         this.$themeSelect.val(options.theme);

src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.ts

@@ -97,9 +97,8 @@ export default class CodeMimeTypesOptions extends OptionsWidget {
         const checkbox = $(`<label class="tn-checkbox">`)
             .append($('<input type="checkbox" class="form-check-input">').attr("id", id).attr("data-mime-type", mimeType.mime).prop("checked", mimeType.enabled))
             .on("change", () => this.save())
-            .append(mimeType.title)
+            .append(mimeType.title);
 
-        return $("<li>")
+        return $("<li>").append(checkbox);
-            .append(checkbox);
     }
 }

src/public/app/widgets/type_widgets/options/other/html_import_tags.ts

@@ -102,12 +102,19 @@ export const DEFAULT_ALLOWED_TAGS = [
 ];
 
 const TPL = `
-<div class="options-section">
+<div class="html-import-tags-settings options-section">
+    <style>
+        .html-import-tags-settings .allowed-html-tags {
+            height: 150px;
+            margin-bottom: 12px;
+            font-family: monospace;
+        }
+    </style>
     <h4>${t("import.html_import_tags.title")}</h4>
 
     <p>${t("import.html_import_tags.description")}</p>
 
-    <textarea class="allowed-html-tags form-control" style="height: 150px; font-family: monospace;"
+    <textarea class="allowed-html-tags form-control" spellcheck="false"
               placeholder="${t("import.html_import_tags.placeholder")}"></textarea>
 
     <div>

src/public/app/widgets/type_widgets/options/other/note_erasure_timeout.ts

@@ -31,7 +31,7 @@ export default class NoteErasureTimeoutOptions extends TimeSelector {
         const $timeSelector = this.$widget;
         // inject TimeSelector widget template
         this.$widget = $(TPL);
-        this.$widget.find("#time-selector-placeholder").replaceWith($timeSelector)
+        this.$widget.find("#time-selector-placeholder").replaceWith($timeSelector);
 
         this.$eraseDeletedNotesButton = this.$widget.find("#erase-deleted-notes-now-button");
 

src/public/app/widgets/type_widgets/options/other/revisions_snapshot_interval.ts

@@ -26,6 +26,6 @@ export default class RevisionsSnapshotIntervalOptions extends TimeSelector {
         const $timeSelector = this.$widget;
         // inject TimeSelector widget template
         this.$widget = $(TPL);
-        this.$widget.find("#time-selector-placeholder").replaceWith($timeSelector)
+        this.$widget.find("#time-selector-placeholder").replaceWith($timeSelector);
     }
 }

src/public/app/widgets/type_widgets/options/other/share_settings.ts

@@ -29,8 +29,8 @@ export default class ShareSettingsOptions extends OptionsWidget {
         this.$widget = $(TPL);
         this.contentSized();
 
-        this.$shareRootCheck = this.$widget.find('.share-root-check');
+        this.$shareRootCheck = this.$widget.find(".share-root-check");
-        this.$shareRootStatus = this.$widget.find('.share-root-status');
+        this.$shareRootStatus = this.$widget.find(".share-root-status");
 
         // Add change handlers for both checkboxes
         this.$widget.find('input[type="checkbox"]').on("change", (e: JQuery.ChangeEvent) => {
@@ -38,7 +38,7 @@ export default class ShareSettingsOptions extends OptionsWidget {
 
             // Show/hide share root status section based on redirectBareDomain checkbox
             const target = e.target as HTMLInputElement;
-            if (target.name === 'redirectBareDomain') {
+            if (target.name === "redirectBareDomain") {
                 this.$shareRootCheck.toggle(target.checked);
                 if (target.checked) {
                     this.checkShareRoot();
@@ -47,7 +47,7 @@ export default class ShareSettingsOptions extends OptionsWidget {
         });
 
         // Add click handler for check share root button
-        this.$widget.find('.check-share-root').on("click", () => this.checkShareRoot());
+        this.$widget.find(".check-share-root").on("click", () => this.checkShareRoot());
     }
 
     async optionsLoaded(options: OptionMap) {
@@ -62,28 +62,26 @@ export default class ShareSettingsOptions extends OptionsWidget {
     }
 
     async checkShareRoot() {
-        const $button = this.$widget.find('.check-share-root');
+        const $button = this.$widget.find(".check-share-root");
-        $button.prop('disabled', true);
+        $button.prop("disabled", true);
 
         try {
             const shareRootNotes = await searchService.searchForNotes("#shareRoot");
-            const sharedShareRootNote = shareRootNotes.find(note => note.isShared());
+            const sharedShareRootNote = shareRootNotes.find((note) => note.isShared());
 
             if (sharedShareRootNote) {
                 this.$shareRootStatus
-                    .removeClass('text-danger')
+                    .removeClass("text-danger")
-                    .addClass('text-success')
+                    .addClass("text-success")
-                    .text(t("share.share_root_found", {noteTitle: sharedShareRootNote.title}));
+                    .text(t("share.share_root_found", { noteTitle: sharedShareRootNote.title }));
             } else {
                 this.$shareRootStatus
-                    .removeClass('text-success')
+                    .removeClass("text-success")
-                    .addClass('text-danger')
+                    .addClass("text-danger")
-                    .text(shareRootNotes.length > 0
+                    .text(shareRootNotes.length > 0 ? t("share.share_root_not_shared", { noteTitle: shareRootNotes[0].title }) : t("share.share_root_not_found"));
-                        ? t("share.share_root_not_shared", {noteTitle: shareRootNotes[0].title})
-                        : t("share.share_root_not_found"));
             }
         } finally {
-            $button.prop('disabled', false);
+            $button.prop("disabled", false);
         }
     }
 

src/public/app/widgets/type_widgets/options/password/protected_session_timeout.ts

@@ -25,6 +25,6 @@ export default class ProtectedSessionTimeoutOptions extends TimeSelector {
         const $timeSelector = this.$widget;
         // inject TimeSelector widget template
         this.$widget = $(TPL);
-        this.$widget.find("#time-selector-placeholder").replaceWith($timeSelector)
+        this.$widget.find("#time-selector-placeholder").replaceWith($timeSelector);
     }
 }

src/public/app/widgets/type_widgets/options/time_selector.ts

@@ -54,7 +54,7 @@ export default class TimeSelector extends OptionsWidget {
         this.optionValueId = options.optionValueId;
         this.optionTimeScaleId = options.optionTimeScaleId;
         this.includedTimeScales = options.includedTimeScales || new Set(["seconds", "minutes", "hours", "days"]);
-        this.minimumSeconds = options.minimumSeconds || 0
+        this.minimumSeconds = options.minimumSeconds || 0;
     }
 
     doRender() {
@@ -131,10 +131,10 @@ export default class TimeSelector extends OptionsWidget {
 
     private setInternalTimeInSeconds(time: number) {
         if (time < this.minimumSeconds) {
-            toastService.showError(t("time_selector.minimum_input", {minimumSeconds: this.minimumSeconds}));
+            toastService.showError(t("time_selector.minimum_input", { minimumSeconds: this.minimumSeconds }));
-            return this.internalTimeInSeconds = this.minimumSeconds;
+            return (this.internalTimeInSeconds = this.minimumSeconds);
         }
-        return this.internalTimeInSeconds = time;
+        return (this.internalTimeInSeconds = time);
     }
 
 }

src/public/app/widgets/type_widgets/task_list.ts

@@ -87,7 +87,7 @@ const TPL = `
 `;
 
 function buildTasks(tasks: FTask[]) {
-    let html = '';
+    let html = "";
 
     const now = dayjs();
     const dateFormat = "DD-MM-YYYY";
@@ -137,7 +137,9 @@ export default class TaskListWidget extends TypeWidget {
     private $taskContainer!: JQuery<HTMLElement>;
     private $addNewTask!: JQuery<HTMLElement>;
 
-    static getType() { return "taskList" }
+    static getType() {
+        return "taskList";
+    }
 
     doRender() {
         this.$widget = $(TPL);
@@ -231,8 +233,7 @@ export default class TaskListWidget extends TypeWidget {
             return [];
         }
 
-        return (await froca.getTasks(this.noteId))
+        return (await froca.getTasks(this.noteId)).toSorted((a, b) => {
-            .toSorted((a, b) => {
             // Sort by due date, closest date first.
             if (!a.dueDate) {
                 return 1;

src/public/app/widgets/view_widgets/calendar_view.ts

@@ -68,7 +68,7 @@ const TPL = `
 interface CreateChildResponse {
     note: {
         noteId: string;
-    }
+    };
 }
 
 export default class CalendarView extends ViewMode {
@@ -126,7 +126,7 @@ export default class CalendarView extends ViewMode {
             weekNumbers: this.parentNote.hasAttribute("label", "calendar:weekNumbers"),
             locale: await CalendarView.#getLocale(),
             height: "100%",
-            eventContent: (e => {
+            eventContent: (e) => {
                 let html = "";
                 const { iconClass, promotedAttributes } = e.event.extendedProps;
 
@@ -138,7 +138,7 @@ export default class CalendarView extends ViewMode {
 
                 // Promoted attributes
                 if (promotedAttributes) {
-                    for (const [ name, value ] of Object.entries(promotedAttributes)) {
+                    for (const [name, value] of Object.entries(promotedAttributes)) {
                         html += `\
                         <div class="promoted-attribute">
                             <span class="promoted-attribute-name">${name}</span>: <span class="promoted-attribute-value">${value}</span>
@@ -147,7 +147,7 @@ export default class CalendarView extends ViewMode {
                 }
 
                 return { html };
-            }),
+            },
             dateClick: async (e) => {
                 if (!this.isCalendarRoot) {
                     return;
@@ -155,7 +155,7 @@ export default class CalendarView extends ViewMode {
 
                 const note = await date_notes.getDayNote(e.dateStr);
                 if (note) {
-                    appContext.tabManager.getActiveContext().setNote(note.noteId);
+                    appContext.tabManager.getActiveContext()?.setNote(note.noteId);
                 }
             }
         });
@@ -260,7 +260,7 @@ export default class CalendarView extends ViewMode {
             // TODO: Deduplicate get type.
             const dateNotesForMonth = await server.get<Record<string, string>>(`special-notes/notes-for-month/${month}?calendarRoot=${this.parentNote.noteId}`);
             const dateNoteIds = Object.values(dateNotesForMonth);
-            allDateNoteIds = [ ...allDateNoteIds, ...dateNoteIds ];
+            allDateNoteIds = [...allDateNoteIds, ...dateNoteIds];
         }
 
         // Request all the date notes.
@@ -379,7 +379,7 @@ export default class CalendarView extends ViewMode {
         const result: Record<string, string> = {};
 
         for (const promotedAttribute of filteredPromotedAttributes) {
-            const [ type, name ] = promotedAttribute.name.split(":", 2);
+            const [type, name] = promotedAttribute.name.split(":", 2);
             const definition = promotedAttribute.getDefinition();
 
             if (definition.multiplicity !== "single") {
@@ -411,7 +411,7 @@ export default class CalendarView extends ViewMode {
             if (customTitleValue.startsWith("#")) {
                 const labelValue = note.getAttributeValue("label", attributeName);
                 if (labelValue) {
-                    return [ labelValue ];
+                    return [labelValue];
                 }
             } else if (allowRelations && customTitleValue.startsWith("~")) {
                 const relations = note.getRelations(attributeName);
@@ -432,7 +432,7 @@ export default class CalendarView extends ViewMode {
             }
         }
 
-        return [ note.title ];
+        return [note.title];
     }
 
     static #formatDateToLocalISO(date: Date | null | undefined) {
@@ -442,7 +442,7 @@ export default class CalendarView extends ViewMode {
 
         const offset = date.getTimezoneOffset();
         const localDate = new Date(date.getTime() - offset * 60 * 1000);
-        return localDate.toISOString().split('T')[0];
+        return localDate.toISOString().split("T")[0];
     }
 
     static #offsetDate(date: Date | string | null | undefined, offset: number) {

src/public/stylesheets/calendar.css

@@ -75,7 +75,6 @@
     flex-wrap: wrap;
 }
 
-
 .calendar-dropdown-widget .calendar-week span {
     flex-direction: column;
     flex: 0 0 14.28%;

src/public/stylesheets/print.css

@@ -165,6 +165,11 @@ span[style] {
     overflow: unset !important;
 }
 
+/* TODO: This will break once we translate the language */
+.ck-content pre[data-language="Auto-detected"]:after {
+    display: none !important;
+}
+
 /*
  * Code note specific fixes.
  */
@@ -202,9 +207,8 @@ span[style] {
 
 @supports selector(.todo-list__label__description:has(*)) and (height: 1lh) {
     .note-detail-printable .todo-list__label__description {
-
         /* The percentage of the line height that the check box occupies */
-        --box-ratio: .75;
+        --box-ratio: 0.75;
         /* The size of the gap between the check box and the caption */
         --box-text-gap: 0.25em;
 
@@ -301,9 +305,16 @@ blockquote {
 pre > code {
     widows: 6;
     orphans: 6;
+    overflow: auto;
+    white-space: pre-wrap !important;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     page-break-after: avoid;
     break-after: avoid;
 }

src/public/stylesheets/theme-next-dark.css

@@ -32,7 +32,7 @@
     --cmd-button-icon-color: white;
     --cmd-button-keyboard-shortcut-background: #0000004d;
     --cmd-button-keyboard-shortcut-color: white;
-    --cmd-button-disabled-opacity: .5;
+    --cmd-button-disabled-opacity: 0.5;
 
     --icon-button-color: currentColor;
     --icon-button-hover-background: var(--hover-item-background-color);

src/public/stylesheets/theme-next-light.css

@@ -32,7 +32,7 @@
     --cmd-button-icon-color: black;
     --cmd-button-keyboard-shortcut-background: #00000017;
     --cmd-button-keyboard-shortcut-color: black;
-    --cmd-button-disabled-opacity: .5;
+    --cmd-button-disabled-opacity: 0.5;
 
     --icon-button-color: currentColor;
     --icon-button-hover-background: var(--hover-item-background-color);

src/public/stylesheets/theme-next/base.css

@@ -61,7 +61,7 @@
     --help-backdrop-blur: 10px;
 
     --icon-button-size: 32px;
-    --icon-button-icon-ratio: .65;
+    --icon-button-icon-ratio: 0.65;
 
     /* Theme capabilities */
     --tab-note-icons: true;

src/public/stylesheets/theme-next/forms.css

@@ -30,11 +30,11 @@ button.btn.btn-primary:active,
 button.btn.btn-secondary:active,
 button.btn.btn-sm:not(.select-button):active,
 button.btn.btn-success:active {
-    opacity: .85;
+    opacity: 0.85;
     box-shadow: unset;
     background: var(--cmd-button-background-color) !important;
     color: var(--cmd-button-text-color) !important;
-    transform: scale(.95);
+    transform: scale(0.95);
 }
 
 button.btn.btn-primary:disabled,
@@ -57,7 +57,7 @@ button.btn.btn-secondary span.bx,
 button.btn.btn-sm span.bx,
 button.btn.btn-success span.bx {
     color: var(--cmd-button-icon-color);
-    padding-right: .35em;
+    padding-right: 0.35em;
     font-size: 1.2em;
 }
 
@@ -66,12 +66,12 @@ button.btn.btn-primary kbd,
 button.btn.btn-secondary kbd,
 button.btn.btn-sm kbd,
 button.btn.btn-success kbd {
-    margin-left: .5em;
+    margin-left: 0.5em;
     background: var(--cmd-button-keyboard-shortcut-background);
     color: var(--cmd-button-keyboard-shortcut-color);
-    font-size: .6em;
+    font-size: 0.6em;
     text-transform: uppercase;
-    letter-spacing: .5pt;
+    letter-spacing: 0.5pt;
 }
 
 /*
@@ -101,7 +101,7 @@ button.btn.btn-success kbd {
     --icon-button-hover-background: var(--tab-close-button-hover-background);
     --icon-button-hover-color: var(--tab-close-button-hover-color);
     --icon-button-size: 24px;
-    --icon-button-icon-ratio: .8;
+    --icon-button-icon-ratio: 0.8;
 
     border-radius: 50%;
 }
@@ -124,7 +124,7 @@ button.btn.btn-success kbd {
 
 :root .icon-action:not(.global-menu-button):active::before,
 :root .tn-tool-button:active::before {
-    transform: scale(.85);
+    transform: scale(0.85);
 }
 
 :root .icon-action:not(.global-menu-button):focus-visible,
@@ -137,7 +137,7 @@ button.btn.btn-success kbd {
  */
 
 input:disabled {
-    opacity: .33;
+    opacity: 0.33;
 }
 
 /* Text boxes */
@@ -190,7 +190,8 @@ textarea:focus,
     outline-offset: 0;
     background: var(--input-focus-background);
     color: var(--input-focus-color);
-    transition: outline-color 50ms linear,
+    transition:
+        outline-color 50ms linear,
         outline-offset 200ms ease-out;
 }
 
@@ -229,12 +230,12 @@ input::selection,
     outline: 3px solid var(--input-focus-outline-color);
     outline-offset: 0;
     background: var(--input-focus-background);
-    transition: outline-color 50ms linear,
+    transition:
+        outline-color 50ms linear,
         outline-offset 200ms ease-out;
 }
 
-.input-group input
+.input-group input .input-group input:hover,
-.input-group input:hover,
 .input-group input:focus,
 .input-group .form-control,
 .input-group .form-control:hover,
@@ -277,7 +278,7 @@ input::selection,
 }
 
 .input-group a.disabled {
-    opacity: .5;
+    opacity: 0.5;
     /* Workaround to set the "background" property. */
     --button-disabled-background-color: transparent;
     --button-disabled-text-color: var(--input-action-button-color);
@@ -319,8 +320,7 @@ select.form-control,
     outline: 3px solid transparent;
     outline-offset: 6px;
     padding-right: calc(15px + 1.5rem);
-    background: var(--input-background-color)
+    background: var(--input-background-color) var(--dropdown-arrow);
-                var(--dropdown-arrow);
     color: var(--input-text-color);
     border: unset;
     border-radius: 0.375rem;
@@ -330,8 +330,7 @@ select:hover,
 select.form-select:hover,
 select.form-control:hover,
 .select-button.dropdown-toggle.btn:hover {
-    background: var(--input-hover-background)
+    background: var(--input-hover-background) var(--dropdown-arrow);
-                var(--dropdown-arrow);
     color: var(--input-hover-color);
 }
 
@@ -347,10 +346,10 @@ select.form-control:focus,
     box-shadow: unset;
     outline: 3px solid var(--input-focus-outline-color);
     outline-offset: 0;
-    background: var(--select-focus-background)
+    background: var(--select-focus-background) var(--dropdown-arrow);
-                var(--dropdown-arrow);
     color: var(--select-focus-text-color);
-    transition: outline-color 50ms linear,
+    transition:
+        outline-color 50ms linear,
         outline-offset 200ms ease-out;
 }
 
@@ -360,7 +359,7 @@ option {
 
 optgroup {
     color: var(--select-group-heading-text-color);
-    font-size: .75em;
+    font-size: 0.75em;
     font-weight: normal;
     font-style: normal;
     line-height: 40px;
@@ -374,9 +373,9 @@ optgroup {
  * </label>
  */
 
- .tn-file-input {
+.tn-file-input {
     position: relative;
-    padding: .375rem 2.25rem .375rem .75rem;
+    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
 }
 
 .tn-file-input input[type="file"] {
@@ -416,19 +415,17 @@ optgroup {
 /* Check boxes and radio buttons */
 
 @supports selector(label:has(*)) {
-
     /* Check box & radio button commons */
 
     /* The parent label */
     label.tn-radio,
     label.tn-checkbox {
         --box-size: 1em;
-        --box-label-gap: .5em;
+        --box-label-gap: 0.5em;
 
         position: relative;
         padding-left: calc(var(--box-size) + var(--box-label-gap)) !important;
         user-select: none;
-
     }
 
     /* The original input */
@@ -455,8 +452,8 @@ optgroup {
         height: var(--box-size);
     }
 
-    label.tn-radio:has(>input[type="radio"]:focus-visible)::before,
+    label.tn-radio:has(> input[type="radio"]:focus-visible)::before,
-    label.tn-checkbox:has(>input[type="checkbox"]:focus-visible)::before {
+    label.tn-checkbox:has(> input[type="checkbox"]:focus-visible)::before {
         outline: 2px solid var(--input-focus-outline-color);
     }
 
@@ -468,14 +465,15 @@ optgroup {
         background: var(--radio-checkbox-background);
     }
 
-    label.tn-checkbox:has(>input[type="checkbox"]:not(:disabled)):hover:before {
+    label.tn-checkbox:has(> input[type="checkbox"]:not(:disabled)):hover:before {
         background: var(--radio-checkbox-hover-background);
     }
 
     @keyframes checkbox-checked {
         from {
             transform: scale(2);
-        } to {
+        }
+        to {
             transform: scale(1);
         }
     }
@@ -484,15 +482,16 @@ optgroup {
     label.tn-checkbox::after {
         mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3echeck-bold%3c/title%3e%3cpath d='M9%2c20.42L2.79%2c14.21L5.62%2c11.38L9%2c14.77L18.88%2c4.88L21.71%2c7.71L9%2c20.42Z' /%3e%3c/svg%3e");
         mask-position: center center;
-        mask-size: .95em;
+        mask-size: 0.95em;
         background-color: var(--radio-checkbox-indicator-color);
         transform: scale(0);
         opacity: 0;
-        transition: transform 300ms ease-out,
+        transition:
+            transform 300ms ease-out,
             opacity 300ms linear;
     }
 
-    label.tn-checkbox:has(>input[type="checkbox"]:checked)::after {
+    label.tn-checkbox:has(> input[type="checkbox"]:checked)::after {
         opacity: 1;
         transform: scale(1);
         transition: opacity 100ms ease-in-out;
@@ -511,15 +510,16 @@ optgroup {
         background: var(--radio-checkbox-background);
     }
 
-    label.tn-radio:has(>input[type="radio"]:not(:disabled)):hover::before {
+    label.tn-radio:has(> input[type="radio"]:not(:disabled)):hover::before {
         background: var(--radio-checkbox-hover-background);
     }
 
     @keyframes radio-checked {
         from {
             transform: scale(1.5);
-        } to {
+        }
-            transform: scale(.5);
+        to {
+            transform: scale(0.5);
         }
     }
 
@@ -528,12 +528,13 @@ optgroup {
         background: var(--radio-checkbox-indicator-color);
         transform: scale(0);
         opacity: 0;
-        transition: opacity 300ms linear,
+        transition:
+            opacity 300ms linear,
             transform 300ms ease-in;
     }
 
-    label.tn-radio:has(>input[type="radio"]:checked)::after {
+    label.tn-radio:has(> input[type="radio"]:checked)::after {
-        transform: scale(.5);
+        transform: scale(0.5);
         opacity: 1;
         transition: opacity 150ms linear;
         animation: radio-checked 200ms ease-out;
@@ -545,9 +546,8 @@ optgroup {
     label.tn-radio:has(> input[type="radio"]:disabled)::after,
     label.tn-checkbox:has(> input[type="checkbox"]:disabled)::before,
     label.tn-checkbox:has(> input[type="checkbox"]:disabled)::after {
-        opacity: .5;
+        opacity: 0.5;
     }
-
 }
 
 /* Switches */
@@ -580,7 +580,8 @@ body a.tn-link:visited,
     font-weight: normal;
     text-decoration: underline;
 
-    transition: background-color 200ms ease-out,
+    transition:
+        background-color 200ms ease-out,
         box-shadow 200ms ease-out,
         color 300ms ease-out;
 }
@@ -597,7 +598,8 @@ body a.tn-link:hover,
     --background: var(--link-hover-background);
     color: var(--link-hover-color);
 
-    transition: background-color 100ms ease-in,
+    transition:
+        background-color 100ms ease-in,
         box-shadow 100ms ease-in,
         color 150ms ease-in;
 }
@@ -607,16 +609,18 @@ a.tn-link[href^="http://"]:not(.no-arrow)::after,
 a.tn-link[href^="https://"]:not(.no-arrow)::after,
 .use-tn-links a.external:not(.no-arrow)::after,
 .use-tn-links a[href^="http://"]:not(.no-arrow)::after,
-.use-tn-links a[href^="https://"]:not(.no-arrow)::after {
+.use-tn-links a[href^="https://"]:not(.no-arrow)::after
+{
     display: inline-block;
-    opacity: .5;
+    opacity: 0.5;
 }
 
 @keyframes link-arrow-blink {
     from {
         opacity: 1;
-    } to {
+    }
-        opacity: .5;
+    to {
+        opacity: 0.5;
     }
 }
 
@@ -625,7 +629,8 @@ a.tn-link:hover[href^="http://"]:not(.no-arrow)::after,
 a.tn-link:hover[href^="https://"]:not(.no-arrow)::after,
 .use-tn-links a:hover.external:not(.no-arrow)::after,
 .use-tn-links a:hover[href^="http://"]:not(.no-arrow)::after,
-.use-tn-links a:hover[href^="https://"]:not(.no-arrow)::after {
+.use-tn-links a:hover[href^="https://"]:not(.no-arrow)::after
+{
     animation: link-arrow-blink 500ms linear alternate infinite;
 }
 

src/public/stylesheets/theme-next/notes/text.css

@@ -138,6 +138,11 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
  * Search in text panel
  */
 
+.find-replace-widget {
+    container-type: inline-size;
+    border-top: 3px solid var(--root-background) !important;
+}
+
 .find-replace-widget > div {
     padding: 8px;
 }
@@ -146,21 +151,86 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
     padding-top: 0;
 }
 
-div.find-replace-widget div.find-widget-found-wrapper {
+div.find-replace-widget div.find-widget-found-wrapper > span {
     min-width: 50px;
     font-style: normal;
     font-weight: normal;
 }
 
- /* The up / down buttons of the "Find in text" input */
+/* The up / down buttons of the "Find in text" input */
 .find-replace-widget .input-group button {
     font-size: 1.3em;
 }
 
 .find-replace-widget .form-check {
     padding-left: 0;
+    white-space: nowrap;
 }
 
 .find-replace-widget .form-check .form-check-input {
     margin-left: 0;
 }
+
+/* Narrow version */
+@container (max-width: 600px) {
+    .find-replace-widget > *,
+    .find-replace-widget input,
+    .find-replace-widget button.btn.btn-sm {
+        font-size: .9em;
+    }
+
+    .find-widget-box {
+        position: relative;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .find-widget-box,
+    .replace-widget-box {
+        padding-right: 3em !important;
+    }
+
+    .find-widget-close-button {
+        position: absolute;
+        top: .85em;
+        right: .5em;
+    }
+
+    .find-widget-box > * {
+        margin: unset !important;
+    }
+
+    div.find-widget-search-term-input-group {
+        margin-bottom: 8px;
+        max-width: unset;
+        width: 100%;
+    }
+
+    .find-widget-found-wrapper,
+    .find-widget-found-wrapper > span {
+        min-width: 0 !important;
+    }
+
+    .find-widget-spacer {
+        display: none;
+    }
+
+    .form-check {
+        min-height: unset;
+        margin-bottom: unset;
+    }
+
+    .replace-widget-box {
+        gap: 8px;
+    }
+
+    .replace-widget-box > * {
+        margin-right: unset !important;
+    }
+
+    div.replace-widget-box button.btn.btn-sm {
+        min-width: unset;
+        white-space: nowrap;
+    }
+}

src/public/stylesheets/theme-next/ribbon.css

@@ -17,7 +17,7 @@ div.note-type-dropdown .check {
     margin-right: 6px;
 }
 
- /* Editability dropdown */
+/* Editability dropdown */
 
 div.editability-dropdown a.dropdown-item {
     padding: 4px 16px 4px 0;
@@ -29,8 +29,8 @@ div.editability-dropdown a.dropdown-item {
 }
 
 .editability-dropdown .dropdown-item .description {
-    opacity: .75;
+    opacity: 0.75;
-    font-size: .85em;
+    font-size: 0.85em;
 }
 
 /*
@@ -39,7 +39,7 @@ div.editability-dropdown a.dropdown-item {
 
 .attribute-list .add-new-attribute-button,
 .attribute-list .save-attributes-button {
-    bottom: .3em;
+    bottom: 0.3em;
 }
 
 .attribute-list .save-attributes-button {
@@ -70,12 +70,52 @@ div.editability-dropdown a.dropdown-item {
  */
 
 .note-info-widget-table th {
-    opacity: .65;
+    opacity: 0.65;
     font-weight: 500;
 }
 
 :root .note-info-widget-table button.calculate-button {
     min-width: 0;
     padding: 4px 10px !important;
-    font-size: .8em;
+    font-size: 0.8em;
+}
+
+/* Narrow width layout */
+.note-info-widget {
+    container: note-info / inline-size;
+}
+
+@container note-info (max-width: 800px) {
+    table, tbody, tr, td, th {
+        display: block;
+        padding: 0 !important;
+    }
+
+    tbody {
+        display: flex;
+        gap: 10px;
+    }
+
+    tr {
+        flex-grow: 1;
+    }
+
+    th {
+        font-size: .85em;
+    }
+
+    td {
+        margin-bottom: .5em;
+    }
+}
+
+/*
+ * Attribute detail dialog
+ */
+
+/* Labels */
+.attr-edit-table th {
+    padding-right: 12px;
+    font-weight: normal;
+    white-space: nowrap;
 }