Merge branch 'develop' into feature/MFA

.gitattributes

@@ -1,4 +1,5 @@
 package-lock.json linguist-generated=true
 **/package-lock.json linguist-generated=true
 src/public/app/doc_notes/en/User[[:space:]]Guide/** linguist-generated=true
+src/public/app/doc_notes/en/User[[:space:]]Guide/**/*.md eol=lf
 libraries/** linguist-vendored

docs/User Guide/User Guide/Advanced Usage/Advanced Showcases/Day Notes.md

@@ -57,4 +57,4 @@ Trilium has some special support for day notes in the form of [backend Script AP
 
 Day (and year, month) notes are created with a label - e.g. `#dateNote="2018-08-16"` this can then be used by other scripts to add new notes to day note etc.
 
-Journal also has relation `child:child:child:template=Day template` (see \[\[attribute inheritance\]\]) which effectively adds \[\[template\]\] to day notes (grand-grand-grand children of Journal).
+Journal also has relation `child:child:child:template=Day template` (see \[\[attribute inheritance\]\]) which effectively adds \[\[template\]\] to day notes (grand-grand-grand children of Journal).

docs/User Guide/User Guide/Basic Concepts/Zen mode.md

@@ -13,9 +13,9 @@ Screenshot of the Zen Mode option in the global menu.
 
 The Zen Mode can be activated by accessing the global menu and selecting the “Zen Mode” option:
 
-Aside from the global menu, it's also possible to activate this mode by using a keyboard shortcut which is <kbd>Alt</kbd>+<kbd>Z</kbd> by default. Look for `toggleZenMode` in the shortcut configuration.
+Aside from the global menu, it's also possible to activate this mode by using a keyboard shortcut (which is <kbd>F9</kbd> since TriliumNext 0.92.5 and <kbd>Alt</kbd>+<kbd>Z</kbd> for older versions). Look for `toggleZenMode` in the shortcut configuration.
 
-Once Zen Mode is activated, all the UI elements of the application will be hidden away, including the global menu. In that case, the Zen Mode can be deactivated either by pressing the ![](Zen%20mode_image.png)icon in the top-right corner of the window or by pressing the keyboard combination again.
+Once Zen Mode is activated, all the UI elements of the application will be hidden away, including the global menu. In that case, the Zen Mode can be deactivated either by pressing the ![](Zen%20mode_image.png) icon in the top-right corner of the window or by pressing the keyboard combination again.
 
 Do note that, by design, activating or deactivating the Zen Mode applies only to the current window. Restarting the application will also disable the Zen Mode.
 

package-lock.json

@@ -66,7 +66,6 @@
         "katex": "0.16.21",
         "leaflet": "1.9.4",
         "leaflet-gpx": "2.1.2",
-        "mark.js": "8.11.1",
         "marked": "15.0.7",
         "mermaid": "11.6.0",
         "mime-types": "3.0.1",
@@ -90,7 +89,6 @@
         "tmp": "0.2.3",
         "turndown": "7.2.0",
         "unescape": "1.0.1",
-        "vanilla-js-wheel-zoom": "9.0.4",
         "ws": "8.18.1",
         "xml2js": "0.6.2",
         "yauzl": "3.2.0"
@@ -175,6 +173,7 @@
         "jsdoc": "4.0.4",
         "knockout": "3.5.1",
         "lorem-ipsum": "2.0.8",
+        "mark.js": "8.11.1",
         "mind-elixir": "4.4.3",
         "mini-css-extract-plugin": "2.9.2",
         "nodemon": "3.1.9",
@@ -185,6 +184,7 @@
         "rimraf": "6.0.1",
         "sass": "1.86.0",
         "sass-loader": "16.0.5",
+        "script-loader": "0.7.2",
         "split.js": "1.6.5",
         "supertest": "7.1.0",
         "svg-pan-zoom": "3.6.2",
@@ -195,6 +195,7 @@
         "typedoc": "0.28.1",
         "typescript": "5.8.2",
         "typescript-eslint": "8.28.0",
+        "vanilla-js-wheel-zoom": "9.0.4",
         "vitest": "3.0.9",
         "webpack": "5.98.0",
         "webpack-cli": "6.0.1",
@@ -14270,6 +14271,7 @@
       "version": "8.11.1",
       "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz",
       "integrity": "sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/markdown-it": {
@@ -17063,6 +17065,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/raw-body/node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/raw-loader": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
+      "integrity": "sha512-sf7oGoLuaYAScB4VGr0tzetsYlS8EJH6qnTCfQ/WVEa89hALQ4RQfCKt5xCyPQKPDUbVUAIP1QsxAwfAjlDp7Q==",
+      "dev": true
+    },
     "node_modules/rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@@ -18113,6 +18130,16 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/script-loader": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/script-loader/-/script-loader-0.7.2.tgz",
+      "integrity": "sha512-UMNLEvgOAQuzK8ji8qIscM3GIrRCWN6MmMXGD4SD5l6cSycgGsCo0tX5xRnfQcoghqct0tjHjcykgI1PyBE2aA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "raw-loader": "~0.5.1"
+      }
+    },
     "node_modules/semver": {
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -20478,6 +20505,7 @@
       "version": "9.0.4",
       "resolved": "https://registry.npmjs.org/vanilla-js-wheel-zoom/-/vanilla-js-wheel-zoom-9.0.4.tgz",
       "integrity": "sha512-OjmS9ihEKBCRw2OQ7IiIdQGXdC5gTEEmtcAWZcPeNAJaYiS61KCd02Z72YMtIoXLGN5TZP+wliBMylLAsr6wow==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/vary": {

package.json

@@ -125,7 +125,6 @@
     "katex": "0.16.21",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.1.2",
-    "mark.js": "8.11.1",
     "marked": "15.0.7",
     "mermaid": "11.6.0",
     "mime-types": "3.0.1",
@@ -149,7 +148,6 @@
     "tmp": "0.2.3",
     "turndown": "7.2.0",
     "unescape": "1.0.1",
-    "vanilla-js-wheel-zoom": "9.0.4",
     "ws": "8.18.1",
     "xml2js": "0.6.2",
     "yauzl": "3.2.0"
@@ -231,6 +229,7 @@
     "jsdoc": "4.0.4",
     "knockout": "3.5.1",
     "lorem-ipsum": "2.0.8",
+    "mark.js": "8.11.1",
     "mind-elixir": "4.4.3",
     "mini-css-extract-plugin": "2.9.2",
     "nodemon": "3.1.9",
@@ -241,6 +240,7 @@
     "rimraf": "6.0.1",
     "sass": "1.86.0",
     "sass-loader": "16.0.5",
+    "script-loader": "0.7.2",
     "split.js": "1.6.5",
     "supertest": "7.1.0",
     "svg-pan-zoom": "3.6.2",
@@ -251,6 +251,7 @@
     "typedoc": "0.28.1",
     "typescript": "5.8.2",
     "typescript-eslint": "8.28.0",
+    "vanilla-js-wheel-zoom": "9.0.4",
     "vitest": "3.0.9",
     "webpack": "5.98.0",
     "webpack-cli": "6.0.1",

src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Zen mode.html

@@ -29,8 +29,9 @@
         <p>The Zen Mode can be activated by accessing the global menu and selecting
           the “Zen Mode” option:</p>
         <p>Aside from the global menu, it's also possible to activate this mode by
-          using a keyboard shortcut which is <kbd>Alt</kbd>+<kbd>Z</kbd> by default.
+          using a keyboard shortcut (which is <kbd>F9</kbd> since TriliumNext 0.92.5
-          Look for <code>toggleZenMode</code> in the shortcut configuration.</p>
+          and <kbd>Alt</kbd>+<kbd>Z</kbd> for older versions). Look for <code>toggleZenMode</code> in
+          the shortcut configuration.</p>
         <p>Once Zen Mode is activated, all the UI elements of the application will
           be hidden away, including the global menu. In that case, the Zen Mode can
           be deactivated either by pressing the

src/public/app/services/content_renderer.ts

@@ -15,7 +15,7 @@ import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
 import { normalizeMimeTypeForCKEditor } from "./mime_type_definitions.js";
 import renderDoc from "./doc_renderer.js";
 import { t } from "i18next";
-import type { Mermaid } from "mermaid";
+import WheelZoom from 'vanilla-js-wheel-zoom';
 
 let idCounter = 1;
 
@@ -150,13 +150,19 @@ function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLE
     $renderedContent.append($img);
 
     if (options.imageHasZoom) {
-        libraryLoader.requireLibrary(libraryLoader.WHEEL_ZOOM).then(() => {
+        const initZoom = async () => {
-            WZoom.create(`#${$img.attr("id")}`, {
+            const element = document.querySelector(`#${$img.attr("id")}`);
-                maxScale: 50,
+            if (element) {
-                speed: 1.3,
+                WheelZoom.create(`#${$img.attr("id")}`, {
-                zoomOnClick: false
+                    maxScale: 50,
-            });
+                    speed: 1.3,
-        });
+                    zoomOnClick: false
+                });
+            } else {
+                requestAnimationFrame(initZoom);
+            }
+        };
+        initZoom();
     }
 
     imageContextMenuService.setupContextMenu($img);

src/public/app/services/library_loader.ts

@@ -42,23 +42,11 @@ const CODE_MIRROR: Library = {
     css: ["node_modules/codemirror/lib/codemirror.css", "node_modules/codemirror/addon/lint/lint.css"]
 };
 
-const CALENDAR_WIDGET: Library = {
-    css: ["stylesheets/calendar.css"]
-};
-
 const KATEX: Library = {
     js: ["node_modules/katex/dist/katex.min.js", "node_modules/katex/dist/contrib/mhchem.min.js", "node_modules/katex/dist/contrib/auto-render.min.js"],
     css: ["node_modules/katex/dist/katex.min.css"]
 };
 
-const WHEEL_ZOOM: Library = {
-    js: ["node_modules/vanilla-js-wheel-zoom/dist/wheel-zoom.min.js"]
-};
-
-const MARKJS: Library = {
-    js: ["node_modules/mark.js/dist/jquery.mark.es6.min.js"]
-};
-
 const HIGHLIGHT_JS: Library = {
     js: () => {
         const mimeTypes = mimeTypesService.getMimeTypes();
@@ -85,10 +73,6 @@ const HIGHLIGHT_JS: Library = {
     }
 };
 
-const LEAFLET: Library = {
-    css: ["node_modules/leaflet/dist/leaflet.css"]
-};
-
 async function requireLibrary(library: Library) {
     if (library.css) {
         library.css.map((cssUrl) => requireCss(cssUrl));
@@ -174,10 +158,6 @@ export default {
     loadHighlightingTheme,
     CKEDITOR,
     CODE_MIRROR,
-    CALENDAR_WIDGET,
     KATEX,
-    WHEEL_ZOOM,
+    HIGHLIGHT_JS
-    MARKJS,
-    HIGHLIGHT_JS,
-    LEAFLET
 };

src/public/app/types.d.ts

@@ -132,13 +132,6 @@ declare global {
     var renderMathInElement: (element: HTMLElement, options: {
         trust: boolean;
     }) => void;
-    var WZoom = {
-        create(selector: string, opts: {
-            maxScale: number;
-            speed: number;
-            zoomOnClick: boolean
-        })
-    };
     interface CKCodeBlockLanguage {
         language: string;
         label: string;

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

@@ -1,5 +1,4 @@
 import { t } from "../../services/i18n.js";
-import libraryLoader from "../../services/library_loader.js";
 import utils from "../../services/utils.js";
 import dateNoteService from "../../services/date_notes.js";
 import server from "../../services/server.js";
@@ -9,6 +8,7 @@ import toastService from "../../services/toast.js";
 import options from "../../services/options.js";
 import { Dropdown } from "bootstrap";
 import type { EventData } from "../../components/app_context.js";
+import "../../../stylesheets/calendar.css";
 
 const MONTHS = [
     t("calendar.january"),
@@ -188,7 +188,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
     }
 
     async dropdownShown() {
-        await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
         this.init(appContext.tabManager.getActiveContextNote()?.getOwnedLabelValue("dateNote") ?? null);
     }
 

src/public/app/widgets/find_in_html.ts

@@ -1,7 +1,6 @@
 // ck-find-result and ck-find-result_selected are the styles ck-editor
 // uses for highlighting matches, use the same one on CodeMirror
 // for consistency
-import libraryLoader from "../services/library_loader.js";
 import utils from "../services/utils.js";
 import appContext from "../components/app_context.js";
 import type FindWidget from "./find.js";
@@ -23,7 +22,7 @@ export default class FindInHtml {
     }
 
     async performFind(searchTerm: string, matchCase: boolean, wholeWord: boolean) {
-        await libraryLoader.requireLibrary(libraryLoader.MARKJS);
+        await import("script-loader!mark.js/dist/jquery.mark.min.js");
 
         const $content = await this.parent?.noteContext?.getContentElement();
 

src/public/app/widgets/geo_map.ts

@@ -1,5 +1,6 @@
 import type { Map } from "leaflet";
-import library_loader from "../services/library_loader.js";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
 import NoteContextAwareWidget from "./note_context_aware_widget.js";
 
 const TPL = `\
@@ -21,7 +22,7 @@ const TPL = `\
     <div class="geo-map-container"></div>
 </div>`;
 
-export type Leaflet = typeof import("leaflet");
+export type Leaflet = typeof L;
 export type InitCallback = (L: Leaflet) => void;
 
 export default class GeoMapWidget extends NoteContextAwareWidget {
@@ -40,23 +41,18 @@ export default class GeoMapWidget extends NoteContextAwareWidget {
 
         this.$container = this.$widget.find(".geo-map-container");
 
-        library_loader.requireLibrary(library_loader.LEAFLET).then(async () => {
+        const map = L.map(this.$container[0], {
-            const L = (await import("leaflet")).default;
+            worldCopyJump: true
-
-            const map = L.map(this.$container[0], {
-                worldCopyJump: true
-            });
-
-            this.map = map;
-            if (this.initCallback) {
-                this.initCallback(L);
-            }
-
-            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);
         });
-    }
 
+        this.map = map;
+        if (this.initCallback) {
+            this.initCallback(L);
+        }
+
+        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/type_widgets/image.ts

@@ -1,10 +1,10 @@
 import utils from "../../services/utils.js";
 import TypeWidget from "./type_widget.js";
-import libraryLoader from "../../services/library_loader.js";
 import imageContextMenuService from "../../menus/image_context_menu.js";
 import imageService from "../../services/image.js";
 import type FNote from "../../entities/fnote.js";
 import type { EventData } from "../../components/app_context.js";
+import WheelZoom from 'vanilla-js-wheel-zoom';
 
 const TPL = `
 <div class="note-detail-image note-detail-printable">
@@ -54,13 +54,19 @@ class ImageTypeWidget extends TypeWidget {
         this.$imageWrapper = this.$widget.find(".note-detail-image-wrapper");
         this.$imageView = this.$widget.find(".note-detail-image-view").attr("id", `image-view-${utils.randomString(10)}`);
 
-        libraryLoader.requireLibrary(libraryLoader.WHEEL_ZOOM).then(() => {
+        const initZoom = async () => {
-            WZoom.create(`#${this.$imageView.attr("id")}`, {
+            const element = document.querySelector(`#${this.$imageView.attr("id")}`);
-                maxScale: 50,
+            if (element) {
-                speed: 1.3,
+                WheelZoom.create(`#${this.$imageView.attr("id")}`, {
-                zoomOnClick: false
+                    maxScale: 50,
-            });
+                    speed: 1.3,
-        });
+                    zoomOnClick: false
+                });
+            } else {
+                requestAnimationFrame(initZoom);
+            }
+        };
+        initZoom();
 
         imageContextMenuService.setupContextMenu(this.$imageView);
 

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

@@ -2,7 +2,6 @@ import linkService from "../../services/link.js";
 import contentRenderer from "../../services/content_renderer.js";
 import froca from "../../services/froca.js";
 import attributeRenderer from "../../services/attribute_renderer.js";
-import libraryLoader from "../../services/library_loader.js";
 import treeService from "../../services/tree.js";
 import utils from "../../services/utils.js";
 import type FNote from "../../entities/fnote.js";
@@ -216,7 +215,7 @@ class ListOrGridView extends ViewMode {
 
         const highlightedTokens = this.parentNote.highlightedTokens || [];
         if (highlightedTokens.length > 0) {
-            await libraryLoader.requireLibrary(libraryLoader.MARKJS);
+            await import("script-loader!mark.js/dist/jquery.mark.min.js");
 
             const regex = highlightedTokens.map((token) => utils.escapeRegExp(token)).join("|");
 
@@ -269,12 +268,12 @@ class ListOrGridView extends ViewMode {
                     i === this.page
                         ? $("<span>").text(i).css("text-decoration", "underline").css("font-weight", "bold")
                         : $('<a href="javascript:">')
-                              .text(i)
+                            .text(i)
-                              .attr("title", `Page of ${startIndex} - ${endIndex}`)
+                            .attr("title", `Page of ${startIndex} - ${endIndex}`)
-                              .on("click", () => {
+                            .on("click", () => {
-                                  this.page = i;
+                                this.page = i;
-                                  this.renderList();
+                                this.renderList();
-                              }),
+                            }),
                     " &nbsp; "
                 );
             } else if (lastPrinted) {

src/routes/assets.ts

@@ -73,10 +73,6 @@ async function register(app: express.Application) {
 
     app.use(`/${assetPath}/node_modules/eslint/bin/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/eslint/bin/")));
 
-    app.use(`/${assetPath}/node_modules/vanilla-js-wheel-zoom/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/vanilla-js-wheel-zoom/dist/")));
-
-    app.use(`/${assetPath}/node_modules/mark.js/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/mark.js/dist/")));
-
     // Deprecated, https://www.npmjs.com/package/autocomplete.js?activeTab=readme
     app.use(`/${assetPath}/node_modules/autocomplete.js/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/autocomplete.js/dist/")));
 
@@ -91,8 +87,6 @@ async function register(app: express.Application) {
     app.use(`/${assetPath}/node_modules/codemirror/keymap/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/codemirror/keymap/")));
 
     app.use(`/${assetPath}/node_modules/@highlightjs/cdn-assets/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/@highlightjs/cdn-assets/")));
-
-    app.use(`/${assetPath}/node_modules/leaflet/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/leaflet/dist/")));
 }
 
 export default {

src/services/keyboard_actions.ts

@@ -240,7 +240,7 @@ function getDefaultKeyboardActions() {
         },
         {
             actionName: "toggleZenMode",
-            defaultShortcuts: ["Alt+Z"],
+            defaultShortcuts: ["F9"],
             description: t("keyboard_actions.toggle-zen-mode"),
             scope: "window"
         },

src/types.d.ts

@@ -30,3 +30,5 @@ declare module "is-animated" {
     function isAnimated(buffer: Buffer): boolean;
     export default isAnimated;
 }
+
+declare module "script-loader!mark.js/dist/jquery.mark.min.js";

webpack.config.ts

@@ -66,7 +66,10 @@ const config: Configuration = {
                         loader: miniCssExtractPlugin.loader
                     },
                     {
-                        loader: "css-loader"
+                        loader: "css-loader",
+                        options: {
+                            esModule: true
+                        }
                     },
                     {
                         loader: "postcss-loader",
@@ -109,6 +112,9 @@ const config: Configuration = {
             ".js": [".js", ".ts"],
             ".cjs": [".cjs", ".cts"],
             ".mjs": [".mjs", ".mts"]
+        },
+        alias: {
+            stylesheets: path.resolve(rootDir, "src/public/stylesheets")
         }
     },
     devtool: "nosources-source-map",