Merge branch 'develop' into port_dialogs

src/public/app/components/app_context.ts

@@ -22,7 +22,6 @@ import type LoadResults from "../services/load_results.js";
 import type { Attribute } from "../services/attribute_parser.js";
 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";
 import type FAttribute from "../entities/fattribute.js";
@@ -58,8 +57,8 @@ export interface ContextMenuCommandData extends CommandData {
 }
 
 export interface NoteCommandData extends CommandData {
-    notePath?: string;
-    hoistedNoteId?: string;
+    notePath?: string | null;
+    hoistedNoteId?: string | null;
     viewScope?: ViewScope;
 }
 
@@ -297,16 +296,13 @@ type EventMappings = {
         noteContext: NoteContext;
         notePath?: string | null;
     };
-    noteSwitchedAndActivatedEvent: {
+    noteSwitchedAndActivated: {
         noteContext: NoteContext;
         notePath: string;
     };
     setNoteContext: {
         noteContext: NoteContext;
     };
-    noteTypeMimeChangedEvent: {
-        noteId: string;
-    };
     reEvaluateHighlightsListWidgetVisibility: {
         noteId: string | undefined;
     };
@@ -327,14 +323,14 @@ type EventMappings = {
         noteId: string;
         ntxId: string | null;
     };
-    contextsReopenedEvent: {
-        mainNtxId: string;
+    contextsReopened: {
+        mainNtxId: string | null;
         tabPosition: number;
     };
     noteDetailRefreshed: {
         ntxId?: string | null;
     };
-    noteContextReorderEvent: {
+    noteContextReorder: {
         oldMainNtxId: string;
         newMainNtxId: string;
         ntxIdsInOrder: string[];
@@ -342,7 +338,7 @@ type EventMappings = {
     newNoteContextCreated: {
         noteContext: NoteContext;
     };
-    noteContextRemovedEvent: {
+    noteContextRemoved: {
         ntxIds: string[];
     };
     exportSvg: {
@@ -363,7 +359,7 @@ type EventMappings = {
     relationMapResetPanZoom: { ntxId: string | null | undefined };
     relationMapResetZoomIn: { ntxId: string | null | undefined };
     relationMapResetZoomOut: { ntxId: string | null | undefined };
-    activeNoteChangedEvent: {};
+    activeNoteChanged: {};
     showAddLinkDialog: {
         textTypeWidget: EditableTextTypeWidget;
         text: string;
@@ -374,7 +370,6 @@ type EventMappings = {
     cloneNoteIdsTo: {
         noteIds: string[];
     };
-
 };
 
 export type EventListener<T extends EventNames> = {

src/public/app/components/entrypoints.ts

@@ -66,12 +66,13 @@ export default class Entrypoints extends Component {
     }
 
     async toggleNoteHoistingCommand({ noteId = appContext.tabManager.getActiveContextNoteId() }) {
-        if (!noteId) {
+        const activeNoteContext = appContext.tabManager.getActiveContext();
+
+        if (!activeNoteContext || !noteId) {
             return;
         }
 
         const noteToHoist = await froca.getNote(noteId);
-        const activeNoteContext = appContext.tabManager.getActiveContext();
 
         if (noteToHoist?.noteId === activeNoteContext.hoistedNoteId) {
             await activeNoteContext.unhoist();
@@ -83,6 +84,11 @@ export default class Entrypoints extends Component {
     async hoistNoteCommand({ noteId }: { noteId: string }) {
         const noteContext = appContext.tabManager.getActiveContext();
 
+        if (!noteContext) {
+            logError("hoistNoteCommand: noteContext is null");
+            return;
+        }
+
         if (noteContext.hoistedNoteId !== noteId) {
             await noteContext.setHoistedNoteId(noteId);
         }
@@ -174,7 +180,11 @@ export default class Entrypoints extends Component {
     }
 
     async runActiveNoteCommand() {
-        const { ntxId, note } = appContext.tabManager.getActiveContext();
+        const noteContext = appContext.tabManager.getActiveContext();
+        if (!noteContext) {
+            return;
+        }
+        const { ntxId, note } = noteContext;
 
         // ctrl+enter is also used elsewhere, so make sure we're running only when appropriate
         if (!note || note.type !== "code") {

src/public/app/components/tab_manager.ts

@@ -4,23 +4,40 @@ import server from "../services/server.js";
 import options from "../services/options.js";
 import froca from "../services/froca.js";
 import treeService from "../services/tree.js";
-import utils from "../services/utils.js";
 import NoteContext from "./note_context.js";
 import appContext from "./app_context.js";
 import Mutex from "../utils/mutex.js";
 import linkService from "../services/link.js";
+import type { EventData } from "./app_context.js";
+import type FNote from "../entities/fnote.js";
+
+interface TabState {
+    contexts: NoteContext[];
+    position: number;
+}
+
+interface NoteContextState {
+    ntxId: string;
+    mainNtxId: string | null;
+    notePath: string | null;
+    hoistedNoteId: string;
+    active: boolean;
+    viewScope: Record<string, any>;
+}
 
 export default class TabManager extends Component {
+    public children: NoteContext[];
+    public mutex: Mutex;
+    public activeNtxId: string | null;
+    public recentlyClosedTabs: TabState[];
+    public tabsUpdate: SpacedUpdate;
+
     constructor() {
         super();
 
-        /** @property {NoteContext[]} */
         this.children = [];
         this.mutex = new Mutex();
-
         this.activeNtxId = null;
-
-        // elements are arrays of {contexts, position}, storing note contexts for each tab (one main context + subcontexts [splits]), and the original position of the tab
         this.recentlyClosedTabs = [];
 
         this.tabsUpdate = new SpacedUpdate(async () => {
@@ -28,7 +45,9 @@ export default class TabManager extends Component {
                 return;
             }
 
-            const openNoteContexts = this.noteContexts.map((nc) => nc.getPojoState()).filter((t) => !!t);
+            const openNoteContexts = this.noteContexts
+                .map((nc) => nc.getPojoState())
+                .filter((t) => !!t);
 
             await server.put("options", {
                 openNoteContexts: JSON.stringify(openNoteContexts)
@@ -38,13 +57,11 @@ export default class TabManager extends Component {
         appContext.addBeforeUnloadListener(this);
     }
 
-    /** @returns {NoteContext[]} */
-    get noteContexts() {
+    get noteContexts(): NoteContext[] {
         return this.children;
     }
 
-    /** @type {NoteContext[]} */
-    get mainNoteContexts() {
+    get mainNoteContexts(): NoteContext[] {
         return this.noteContexts.filter((nc) => !nc.mainNtxId);
     }
 
@@ -53,11 +70,12 @@ export default class TabManager extends Component {
             const noteContextsToOpen = (appContext.isMainWindow && options.getJson("openNoteContexts")) || [];
 
             // preload all notes at once
-            await froca.getNotes([...noteContextsToOpen.flatMap((tab) => [treeService.getNoteIdFromUrl(tab.notePath), tab.hoistedNoteId])], true);
+            await froca.getNotes([...noteContextsToOpen.flatMap((tab: NoteContextState) =>
+                [treeService.getNoteIdFromUrl(tab.notePath), tab.hoistedNoteId])], true);
 
-            const filteredNoteContexts = noteContextsToOpen.filter((openTab) => {
+            const filteredNoteContexts = noteContextsToOpen.filter((openTab: NoteContextState) => {
                 const noteId = treeService.getNoteIdFromUrl(openTab.notePath);
-                if (!(noteId in froca.notes)) {
+                if (noteId && !(noteId in froca.notes)) {
                     // note doesn't exist so don't try to open tab for it
                     return false;
                 }
@@ -82,7 +100,7 @@ export default class TabManager extends Component {
                     hoistedNoteId: parsedFromUrl.hoistedNoteId || "root",
                     viewScope: parsedFromUrl.viewScope || {}
                 });
-            } else if (!filteredNoteContexts.find((tab) => tab.active)) {
+            } else if (!filteredNoteContexts.find((tab: NoteContextState) => tab.active)) {
                 filteredNoteContexts[0].active = true;
             }
 
@@ -101,21 +119,30 @@ export default class TabManager extends Component {
             // if there's a notePath in the URL, make sure it's open and active
             // (useful, for e.g., opening clipped notes from clipper or opening link in an extra window)
             if (parsedFromUrl.notePath) {
-                await appContext.tabManager.switchToNoteContext(parsedFromUrl.ntxId, parsedFromUrl.notePath, parsedFromUrl.viewScope, parsedFromUrl.hoistedNoteId);
+                await appContext.tabManager.switchToNoteContext(
+                    parsedFromUrl.ntxId,
+                    parsedFromUrl.notePath,
+                    parsedFromUrl.viewScope,
+                    parsedFromUrl.hoistedNoteId
+                );
             } else if (parsedFromUrl.searchString) {
                 await appContext.triggerCommand("searchNotes", {
                     searchString: parsedFromUrl.searchString
                 });
             }
-        } catch (e) {
-            logError(`Loading note contexts '${options.get("openNoteContexts")}' failed: ${e.message} ${e.stack}`);
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                logError(`Loading note contexts '${options.get("openNoteContexts")}' failed: ${e.message} ${e.stack}`);
+            } else {
+                logError(`Loading note contexts '${options.get("openNoteContexts")}' failed: ${String(e)}`);
+            }
 
             // try to recover
             await this.openEmptyTab();
         }
     }
 
-    noteSwitchedEvent({ noteContext }) {
+    noteSwitchedEvent({ noteContext }: EventData<"noteSwitched">) {
         if (noteContext.isActive()) {
             this.setCurrentNavigationStateToHash();
         }
@@ -135,10 +162,10 @@ export default class TabManager extends Component {
         const activeNoteContext = this.getActiveContext();
         this.updateDocumentTitle(activeNoteContext);
 
-        this.triggerEvent("activeNoteChanged"); // trigger this even in on popstate event
+        this.triggerEvent("activeNoteChanged", {}); // trigger this even in on popstate event
     }
 
-    calculateHash() {
+    calculateHash(): string {
         const activeNoteContext = this.getActiveContext();
         if (!activeNoteContext) {
             return "";
@@ -152,21 +179,15 @@ export default class TabManager extends Component {
         });
     }
 
-    /** @returns {NoteContext[]} */
-    getNoteContexts() {
+    getNoteContexts(): NoteContext[] {
         return this.noteContexts;
     }
 
-    /**
-     * Main context is essentially a tab (children are splits), so this returns tabs.
-     * @returns {NoteContext[]}
-     */
-    getMainNoteContexts() {
+    getMainNoteContexts(): NoteContext[] {
         return this.noteContexts.filter((nc) => nc.isMainContext());
     }
 
-    /** @returns {NoteContext} */
-    getNoteContextById(ntxId) {
+    getNoteContextById(ntxId: string | null): NoteContext {
         const noteContext = this.noteContexts.find((nc) => nc.ntxId === ntxId);
 
         if (!noteContext) {
@@ -176,58 +197,47 @@ export default class TabManager extends Component {
         return noteContext;
     }
 
-    /**
-     * Get active context which represents the visible split with focus. Active context can, but doesn't have to be "main".
-     *
-     * @returns {NoteContext}
-     */
-    getActiveContext() {
+    getActiveContext(): NoteContext | null {
         return this.activeNtxId ? this.getNoteContextById(this.activeNtxId) : null;
     }
 
-    /**
-     * Get active main context which corresponds to the active tab.
-     *
-     * @returns {NoteContext}
-     */
-    getActiveMainContext() {
+    getActiveMainContext(): NoteContext | null {
         return this.activeNtxId ? this.getNoteContextById(this.activeNtxId).getMainContext() : null;
     }
 
-    /** @returns {string|null} */
-    getActiveContextNotePath() {
+    getActiveContextNotePath(): string | null {
         const activeContext = this.getActiveContext();
-        return activeContext ? activeContext.notePath : null;
+        return activeContext?.notePath ?? null;
     }
 
-    /** @returns {FNote} */
-    getActiveContextNote() {
+    getActiveContextNote(): FNote | null {
         const activeContext = this.getActiveContext();
         return activeContext ? activeContext.note : null;
     }
 
-    /** @returns {string|null} */
-    getActiveContextNoteId() {
+    getActiveContextNoteId(): string | null {
         const activeNote = this.getActiveContextNote();
-
         return activeNote ? activeNote.noteId : null;
     }
 
-    /** @returns {string|null} */
-    getActiveContextNoteType() {
+    getActiveContextNoteType(): string | null {
         const activeNote = this.getActiveContextNote();
-
         return activeNote ? activeNote.type : null;
     }
-    /** @returns {string|null} */
-    getActiveContextNoteMime() {
-        const activeNote = this.getActiveContextNote();
 
+    getActiveContextNoteMime(): string | null {
+        const activeNote = this.getActiveContextNote();
         return activeNote ? activeNote.mime : null;
     }
 
-    async switchToNoteContext(ntxId, notePath, viewScope = {}, hoistedNoteId = null) {
-        const noteContext = this.noteContexts.find((nc) => nc.ntxId === ntxId) || (await this.openEmptyTab());
+    async switchToNoteContext(
+        ntxId: string | null,
+        notePath: string,
+        viewScope: Record<string, any> = {},
+        hoistedNoteId: string | null = null
+    ) {
+        const noteContext = this.noteContexts.find((nc) => nc.ntxId === ntxId) ||
+            await this.openEmptyTab();
 
         await this.activateNoteContext(noteContext.ntxId);
 
@@ -242,20 +252,21 @@ export default class TabManager extends Component {
 
     async openAndActivateEmptyTab() {
         const noteContext = await this.openEmptyTab();
-
         await this.activateNoteContext(noteContext.ntxId);
-
-        await noteContext.setEmpty();
+        noteContext.setEmpty();
     }
 
-    async openEmptyTab(ntxId = null, hoistedNoteId = "root", mainNtxId) {
+    async openEmptyTab(
+        ntxId: string | null = null,
+        hoistedNoteId: string = "root",
+        mainNtxId: string | null = null
+    ): Promise<NoteContext> {
         const noteContext = new NoteContext(ntxId, hoistedNoteId, mainNtxId);
 
         const existingNoteContext = this.children.find((nc) => nc.ntxId === noteContext.ntxId);
 
         if (existingNoteContext) {
             await existingNoteContext.setHoistedNoteId(hoistedNoteId);
-
             return existingNoteContext;
         }
 
@@ -266,29 +277,37 @@ export default class TabManager extends Component {
         return noteContext;
     }
 
-    async openInNewTab(targetNoteId, hoistedNoteId = null) {
-        const noteContext = await this.openEmptyTab(null, hoistedNoteId || this.getActiveContext().hoistedNoteId);
+    async openInNewTab(targetNoteId: string, hoistedNoteId: string | null = null) {
+        const noteContext = await this.openEmptyTab(null, hoistedNoteId || this.getActiveContext()?.hoistedNoteId);
 
         await noteContext.setNote(targetNoteId);
     }
 
-    async openInSameTab(targetNoteId, hoistedNoteId = null) {
+    async openInSameTab(targetNoteId: string, hoistedNoteId: string | null = null) {
         const activeContext = this.getActiveContext();
+        if (!activeContext) return;
+
         await activeContext.setHoistedNoteId(hoistedNoteId || activeContext.hoistedNoteId);
         await activeContext.setNote(targetNoteId);
     }
 
-    /**
-     * If the requested notePath is within current note hoisting scope then keep the note hoisting also for the new tab.
-     */
-    async openTabWithNoteWithHoisting(notePath, opts = {}) {
+    async openTabWithNoteWithHoisting(
+        notePath: string,
+        opts: {
+            activate?: boolean | null;
+            ntxId?: string | null;
+            mainNtxId?: string | null;
+            hoistedNoteId?: string | null;
+            viewScope?: Record<string, any> | null;
+        } = {}
+    ): Promise<NoteContext> {
         const noteContext = this.getActiveContext();
         let hoistedNoteId = "root";
 
         if (noteContext) {
             const resolvedNotePath = await treeService.resolveNotePath(notePath, noteContext.hoistedNoteId);
 
-            if (resolvedNotePath.includes(noteContext.hoistedNoteId) || resolvedNotePath.includes("_hidden")) {
+            if (resolvedNotePath?.includes(noteContext.hoistedNoteId) || resolvedNotePath?.includes("_hidden")) {
                 hoistedNoteId = noteContext.hoistedNoteId;
             }
         }
@@ -298,7 +317,16 @@ export default class TabManager extends Component {
         return this.openContextWithNote(notePath, opts);
     }
 
-    async openContextWithNote(notePath, opts = {}) {
+    async openContextWithNote(
+        notePath: string | null,
+        opts: {
+            activate?: boolean | null;
+            ntxId?: string | null;
+            mainNtxId?: string | null;
+            hoistedNoteId?: string | null;
+            viewScope?: Record<string, any> | null;
+        } = {}
+    ): Promise<NoteContext> {
         const activate = !!opts.activate;
         const ntxId = opts.ntxId || null;
         const mainNtxId = opts.mainNtxId || null;
@@ -306,7 +334,6 @@ export default class TabManager extends Component {
         const viewScope = opts.viewScope || { viewMode: "default" };
 
         const noteContext = await this.openEmptyTab(ntxId, hoistedNoteId, mainNtxId);
-
         if (notePath) {
             await noteContext.setNote(notePath, {
                 // if activate is false, then send normal noteSwitched event
@@ -315,7 +342,7 @@ export default class TabManager extends Component {
             });
         }
 
-        if (activate) {
+        if (activate && noteContext.notePath) {
             this.activateNoteContext(noteContext.ntxId, false);
 
             await this.triggerEvent("noteSwitchedAndActivated", {
@@ -327,21 +354,24 @@ export default class TabManager extends Component {
         return noteContext;
     }
 
-    async activateOrOpenNote(noteId) {
+    async activateOrOpenNote(noteId: string) {
         for (const noteContext of this.getNoteContexts()) {
             if (noteContext.note && noteContext.note.noteId === noteId) {
                 this.activateNoteContext(noteContext.ntxId);
-
                 return;
             }
         }
 
         // if no tab with this note has been found we'll create new tab
-
         await this.openContextWithNote(noteId, { activate: true });
     }
 
-    async activateNoteContext(ntxId, triggerEvent = true) {
+    async activateNoteContext(ntxId: string | null, triggerEvent: boolean = true) {
+        if (!ntxId) {
+            logError("activateNoteContext: ntxId is null");
+            return;
+        }
+
         if (ntxId === this.activeNtxId) {
             return;
         }
@@ -359,14 +389,10 @@ export default class TabManager extends Component {
         this.setCurrentNavigationStateToHash();
     }
 
-    /**
-     * @param ntxId
-     * @returns {Promise<boolean>} true if note context has been removed, false otherwise
-     */
-    async removeNoteContext(ntxId) {
+    async removeNoteContext(ntxId: string | null): Promise<boolean> {
         // removing note context is an async process which can take some time, if users presses CTRL-W quickly, two
         // close events could interleave which would then lead to attempting to activate already removed context.
-        return await this.mutex.runExclusively(async () => {
+        return await this.mutex.runExclusively(async (): Promise<boolean> => {
             let noteContextToRemove;
 
             try {
@@ -399,7 +425,7 @@ export default class TabManager extends Component {
             const noteContextsToRemove = noteContextToRemove.getSubContexts();
             const ntxIdsToRemove = noteContextsToRemove.map((nc) => nc.ntxId);
 
-            await this.triggerEvent("beforeNoteContextRemove", { ntxIds: ntxIdsToRemove });
+            await this.triggerEvent("beforeNoteContextRemove", { ntxIds: ntxIdsToRemove.filter((id) => id !== null) });
 
             if (!noteContextToRemove.isMainContext()) {
                 const siblings = noteContextToRemove.getMainContext().getSubContexts();
@@ -421,12 +447,11 @@ export default class TabManager extends Component {
             }
 
             this.removeNoteContexts(noteContextsToRemove);
-
             return true;
         });
     }
 
-    removeNoteContexts(noteContextsToRemove) {
+    removeNoteContexts(noteContextsToRemove: NoteContext[]) {
         const ntxIdsToRemove = noteContextsToRemove.map((nc) => nc.ntxId);
 
         const position = this.noteContexts.findIndex((nc) => ntxIdsToRemove.includes(nc.ntxId));
@@ -435,12 +460,12 @@ export default class TabManager extends Component {
 
         this.addToRecentlyClosedTabs(noteContextsToRemove, position);
 
-        this.triggerEvent("noteContextRemoved", { ntxIds: ntxIdsToRemove });
+        this.triggerEvent("noteContextRemoved", { ntxIds: ntxIdsToRemove.filter((id) => id !== null) });
 
         this.tabsUpdate.scheduleUpdate();
     }
 
-    addToRecentlyClosedTabs(noteContexts, position) {
+    addToRecentlyClosedTabs(noteContexts: NoteContext[], position: number) {
         if (noteContexts.length === 1 && noteContexts[0].isEmpty()) {
             return;
         }
@@ -448,26 +473,42 @@ export default class TabManager extends Component {
         this.recentlyClosedTabs.push({ contexts: noteContexts, position: position });
     }
 
-    tabReorderEvent({ ntxIdsInOrder }) {
-        const order = {};
+    tabReorderEvent({ ntxIdsInOrder }: { ntxIdsInOrder: string[] }) {
+        const order: Record<string, number> = {};
 
         let i = 0;
 
         for (const ntxId of ntxIdsInOrder) {
             for (const noteContext of this.getNoteContextById(ntxId).getSubContexts()) {
-                order[noteContext.ntxId] = i++;
+                if (noteContext.ntxId) {
+                    order[noteContext.ntxId] = i++;
+                }
             }
         }
 
-        this.children.sort((a, b) => (order[a.ntxId] < order[b.ntxId] ? -1 : 1));
+        this.children.sort((a, b) => {
+            if (!a.ntxId || !b.ntxId) return 0;
+            return (order[a.ntxId] ?? 0) < (order[b.ntxId] ?? 0) ? -1 : 1;
+        });
 
         this.tabsUpdate.scheduleUpdate();
     }
 
-    noteContextReorderEvent({ ntxIdsInOrder, oldMainNtxId, newMainNtxId }) {
+    noteContextReorderEvent({
+        ntxIdsInOrder,
+        oldMainNtxId,
+        newMainNtxId
+    }: {
+        ntxIdsInOrder: string[];
+        oldMainNtxId?: string;
+        newMainNtxId?: string;
+    }) {
         const order = Object.fromEntries(ntxIdsInOrder.map((v, i) => [v, i]));
 
-        this.children.sort((a, b) => (order[a.ntxId] < order[b.ntxId] ? -1 : 1));
+        this.children.sort((a, b) => {
+            if (!a.ntxId || !b.ntxId) return 0;
+            return (order[a.ntxId] ?? 0) < (order[b.ntxId] ?? 0) ? -1 : 1;
+        });
 
         if (oldMainNtxId && newMainNtxId) {
             this.children.forEach((c) => {
@@ -485,7 +526,8 @@ export default class TabManager extends Component {
     }
 
     async activateNextTabCommand() {
-        const activeMainNtxId = this.getActiveMainContext().ntxId;
+        const activeMainNtxId = this.getActiveMainContext()?.ntxId;
+        if (!activeMainNtxId) return;
 
         const oldIdx = this.mainNoteContexts.findIndex((nc) => nc.ntxId === activeMainNtxId);
         const newActiveNtxId = this.mainNoteContexts[oldIdx === this.mainNoteContexts.length - 1 ? 0 : oldIdx + 1].ntxId;
@@ -494,7 +536,8 @@ export default class TabManager extends Component {
     }
 
     async activatePreviousTabCommand() {
-        const activeMainNtxId = this.getActiveMainContext().ntxId;
+        const activeMainNtxId = this.getActiveMainContext()?.ntxId;
+        if (!activeMainNtxId) return;
 
         const oldIdx = this.mainNoteContexts.findIndex((nc) => nc.ntxId === activeMainNtxId);
         const newActiveNtxId = this.mainNoteContexts[oldIdx === 0 ? this.mainNoteContexts.length - 1 : oldIdx - 1].ntxId;
@@ -506,9 +549,8 @@ export default class TabManager extends Component {
         await this.removeNoteContext(this.activeNtxId);
     }
 
-    beforeUnloadEvent() {
+    beforeUnloadEvent(): boolean {
         this.tabsUpdate.updateNowIfNecessary();
-
         return true; // don't block closing the tab, this metadata is not that important
     }
 
@@ -522,7 +564,7 @@ export default class TabManager extends Component {
         }
     }
 
-    async closeOtherTabsCommand({ ntxId }) {
+    async closeOtherTabsCommand({ ntxId }: { ntxId: string }) {
         for (const ntxIdToRemove of this.mainNoteContexts.map((nc) => nc.ntxId)) {
             if (ntxIdToRemove !== ntxId) {
                 await this.removeNoteContext(ntxIdToRemove);
@@ -530,7 +572,7 @@ export default class TabManager extends Component {
         }
     }
 
-    async closeRightTabsCommand({ ntxId }) {
+    async closeRightTabsCommand({ ntxId }: { ntxId: string }) {
         const ntxIds = this.mainNoteContexts.map((nc) => nc.ntxId);
         const index = ntxIds.indexOf(ntxId);
 
@@ -542,11 +584,11 @@ export default class TabManager extends Component {
         }
     }
 
-    async closeTabCommand({ ntxId }) {
+    async closeTabCommand({ ntxId }: { ntxId: string }) {
         await this.removeNoteContext(ntxId);
     }
 
-    async moveTabToNewWindowCommand({ ntxId }) {
+    async moveTabToNewWindowCommand({ ntxId }: { ntxId: string }) {
         const { notePath, hoistedNoteId } = this.getNoteContextById(ntxId);
 
         const removed = await this.removeNoteContext(ntxId);
@@ -556,17 +598,16 @@ export default class TabManager extends Component {
         }
     }
 
-    async copyTabToNewWindowCommand({ ntxId }) {
+    async copyTabToNewWindowCommand({ ntxId }: { ntxId: string }) {
         const { notePath, hoistedNoteId } = this.getNoteContextById(ntxId);
         this.triggerCommand("openInWindow", { notePath, hoistedNoteId });
     }
 
     async reopenLastTabCommand() {
-        let closeLastEmptyTab = null;
-
-        await this.mutex.runExclusively(async () => {
+        const closeLastEmptyTab: NoteContext | undefined = await this.mutex.runExclusively(async () => {
+            let closeLastEmptyTab
             if (this.recentlyClosedTabs.length === 0) {
-                return;
+                return closeLastEmptyTab;
             }
 
             if (this.noteContexts.length === 1 && this.noteContexts[0].isEmpty()) {
@@ -575,6 +616,8 @@ export default class TabManager extends Component {
             }
 
             const lastClosedTab = this.recentlyClosedTabs.pop();
+            if (!lastClosedTab) return closeLastEmptyTab;
+
             const noteContexts = lastClosedTab.contexts;
 
             for (const noteContext of noteContexts) {
@@ -589,7 +632,7 @@ export default class TabManager extends Component {
                 ...this.noteContexts.slice(-noteContexts.length),
                 ...this.noteContexts.slice(lastClosedTab.position, -noteContexts.length)
             ];
-            await this.noteContextReorderEvent({ ntxIdsInOrder: ntxsInOrder.map((nc) => nc.ntxId) });
+            this.noteContextReorderEvent({ ntxIdsInOrder: ntxsInOrder.map((nc) => nc.ntxId).filter((id) => id !== null) });
 
             let mainNtx = noteContexts.find((nc) => nc.isMainContext());
             if (mainNtx) {
@@ -601,13 +644,14 @@ export default class TabManager extends Component {
             } else {
                 // reopened a single split, need to reorder the pane widget in split note container
                 await this.triggerEvent("contextsReopened", {
-                    ntxId: ntxsInOrder[lastClosedTab.position].ntxId,
+                    mainNtxId: ntxsInOrder[lastClosedTab.position].ntxId,
                     // this is safe since lastClosedTab.position can never be 0 in this case
-                    afterNtxId: ntxsInOrder[lastClosedTab.position - 1].ntxId
+                    tabPosition: lastClosedTab.position - 1
                 });
             }
 
             const noteContextToActivate = noteContexts.length === 1 ? noteContexts[0] : noteContexts.find((nc) => nc.isMainContext());
+            if (!noteContextToActivate) return closeLastEmptyTab;
 
             await this.activateNoteContext(noteContextToActivate.ntxId);
 
@@ -615,6 +659,7 @@ export default class TabManager extends Component {
                 noteContext: noteContextToActivate,
                 notePath: noteContextToActivate.notePath
             });
+            return closeLastEmptyTab;
         });
 
         if (closeLastEmptyTab) {
@@ -626,7 +671,9 @@ export default class TabManager extends Component {
         this.tabsUpdate.scheduleUpdate();
     }
 
-    async updateDocumentTitle(activeNoteContext) {
+    async updateDocumentTitle(activeNoteContext: NoteContext | null) {
+        if (!activeNoteContext) return;
+
         const titleFragments = [
             // it helps to navigate in history if note title is included in the title
             await activeNoteContext.getNavigationTitle(),
@@ -636,7 +683,7 @@ export default class TabManager extends Component {
         document.title = titleFragments.join(" - ");
     }
 
-    async entitiesReloadedEvent({ loadResults }) {
+    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         const activeContext = this.getActiveContext();
 
         if (activeContext && loadResults.isNoteReloaded(activeContext.noteId)) {
@@ -646,7 +693,6 @@ export default class TabManager extends Component {
 
     async frocaReloadedEvent() {
         const activeContext = this.getActiveContext();
-
         if (activeContext) {
             await this.updateDocumentTitle(activeContext);
         }

src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Book/Calendar View.html

@@ -18,40 +18,49 @@
         </p>
         <p>The Calendar view of Book notes will display each child note in a calendar
           that has a start date and optionally an end date, as an event.</p>
+        <p>The Calendar view has multiple display modes:</p>
+        <ul>
+          <li>Week view, where all the 7 days of the week (or 5 if the weekends are
+            hidden) are displayed in columns. This mode allows entering and displaying
+            time-specific events, not just all-day events.</li>
+          <li>Month view, where the entire month is displayed and all-day events can
+            be inserted. Both time-specific events and all-day events are listed.</li>
+          <li>Year view, which displays the entire year for quick reference.</li>
+          <li>List view, which displays all the events of a given month in sequence.</li>
+        </ul>
         <p>Unlike other Book view types, the Calendar view also allows some kind
           of interaction, such as moving events around as well as creating new ones.</p>
         <h2>Creating a calendar</h2>
-        <figure class="table">
-          <table>
-            <thead>
-              <tr>
-                <th>&nbsp;</th>
-                <th>&nbsp;</th>
-                <th>&nbsp;</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>1</td>
-                <td>
-                  <img src="2_Calendar View_image.png">
-                </td>
-                <td>The Calendar View works only for Book note types. To create a new note,
-                  right click on the note tree on the left and select Insert note after,
-                  or Insert child note and then select <em>Book</em>.</td>
-              </tr>
-              <tr>
-                <td>2</td>
-                <td>
-                  <img src="3_Calendar View_image.png">
-                </td>
-                <td>Once created, the “View type” of the Book needs changed to “Calendar”,
-                  by selecting the “Book Properties” tab in the ribbon.</td>
-              </tr>
-            </tbody>
-          </table>
-        </figure>
-        <h2>Creating a new event/note</h2>
+        <table>
+          <thead>
+            <tr>
+              <th></th>
+              <th></th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1</td>
+              <td>
+                <img src="2_Calendar View_image.png">
+              </td>
+              <td>The Calendar View works only for Book note types. To create a new note,
+                right click on the note tree on the left and select Insert note after,
+                or Insert child note and then select <em>Book</em>.</td>
+            </tr>
+            <tr>
+              <td>2</td>
+              <td>
+                <img src="3_Calendar View_image.png">
+              </td>
+              <td>Once created, the “View type” of the Book needs changed to “Calendar”,
+                by selecting the “Book Properties” tab in the ribbon.</td>
+            </tr>
+          </tbody>
+        </table>
+        
+<h2>Creating a new event/note</h2>
         <ul>
           <li>Clicking on a day will create a new child note and assign it to that particular
             day.
@@ -72,7 +81,7 @@
         <ul>
           <li>Hovering the mouse over an event will display information about the note.
             <br>
-            <img src="9_Calendar View_image.png">
+            <img src="7_Calendar View_image.png">
           </li>
           <li>Left clicking the event will go to that note. Middle clicking will open
             the note in a new tab and right click will offer more options including
@@ -83,284 +92,272 @@
         </ul>
         <h2>Configuring the calendar</h2>
         <p>The following attributes can be added to the book type:</p>
-        <figure class="table">
-          <table>
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td><code>#calendar:hideWeekends</code>
-                </td>
-                <td>When present (regardless of value), it will hide Saturday and Sundays
-                  from the calendar.</td>
-              </tr>
-              <tr>
-                <td><code>#calendar:weekNumbers</code>
-                </td>
-                <td>When present (regardless of value), it will show the number of the week
-                  on the calendar.</td>
-              </tr>
-              <tr>
-                <td><code>#calendar:view</code>
-                </td>
-                <td>
-                  <p>Which view to display in the calendar:</p>
-                  <ul>
-                    <li><code>timeGridWeek</code> for the <em>week</em> view;</li>
-                    <li><code>dayGridMonth</code> for the <em>month</em> view;</li>
-                    <li><code>multiMonthYear</code> for the <em>year</em> view;</li>
-                    <li><code>listMonth</code> for the <em>list</em> view.</li>
-                  </ul>
-                  <p>Any other value will be dismissed and the default view (month) will be
-                    used instead.</p>
-                  <p>The value of this label is automatically updated when changing the view
-                    using the UI buttons.</p>
-                </td>
-              </tr>
-              <tr>
-                <td><code>~child:template</code>
-                </td>
-                <td>Defines the template for newly created notes in the calendar (via dragging
-                  or clicking).</td>
-              </tr>
-            </tbody>
-          </table>
-        </figure>
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>#calendar:hideWeekends</code>
+              </td>
+              <td>When present (regardless of value), it will hide Saturday and Sundays
+                from the calendar.</td>
+            </tr>
+            <tr>
+              <td><code>#calendar:weekNumbers</code>
+              </td>
+              <td>When present (regardless of value), it will show the number of the week
+                on the calendar.</td>
+            </tr>
+            <tr>
+              <td><code>#calendar:view</code>
+              </td>
+              <td>
+                <p>Which view to display in the calendar:</p>
+                <ul>
+                  <li><code>timeGridWeek</code> for the <em>week</em> view;</li>
+                  <li><code>dayGridMonth</code> for the <em>month</em> view;</li>
+                  <li><code>multiMonthYear</code> for the <em>year</em> view;</li>
+                  <li><code>listMonth</code> for the <em>list</em> view.</li>
+                </ul>
+                <p>Any other value will be dismissed and the default view (month) will be
+                  used instead.</p>
+                <p>The value of this label is automatically updated when changing the view
+                  using the UI buttons.</p>
+              </td>
+            </tr>
+            <tr>
+              <td><code>~child:template</code>
+              </td>
+              <td>Defines the template for newly created notes in the calendar (via dragging
+                or clicking).</td>
+            </tr>
+          </tbody>
+        </table>
         <p>In addition, the first day of the week can be either Sunday or Monday
           and can be adjusted from the application settings.</p>
         <h2>Configuring the calendar events</h2>
         <p>For each note of the calendar, the following attributes can be used:</p>
-        <figure
-        class="table">
-          <table>
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td><code>#startDate</code>
-                </td>
-                <td>The date the event starts, which will display it in the calendar. The
-                  format is <code>YYYY-MM-DD</code> (year, month and day separated by a minus
-                  sign).</td>
-              </tr>
-              <tr>
-                <td><code>#endDate</code>
-                </td>
-                <td>Similar to <code>startDate</code>, mentions the end date if the event spans
-                  across multiple days. The date is inclusive, so the end day is also considered.
-                  The attribute can be missing for single-day events.</td>
-              </tr>
-              <tr>
-                <td><code>#startTime</code>
-                </td>
-                <td>The time the event starts at. If this value is missing, then the event
-                  is considered a full-day event. The format is <code>HH:MM</code> (hours in
-                  24-hour format and minutes).</td>
-              </tr>
-              <tr>
-                <td><code>#endTime</code>
-                </td>
-                <td>Similar to <code>startTime</code>, it mentions the time at which the event
-                  ends (in relation with <code>endDate</code> if present, or <code>startDate</code>).</td>
-              </tr>
-              <tr>
-                <td><code>#color</code>
-                </td>
-                <td>Displays the event with a specified color (named such as <code>red</code>, <code>gray</code> or
-                  hex such as <code>#FF0000</code>). This will also change the color of the
-                  note in other places such as the note tree.</td>
-              </tr>
-              <tr>
-                <td><code>#calendar:color</code>
-                </td>
-                <td>Similar to <code>#color</code>, but applies the color only for the event
-                  in the calendar and not for other places such as the note tree.</td>
-              </tr>
-              <tr>
-                <td><code>#iconClass</code>
-                </td>
-                <td>If present, the icon of the note will be displayed to the left of the
-                  event title.</td>
-              </tr>
-              <tr>
-                <td><code>#calendar:title</code>
-                </td>
-                <td>Changes the title of an event to point to an attribute of the note other
-                  than the title, either a label (e.g. <code>#assignee</code>) or a relation
-                  (e.g. <code>~for</code>). See <em>Advanced use-cases</em> for more information.</td>
-              </tr>
-              <tr>
-                <td><code>#calendar:displayedAttributes</code>
-                </td>
-                <td>Allows displaying the value of one or more attributes in the calendar
-                  like this:&nbsp;&nbsp;
-                  <br>
-                  <br>
-                  <img src="11_Calendar View_image.png">&nbsp;
-                  <br>
-                  <br><code>#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code>
-                  <br>
-                  <br>It can also be used with relations, case in which it will display the
-                  title of the target note:&nbsp;
-                  <br>
-                  <br><code>~assignee=@My assignee #calendar:displayedAttributes="assignee"</code>
-                </td>
-              </tr>
-              <tr>
-                <td><code>#calendar:startDate</code>
-                </td>
-                <td>Allows using a different label to represent the start date, other than <code>startDate</code> (e.g. <code>expiryDate</code>).
-                  The label name <strong>must not be</strong> prefixed with <code>#</code>.
-                  If the label is not defined for a note, the default will be used instead.</td>
-              </tr>
-              <tr>
-                <td><code>#calendar:endDate</code>
-                </td>
-                <td>Similar to <code>#calendar:startDate</code>, allows changing the attribute
-                  which is being used to read the end date.</td>
-              </tr>
-              <tr>
-                <td><code>#calendar:startTime</code>
-                </td>
-                <td>Similar to <code>#calendar:startDate</code>, allows changing the attribute
-                  which is being used to read the start time.</td>
-              </tr>
-              <tr>
-                <td><code>#calendar:endTime</code>
-                </td>
-                <td>Similar to <code>#calendar:startDate</code>, allows changing the attribute
-                  which is being used to read the end time.</td>
-              </tr>
-            </tbody>
-          </table>
-          </figure>
-          <h2>How the calendar works</h2>
-          <p>
-            <img src="14_Calendar View_image.png">
-          </p>
-          <p>The calendar displays all the child notes of the book that have a <code>#startDate</code>.
-            An <code>#endDate</code> can optionally be added.</p>
-          <p>If editing the start date and end date from the note itself is desirable,
-            the following attributes can be added to the book note:</p><pre><code class="language-text-x-trilium-auto">#viewType=calendar #label:startDate(inheritable)="promoted,alias=Start Date,single,date"
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>#startDate</code>
+              </td>
+              <td>The date the event starts, which will display it in the calendar. The
+                format is <code>YYYY-MM-DD</code> (year, month and day separated by a minus
+                sign).</td>
+            </tr>
+            <tr>
+              <td><code>#endDate</code>
+              </td>
+              <td>Similar to <code>startDate</code>, mentions the end date if the event spans
+                across multiple days. The date is inclusive, so the end day is also considered.
+                The attribute can be missing for single-day events.</td>
+            </tr>
+            <tr>
+              <td><code>#startTime</code>
+              </td>
+              <td>The time the event starts at. If this value is missing, then the event
+                is considered a full-day event. The format is <code>HH:MM</code> (hours in
+                24-hour format and minutes).</td>
+            </tr>
+            <tr>
+              <td><code>#endTime</code>
+              </td>
+              <td>Similar to <code>startTime</code>, it mentions the time at which the event
+                ends (in relation with <code>endDate</code> if present, or <code>startDate</code>).</td>
+            </tr>
+            <tr>
+              <td><code>#color</code>
+              </td>
+              <td>Displays the event with a specified color (named such as <code>red</code>, <code>gray</code> or
+                hex such as <code>#FF0000</code>). This will also change the color of the
+                note in other places such as the note tree.</td>
+            </tr>
+            <tr>
+              <td><code>#calendar:color</code>
+              </td>
+              <td>Similar to <code>#color</code>, but applies the color only for the event
+                in the calendar and not for other places such as the note tree.</td>
+            </tr>
+            <tr>
+              <td><code>#iconClass</code>
+              </td>
+              <td>If present, the icon of the note will be displayed to the left of the
+                event title.</td>
+            </tr>
+            <tr>
+              <td><code>#calendar:title</code>
+              </td>
+              <td>Changes the title of an event to point to an attribute of the note other
+                than the title, can either a label or a relation (without the <code>#</code> or <code>~</code> symbol).
+                See <em>Use-cases</em> for more information.</td>
+            </tr>
+            <tr>
+              <td><code>#calendar:displayedAttributes</code>
+              </td>
+              <td>Allows displaying the value of one or more attributes in the calendar
+                like this:   
+                <br>
+                <br>
+                <img src="9_Calendar View_image.png"> 
+                <br>
+                <br><code>#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code> 
+                <br>
+                <br>It can also be used with relations, case in which it will display the
+                title of the target note:  
+                <br>
+                <br><code>~assignee=@My assignee #calendar:displayedAttributes="assignee"</code>
+              </td>
+            </tr>
+            <tr>
+              <td><code>#calendar:startDate</code>
+              </td>
+              <td>Allows using a different label to represent the start date, other than <code>startDate</code> (e.g. <code>expiryDate</code>).
+                The label name <strong>must not be</strong> prefixed with <code>#</code>.
+                If the label is not defined for a note, the default will be used instead.</td>
+            </tr>
+            <tr>
+              <td><code>#calendar:endDate</code>
+              </td>
+              <td>Similar to <code>#calendar:startDate</code>, allows changing the attribute
+                which is being used to read the end date.</td>
+            </tr>
+            <tr>
+              <td><code>#calendar:startTime</code>
+              </td>
+              <td>Similar to <code>#calendar:startDate</code>, allows changing the attribute
+                which is being used to read the start time.</td>
+            </tr>
+            <tr>
+              <td><code>#calendar:endTime</code>
+              </td>
+              <td>Similar to <code>#calendar:startDate</code>, allows changing the attribute
+                which is being used to read the end time.</td>
+            </tr>
+          </tbody>
+        </table>
+        
+<h2>How the calendar works</h2>
+        <p>
+          <img src="11_Calendar View_image.png">
+        </p>
+        <p>The calendar displays all the child notes of the book that have a <code>#startDate</code>.
+          An <code>#endDate</code> can optionally be added.</p>
+        <p>If editing the start date and end date from the note itself is desirable,
+          the following attributes can be added to the book note:</p><pre><code class="language-text-x-trilium-auto">#viewType=calendar #label:startDate(inheritable)="promoted,alias=Start Date,single,date"
 #label:endDate(inheritable)="promoted,alias=End Date,single,date"
 #hidePromotedAttributes </code></pre>
-          <p>This will result in:</p>
-          <p>
-            <img src="12_Calendar View_image.png">
-          </p>
-          <p>When not used in a Journal, the calendar is recursive. That is, it will
-            look for events not just in its child notes but also in the children of
-            these child notes.</p>
-          <h2>Use-cases</h2>
-          <h3>Using with the Journal / calendar</h3>
-          <p>It is possible to integrate the calendar view into the Journal with day
-            notes. In order to do so change the note type of the Journal note (calendar
-            root) to Book and then select the Calendar View.</p>
-          <p>Based on the <code>#calendarRoot</code> (or <code>#workspaceCalendarRoot</code>)
-            attribute, the calendar will know that it's in a calendar and apply the
-            following:</p>
-          <ul>
-            <li>The calendar events are now rendered based on their <code>dateNote</code> attribute
-              rather than <code>startDate</code>.</li>
-            <li>Interactive editing such as dragging over an empty era or resizing an
-              event is no longer possible.</li>
-            <li>Clicking on the empty space on a date will automatically open that day's
-              note or create it if it does not exist.</li>
-            <li>Direct children of a day note will be displayed on the calendar despite
-              not having a <code>dateNote</code> attribute. Children of the child notes
-              will not be displayed.</li>
-          </ul>
-          <p>
-            <img src="10_Calendar View_image.png">
-          </p>
-          <h3>Using a different attribute as event title</h3>
-          <p>By default, events are displayed on the calendar by their note title.
-            However, it is possible to configure a different attribute to be displayed
-            instead.</p>
-          <p>To do so, assign <code>#calendar:title</code> to the child note (not the
-            calendar/book note), with the value being <code>#name</code> where <code>name</code> can
-            be any label. The attribute can also come through inheritance such as a
-            template attribute. If the note does not have the requested label, the
-            title of the note will be used instead.</p>
-          <figure class="table">
-            <table>
-              <thead>
-                <tr>
-                  <th>&nbsp;</th>
-                  <th>&nbsp;</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>
-                    <img src="5_Calendar View_image.png">
-                  </td>
-                  <td>
-                    <img src="7_Calendar View_image.png">
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </figure>
-          <h3>Using a relation attribute as event title</h3>
-          <p>Similarly to using an attribute, use <code>#calendar:title</code> and set
-            it to <code>~name</code> where <code>name</code> is the name of the relation
-            to use.</p>
-          <p>Moreover, if there are more relations of the same name, they will be displayed
-            as multiple events coming from the same note.</p>
-          <figure class="table">
-            <table>
-              <thead>
-                <tr>
-                  <th>&nbsp;</th>
-                  <th>&nbsp;</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>
-                    <img src="6_Calendar View_image.png">
-                  </td>
-                  <td>
-                    <img src="8_Calendar View_image.png">
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </figure>
-          <p>Note that it's even possible to have a <code>#calendar:title</code> on the
-            target note (e.g. “John Smith”) which will try to render an attribute of
-            it. Note that it's not possible to use a relation here as well for safety
-            reasons (an accidental recursion &nbsp;of attributes could cause the application
-            to loop infinitely).</p>
-          <figure class="table">
-            <table>
-              <thead>
-                <tr>
-                  <th>&nbsp;</th>
-                  <th>&nbsp;</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>
-                    <img src="13_Calendar View_image.png">
-                  </td>
-                  <td>
-                    <img src="1_Calendar View_image.png">
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </figure>
+        <p>This will result in:</p>
+        <p>
+          <img src="10_Calendar View_image.png">
+        </p>
+        <p>When not used in a Journal, the calendar is recursive. That is, it will
+          look for events not just in its child notes but also in the children of
+          these child notes.</p>
+        <h2>Use-cases</h2>
+        <h3>Using with the Journal / calendar</h3>
+        <p>It is possible to integrate the calendar view into the Journal with day
+          notes. In order to do so change the note type of the Journal note (calendar
+          root) to Book and then select the Calendar View.</p>
+        <p>Based on the <code>#calendarRoot</code> (or <code>#workspaceCalendarRoot</code>)
+          attribute, the calendar will know that it's in a calendar and apply the
+          following:</p>
+        <ul>
+          <li>The calendar events are now rendered based on their <code>dateNote</code> attribute
+            rather than <code>startDate</code>.</li>
+          <li>Interactive editing such as dragging over an empty era or resizing an
+            event is no longer possible.</li>
+          <li>Clicking on the empty space on a date will automatically open that day's
+            note or create it if it does not exist.</li>
+          <li>Direct children of a day note will be displayed on the calendar despite
+            not having a <code>dateNote</code> attribute. Children of the child notes
+            will not be displayed.</li>
+        </ul>
+        <p>
+          <img src="8_Calendar View_image.png">
+        </p>
+        <h3>Using a different attribute as event title</h3>
+        <p>By default, events are displayed on the calendar by their note title.
+          However, it is possible to configure a different attribute to be displayed
+          instead.</p>
+        <p>To do so, assign <code>#calendar:title</code> to the child note (not the
+          calendar/book note), with the value being <code>name</code> where <code>name</code> can
+          be any label (make not to add the <code>#</code> prefix). The attribute can
+          also come through inheritance such as a template attribute. If the note
+          does not have the requested label, the title of the note will be used instead.</p>
+        <table>
+          <thead>
+            <tr>
+              <th> </th>
+              <th> </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-11 #endDate=2025-02-13 #name="My vacation" #calendar:title="name"</code></pre>
+              </td>
+              <td>
+                <img src="5_Calendar View_image.png">
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        
+<h3>Using a relation attribute as event title</h3>
+        <p>Similarly to using an attribute, use <code>#calendar:title</code> and set
+          it to <code>name</code> where <code>name</code> is the name of the relation
+          to use.</p>
+        <p>Moreover, if there are more relations of the same name, they will be displayed
+          as multiple events coming from the same note.</p>
+        <table>
+          <thead>
+            <tr>
+              <th></th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>#startDate=2025-02-14 #endDate=2025-02-15 ~for=@John Smith ~for=@Jane Doe #calendar:title="for"</code>
+              </td>
+              <td>
+                <img src="6_Calendar View_image.png">
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <p>Note that it's even possible to have a <code>#calendar:title</code> on the
+          target note (e.g. “John Smith”) which will try to render an attribute of
+          it. Note that it's not possible to use a relation here as well for safety
+          reasons (an accidental recursion  of attributes could cause the application
+          to loop infinitely).</p>
+        <table>
+          <thead>
+            <tr>
+              <th></th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>#calendar:title="shortName" #shortName="John S."</code>
+              </td>
+              <td>
+                <img src="1_Calendar View_image.png">
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
   </body>

src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Admonitions.html

@@ -13,62 +13,59 @@
        <h1 data-trilium-h1>Admonitions</h1>
 
       <div class="ck-content">
-        <div>
-          <div>
-            <figure class="image">
-              <img style="aspect-ratio:959/547;" src="1_Admonitions_image.png" width="959"
-              height="547">
-            </figure>
-            <p>Admonitions are a way to highlight information to the reader. Other names
-              for it include <em>call-outs</em> and <em>info/warning/alert boxes</em>.</p>
-            <h2>Inserting a new admonition</h2>
-            <h3>From the UI</h3>
-            <p>In the Formatting toolbar:</p>
-            <p>
-              <img src="Admonitions_image.png" width="202" height="194">
-            </p>
-            <h3>Via the keyboard</h3>
-            <p>It's possible to insert an admonition simply by typing:</p>
-            <ul>
-              <li><code>!!! note</code>
-              </li>
-              <li><code>!!! tip</code>
-              </li>
-              <li><code>!!! important</code>
-              </li>
-              <li><code>!!! caution</code>
-              </li>
-              <li><code>!!! warning</code>
-              </li>
-            </ul>
-            <p>In addition to that, it's also possible to type <code>!!!&nbsp;</code> followed
-              by any text, case in which a default admonition type will appear (note)
-              with the entered text inside it.</p>
-            <h2>Interaction</h2>
-            <p>By design, admonitions act very similar to block quotes.</p>
-            <ul>
-              <li>Selecting a text and pressing the admonition button will turn that text
-                into an admonition.</li>
-              <li>If selecting multiple admonitions, pressing the admonition button will
-                automatically merge them into one.</li>
-            </ul>
-            <p>Inside an admonition:</p>
-            <ul>
-              <li>Pressing <kbd>Backspace</kbd> while the admonition is empty will remove
-                it.</li>
-              <li>Pressing <kbd>Enter</kbd> will start a new paragraph. Pressing it twice
-                will exit out of the admonition.</li>
-              <li>Headings and other block content including tables can be inserted inside
-                the admonition.</li>
-            </ul>
-            <h2>Types of admonitions</h2>
-            <p>There are currently five types of admonitions: <em>Note</em>, <em>Tip</em>, <em>Important</em>, <em>Caution</em>, <em>Warning</em>.</p>
-            <p>These types were inspired by GitHub's support for this feature and there
-              are currently no plans for adjusting it or allowing the user to customize
-              them.</p>
-            <h2>Markdown support</h2>
-            <p>The Markdown syntax for admonitions as supported by Trilium is the one
-              that GitHub uses, which is as follows:</p><pre><code class="language-text-x-markdown">&gt; [!NOTE]
+        <p>
+          <img src="1_Admonitions_image.png">
+        </p>
+        <p>Admonitions are a way to highlight information to the reader. Other names
+          for it include <em>call-outs</em> and <em>info/warning/alert boxes</em>.</p>
+        <h2>Inserting a new admonition</h2>
+        <h3>From the UI</h3>
+        <p>In the Formatting toolbar:</p>
+        <p>
+          <img src="Admonitions_image.png">
+        </p>
+        <h3>Via the keyboard</h3>
+        <p>It's possible to insert an admonition simply by typing:</p>
+        <ul>
+          <li><code>!!! note</code>
+          </li>
+          <li><code>!!! tip</code>
+          </li>
+          <li><code>!!! important</code>
+          </li>
+          <li><code>!!! caution</code>
+          </li>
+          <li><code>!!! warning</code>
+          </li>
+        </ul>
+        <p>In addition to that, it's also possible to type <code>!!!</code>  followed
+          by any text, case in which a default admonition type will appear (note)
+          with the entered text inside it.</p>
+        <h2>Interaction</h2>
+        <p>By design, admonitions act very similar to block quotes.</p>
+        <ul>
+          <li>Selecting a text and pressing the admonition button will turn that text
+            into an admonition.</li>
+          <li>If selecting multiple admonitions, pressing the admonition button will
+            automatically merge them into one.</li>
+        </ul>
+        <p>Inside an admonition:</p>
+        <ul>
+          <li>Pressing <kbd>Backspace</kbd> while the admonition is empty will remove
+            it.</li>
+          <li>Pressing <kbd>Enter</kbd> will start a new paragraph. Pressing it twice
+            will exit out of the admonition.</li>
+          <li>Headings and other block content including tables can be inserted inside
+            the admonition.</li>
+        </ul>
+        <h2>Types of admonitions</h2>
+        <p>There are currently five types of admonitions: <em>Note</em>, <em>Tip</em>, <em>Important</em>, <em>Caution</em>, <em>Warning</em>.</p>
+        <p>These types were inspired by GitHub's support for this feature and there
+          are currently no plans for adjusting it or allowing the user to customize
+          them.</p>
+        <h2>Markdown support</h2>
+        <p>The Markdown syntax for admonitions as supported by Trilium is the one
+          that GitHub uses, which is as follows:</p><pre><code class="language-text-x-trilium-auto">&gt; [!NOTE]
 &gt; This is a note.
 
 &gt; [!TIP]
@@ -79,10 +76,8 @@
 
 &gt; [!CAUTION]
 &gt; This is a caution.</code></pre>
-            <p>There are currently no plans of supporting alternative admonition syntaxes
-              such as <code>!!! note</code>.</p>
-          </div>
-        </div>
+        <p>There are currently no plans of supporting alternative admonition syntaxes
+          such as <code>!!! note</code>.</p>
       </div>
     </div>
   </body>

src/public/app/doc_notes/en/User Guide/navigation.html

@@ -9,6 +9,73 @@
     <ul>
       <li><a href="User%20Guide.html" target="detail">User Guide</a>
         <ul>
+          <li>Advanced Usage
+            <ul>
+              <li><a href="User%20Guide/Advanced%20Usage/Attributes.html" target="detail">Attributes</a>
+                <ul>
+                  <li><a href="User%20Guide/Advanced%20Usage/Attributes/Attribute%20Inheritance.html"
+                    target="detail">Attribute Inheritance</a>
+                  </li>
+                  <li><a href="User%20Guide/Advanced%20Usage/Attributes/Promoted%20Attributes.html"
+                    target="detail">Promoted Attributes</a>
+                  </li>
+                  <li><a href="User%20Guide/Advanced%20Usage/Attributes/Template.html" target="detail">Template</a>
+                  </li>
+                </ul>
+              </li>
+              <li><a href="User%20Guide/Advanced%20Usage/Relation%20Map.html" target="detail">Relation Map</a>
+              </li>
+              <li><a href="User%20Guide/Advanced%20Usage/Note%20Map.html" target="detail">Note Map</a>
+              </li>
+              <li><a href="User%20Guide/Advanced%20Usage/Sharing.html" target="detail">Sharing</a>
+                <ul>
+                  <li><a href="User%20Guide/Advanced%20Usage/Sharing/Serving%20directly%20the%20content%20o.html"
+                    target="detail">Serving directly the content of a note</a>
+                  </li>
+                </ul>
+              </li>
+              <li><a href="User%20Guide/Advanced%20Usage/Advanced%20Showcases.html" target="detail">Advanced Showcases</a>
+                <ul>
+                  <li><a href="User%20Guide/Advanced%20Usage/Advanced%20Showcases/Day%20Notes.html"
+                    target="detail">Day Notes</a>
+                  </li>
+                  <li><a href="User%20Guide/Advanced%20Usage/Advanced%20Showcases/Weight%20Tracker.html"
+                    target="detail">Weight Tracker</a>
+                  </li>
+                  <li><a href="User%20Guide/Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html"
+                    target="detail">Task Manager</a>
+                  </li>
+                </ul>
+              </li>
+              <li><a href="User%20Guide/Advanced%20Usage/Custom%20Request%20Handler.html"
+                target="detail">Custom Request Handler</a>
+              </li>
+              <li><a href="User%20Guide/Advanced%20Usage/Custom%20Resource%20Providers.html"
+                target="detail">Custom Resource Providers</a>
+              </li>
+              <li><a href="User%20Guide/Advanced%20Usage/ETAPI%20(REST%20API).html" target="detail">ETAPI (REST API)</a>
+              </li>
+              <li><a href="User%20Guide/Advanced%20Usage/Default%20Note%20Title.html" target="detail">Default Note Title</a>
+              </li>
+              <li><a href="User%20Guide/Advanced%20Usage/Database.html" target="detail">Database</a>
+                <ul>
+                  <li><a href="User%20Guide/Advanced%20Usage/Database/Manually%20altering%20the%20database.html"
+                    target="detail">Manually altering the database</a>
+                    <ul>
+                      <li><a href="User%20Guide/Advanced%20Usage/Database/Manually%20altering%20the%20database/SQL%20Console.html"
+                        target="detail">SQL Console</a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li><a href="User%20Guide/Advanced%20Usage/Configuration%20(config.ini%20or%20e.html"
+                target="detail">Configuration (config.ini or environment variables)</a>
+              </li>
+              <li><a href="User%20Guide/Advanced%20Usage/Bulk%20actions.html" target="detail">Bulk actions</a>
+              </li>
+            </ul>
+          </li>
           <li>Installation &amp; Setup
             <ul>
               <li><a href="User%20Guide/Installation%20%26%20Setup/Desktop%20Installation.html"
@@ -235,73 +302,6 @@
               </li>
             </ul>
           </li>
-          <li>Advanced Usage
-            <ul>
-              <li><a href="User%20Guide/Advanced%20Usage/Attributes.html" target="detail">Attributes</a>
-                <ul>
-                  <li><a href="User%20Guide/Advanced%20Usage/Attributes/Attribute%20Inheritance.html"
-                    target="detail">Attribute Inheritance</a>
-                  </li>
-                  <li><a href="User%20Guide/Advanced%20Usage/Attributes/Promoted%20Attributes.html"
-                    target="detail">Promoted Attributes</a>
-                  </li>
-                  <li><a href="User%20Guide/Advanced%20Usage/Attributes/Template.html" target="detail">Template</a>
-                  </li>
-                </ul>
-              </li>
-              <li><a href="User%20Guide/Advanced%20Usage/Relation%20Map.html" target="detail">Relation Map</a>
-              </li>
-              <li><a href="User%20Guide/Advanced%20Usage/Note%20Map.html" target="detail">Note Map</a>
-              </li>
-              <li><a href="User%20Guide/Advanced%20Usage/Sharing.html" target="detail">Sharing</a>
-                <ul>
-                  <li><a href="User%20Guide/Advanced%20Usage/Sharing/Serving%20directly%20the%20content%20o.html"
-                    target="detail">Serving directly the content of a note</a>
-                  </li>
-                </ul>
-              </li>
-              <li><a href="User%20Guide/Advanced%20Usage/Advanced%20Showcases.html" target="detail">Advanced Showcases</a>
-                <ul>
-                  <li><a href="User%20Guide/Advanced%20Usage/Advanced%20Showcases/Day%20Notes.html"
-                    target="detail">Day Notes</a>
-                  </li>
-                  <li><a href="User%20Guide/Advanced%20Usage/Advanced%20Showcases/Weight%20Tracker.html"
-                    target="detail">Weight Tracker</a>
-                  </li>
-                  <li><a href="User%20Guide/Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html"
-                    target="detail">Task Manager</a>
-                  </li>
-                </ul>
-              </li>
-              <li><a href="User%20Guide/Advanced%20Usage/Custom%20Request%20Handler.html"
-                target="detail">Custom Request Handler</a>
-              </li>
-              <li><a href="User%20Guide/Advanced%20Usage/Custom%20Resource%20Providers.html"
-                target="detail">Custom Resource Providers</a>
-              </li>
-              <li><a href="User%20Guide/Advanced%20Usage/ETAPI%20(REST%20API).html" target="detail">ETAPI (REST API)</a>
-              </li>
-              <li><a href="User%20Guide/Advanced%20Usage/Default%20Note%20Title.html" target="detail">Default Note Title</a>
-              </li>
-              <li><a href="User%20Guide/Advanced%20Usage/Database.html" target="detail">Database</a>
-                <ul>
-                  <li><a href="User%20Guide/Advanced%20Usage/Database/Manually%20altering%20the%20database.html"
-                    target="detail">Manually altering the database</a>
-                    <ul>
-                      <li><a href="User%20Guide/Advanced%20Usage/Database/Manually%20altering%20the%20database/SQL%20Console.html"
-                        target="detail">SQL Console</a>
-                      </li>
-                    </ul>
-                  </li>
-                </ul>
-              </li>
-              <li><a href="User%20Guide/Advanced%20Usage/Configuration%20(config.ini%20or%20e.html"
-                target="detail">Configuration (config.ini or environment variables)</a>
-              </li>
-              <li><a href="User%20Guide/Advanced%20Usage/Bulk%20actions.html" target="detail">Bulk actions</a>
-              </li>
-            </ul>
-          </li>
           <li>Theme development
             <ul>
               <li><a href="User%20Guide/Theme%20development/Creating%20a%20custom%20theme.html"

src/public/app/doc_notes/en/User Guide/style.css

@@ -25,7 +25,6 @@
     border-radius: 0.5em;
     padding: 1em;
     margin: 1.25em 0;
-    margin-right: 14px;
     position: relative;
     overflow: hidden;
 }

src/public/app/menus/link_context_menu.ts

@@ -22,13 +22,19 @@ function getItems(): MenuItem<CommandNames>[] {
 
 function handleLinkContextMenuItem(command: string | undefined, notePath: string, viewScope = {}, hoistedNoteId: string | null = null) {
     if (!hoistedNoteId) {
-        hoistedNoteId = appContext.tabManager.getActiveContext().hoistedNoteId;
+        hoistedNoteId = appContext.tabManager.getActiveContext()?.hoistedNoteId ?? null;
     }
 
     if (command === "openNoteInNewTab") {
         appContext.tabManager.openContextWithNote(notePath, { hoistedNoteId, viewScope });
     } else if (command === "openNoteInNewSplit") {
-        const subContexts = appContext.tabManager.getActiveContext().getSubContexts();
+        const subContexts = appContext.tabManager.getActiveContext()?.getSubContexts();
+
+        if (!subContexts) {
+            logError("subContexts is null");
+            return;
+        }
+
         const { ntxId } = subContexts[subContexts.length - 1];
 
         appContext.triggerCommand("openNewNoteSplit", { ntxId, notePath, hoistedNoteId, viewScope });

src/public/app/services/link.ts

@@ -288,11 +288,15 @@ function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent
 
             const noteContext = ntxId ? appContext.tabManager.getNoteContextById(ntxId) : appContext.tabManager.getActiveContext();
 
-            noteContext.setNote(notePath, { viewScope }).then(() => {
-                if (noteContext !== appContext.tabManager.getActiveContext()) {
-                    appContext.tabManager.activateNoteContext(noteContext.ntxId);
-                }
-            });
+            if (noteContext) {
+                noteContext.setNote(notePath, { viewScope }).then(() => {
+                    if (noteContext !== appContext.tabManager.getActiveContext()) {
+                        appContext.tabManager.activateNoteContext(noteContext.ntxId);
+                    }
+                });
+            } else {
+                appContext.tabManager.openContextWithNote(notePath, { viewScope, activate: true });
+            }
         }
     } else if (hrefLink) {
         const withinEditLink = $link?.hasClass("ck-link-actions__preview");

src/public/app/services/tree.ts

@@ -138,7 +138,7 @@ function getParentProtectedStatus(node: Fancytree.FancytreeNode) {
     return hoistedNoteService.isHoistedNode(node) ? false : node.getParent().data.isProtected;
 }
 
-function getNoteIdFromUrl(urlOrNotePath: string | undefined) {
+function getNoteIdFromUrl(urlOrNotePath: string | null | undefined) {
     if (!urlOrNotePath) {
         return null;
     }

src/public/app/services/utils.ts

@@ -411,7 +411,11 @@ async function openInAppHelp($button: JQuery<HTMLElement>) {
     if (inAppHelpPage) {
         // Dynamic import to avoid import issues in tests.
         const appContext = (await import("../components/app_context.js")).default;
-        const subContexts = appContext.tabManager.getActiveContext().getSubContexts();
+        const activeContext = appContext.tabManager.getActiveContext();
+        if (!activeContext) {
+            return;
+        }
+        const subContexts = activeContext.getSubContexts();
         const targetNote = `_help_${inAppHelpPage}`;
         const helpSubcontext = subContexts.find((s) => s.viewScope?.viewMode === "contextual-help");
         const viewScope: ViewScope = {

src/public/app/utils/mutex.ts

@@ -16,7 +16,7 @@ export default class Mutex {
         return newPromise;
     }
 
-    async runExclusively(cb: () => Promise<void>) {
+    async runExclusively<T>(cb: () => Promise<T>) {
         const unlock = await this.lock();
 
         try {

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

@@ -12,7 +12,7 @@ export default class ClosePaneButton extends OnClickButtonWidget {
         );
     }
 
-    async noteContextReorderEvent({ ntxIdsInOrder }: EventData<"noteContextReorderEvent">) {
+    async noteContextReorderEvent({ ntxIdsInOrder }: EventData<"noteContextReorder">) {
         this.refresh();
     }
 

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

@@ -24,7 +24,7 @@ export default class ScrollingContainer extends Container<BasicWidget> {
         this.$widget.scrollTop(0);
     }
 
-    async noteSwitchedAndActivatedEvent({ noteContext, notePath }: EventData<"noteSwitchedAndActivatedEvent">) {
+    async noteSwitchedAndActivatedEvent({ noteContext, notePath }: EventData<"noteSwitchedAndActivated">) {
         this.noteContext = noteContext;
 
         this.$widget.scrollTop(0);

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

@@ -63,7 +63,7 @@ export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
         hoistedNoteId?: string;
         viewScope?: any;
     }) {
-        const mainNtxId = appContext.tabManager.getActiveMainContext().ntxId;
+        const mainNtxId = appContext.tabManager.getActiveMainContext()?.ntxId;
 
         if (!mainNtxId) {
             logError("empty mainNtxId!");
@@ -76,7 +76,7 @@ export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
             ntxId = mainNtxId;
         }
 
-        hoistedNoteId = hoistedNoteId || appContext.tabManager.getActiveContext().hoistedNoteId;
+        hoistedNoteId = hoistedNoteId || appContext.tabManager.getActiveContext()?.hoistedNoteId;
 
         const noteContext = await appContext.tabManager.openEmptyTab(null, hoistedNoteId, mainNtxId);
 
@@ -199,7 +199,7 @@ export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
                 return Promise.resolve();
             }
 
-            if (widget.hasBeenAlreadyShown || name === "noteSwitchedAndActivatedEvent" || appContext.tabManager.getActiveMainContext() === noteContext.getMainContext()) {
+            if (widget.hasBeenAlreadyShown || name === "noteSwitchedAndActivated" || appContext.tabManager.getActiveMainContext() === noteContext.getMainContext()) {
                 widget.hasBeenAlreadyShown = true;
 
                 return Promise.all([

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

@@ -115,7 +115,10 @@ export default class RecentChangesDialog extends BasicWidget {
 
                                     await ws.waitForMaxKnownEntityChangeId();
 
-                                    appContext.tabManager.getActiveContext().setNote(change.noteId);
+                                    const activeContext = appContext.tabManager.getActiveContext();
+                                    if (activeContext) {
+                                        activeContext.setNote(change.noteId);
+                                    }
                                 }
                             });
 
@@ -141,7 +144,10 @@ export default class RecentChangesDialog extends BasicWidget {
                             // Skip clicks on the link or deleted notes
                             if (e.target?.nodeName !== "A" && !change.current_isDeleted) {
                                 // Open the current note
-                                appContext.tabManager.getActiveContext().setNote(change.noteId);
+                                const activeContext = appContext.tabManager.getActiveContext();
+                                if (activeContext) {
+                                    activeContext.setNote(change.noteId);
+                                }
                             }
                         })
                         .toggleClass("deleted-note", !!change.current_isDeleted)

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

@@ -85,7 +85,7 @@ export default class CodeButtonsWidget extends NoteContextAwareWidget {
         this.$openTriliumApiDocsButton.toggle(note.mime.startsWith("application/javascript;env="));
     }
 
-    async noteTypeMimeChangedEvent({ noteId }: EventData<"noteTypeMimeChangedEvent">) {
+    async noteTypeMimeChangedEvent({ noteId }: EventData<"noteTypeMimeChanged">) {
         if (this.isNote(noteId)) {
             await this.refresh();
         }

src/public/app/widgets/floating_buttons/help_button.spec.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+import { byBookType, byNoteType } from "./help_button.js";
+import fs from "fs";
+import type { NoteMetaFile } from "../../../../services/meta/note_meta.js";
+import type NoteMeta from "../../../../services/meta/note_meta.js";
+
+describe("Help button", () => {
+    it("All help notes are accessible", () => {
+        function getNoteIds(item: NoteMeta | NoteMetaFile): string[] {
+            const items = [];
+
+            if ("noteId" in item && item.noteId) {
+                items.push(item.noteId);
+            }
+
+            const children = "files" in item ? item.files : item.children;
+            for (const child of children ?? []) {
+                items.push(getNoteIds(child));
+            }
+            return items.flat();
+        }
+
+        const allHelpNotes = [
+            ...Object.values(byNoteType),
+            ...Object.values(byBookType)
+        ].filter((noteId) => noteId) as string[];
+
+        const meta: NoteMetaFile = JSON.parse(fs.readFileSync("src/public/app/doc_notes/en/User Guide/!!!meta.json", "utf-8"));
+        const allNoteIds = new Set(getNoteIds(meta));
+
+        for (const helpNote of allHelpNotes) {
+            if (!allNoteIds.has(helpNote)) {
+                expect.fail(`Help note with ID ${helpNote} does not exist in the in-app help.`);
+            }
+        }
+    });
+});

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

@@ -12,13 +12,13 @@ const TPL = `
 </button>
 `;
 
-const byNoteType: Record<Exclude<NoteType, "book">, string | null> = {
+export const byNoteType: Record<Exclude<NoteType, "book">, string | null> = {
     canvas: null,
     code: null,
     contentWidget: null,
     doc: null,
     file: null,
-    geoMap: "foPEtsL51pD2",
+    geoMap: "81SGnPGMk7Xc",
     image: null,
     launcher: null,
     mermaid: null,
@@ -31,10 +31,10 @@ const byNoteType: Record<Exclude<NoteType, "book">, string | null> = {
     webView: null
 };
 
-const byBookType: Record<ViewTypeOptions, string | null> = {
+export const byBookType: Record<ViewTypeOptions, string | null> = {
     list: null,
     grid: null,
-    calendar: "fDGg7QcJg3Xm"
+    calendar: "xWbu3jpNWapp"
 };
 
 export default class ContextualHelpButton extends NoteContextAwareWidget {

src/public/app/widgets/note_context_aware_widget.ts

@@ -105,7 +105,7 @@ class NoteContextAwareWidget extends BasicWidget {
     }
 
     // when note is both switched and activated, this should not produce a double refresh
-    async noteSwitchedAndActivatedEvent({ noteContext, notePath }: EventData<"noteSwitchedAndActivatedEvent">) {
+    async noteSwitchedAndActivatedEvent({ noteContext, notePath }: EventData<"noteSwitchedAndActivated">) {
         this.noteContext = noteContext;
 
         // if notePath does not match, then the noteContext has been switched to another note in the meantime
@@ -119,7 +119,7 @@ class NoteContextAwareWidget extends BasicWidget {
         this.noteContext = noteContext;
     }
 
-    async noteTypeMimeChangedEvent({ noteId }: EventData<"noteTypeMimeChangedEvent">) {
+    async noteTypeMimeChangedEvent({ noteId }: EventData<"noteTypeMimeChanged">) {
         if (this.isNote(noteId)) {
             await this.refresh();
         }

src/public/app/widgets/quick_search.ts

@@ -140,13 +140,19 @@ export default class QuickSearchWidget extends BasicWidget {
 
                 if (!e.target || e.target.nodeName !== "A") {
                     // click on the link is handled by link handling, but we want the whole item clickable
-                    appContext.tabManager.getActiveContext().setNote(note.noteId);
+                    const activeContext = appContext.tabManager.getActiveContext();
+                    if (activeContext) {
+                        activeContext.setNote(note.noteId);
+                    }
                 }
             });
             shortcutService.bindElShortcut($link, "return", () => {
                 this.dropdown.hide();
 
-                appContext.tabManager.getActiveContext().setNote(note.noteId);
+                const activeContext = appContext.tabManager.getActiveContext();
+                if (activeContext) {
+                    activeContext.setNote(note.noteId);
+                }
             });
 
             this.$dropdownMenu.append($link);

src/public/app/widgets/tab_row.ts

@@ -1,10 +1,10 @@
-import Draggabilly, { type DraggabillyCallback, type MoveVector } from "draggabilly";
+import Draggabilly, { type MoveVector } from "draggabilly";
 import { t } from "../services/i18n.js";
 import BasicWidget from "./basic_widget.js";
 import contextMenu from "../menus/context_menu.js";
 import utils from "../services/utils.js";
 import keyboardActionService from "../services/keyboard_actions.js";
-import appContext, { type CommandData, type CommandListenerData, type EventData } from "../components/app_context.js";
+import appContext, { type CommandListenerData, type EventData } from "../components/app_context.js";
 import froca from "../services/froca.js";
 import attributeService from "../services/attributes.js";
 import type NoteContext from "../components/note_context.js";
@@ -419,13 +419,13 @@ export default class TabRowWidget extends BasicWidget {
     closeActiveTabCommand({ $el }: CommandListenerData<"closeActiveTab">) {
         const ntxId = $el.closest(".note-tab").attr("data-ntx-id");
 
-        appContext.tabManager.removeNoteContext(ntxId);
+        appContext.tabManager.removeNoteContext(ntxId ?? null);
     }
 
     setTabCloseEvent($tab: JQuery<HTMLElement>) {
         $tab.on("mousedown", (e) => {
             if (e.which === 2) {
-                appContext.tabManager.removeNoteContext($tab.attr("data-ntx-id"));
+                appContext.tabManager.removeNoteContext($tab.attr("data-ntx-id") ?? null);
 
                 return true; // event has been handled
             }
@@ -494,7 +494,7 @@ export default class TabRowWidget extends BasicWidget {
         return $tab.attr("data-ntx-id");
     }
 
-    noteContextRemovedEvent({ ntxIds }: EventData<"noteContextRemovedEvent">) {
+    noteContextRemovedEvent({ ntxIds }: EventData<"noteContextRemoved">) {
         for (const ntxId of ntxIds) {
             this.removeTab(ntxId);
         }
@@ -516,7 +516,7 @@ export default class TabRowWidget extends BasicWidget {
             this.draggabillyDragging.element.style.transform = "";
             this.draggabillyDragging.dragEnd();
             this.draggabillyDragging.isDragging = false;
-            this.draggabillyDragging.positionDrag = () => {}; // Prevent Draggabilly from updating tabEl.style.transform in later frames
+            this.draggabillyDragging.positionDrag = () => { }; // Prevent Draggabilly from updating tabEl.style.transform in later frames
             this.draggabillyDragging.destroy();
             this.draggabillyDragging = null;
         }
@@ -628,7 +628,7 @@ export default class TabRowWidget extends BasicWidget {
         return closestIndex;
     }
 
-    noteSwitchedAndActivatedEvent({ noteContext }: EventData<"noteSwitchedAndActivatedEvent">) {
+    noteSwitchedAndActivatedEvent({ noteContext }: EventData<"noteSwitchedAndActivated">) {
         this.activeContextChangedEvent();
 
         this.updateTabById(noteContext.mainNtxId || noteContext.ntxId);
@@ -638,7 +638,7 @@ export default class TabRowWidget extends BasicWidget {
         this.updateTabById(noteContext.mainNtxId || noteContext.ntxId);
     }
 
-    noteContextReorderEvent({ oldMainNtxId, newMainNtxId }: EventData<"noteContextReorderEvent">) {
+    noteContextReorderEvent({ oldMainNtxId, newMainNtxId }: EventData<"noteContextReorder">) {
         if (!oldMainNtxId || !newMainNtxId) {
             // no need to update tab row
             return;
@@ -649,8 +649,8 @@ export default class TabRowWidget extends BasicWidget {
         this.updateTabById(newMainNtxId);
     }
 
-    contextsReopenedEvent({ mainNtxId, tabPosition }: EventData<"contextsReopenedEvent">) {
-        if (mainNtxId === undefined || tabPosition === undefined) {
+    contextsReopenedEvent({ mainNtxId, tabPosition }: EventData<"contextsReopened">) {
+        if (!mainNtxId || !tabPosition) {
             // no tab reopened
             return;
         }
@@ -748,7 +748,7 @@ export default class TabRowWidget extends BasicWidget {
     hoistedNoteChangedEvent({ ntxId }: EventData<"hoistedNoteChanged">) {
         const $tab = this.getTabById(ntxId);
 
-        if ($tab) {
+        if ($tab && ntxId) {
             const noteContext = appContext.tabManager.getNoteContextById(ntxId);
 
             this.updateTab($tab, noteContext);

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

@@ -87,7 +87,10 @@ export default class EmptyTypeWidget extends TypeWidget {
                     return false;
                 }
 
-                appContext.tabManager.getActiveContext().setNote(suggestion.notePath);
+                const activeContext = appContext.tabManager.getActiveContext();
+                if (activeContext) {
+                    activeContext.setNote(suggestion.notePath);
+                }
             });
 
         this.$workspaceNotes = this.$widget.find(".workspace-notes");

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

@@ -22,7 +22,7 @@ const TPL = `
             height: 100%;
         }
 
-        .mind-elixir .node-menu {
+        .map-container .node-menu {
             position: absolute;
             top: 60px;
             right: 20px;
@@ -38,28 +38,28 @@ const TPL = `
             transition: .3s all
         }
 
-        .mind-elixir .node-menu.close {
+        .map-container .node-menu.close {
             height: 29px;
             width: 46px;
             overflow: hidden
         }
 
-        .mind-elixir .node-menu .button-container {
+        .map-container .node-menu .button-container {
             padding: 3px 0;
             direction: rtl
         }
 
-        .mind-elixir .node-menu #nm-tag {
+        .map-container .node-menu #nm-tag {
             margin-top: 20px
         }
 
-        .mind-elixir .node-menu .nm-fontsize-container {
+        .map-container .node-menu .nm-fontsize-container {
             display: flex;
             justify-content: space-around;
             margin-bottom: 20px
         }
 
-        .mind-elixir .node-menu .nm-fontsize-container div {
+        .map-container .node-menu .nm-fontsize-container div {
             height: 36px;
             width: 36px;
             display: flex;
@@ -71,12 +71,12 @@ const TPL = `
             border-radius: 100%
         }
 
-        .mind-elixir .node-menu .nm-fontcolor-container {
+        .map-container .node-menu .nm-fontcolor-container {
             margin-bottom: 10px
         }
 
-        .mind-elixir .node-menu input,
-        .mind-elixir .node-menu textarea {
+        .map-container .node-menu input,
+        .map-container .node-menu textarea {
             background: var(--input-background-color);
             border: 1px solid var(--panel-border-color);
             border-radius: var(--bs-border-radius);
@@ -87,17 +87,17 @@ const TPL = `
             box-sizing: border-box;
         }
 
-        .mind-elixir .node-menu textarea {
+        .map-container .node-menu textarea {
             resize: none
         }
 
-        .mind-elixir .node-menu .split6 {
+        .map-container .node-menu .split6 {
             display: inline-block;
             width: 16.66%;
             margin-bottom: 5px
         }
 
-        .mind-elixir .node-menu .palette {
+        .map-container .node-menu .palette {
             border-radius: 100%;
             width: 21px;
             height: 21px;
@@ -105,35 +105,35 @@ const TPL = `
             margin: auto
         }
 
-        .mind-elixir .node-menu .nmenu-selected,
-        .mind-elixir .node-menu .palette:hover {
+        .map-container .node-menu .nmenu-selected,
+        .map-container .node-menu .palette:hover {
             box-shadow: tomato 0 0 0 2px;
             background-color: #c7e9fa
         }
 
-        .mind-elixir .node-menu .size-selected {
+        .map-container .node-menu .size-selected {
             background-color: tomato !important;
             border-color: tomato;
             fill: #fff;
             color: #fff
         }
 
-        .mind-elixir .node-menu .size-selected svg {
+        .map-container .node-menu .size-selected svg {
             color: #fff
         }
 
-        .mind-elixir .node-menu .bof {
+        .map-container .node-menu .bof {
             text-align: center
         }
 
-        .mind-elixir .node-menu .bof span {
+        .map-container .node-menu .bof span {
             display: inline-block;
             font-size: 14px;
             border-radius: 4px;
             padding: 2px 5px
         }
 
-        .mind-elixir .node-menu .bof .selected {
+        .map-container .node-menu .bof .selected {
             background-color: tomato;
             color: #fff
         }

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

@@ -127,13 +127,24 @@
     --left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
     --left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
 
-    --launcher-pane-background-color: #1a1a1a;
-    --launcher-pane-horizontal-background-color: #282828;
-    --launcher-pane-horizontal-border-color: rgb(22, 22, 22);
-    --launcher-pane-text-color: #909090;
-    --launcher-pane-button-hover-color: #ffffff;
-    --launcher-pane-button-hover-background: #ffffff1c;
-    --launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
+    /* Deprecated: now local variables in #launcher, with the values dependent on the current layout. */
+    --launcher-pane-background-color: unset;
+    --launcher-pane-text-color: unset;
+
+    --launcher-pane-vert-background-color: #1a1a1a;
+    --launcher-pane-vert-text-color: #909090;
+    --launcher-pane-vert-button-hover-color: #ffffff;
+    --launcher-pane-vert-button-hover-background: #ffffff1c;
+    --launcher-pane-vert-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
+    --launcher-pane-vert-button-focus-outline-color: var(--input-focus-outline-color);
+
+    --launcher-pane-horiz-border-color: rgb(22, 22, 22);
+    --launcher-pane-horiz-background-color: #282828;
+    --launcher-pane-horiz-text-color: #909090;
+    --launcher-pane-horiz-button-hover-color: #ffffff;
+    --launcher-pane-horiz-button-hover-background: #ffffff1c;
+    --launcher-pane-horiz-button-hover-shadow: unset;
+    --launcher-pane-horiz-button-focus-outline-color: var(--input-focus-outline-color);
 
     --protected-session-active-icon-color: #8edd8e;
     --sync-status-error-pulse-color: #f47871;

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

@@ -121,13 +121,23 @@
     --left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
     --left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
 
-    --launcher-pane-background-color: #e8e8e8;
-    --launcher-pane-horizontal-background-color: #fafafa;
-    --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.1);
-    --launcher-pane-text-color: #000000bd;
-    --launcher-pane-button-hover-color: black;
-    --launcher-pane-button-hover-background: white;
-    --launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.075);
+    /* Deprecated: now local variables in #launcher, with the values dependent on the current layout. */
+    --launcher-pane-background-color: unset;
+    --launcher-pane-text-color: unset;
+    
+    --launcher-pane-vert-background-color: #e8e8e8;
+    --launcher-pane-vert-text-color: #000000bd;
+    --launcher-pane-vert-button-hover-color: black;
+    --launcher-pane-vert-button-hover-background: white;
+    --launcher-pane-vert-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.075);
+    --launcher-pane-vert-button-focus-outline-color: var(--input-focus-outline-color);
+
+    --launcher-pane-horiz-border-color: rgba(0, 0, 0, 0.1);
+    --launcher-pane-horiz-background-color: #fafafa;
+    --launcher-pane-horiz-button-hover-color: black;
+    --launcher-pane-horiz-button-hover-background: var(--icon-button-hover-background);
+    --launcher-pane-horiz-button-hover-shadow: unset;
+    --launcher-pane-horiz-button-focus-outline-color: var(--input-focus-outline-color);
 
     --protected-session-active-icon-color: #16b516;
     --sync-status-error-pulse-color: #ff5528;

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

@@ -26,11 +26,15 @@
 
     --left-pane-item-selected-shadow-size: 2px;
 
-    --launcher-pane-size: 58px;
-    --launcher-pane-horizontal-size: 54px;
-    --launcher-pane-horizontal-icon-size: 20px;
-    --launcher-pane-button-margin: 6px;
-    --launcher-pane-button-gap: 3px;
+    --launcher-pane-vert-size: 58px;
+    --launcher-pane-vert-icon-size: 150%;
+    --launcher-pane-vert-button-margin: 6px;
+    --launcher-pane-vert-button-gap: 3px;
+
+    --launcher-pane-horiz-size: 54px;
+    --launcher-pane-horiz-icon-size: 20px;
+    --launcher-pane-horiz-button-margin: 8px;
+    --launcher-pane-horiz-button-gap: 3px;
 
     --tree-actions-toolbar-horizontal-margin: 8px;
     --tree-actions-toolbar-vertical-margin: 8px;

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

@@ -26,9 +26,7 @@ body {
 }
 
 body.layout-horizontal {
-    --launcher-pane-background-color: var(--launcher-pane-horizontal-background-color);
-    --launcher-pane-size: var(--launcher-pane-horizontal-size);
-    --active-tab-background-color: var(--launcher-pane-background-color);
+    --active-tab-background-color: var(--launcher-pane-horiz-background-color);
     --active-tab-hover-background-color: var(--active-tab-background-color);
     --new-tab-button-background: transparent;
     --tab-bar-height: 44px;
@@ -42,16 +40,19 @@ body.mobile {
 
 /* #region Mica */
 body.background-effects.platform-win32 {
-    --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.15);
-    --launcher-pane-background-color: rgba(255, 255, 255, 0.7);
     --tab-background-color: transparent;
     --new-tab-button-background: transparent;
-    --active-tab-background-color: var(--launcher-pane-background-color);
+    --active-tab-background-color: var(--launcher-pane-background-color); /* TODO: fix */
     --background-material: tabbed;
 }
 
+body.background-effects.platform-win32 #launcher-pane {
+    --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.15);
+    --launcher-pane-background-color: rgba(255, 255, 255, 0.7);
+}
+
 @media (prefers-color-scheme: dark) {
-    body.background-effects.platform-win32 {
+    body.background-effects.platform-win32 #launcher-pane {
         --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.5);
         --launcher-pane-background-color: rgba(255, 255, 255, 0.09);
     }
@@ -59,11 +60,14 @@ body.background-effects.platform-win32 {
 
 body.background-effects.platform-win32.layout-vertical {
     --left-pane-background-color: transparent;
-    --launcher-pane-background-color: rgba(255, 255, 255, 0.055);
     --left-pane-item-hover-background: rgba(127, 127, 127, 0.05);
     --background-material: mica;
 }
 
+body.background-effects.platform-win32.layout-vertical #launcher-pane {
+    --launcher-pane-background-color: rgba(255, 255, 255, 0.055);
+}
+
 body.background-effects.platform-win32,
 body.background-effects.platform-win32 #root-widget,
 body.background-effects.platform-win32 #launcher-pane .launcher-button {
@@ -141,18 +145,44 @@ body.layout-horizontal > .horizontal {
 }
 
 #launcher-pane.vertical {
+    --launcher-pane-border-color: unset;
+    --launcher-pane-background-color: var(--launcher-pane-vert-background-color);
+    --launcher-pane-text-color: var(--launcher-pane-vert-text-color);
+    --launcher-pane-button-hover-color: var(--launcher-pane-vert-button-hover-color);
+    --launcher-pane-button-hover-background: var(--launcher-pane-vert-button-hover-background);
+    --launcher-pane-button-hover-shadow: var(--launcher-pane-vert-button-hover-shadow);
+    --launcher-pane-button-focus-outline-color: var(--launcher-pane-vert-button-focus-outline-color);
+
+    --launcher-pane-size: var(--launcher-pane-vert-size);
+    --launcher-pane-icon-size: var(--launcher-pane-vert-icon-size);
+    --launcher-pane-button-margin: var(--launcher-pane-vert-button-margin);
+    --launcher-pane-button-gap: var(--launcher-pane-vert-button-gap);
+
     width: var(--launcher-pane-size) !important;
     padding-bottom: var(--launcher-pane-button-gap);
 }
 
 #launcher-pane.horizontal {
+    --launcher-pane-border-color: var(--launcher-pane-horiz-border-color);
+    --launcher-pane-background-color: var(--launcher-pane-horiz-background-color);
+    --launcher-pane-text-color: var(--launcher-pane-horiz-text-color);
+    --launcher-pane-button-hover-color: var(--launcher-pane-horiz-button-hover-color);
+    --launcher-pane-button-hover-background: var(--launcher-pane-horiz-button-hover-background);
+    --launcher-pane-button-hover-shadow: var(--launcher-pane-horiz-button-hover-shadow);
+    --launcher-pane-button-focus-outline-color: var(--launcher-pane-horiz-button-focus-outline-color);
+
+    --launcher-pane-size: var(--launcher-pane-horiz-size);
+    --launcher-pane-icon-size: var(--launcher-pane-horiz-icon-size);
+    --launcher-pane-button-margin: var(--launcher-pane-horiz-button-margin);
+    --launcher-pane-button-gap: var(--launcher-pane-horiz-button-gap);
+
     height: var(--launcher-pane-size) !important;
     align-items: center;
 }
 
 @media (max-width: 991px) {
     #mobile-bottom-bar {
-        background: var(--launcher-pane-background-color);
+        background: var(--launcher-pane-horiz-background-color);
     }
 
     body.mobile #launcher-pane {
@@ -163,7 +193,7 @@ body.layout-horizontal > .horizontal {
 @media (min-width: 992px) {
     #launcher-pane.horizontal {
         border-top: unset;
-        border-bottom: 1px solid var(--launcher-pane-horizontal-border-color);
+        border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
     }
 }
 
@@ -213,6 +243,27 @@ body.layout-horizontal > .horizontal {
     align-items: center;
 }
 
+#launcher-pane .launcher-button {
+    font-size: var(--launcher-pane-icon-size) !important;
+}
+
+#launcher-pane .launcher-button:focus,
+#launcher-pane .global-menu button:focus {
+    outline: none;
+}
+
+#launcher-pane .launcher-button:focus-visible,
+#launcher-pane.horizontal .global-menu button:focus-visible {
+    outline: 2px solid var(--launcher-pane-button-focus-outline-color);
+}
+
+#launcher-pane.vertical .global-menu button:focus-visible svg {
+    outline-offset: 4px;
+    outline: 2px solid var(--launcher-pane-button-focus-outline-color);
+    border-radius: 4px;
+    overflow: visible;
+}
+
 #launcher-pane.vertical .spacer {
     width: var(--launcher-pane-size);
 }
@@ -253,10 +304,6 @@ body.layout-horizontal > .horizontal {
     animation: sync-status-pulse 1s ease-in-out alternate-reverse infinite;
 }
 
-#launcher-pane.horizontal .launcher-button {
-    font-size: var(--launcher-pane-horizontal-icon-size);
-}
-
 #launcher-pane .global-menu-button {
     --hover-item-background-color: transparent;
 }
@@ -711,7 +758,7 @@ body.layout-horizontal .tab-row-container .note-tab[active]:before {
     top: var(--tab-height);
     right: calc(100% - 1px);
     height: 1px;
-    border-bottom: 1px solid var(--launcher-pane-horizontal-border-color);
+    border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
 }
 
 body.layout-horizontal .tab-row-container .note-tab[active]:after {
@@ -723,7 +770,7 @@ body.layout-horizontal .tab-row-container .note-tab[active]:after {
     right: 0;
     width: 100vw;
     height: 1px;
-    border-bottom: 1px solid var(--launcher-pane-horizontal-border-color);
+    border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
 }
 /* #endregion */
 
@@ -757,7 +804,7 @@ body.desktop:not(.background-effects.platform-win32) #root-widget.horizontal-lay
 }
 
 #root-widget.horizontal-layout .tab-row-widget .note-tab[active] .note-tab-wrapper {
-    border: 1px solid var(--launcher-pane-horizontal-border-color);
+    border: 1px solid var(--launcher-pane-horiz-border-color);
     border-bottom-color: transparent;
 }
 

src/services/export/markdown.spec.ts

@@ -193,4 +193,37 @@ describe("Markdown export", () => {
         expect(markdownExportService.toMarkdown(html)).toBe(expected);
     });
 
+    it("exports code in tables properly", () => {
+        const html = trimIndentation`\
+        <table>
+            <tr>
+                <td>
+                    Row 1
+                </td>
+                <td>
+                    <p>Allows displaying the value of one or more attributes in the calendar
+                        like this:&nbsp;</p>
+                    <p>
+                        <img src="13_Calendar View_image.png" alt="">
+                    </p>
+
+                    <pre><code class="language-text-x-trilium-auto">#weight="70"
+                    #Mood="Good"
+                    #calendar:displayedAttributes="weight,Mood"</code></pre>
+                    <p>It can also be used with relations, case in which it will display the
+                        title of the target note:</p><pre><code class="language-text-x-trilium-auto">~assignee=@My assignee
+                    #calendar:displayedAttributes="assignee"</code></pre>
+                </td>
+            </tr>
+        </table>
+        `;
+
+        const expected = trimIndentation`\
+            <table><tbody><tr><td>Row 1</td><td><p>Allows displaying the value of one or more attributes in the calendar like this:&nbsp;</p><p><img src="13_Calendar View_image.png" alt=""></p><pre><code class="language-text-x-trilium-auto">#weight="70"
+                        #Mood="Good"
+                        #calendar:displayedAttributes="weight,Mood"</code></pre><p>It can also be used with relations, case in which it will display the title of the target note:</p><pre><code class="language-text-x-trilium-auto">~assignee=@My assignee
+                        #calendar:displayedAttributes="assignee"</code></pre></td></tr></tbody></table>`;
+        expect(markdownExportService.toMarkdown(html)).toBe(expected);
+    });
+
 });

src/services/export/markdown.ts

@@ -1,7 +1,7 @@
 "use strict";
 
 import TurndownService from "turndown";
-import turndownPluginGfm from "@joplin/turndown-plugin-gfm";
+import { gfm } from "../../../packages/turndown-plugin-gfm/src/gfm.js";
 
 let instance: TurndownService | null = null;
 
@@ -43,7 +43,7 @@ function toMarkdown(content: string) {
         instance.addRule("fencedCodeBlock", fencedCodeBlockFilter);
         instance.addRule("img", buildImageFilter());
         instance.addRule("admonition", buildAdmonitionFilter());
-        instance.use(turndownPluginGfm.gfm);
+        instance.use(gfm);
         instance.keep([ "kbd" ]);
     }