Merge branch 'develop' into ai-llm-integration

bin/copy-dist.ts

@@ -41,7 +41,8 @@ try {
         "./src/public/robots.txt",
         "./src/public/fonts",
         "./src/public/stylesheets",
-        "./src/public/translations"
+        "./src/public/translations",
+        "./packages/turndown-plugin-gfm/src"
     ]);
 
     for (const asset of assetsToCopy) {

docs/User Guide/User Guide/Note Types/Book/Calendar View.md

@@ -3,6 +3,13 @@
 
 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.
 
+The Calendar view has multiple display modes:
+
+*   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.
+*   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.
+*   Year view, which displays the entire year for quick reference.
+*   List view, which displays all the events of a given month in sequence.
+
 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.
 
 ## Creating a calendar
@@ -23,7 +30,7 @@ Unlike other Book view types, the Calendar view also allows some kind of interac
 ## Interacting with events
 
 *   Hovering the mouse over an event will display information about the note.  
-    ![](9_Calendar%20View_image.png)
+    ![](7_Calendar%20View_image.png)
 *   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 opening the note in a new split or window.
 *   Drag and drop an event on the calendar to move it to another day.
 *   The length of an event can be changed by placing the mouse to the right edge of the event and dragging the mouse around.
@@ -32,11 +39,7 @@ Unlike other Book view types, the Calendar view also allows some kind of interac
 
 The following attributes can be added to the book type:
 
-| Name | Description |
-| --- | --- |
-| `#calendar:hideWeekends` | When present (regardless of value), it will hide Saturday and Sundays from the calendar. |
-| `#calendar:weekNumbers` | When present (regardless of value), it will show the number of the week on the calendar. |
-| `~child:template` | Defines the template for newly created notes in the calendar (via dragging or clicking). |
+<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>
 
 In addition, the first day of the week can be either Sunday or Monday and can be adjusted from the application settings.
 
@@ -48,17 +51,21 @@ For each note of the calendar, the following attributes can be used:
 | --- | --- |
 | `#startDate` | The date the event starts, which will display it in the calendar. The format is `YYYY-MM-DD` (year, month and day separated by a minus sign). |
 | `#endDate` | Similar to `startDate`, 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. |
+| `#startTime` | The time the event starts at. If this value is missing, then the event is considered a full-day event. The format is `HH:MM` (hours in 24-hour format and minutes). |
+| `#endTime` | Similar to `startTime`, it mentions the time at which the event ends (in relation with `endDate` if present, or `startDate`). |
 | `#color` | Displays the event with a specified color (named such as `red`, `gray` or hex such as `#FF0000`). This will also change the color of the note in other places such as the note tree. |
 | `#calendar:color` | Similar to `#color`, but applies the color only for the event in the calendar and not for other places such as the note tree. |
 | `#iconClass` | If present, the icon of the note will be displayed to the left of the event title. |
-| `#calendar:title` | Changes the title of an event to point to an attribute of the note other than the title, either a label (e.g. `#assignee`) or a relation (e.g. `~for`). See _Advanced use-cases_ for more information. |
-| `#calendar:displayedAttributes` | Allows displaying the value of one or more attributes in the calendar like this:   <br>  <br>![](11_Calendar%20View_image.png)  <br>  <br>`<br>#weight="70"<br>#Mood="Good"<br>#calendar:displayedAttributes="weight,Mood"<br>`  <br>  <br>It can also be used with relations, case in which it will display the title of the target note:  <br>  <br>`<br>~assignee=@My assignee<br>#calendar:displayedAttributes="assignee"<br>` |
+| `#calendar:title` | 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 `#` or `~` symbol). See _Use-cases_ for more information. |
+| `#calendar:displayedAttributes` | Allows displaying the value of one or more attributes in the calendar like this:     <br>  <br>![](9_Calendar%20View_image.png)    <br>  <br>`#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"`   <br>  <br>It can also be used with relations, case in which it will display the title of the target note:    <br>  <br>`~assignee=@My assignee #calendar:displayedAttributes="assignee"` |
 | `#calendar:startDate` | Allows using a different label to represent the start date, other than `startDate` (e.g. `expiryDate`). The label name **must not be** prefixed with `#`. If the label is not defined for a note, the default will be used instead. |
-| `#calendar:endDate` | Allows using a different label to represent the start date, other than `endDate`. The label name **must not be** prefixed with `#`. If the label is not defined for a note, the default will be used instead. |
+| `#calendar:endDate` | Similar to `#calendar:startDate`, allows changing the attribute which is being used to read the end date. |
+| `#calendar:startTime` | Similar to `#calendar:startDate`, allows changing the attribute which is being used to read the start time. |
+| `#calendar:endTime` | Similar to `#calendar:startDate`, allows changing the attribute which is being used to read the end time. |
 
 ## How the calendar works
 
-![](14_Calendar%20View_image.png)
+![](11_Calendar%20View_image.png)
 
 The calendar displays all the child notes of the book that have a `#startDate`. An `#endDate` can optionally be added.
 
@@ -72,7 +79,7 @@ If editing the start date and end date from the note itself is desirable, the fo
 
 This will result in:
 
-![](12_Calendar%20View_image.png)
+![](10_Calendar%20View_image.png)
 
 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.
 
@@ -89,30 +96,28 @@ Based on the `#calendarRoot` (or `#workspaceCalendarRoot`) attribute, the calend
 *   Clicking on the empty space on a date will automatically open that day's note or create it if it does not exist.
 *   Direct children of a day note will be displayed on the calendar despite not having a `dateNote` attribute. Children of the child notes will not be displayed.
 
-![](10_Calendar%20View_image.png)
+![](8_Calendar%20View_image.png)
 
 ### Using a different attribute as event title
 
 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.
 
-To do so, assign `#calendar:title` to the child note (not the calendar/book note), with the value being `#name` where `name` 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.
+To do so, assign `#calendar:title` to the child note (not the calendar/book note), with the value being `name` where `name` can be any label (make not to add the `#` 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.
 
-|     |     |
-| --- | --- |
-| ![](5_Calendar%20View_image.png) | ![](7_Calendar%20View_image.png) |
+<table><thead><tr><th>&nbsp;</th><th>&nbsp;</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>
 
 ### Using a relation attribute as event title
 
-Similarly to using an attribute, use `#calendar:title` and set it to `~name` where `name` is the name of the relation to use.
+Similarly to using an attribute, use `#calendar:title` and set it to `name` where `name` is the name of the relation to use.
 
 Moreover, if there are more relations of the same name, they will be displayed as multiple events coming from the same note.
 
 |     |     |
 | --- | --- |
-| ![](6_Calendar%20View_image.png) | ![](8_Calendar%20View_image.png) |
+| `#startDate=2025-02-14 #endDate=2025-02-15 ~for=@John Smith ~for=@Jane Doe #calendar:title="for"` | ![](6_Calendar%20View_image.png) |
 
 Note that it's even possible to have a `#calendar:title` 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).
 
 |     |     |
 | --- | --- |
-| ![](13_Calendar%20View_image.png) | ![](1_Calendar%20View_image.png) |
+| `#calendar:title="shortName" #shortName="John S."` | ![](1_Calendar%20View_image.png) |

docs/User Guide/User Guide/Note Types/Text/Admonitions.md

@@ -46,7 +46,7 @@ These types were inspired by GitHub's support for this feature and there are cur
 
 The Markdown syntax for admonitions as supported by Trilium is the one that GitHub uses, which is as follows:
 
-```markdown
+```
 > [!NOTE]
 > This is a note.
 

dump-db/package-lock.json

@@ -493,9 +493,9 @@
       "license": "MIT"
     },
     "node_modules/better-sqlite3": {
-      "version": "11.9.0",
-      "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-11.9.0.tgz",
-      "integrity": "sha512-4b9xYnoaskj8eIkke9ZCB42p5bOPabptSku8Rl4Yww70Jf+aHeLvrIjXDJrKQxUEjdppsFb+fdJSjoH4TklROA==",
+      "version": "11.9.1",
+      "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-11.9.1.tgz",
+      "integrity": "sha512-Ba0KR+Fzxh2jDRhdg6TSH0SJGzb8C0aBY4hR8w8madIdIzzC6Y1+kx5qR6eS1Z+Gy20h6ZU28aeyg0z1VIrShQ==",
       "hasInstallScript": true,
       "dependencies": {
         "bindings": "^1.5.0",
@@ -1416,9 +1416,9 @@
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
     },
     "better-sqlite3": {
-      "version": "11.9.0",
-      "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-11.9.0.tgz",
-      "integrity": "sha512-4b9xYnoaskj8eIkke9ZCB42p5bOPabptSku8Rl4Yww70Jf+aHeLvrIjXDJrKQxUEjdppsFb+fdJSjoH4TklROA==",
+      "version": "11.9.1",
+      "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-11.9.1.tgz",
+      "integrity": "sha512-Ba0KR+Fzxh2jDRhdg6TSH0SJGzb8C0aBY4hR8w8madIdIzzC6Y1+kx5qR6eS1Z+Gy20h6ZU28aeyg0z1VIrShQ==",
       "requires": {
         "bindings": "^1.5.0",
         "prebuild-install": "^7.1.1"

e2e/note_types/text.spec.ts

@@ -61,8 +61,24 @@ test("Displays math popup", async ({ page, context }) => {
     const mathForm = page.locator(".ck-math-form");
     await expect(mathForm).toBeVisible();
 
-    await mathForm.locator(".ck-input").first().fill("e=mc^2");
+    const input = mathForm.locator(".ck-input").first();
+    await input.click();
+    await input.fill("e=mc^2");
+    await page.waitForTimeout(100);
 
     const preview = page.locator('[id^="math-preview"]');
+    await preview.waitFor({
+        state: 'visible',
+        timeout: 5000
+    });
+
+    await page.waitForFunction((): boolean => {
+        const preview = document.querySelector('[id^="math-preview"]');
+        if (!preview) return false;
+        const katex = preview.querySelector('.katex');
+        return !!katex && window.getComputedStyle(preview).display !== 'none';
+    }, { timeout: 5000 });
+
+    await expect(preview.locator('.katex')).toBeVisible();
     await expect(preview).toMatchAriaSnapshot("- math: e = m c 2");
 });

e2e/support/app.ts

@@ -75,6 +75,8 @@ export default class App {
      */
     async closeAllTabs() {
         await this.triggerCommand("closeAllTabs");
+        // Page in Playwright is not updated somehow, need to click on the tab to make sure it's rendered
+        await this.getTab(0).click();
     }
 
     /**

libraries/ckeditor/ckeditor-content.css

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

package-lock.json

@@ -1,22 +1,18 @@
 {
   "name": "trilium",
-  "version": "0.92.3-beta",
+  "version": "0.92.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "trilium",
-      "version": "0.92.3-beta",
+      "version": "0.92.4",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@braintree/sanitize-url": "7.1.1",
         "@electron/remote": "2.1.2",
         "@excalidraw/excalidraw": "0.18.0",
-        "@fullcalendar/core": "6.1.15",
-        "@fullcalendar/daygrid": "6.1.15",
-        "@fullcalendar/interaction": "6.1.15",
         "@highlightjs/cdn-assets": "11.11.1",
-        "@joplin/turndown-plugin-gfm": "1.0.61",
         "@mermaid-js/layout-elk": "0.1.7",
         "@mind-elixir/node-menu": "1.0.4",
         "@triliumnext/express-partial-content": "1.0.1",
@@ -24,7 +20,7 @@
         "async-mutex": "0.5.0",
         "autocomplete.js": "0.38.1",
         "axios": "1.8.3",
-        "better-sqlite3": "11.8.1",
+        "better-sqlite3": "11.9.1",
         "boxicons": "2.1.4",
         "chardet": "2.1.0",
         "cheerio": "1.0.0",
@@ -50,7 +46,7 @@
         "express-session": "1.18.1",
         "force-graph": "1.49.4",
         "fs-extra": "11.3.0",
-        "helmet": "8.0.0",
+        "helmet": "8.1.0",
         "html": "1.0.0",
         "html2plaintext": "2.1.4",
         "http-proxy-agent": "7.0.2",
@@ -116,7 +112,13 @@
         "@electron-forge/plugin-auto-unpack-natives": "7.7.0",
         "@electron/rebuild": "3.7.1",
         "@eslint/js": "9.22.0",
-        "@playwright/test": "1.51.0",
+        "@fullcalendar/core": "6.1.15",
+        "@fullcalendar/daygrid": "6.1.15",
+        "@fullcalendar/interaction": "6.1.15",
+        "@fullcalendar/list": "6.1.15",
+        "@fullcalendar/multimonth": "6.1.15",
+        "@fullcalendar/timegrid": "6.1.15",
+        "@playwright/test": "1.51.1",
         "@popperjs/core": "2.11.8",
         "@types/archiver": "6.0.3",
         "@types/better-sqlite3": "7.6.12",
@@ -158,7 +160,7 @@
         "@types/ws": "8.18.0",
         "@types/xml2js": "0.4.14",
         "@types/yargs": "17.0.33",
-        "@vitest/coverage-v8": "3.0.8",
+        "@vitest/coverage-v8": "3.0.9",
         "autoprefixer": "10.4.21",
         "bootstrap": "5.3.3",
         "cross-env": "7.0.3",
@@ -178,10 +180,11 @@
         "prettier": "3.5.3",
         "rcedit": "4.0.1",
         "rimraf": "6.0.1",
-        "sass": "1.85.1",
+        "sass": "1.86.0",
         "sass-loader": "16.0.5",
         "split.js": "1.6.5",
         "supertest": "7.0.0",
+        "svg-pan-zoom": "3.6.2",
         "swagger-jsdoc": "6.2.8",
         "ts-loader": "9.5.2",
         "tslib": "2.8.1",
@@ -189,7 +192,7 @@
         "typedoc": "0.28.0",
         "typescript": "5.8.2",
         "typescript-eslint": "8.26.1",
-        "vitest": "3.0.8",
+        "vitest": "3.0.9",
         "webpack": "5.98.0",
         "webpack-cli": "6.0.1",
         "webpack-dev-middleware": "7.4.2"
@@ -2869,6 +2872,7 @@
       "version": "6.1.15",
       "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.15.tgz",
       "integrity": "sha512-BuX7o6ALpLb84cMw1FCB9/cSgF4JbVO894cjJZ6kP74jzbUZNjtwffwRdA+Id8rrLjT30d/7TrkW90k4zbXB5Q==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "preact": "~10.12.1"
@@ -2878,6 +2882,7 @@
       "version": "10.12.1",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
       "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -2888,6 +2893,7 @@
       "version": "6.1.15",
       "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.15.tgz",
       "integrity": "sha512-j8tL0HhfiVsdtOCLfzK2J0RtSkiad3BYYemwQKq512cx6btz6ZZ2RNc/hVnIxluuWFyvx5sXZwoeTJsFSFTEFA==",
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "@fullcalendar/core": "~6.1.15"
@@ -2897,11 +2903,48 @@
       "version": "6.1.15",
       "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.15.tgz",
       "integrity": "sha512-DOTSkofizM7QItjgu7W68TvKKvN9PSEEvDJceyMbQDvlXHa7pm/WAVtAc6xSDZ9xmB1QramYoWGLHkCYbTW1rQ==",
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "@fullcalendar/core": "~6.1.15"
       }
     },
+    "node_modules/@fullcalendar/list": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-6.1.15.tgz",
+      "integrity": "sha512-U1bce04tYDwkFnuVImJSy2XalYIIQr6YusOWRPM/5ivHcJh67Gm8CIMSWpi3KdRSNKFkqBxLPkfZGBMaOcJYug==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/multimonth": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/multimonth/-/multimonth-6.1.15.tgz",
+      "integrity": "sha512-sEZY6jbOYkeF9TwhUldG+UUVv+hiPlGkS8zZEgPR7ypcjhipyA03c5rPjx7N6huOHqh6lCMH59zlohLooQRlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@fullcalendar/daygrid": "~6.1.15"
+      },
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/timegrid": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.15.tgz",
+      "integrity": "sha512-61ORr3A148RtxQ2FNG7JKvacyA/TEVZ7z6I+3E9Oeu3dqTf6M928bFcpehRTIK6zIA6Yifs7BeWHgOE9dFnpbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@fullcalendar/daygrid": "~6.1.15"
+      },
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -3533,12 +3576,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/@joplin/turndown-plugin-gfm": {
-      "version": "1.0.61",
-      "resolved": "https://registry.npmjs.org/@joplin/turndown-plugin-gfm/-/turndown-plugin-gfm-1.0.61.tgz",
-      "integrity": "sha512-m5PNP1OkktlGgmFI7r/HWON/vQA56GCiM1oTWYkY2JFc28Uc8yHj0nT46pahDyU8uRYPj4TXnxLjQzDDJ11i7w==",
-      "license": "MIT"
-    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
@@ -4379,13 +4416,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.51.0.tgz",
-      "integrity": "sha512-dJ0dMbZeHhI+wb77+ljx/FeC8VBP6j/rj9OAojO08JI80wTZy6vRk9KvHKiDCUh4iMpEiseMgqRBIeW+eKX6RA==",
+      "version": "1.51.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.51.1.tgz",
+      "integrity": "sha512-nM+kEaTSAoVlXmMPH10017vn3FSiFqr/bh4fKg9vmAdMfd9SDqRZNvPSiAHADc/itWak+qPvMPZQOPwCBW7k7Q==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.51.0"
+        "playwright": "1.51.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -6365,9 +6402,9 @@
       }
     },
     "node_modules/@vitest/coverage-v8": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-3.0.8.tgz",
-      "integrity": "sha512-y7SAKsQirsEJ2F8bulBck4DoluhI2EEgTimHd6EEUgJBGKy9tC25cpywh1MH4FvDGoG2Unt7+asVd1kj4qOSAw==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-3.0.9.tgz",
+      "integrity": "sha512-15OACZcBtQ34keIEn19JYTVuMFTlFrClclwWjHo/IRPg/8ELpkgNTl0o7WLP9WO9XGH6+tip9CPYtEOrIDJvBA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6388,8 +6425,8 @@
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
-        "@vitest/browser": "3.0.8",
-        "vitest": "3.0.8"
+        "@vitest/browser": "3.0.9",
+        "vitest": "3.0.9"
       },
       "peerDependenciesMeta": {
         "@vitest/browser": {
@@ -6398,14 +6435,14 @@
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.0.8.tgz",
-      "integrity": "sha512-Xu6TTIavTvSSS6LZaA3EebWFr6tsoXPetOWNMOlc7LO88QVVBwq2oQWBoDiLCN6YTvNYsGSjqOO8CAdjom5DCQ==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.0.9.tgz",
+      "integrity": "sha512-5eCqRItYgIML7NNVgJj6TVCmdzE7ZVgJhruW0ziSQV4V7PvLkDL1bBkBdcTs/VuIz0IxPb5da1IDSqc1TR9eig==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "3.0.8",
-        "@vitest/utils": "3.0.8",
+        "@vitest/spy": "3.0.9",
+        "@vitest/utils": "3.0.9",
         "chai": "^5.2.0",
         "tinyrainbow": "^2.0.0"
       },
@@ -6414,13 +6451,13 @@
       }
     },
     "node_modules/@vitest/mocker": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.0.8.tgz",
-      "integrity": "sha512-n3LjS7fcW1BCoF+zWZxG7/5XvuYH+lsFg+BDwwAz0arIwHQJFUEsKBQ0BLU49fCxuM/2HSeBPHQD8WjgrxMfow==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.0.9.tgz",
+      "integrity": "sha512-ryERPIBOnvevAkTq+L1lD+DTFBRcjueL9lOUfXsLfwP92h4e+Heb+PjiqS3/OURWPtywfafK0kj++yDFjWUmrA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "3.0.8",
+        "@vitest/spy": "3.0.9",
         "estree-walker": "^3.0.3",
         "magic-string": "^0.30.17"
       },
@@ -6441,9 +6478,9 @@
       }
     },
     "node_modules/@vitest/pretty-format": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.0.8.tgz",
-      "integrity": "sha512-BNqwbEyitFhzYMYHUVbIvepOyeQOSFA/NeJMIP9enMntkkxLgOcgABH6fjyXG85ipTgvero6noreavGIqfJcIg==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.0.9.tgz",
+      "integrity": "sha512-OW9F8t2J3AwFEwENg3yMyKWweF7oRJlMyHOMIhO5F3n0+cgQAJZBjNgrF8dLwFTEXl5jUqBLXd9QyyKv8zEcmA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6454,13 +6491,13 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.0.8.tgz",
-      "integrity": "sha512-c7UUw6gEcOzI8fih+uaAXS5DwjlBaCJUo7KJ4VvJcjL95+DSR1kova2hFuRt3w41KZEFcOEiq098KkyrjXeM5w==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.0.9.tgz",
+      "integrity": "sha512-NX9oUXgF9HPfJSwl8tUZCMP1oGx2+Sf+ru6d05QjzQz4OwWg0psEzwY6VexP2tTHWdOkhKHUIZH+fS6nA7jfOw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/utils": "3.0.8",
+        "@vitest/utils": "3.0.9",
         "pathe": "^2.0.3"
       },
       "funding": {
@@ -6475,13 +6512,13 @@
       "license": "MIT"
     },
     "node_modules/@vitest/snapshot": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.0.8.tgz",
-      "integrity": "sha512-x8IlMGSEMugakInj44nUrLSILh/zy1f2/BgH0UeHpNyOocG18M9CWVIFBaXPt8TrqVZWmcPjwfG/ht5tnpba8A==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.0.9.tgz",
+      "integrity": "sha512-AiLUiuZ0FuA+/8i19mTYd+re5jqjEc2jZbgJ2up0VY0Ddyyxg/uUtBDpIFAy4uzKaQxOW8gMgBdAJJ2ydhu39A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "3.0.8",
+        "@vitest/pretty-format": "3.0.9",
         "magic-string": "^0.30.17",
         "pathe": "^2.0.3"
       },
@@ -6497,9 +6534,9 @@
       "license": "MIT"
     },
     "node_modules/@vitest/spy": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.0.8.tgz",
-      "integrity": "sha512-MR+PzJa+22vFKYb934CejhR4BeRpMSoxkvNoDit68GQxRLSf11aT6CTj3XaqUU9rxgWJFnqicN/wxw6yBRkI1Q==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.0.9.tgz",
+      "integrity": "sha512-/CcK2UDl0aQ2wtkp3YVWldrpLRNCfVcIOFGlVGKO4R5eajsH393Z1yiXLVQ7vWsj26JOEjeZI0x5sm5P4OGUNQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6510,13 +6547,13 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.0.8.tgz",
-      "integrity": "sha512-nkBC3aEhfX2PdtQI/QwAWp8qZWwzASsU4Npbcd5RdMPBSSLCpkZp52P3xku3s3uA0HIEhGvEcF8rNkBsz9dQ4Q==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.0.9.tgz",
+      "integrity": "sha512-ilHM5fHhZ89MCp5aAaM9uhfl1c2JdxVxl3McqsdVyVNN6JffnEen8UMCdRTzOhGXNQGo5GNL9QugHrz727Wnng==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "3.0.8",
+        "@vitest/pretty-format": "3.0.9",
         "loupe": "^3.1.3",
         "tinyrainbow": "^2.0.0"
       },
@@ -7387,9 +7424,9 @@
       "license": "MIT"
     },
     "node_modules/better-sqlite3": {
-      "version": "11.8.1",
-      "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-11.8.1.tgz",
-      "integrity": "sha512-9BxNaBkblMjhJW8sMRZxnxVTRgbRmssZW0Oxc1MPBTfiR+WW21e2Mk4qu8CzrcZb1LwPCnFsfDEzq+SNcBU8eg==",
+      "version": "11.9.1",
+      "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-11.9.1.tgz",
+      "integrity": "sha512-Ba0KR+Fzxh2jDRhdg6TSH0SJGzb8C0aBY4hR8w8madIdIzzC6Y1+kx5qR6eS1Z+Gy20h6ZU28aeyg0z1VIrShQ==",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -12898,9 +12935,9 @@
       }
     },
     "node_modules/helmet": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/helmet/-/helmet-8.0.0.tgz",
-      "integrity": "sha512-VyusHLEIIO5mjQPUI1wpOAEu+wl6Q0998jzTxqUYGE45xCIcAxy3MsbEK/yyJUJ3ADeMoB6MornPH6GMWAf+Pw==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/helmet/-/helmet-8.1.0.tgz",
+      "integrity": "sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -17013,13 +17050,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.51.0.tgz",
-      "integrity": "sha512-442pTfGM0xxfCYxuBa/Pu6B2OqxqqaYq39JS8QDMGThUvIOCd6s0ANDog3uwA0cHavVlnTQzGCN7Id2YekDSXA==",
+      "version": "1.51.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.51.1.tgz",
+      "integrity": "sha512-kkx+MB2KQRkyxjYPc3a0wLZZoDczmppyGJIvQ43l+aZihkaVvmu/21kiyaHeHjiFxjxNNFnUncKmcGIyOojsaw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.51.0"
+        "playwright-core": "1.51.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -17032,9 +17069,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.51.0.tgz",
-      "integrity": "sha512-x47yPE3Zwhlil7wlNU/iktF7t2r/URR3VLbH6EknJd/04Qc/PSJ0EY3CMXipmglLG+zyRxW6HNo2EGbKLHPWMg==",
+      "version": "1.51.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.51.1.tgz",
+      "integrity": "sha512-/crRMj8+j/Nq5s8QcvegseuyeZPxpQCZb6HNk3Sos3BlZyAknRjoyJPFWkpNn8v0+P3WiwqFF8P+zQo4eqiNuw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -18609,9 +18646,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.85.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.85.1.tgz",
-      "integrity": "sha512-Uk8WpxM5v+0cMR0XjX9KfRIacmSG86RH4DCCZjLU2rFh5tyutt9siAXJ7G+YfxQ99Q6wrRMbMlVl6KqUms71ag==",
+      "version": "1.86.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.86.0.tgz",
+      "integrity": "sha512-zV8vGUld/+mP4KbMLJMX7TyGCuUp7hnkOScgCMsWuHtns8CWBoz+vmEhoGMXsaJrbUP8gj+F1dLvVe79sK8UdA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -19730,6 +19767,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pan-zoom": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/svg-pan-zoom/-/svg-pan-zoom-3.6.2.tgz",
+      "integrity": "sha512-JwnvRWfVKw/Xzfe6jriFyfey/lWJLq4bUh2jwoR5ChWQuQoOH8FEh1l/bEp46iHHKHEJWIyFJETbazraxNWECg==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
     "node_modules/swagger-jsdoc": {
       "version": "6.2.8",
       "resolved": "https://registry.npmjs.org/swagger-jsdoc/-/swagger-jsdoc-6.2.8.tgz",
@@ -21115,9 +21159,9 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.0.8.tgz",
-      "integrity": "sha512-6PhR4H9VGlcwXZ+KWCdMqbtG649xCPZqfI9j2PsK1FcXgEzro5bGHcVKFCTqPLaNKZES8Evqv4LwvZARsq5qlg==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.0.9.tgz",
+      "integrity": "sha512-w3Gdx7jDcuT9cNn9jExXgOyKmf5UOTb6WMHz8LGAm54eS1Elf5OuBhCxl6zJxGhEeIkgsE1WbHuoL0mj/UXqXg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -21160,19 +21204,19 @@
       }
     },
     "node_modules/vitest": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.0.8.tgz",
-      "integrity": "sha512-dfqAsNqRGUc8hB9OVR2P0w8PZPEckti2+5rdZip0WIz9WW0MnImJ8XiR61QhqLa92EQzKP2uPkzenKOAHyEIbA==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.0.9.tgz",
+      "integrity": "sha512-BbcFDqNyBlfSpATmTtXOAOj71RNKDDvjBM/uPfnxxVGrG+FSH2RQIwgeEngTaTkuU/h0ScFvf+tRcKfYXzBybQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/expect": "3.0.8",
-        "@vitest/mocker": "3.0.8",
-        "@vitest/pretty-format": "^3.0.8",
-        "@vitest/runner": "3.0.8",
-        "@vitest/snapshot": "3.0.8",
-        "@vitest/spy": "3.0.8",
-        "@vitest/utils": "3.0.8",
+        "@vitest/expect": "3.0.9",
+        "@vitest/mocker": "3.0.9",
+        "@vitest/pretty-format": "^3.0.9",
+        "@vitest/runner": "3.0.9",
+        "@vitest/snapshot": "3.0.9",
+        "@vitest/spy": "3.0.9",
+        "@vitest/utils": "3.0.9",
         "chai": "^5.2.0",
         "debug": "^4.4.0",
         "expect-type": "^1.1.0",
@@ -21184,7 +21228,7 @@
         "tinypool": "^1.0.2",
         "tinyrainbow": "^2.0.0",
         "vite": "^5.0.0 || ^6.0.0",
-        "vite-node": "3.0.8",
+        "vite-node": "3.0.9",
         "why-is-node-running": "^2.3.0"
       },
       "bin": {
@@ -21200,8 +21244,8 @@
         "@edge-runtime/vm": "*",
         "@types/debug": "^4.1.12",
         "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
-        "@vitest/browser": "3.0.8",
-        "@vitest/ui": "3.0.8",
+        "@vitest/browser": "3.0.9",
+        "@vitest/ui": "3.0.9",
         "happy-dom": "*",
         "jsdom": "*"
       },

package.json

@@ -20,24 +20,24 @@
   },
   "type": "module",
   "scripts": {
-    "server:start": "cross-env TRILIUM_DATA_DIR=./data TRILIUM_ENV=dev TRILIUM_SYNC_SERVER_HOST=http://tsyncserver:4000 nodemon src/main.ts",
-    "server:start-safe": "cross-env TRILIUM_DATA_DIR=./data TRILIUM_ENV=dev TRILIUM_SYNC_SERVER_HOST=http://tsyncserver:4000 nodemon src/main.ts",
-    "server:start-no-dir": "cross-env TRILIUM_ENV=dev TRILIUM_SYNC_SERVER_HOST=http://tsyncserver:4000 nodemon src/main.ts",
-    "server:start-test": "npm run server:switch && rimraf ./data-test && cross-env TRILIUM_DATA_DIR=./data-test TRILIUM_SYNC_SERVER_HOST=http://tsyncserver:4000 TRILIUM_ENV=dev TRILIUM_PORT=9999 nodemon src/main.ts",
+    "server:start": "cross-env TRILIUM_DATA_DIR=./data TRILIUM_ENV=dev nodemon src/main.ts",
+    "server:start-safe": "cross-env TRILIUM_DATA_DIR=./data TRILIUM_ENV=dev nodemon src/main.ts",
+    "server:start-no-dir": "cross-env TRILIUM_ENV=dev nodemon src/main.ts",
+    "server:start-test": "npm run server:switch && rimraf ./data-test && cross-env TRILIUM_DATA_DIR=./data-test TRILIUM_ENV=dev TRILIUM_PORT=9999 nodemon src/main.ts",
     "server:qstart": "npm run server:switch && npm run server:start",
     "server:switch": "rimraf ./node_modules/better-sqlite3 && npm install",
-    "electron:start": "cross-env NODE_OPTIONS=\"--import tsx\" TRILIUM_DATA_DIR=./data TRILIUM_SYNC_SERVER_HOST=http://tsyncserver:4000 TRILIUM_ENV=dev electron ./electron-main.ts --inspect=5858 .",
+    "electron:start": "cross-env NODE_OPTIONS=\"--import tsx\" TRILIUM_DATA_DIR=./data TRILIUM_ENV=dev electron ./electron-main.ts --inspect=5858 .",
     "electron:start-no-dir": "cross-env NODE_OPTIONS=\"--import tsx\" TRILIUM_ENV=dev electron --inspect=5858 .",
-    "electron:start-nix": "electron-rebuild --version 33.3.1 && cross-env NODE_OPTIONS=\"--import tsx\" TRILIUM_DATA_DIR=./data TRILIUM_SYNC_SERVER_HOST=http://tsyncserver:4000 TRILIUM_ENV=dev nix-shell -p electron_33 --run \"electron ./electron-main.ts --inspect=5858 .\"",
+    "electron:start-nix": "electron-rebuild --version 33.3.1 && cross-env NODE_OPTIONS=\"--import tsx\" TRILIUM_DATA_DIR=./data TRILIUM_ENV=dev nix-shell -p electron_33 --run \"electron ./electron-main.ts --inspect=5858 .\"",
     "electron:start-nix-no-dir": "electron-rebuild --version 33.3.1 && cross-env NODE_OPTIONS=\"--import tsx\" TRILIUM_ENV=dev nix-shell -p electron_33 --run \"electron ./electron-main.ts --inspect=5858 .\"",
-    "electron:start-prod": "npm run build:prepare-dist && cross-env TRILIUM_DATA_DIR=./data TRILIUM_SYNC_SERVER_HOST=http://tsyncserver:4000 TRILIUM_ENV=prod electron ./dist/electron-main.js --inspect=5858 .",
+    "electron:start-prod": "npm run build:prepare-dist && cross-env TRILIUM_DATA_DIR=./data TRILIUM_ENV=prod electron ./dist/electron-main.js --inspect=5858 .",
     "electron:start-prod-no-dir": "npm run build:prepare-dist && cross-env TRILIUM_ENV=prod electron --inspect=5858 .",
-    "electron:start-prod-nix": "electron-rebuild --version 33.3.1 && npm run build:prepare-dist && cross-env TRILIUM_DATA_DIR=./data TRILIUM_SYNC_SERVER_HOST=http://tsyncserver:4000 TRILIUM_ENV=dev nix-shell -p electron_33 --run \"electron ./dist/electron-main.js --inspect=5858 .\"",
+    "electron:start-prod-nix": "electron-rebuild --version 33.3.1 && npm run build:prepare-dist && cross-env TRILIUM_DATA_DIR=./data TRILIUM_ENV=dev nix-shell -p electron_33 --run \"electron ./dist/electron-main.js --inspect=5858 .\"",
     "electron:start-prod-nix-no-dir": "electron-rebuild --version 33.3.1 && npm run build:prepare-dist && cross-env TRILIUM_ENV=dev nix-shell -p electron_33 --run \"electron ./dist/electron-main.js --inspect=5858 .\"",
     "electron:qstart": "npm run electron:switch && npm run electron:start",
     "electron:switch": "electron-rebuild",
     "docs:edit": "cross-env NODE_OPTIONS=\"--import tsx\" TRILIUM_DATA_DIR=./data-docs TRILIUM_ENV=dev TRILIUM_PORT=37741 electron ./electron-docs-main.ts .",
-    "docs:edit-nix": "electron-rebuild --version 33.3.1 && cross-env NODE_OPTIONS=\"--import tsx\" TRILIUM_DATA_DIR=./data-docs TRILIUM_SYNC_SERVER_HOST=http://tsyncserver:4000 TRILIUM_PORT=37741 TRILIUM_ENV=dev nix-shell -p electron_33 --run \"electron ./electron-docs-main.ts .\"",
+    "docs:edit-nix": "electron-rebuild --version 33.3.1 && cross-env NODE_OPTIONS=\"--import tsx\" TRILIUM_DATA_DIR=./data-docs TRILIUM_PORT=37741 TRILIUM_ENV=dev nix-shell -p electron_33 --run \"electron ./electron-docs-main.ts .\"",
     "electron-forge:prepare": "npm run build:prepare-dist && cp -r node_modules ./build",
     "electron-forge:start": "npm run electron-forge:prepare && cd ./build && electron-forge start",
     "electron-forge:make": "npm run electron-forge:prepare && cd ./build && electron-forge make",
@@ -72,11 +72,7 @@
     "@braintree/sanitize-url": "7.1.1",
     "@electron/remote": "2.1.2",
     "@excalidraw/excalidraw": "0.18.0",
-    "@fullcalendar/core": "6.1.15",
-    "@fullcalendar/daygrid": "6.1.15",
-    "@fullcalendar/interaction": "6.1.15",
     "@highlightjs/cdn-assets": "11.11.1",
-    "@joplin/turndown-plugin-gfm": "1.0.61",
     "@mermaid-js/layout-elk": "0.1.7",
     "@mind-elixir/node-menu": "1.0.4",
     "@triliumnext/express-partial-content": "1.0.1",
@@ -84,7 +80,7 @@
     "async-mutex": "0.5.0",
     "autocomplete.js": "0.38.1",
     "axios": "1.8.3",
-    "better-sqlite3": "11.8.1",
+    "better-sqlite3": "11.9.1",
     "boxicons": "2.1.4",
     "chardet": "2.1.0",
     "cheerio": "1.0.0",
@@ -110,7 +106,7 @@
     "express-session": "1.18.1",
     "force-graph": "1.49.4",
     "fs-extra": "11.3.0",
-    "helmet": "8.0.0",
+    "helmet": "8.1.0",
     "html": "1.0.0",
     "html2plaintext": "2.1.4",
     "http-proxy-agent": "7.0.2",
@@ -173,7 +169,13 @@
     "@electron-forge/plugin-auto-unpack-natives": "7.7.0",
     "@electron/rebuild": "3.7.1",
     "@eslint/js": "9.22.0",
-    "@playwright/test": "1.51.0",
+    "@fullcalendar/core": "6.1.15",
+    "@fullcalendar/daygrid": "6.1.15",
+    "@fullcalendar/interaction": "6.1.15",
+    "@fullcalendar/list": "6.1.15",
+    "@fullcalendar/multimonth": "6.1.15",
+    "@fullcalendar/timegrid": "6.1.15",
+    "@playwright/test": "1.51.1",
     "@popperjs/core": "2.11.8",
     "@types/archiver": "6.0.3",
     "@types/better-sqlite3": "7.6.12",
@@ -215,7 +217,7 @@
     "@types/ws": "8.18.0",
     "@types/xml2js": "0.4.14",
     "@types/yargs": "17.0.33",
-    "@vitest/coverage-v8": "3.0.8",
+    "@vitest/coverage-v8": "3.0.9",
     "autoprefixer": "10.4.21",
     "bootstrap": "5.3.3",
     "cross-env": "7.0.3",
@@ -235,10 +237,11 @@
     "prettier": "3.5.3",
     "rcedit": "4.0.1",
     "rimraf": "6.0.1",
-    "sass": "1.85.1",
+    "sass": "1.86.0",
     "sass-loader": "16.0.5",
     "split.js": "1.6.5",
     "supertest": "7.0.0",
+    "svg-pan-zoom": "3.6.2",
     "swagger-jsdoc": "6.2.8",
     "ts-loader": "9.5.2",
     "tslib": "2.8.1",
@@ -246,7 +249,7 @@
     "typedoc": "0.28.0",
     "typescript": "5.8.2",
     "typescript-eslint": "8.26.1",
-    "vitest": "3.0.8",
+    "vitest": "3.0.9",
     "webpack": "5.98.0",
     "webpack-cli": "6.0.1",
     "webpack-dev-middleware": "7.4.2"

packages/turndown-plugin-gfm/.gitignore

@@ -0,0 +1,5 @@
+dist
+lib
+node_modules
+npm-debug.log
+test/*browser.js

packages/turndown-plugin-gfm/.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+  - "node"
+  - "6"

packages/turndown-plugin-gfm/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Dom Christie
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/turndown-plugin-gfm/README.md

@@ -0,0 +1,64 @@
+# turndown-plugin-gfm
+
+A [Turndown](https://github.com/domchristie/turndown) plugin which adds GitHub Flavored Markdown extensions.
+
+This is a fork of the original [turndown-plugin-gfm](https://github.com/domchristie/turndown-plugin-gfm) for use with [Joplin](https://github.com/laurent22/joplin). The changes are:
+
+- New: Always render tables even if they don't have a header.
+- New: Don't render the border of tables that contain other tables (frequent for websites that do the layout using tables). Only render the inner tables, if any, and if they also don't contain other tables.
+- New: Replace newlines (`\n`) with `<br>` inside table cells so that multi-line content is displayed correctly as Markdown.
+- New: Table cells are at least three characters long (padded with spaces) so that they render correctly in GFM-compliant renderers.
+- New: Handle colspan in TD tags
+- Fixed: Ensure there are no blank lines inside tables (due for example to an empty `<tr>` tag)
+- Fixed: Fixed importing tables that contain pipes.
+
+## Installation
+
+npm:
+
+```
+npm install @joplin/turndown-plugin-gfm
+```
+
+## Usage
+
+```js
+// For Node.js
+var TurndownService = require('@joplin/turndown')
+var turndownPluginGfm = require('@joplin/turndown-plugin-gfm')
+
+var gfm = turndownPluginGfm.gfm
+var turndownService = new TurndownService()
+turndownService.use(gfm)
+var markdown = turndownService.turndown('<strike>Hello world!</strike>')
+```
+
+turndown-plugin-gfm is a suite of plugins which can be applied individually. The available plugins are as follows:
+
+- `strikethrough` (for converting `<strike>`, `<s>`, and `<del>` elements)
+- `tables`
+- `taskListItems`
+- `gfm` (which applies all of the above)
+
+So for example, if you only wish to convert tables:
+
+```js
+var tables = require('@joplin/turndown-plugin-gfm').tables
+var turndownService = new TurndownService()
+turndownService.use(tables)
+```
+
+### Typescript
+
+To use this in a typescript project, add this to a `declarations.d.ts` file, as described in https://www.npmjs.com/package/@joplin/turndown, and then add:
+
+```ts
+declare module "@joplin/turndown-plugin-gfm" {
+  export const gfm: any;
+  // Add other named exports if necessary
+}
+```
+
+## License
+
+turndown-plugin-gfm is copyright © 2017+ Dom Christie and released under the MIT license.

packages/turndown-plugin-gfm/build_for_test.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+set -e
+
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+ROOT_DIR="$SCRIPT_DIR/../.."
+
+npm run build
+cd $ROOT_DIR/packages/app-cli && npm run test -- HtmlToMd

packages/turndown-plugin-gfm/config/rollup.config.browser.cjs.js

@@ -0,0 +1,8 @@
+import config from './rollup.config';
+
+export default config({
+	output: {
+		format: 'cjs',
+		file: 'lib/turndown-plugin-gfm.browser.cjs.js',
+	},
+});

packages/turndown-plugin-gfm/config/rollup.config.browser.es.js

@@ -0,0 +1,8 @@
+import config from './rollup.config';
+
+export default config({
+	output: {
+		format: 'es',
+		file: 'lib/turndown-plugin-gfm.browser.es.js',
+	},
+});

packages/turndown-plugin-gfm/config/rollup.config.cjs.js

@@ -0,0 +1,8 @@
+import config from './rollup.config';
+
+export default config({
+	output: {
+		format: 'cjs',
+		file: 'lib/turndown-plugin-gfm.cjs.js',
+	},
+});

packages/turndown-plugin-gfm/config/rollup.config.es.js

@@ -0,0 +1,8 @@
+import config from './rollup.config';
+
+export default config({
+	output: {
+		format: 'es',
+		file: 'lib/turndown-plugin-gfm.es.js',
+	},
+});

packages/turndown-plugin-gfm/config/rollup.config.iife.js

@@ -0,0 +1,8 @@
+import config from './rollup.config';
+
+export default config({
+	output: {
+		format: 'iife',
+		file: 'dist/turndown-plugin-gfm.js',
+	},
+});

packages/turndown-plugin-gfm/config/rollup.config.js

@@ -0,0 +1,7 @@
+export default function(config) {
+	return {
+		name: 'turndownPluginGfm',
+		input: 'src/gfm.js',
+		output: config.output,
+	};
+}

packages/turndown-plugin-gfm/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@joplin/turndown-plugin-gfm",
+  "description": "Turndown plugin to add GitHub Flavored Markdown extensions.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "1.0.61",
+  "author": "Dom Christie",
+  "main": "lib/turndown-plugin-gfm.cjs.js",
+  "devDependencies": {
+    "browserify": "14.5.0",
+    "rollup": "0.50.1",
+    "standard": "17.1.0",
+    "turndown": "7.2.0",
+    "turndown-attendant": "0.0.3"
+  },
+  "files": [
+    "lib",
+    "dist"
+  ],
+  "keywords": [
+    "turndown",
+    "turndown-plugin",
+    "html-to-markdown",
+    "html",
+    "markdown",
+    "github-flavored-markdown",
+    "gfm"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/laurent22/joplin-turndown-plugin-gfm.git"
+  },
+  "scripts": {
+    "build-all": "npm run build-cjs && npm run build-es && npm run build-iife",
+    "build": "rollup -c config/rollup.config.cjs.js",
+    "build-cjs": "rollup -c config/rollup.config.cjs.js && rollup -c config/rollup.config.browser.cjs.js",
+    "build-es": "rollup -c config/rollup.config.es.js && rollup -c config/rollup.config.browser.es.js",
+    "build-iife": "rollup -c config/rollup.config.iife.js",
+    "build-test": "browserify test/turndown-plugin-gfm-test.js --outfile test/turndown-plugin-gfm-test.browser.js",
+    "prepare": "npm run build"
+  },
+  "gitHead": "05a29b450962bf05a8642bbd39446a1f679a96ba"
+}

packages/turndown-plugin-gfm/publish.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+npm version patch
+npm publish

packages/turndown-plugin-gfm/src/gfm.js

@@ -0,0 +1,15 @@
+import highlightedCodeBlock from './highlighted-code-block.js'
+import strikethrough from './strikethrough.js'
+import tables from './tables.js'
+import taskListItems from './task-list-items.js'
+
+function gfm (turndownService) {
+  turndownService.use([
+    highlightedCodeBlock,
+    strikethrough,
+    tables,
+    taskListItems
+  ])
+}
+
+export { gfm, highlightedCodeBlock, strikethrough, tables, taskListItems }

packages/turndown-plugin-gfm/src/highlighted-code-block.js

@@ -0,0 +1,25 @@
+var highlightRegExp = /highlight-(?:text|source)-([a-z0-9]+)/
+
+export default function highlightedCodeBlock (turndownService) {
+  turndownService.addRule('highlightedCodeBlock', {
+    filter: function (node) {
+      var firstChild = node.firstChild
+      return (
+        node.nodeName === 'DIV' &&
+        highlightRegExp.test(node.className) &&
+        firstChild &&
+        firstChild.nodeName === 'PRE'
+      )
+    },
+    replacement: function (content, node, options) {
+      var className = node.className || ''
+      var language = (className.match(highlightRegExp) || [null, ''])[1]
+
+      return (
+        '\n\n' + options.fence + language + '\n' +
+        node.firstChild.textContent +
+        '\n' + options.fence + '\n\n'
+      )
+    }
+  })
+}

packages/turndown-plugin-gfm/src/strikethrough.js

@@ -0,0 +1,8 @@
+export default function strikethrough (turndownService) {
+  turndownService.addRule('strikethrough', {
+    filter: ['del', 's', 'strike'],
+    replacement: function (content) {
+      return '~~' + content + '~~'
+    }
+  })
+}

packages/turndown-plugin-gfm/src/tables.js

@@ -0,0 +1,286 @@
+var indexOf = Array.prototype.indexOf
+var every = Array.prototype.every
+var rules = {}
+var alignMap = { left: ':---', right: '---:', center: ':---:' };
+
+let isCodeBlock_ = null;
+let options_ = null;
+
+// We need to cache the result of tableShouldBeSkipped() as it is expensive.
+// Caching it means we went from about 9000 ms for rendering down to 90 ms.
+// Fixes https://github.com/laurent22/joplin/issues/6736
+const tableShouldBeSkippedCache_ = new WeakMap();
+
+function getAlignment(node) {
+  return node ? (node.getAttribute('align') || node.style.textAlign || '').toLowerCase() : '';
+}
+
+function getBorder(alignment) {
+  return alignment ? alignMap[alignment] : '---';
+}
+
+function getColumnAlignment(table, columnIndex) {
+  var votes = {
+    left: 0,
+    right: 0,
+    center: 0,
+    '': 0,
+  };
+
+  var align = '';
+
+  for (var i = 0; i < table.rows.length; ++i) {
+    var row = table.rows[i];
+    if (columnIndex < row.childNodes.length) {
+      var cellAlignment = getAlignment(row.childNodes[columnIndex]);
+      ++votes[cellAlignment];
+
+      if (votes[cellAlignment] > votes[align]) {
+        align = cellAlignment;
+      }
+    }
+  }
+
+  return align;
+}
+
+rules.tableCell = {
+  filter: ['th', 'td'],
+  replacement: function (content, node) {
+    if (tableShouldBeSkipped(nodeParentTable(node))) return content;
+    return cell(content, node)
+  }
+}
+
+rules.tableRow = {
+  filter: 'tr',
+  replacement: function (content, node) {
+    const parentTable = nodeParentTable(node);
+    if (tableShouldBeSkipped(parentTable)) return content;
+
+    var borderCells = ''
+
+    if (isHeadingRow(node)) {
+      const colCount = tableColCount(parentTable);
+      for (var i = 0; i < colCount; i++) {
+        const childNode = i < node.childNodes.length ? node.childNodes[i] : null;
+        var border = getBorder(getColumnAlignment(parentTable, i));
+        borderCells += cell(border, childNode, i);
+      }
+    }
+    return '\n' + content + (borderCells ? '\n' + borderCells : '')
+  }
+}
+
+rules.table = {
+  filter: function (node, options) {
+    return node.nodeName === 'TABLE';
+  },
+
+  replacement: function (content, node) {
+    // Only convert tables that can result in valid Markdown
+    // Other tables are kept as HTML using `keep` (see below).
+    if (tableShouldBeHtml(node, options_)) {
+      return node.outerHTML;
+    } else {
+      if (tableShouldBeSkipped(node)) return content;
+
+      // Ensure there are no blank lines
+      content = content.replace(/\n+/g, '\n')
+
+      // If table has no heading, add an empty one so as to get a valid Markdown table
+      var secondLine = content.trim().split('\n');
+      if (secondLine.length >= 2) secondLine = secondLine[1]
+      var secondLineIsDivider = /\| :?---/.test(secondLine);
+
+      var columnCount = tableColCount(node);
+      var emptyHeader = ''
+      if (columnCount && !secondLineIsDivider) {
+        emptyHeader = '|' + '     |'.repeat(columnCount) + '\n' + '|'
+        for (var columnIndex = 0; columnIndex < columnCount; ++columnIndex) {
+          emptyHeader += ' ' + getBorder(getColumnAlignment(node, columnIndex)) + ' |';
+        }
+      }
+
+      const captionContent = node.caption ? node.caption.textContent || '' : '';
+      const caption = captionContent ? `${captionContent}\n\n` : '';
+      const tableContent = `${emptyHeader}${content}`.trimStart();
+      return `\n\n${caption}${tableContent}\n\n`;
+    }
+  }
+}
+
+rules.tableCaption = {
+  filter: ['caption'],
+  replacement: () => '',
+};
+
+rules.tableColgroup = {
+  filter: ['colgroup', 'col'],
+  replacement: () => '',
+};
+
+rules.tableSection = {
+  filter: ['thead', 'tbody', 'tfoot'],
+  replacement: function (content) {
+    return content
+  }
+}
+
+// A tr is a heading row if:
+// - the parent is a THEAD
+// - or if its the first child of the TABLE or the first TBODY (possibly
+//   following a blank THEAD)
+// - and every cell is a TH
+function isHeadingRow (tr) {
+  var parentNode = tr.parentNode
+  return (
+    parentNode.nodeName === 'THEAD' ||
+    (
+      parentNode.firstChild === tr &&
+      (parentNode.nodeName === 'TABLE' || isFirstTbody(parentNode)) &&
+      every.call(tr.childNodes, function (n) { return n.nodeName === 'TH' })
+    )
+  )
+}
+
+function isFirstTbody (element) {
+  var previousSibling = element.previousSibling
+  return (
+    element.nodeName === 'TBODY' && (
+      !previousSibling ||
+      (
+        previousSibling.nodeName === 'THEAD' &&
+        /^\s*$/i.test(previousSibling.textContent)
+      )
+    )
+  )
+}
+
+function cell (content, node = null, index = null) {
+  if (index === null) index = indexOf.call(node.parentNode.childNodes, node)
+  var prefix = ' '
+  if (index === 0) prefix = '| '
+  let filteredContent = content.trim().replace(/\n\r/g, '<br>').replace(/\n/g, "<br>");
+  filteredContent = filteredContent.replace(/\|+/g, '\\|')
+  while (filteredContent.length < 3) filteredContent += ' ';
+  if (node) filteredContent = handleColSpan(filteredContent, node, ' ');
+  return prefix + filteredContent + ' |'
+}
+
+function nodeContainsTable(node) {
+  if (!node.childNodes) return false;
+
+  for (let i = 0; i < node.childNodes.length; i++) {
+    const child = node.childNodes[i];
+    if (child.nodeName === 'TABLE') return true;
+    if (nodeContainsTable(child)) return true;
+  }
+  return false;
+}
+
+const nodeContains = (node, types) => {
+  if (!node.childNodes) return false;
+
+  for (let i = 0; i < node.childNodes.length; i++) {
+    const child = node.childNodes[i];
+    if (types === 'code' && isCodeBlock_ && isCodeBlock_(child)) return true;
+    if (types.includes(child.nodeName)) return true;
+    if (nodeContains(child, types)) return true;
+  }
+
+  return false;
+}
+
+const tableShouldBeHtml = (tableNode, options) => {
+  const possibleTags = [
+    'UL',
+    'OL',
+    'H1',
+    'H2',
+    'H3',
+    'H4',
+    'H5',
+    'H6',
+    'HR',
+    'BLOCKQUOTE',
+    'PRE'
+  ];
+
+  // In general we should leave as HTML tables that include other tables. The
+  // exception is with the Web Clipper when we import a web page with a layout
+  // that's made of HTML tables. In that case we have this logic of removing the
+  // outer table and keeping only the inner ones. For the Rich Text editor
+  // however we always want to keep nested tables.
+  if (options.preserveNestedTables) possibleTags.push('TABLE');
+
+  return nodeContains(tableNode, 'code') ||
+    nodeContains(tableNode, possibleTags);
+}
+
+// Various conditions under which a table should be skipped - i.e. each cell
+// will be rendered one after the other as if they were paragraphs.
+function tableShouldBeSkipped(tableNode) {
+  const cached = tableShouldBeSkippedCache_.get(tableNode);
+  if (cached !== undefined) return cached;
+
+  const result = tableShouldBeSkipped_(tableNode);
+
+  tableShouldBeSkippedCache_.set(tableNode, result);
+  return result;
+}
+
+function tableShouldBeSkipped_(tableNode) {
+  if (!tableNode) return true;
+  if (!tableNode.rows) return true;
+  if (tableNode.rows.length === 1 && tableNode.rows[0].childNodes.length <= 1) return true; // Table with only one cell
+  if (nodeContainsTable(tableNode)) return true;
+  return false;
+}
+
+function nodeParentDiv(node) {
+  let parent = node.parentNode;
+  while (parent.nodeName !== 'DIV') {
+    parent = parent.parentNode;
+    if (!parent) return null;
+  }
+  return parent;
+}
+
+function nodeParentTable(node) {
+  let parent = node.parentNode;
+  while (parent.nodeName !== 'TABLE') {
+    parent = parent.parentNode;
+    if (!parent) return null;
+  }
+  return parent;
+}
+
+function handleColSpan(content, node, emptyChar) {
+  const colspan = node.getAttribute('colspan') || 1;
+  for (let i = 1; i < colspan; i++) {
+    content += ' | ' + emptyChar.repeat(3);
+  }
+  return content
+}
+
+function tableColCount(node) {
+  let maxColCount = 0;
+  for (let i = 0; i < node.rows.length; i++) {
+    const row = node.rows[i]
+    const colCount = row.childNodes.length
+    if (colCount > maxColCount) maxColCount = colCount
+  }
+  return maxColCount
+}
+
+export default function tables (turndownService) {
+  isCodeBlock_ = turndownService.isCodeBlock;
+  options_ = turndownService.options;
+
+  turndownService.keep(function (node) {
+    if (node.nodeName === 'TABLE' && tableShouldBeHtml(node, turndownService.options)) return true;
+    return false;
+  });
+  for (var key in rules) turndownService.addRule(key, rules[key])
+}

packages/turndown-plugin-gfm/src/task-list-items.js

@@ -0,0 +1,10 @@
+export default function taskListItems (turndownService) {
+  turndownService.addRule('taskListItems', {
+    filter: function (node) {
+      return node.type === 'checkbox' && node.parentNode.nodeName === 'LI'
+    },
+    replacement: function (content, node) {
+      return (node.checked ? '[x]' : '[ ]') + ' '
+    }
+  })
+}

packages/turndown-plugin-gfm/test/index.html

@@ -0,0 +1,323 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>turndown test runner</title>
+  <link rel="stylesheet" href="../node_modules/turndown-attendant/dist/styles.css">
+</head>
+<body>
+
+<!-- TEST CASES -->
+
+<div class="case" data-name="strike">
+  <div class="input"><strike>Lorem ipsum</strike></div>
+  <pre class="expected">~Lorem ipsum~</pre>
+</div>
+
+<div class="case" data-name="s">
+  <div class="input"><s>Lorem ipsum</s></div>
+  <pre class="expected">~Lorem ipsum~</pre>
+</div>
+
+<div class="case" data-name="del">
+  <div class="input"><del>Lorem ipsum</del></div>
+  <pre class="expected">~Lorem ipsum~</pre>
+</div>
+
+<div class="case" data-name="unchecked inputs">
+  <div class="input"><ul><li><input type=checkbox>Check Me!</li></ul></div>
+  <pre class="expected">*   [ ] Check Me!</pre>
+</div>
+
+<div class="case" data-name="checked inputs">
+  <div class="input"><ul><li><input type=checkbox checked>Checked!</li></ul></div>
+  <pre class="expected">*   [x] Checked!</pre>
+</div>
+
+<div class="case" data-name="basic table">
+  <div class="input">
+    <table>
+      <thead>
+        <tr>
+          <th>Column 1</th>
+          <th>Column 2</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Row 1, Column 1</td>
+          <td>Row 1, Column 2</td>
+        </tr>
+        <tr>
+          <td>Row 2, Column 1</td>
+          <td>Row 2, Column 2</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <pre class="expected">| Column 1 | Column 2 |
+| --- | --- |
+| Row 1, Column 1 | Row 1, Column 2 |
+| Row 2, Column 1 | Row 2, Column 2 |</pre>
+</div>
+
+<div class="case" data-name="cell alignment">
+  <div class="input">
+    <table>
+      <thead>
+        <tr>
+          <th align="left">Column 1</th>
+          <th align="center">Column 2</th>
+          <th align="right">Column 3</th>
+          <th align="foo">Column 4</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Row 1, Column 1</td>
+          <td>Row 1, Column 2</td>
+          <td>Row 1, Column 3</td>
+          <td>Row 1, Column 4</td>
+        </tr>
+        <tr>
+          <td>Row 2, Column 1</td>
+          <td>Row 2, Column 2</td>
+          <td>Row 2, Column 3</td>
+          <td>Row 2, Column 4</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <pre class="expected">| Column 1 | Column 2 | Column 3 | Column 4 |
+| :-- | :-: | --: | --- |
+| Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 | Row 1, Column 4 |
+| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 | Row 2, Column 4 |</pre>
+</div>
+
+<div class="case" data-name="empty cells">
+  <div class="input">
+    <table>
+      <thead>
+        <tr>
+          <th align="left">Column 1</th>
+          <th align="center">Column 2</th>
+          <th align="right">Column 3</th>
+          <th align="foo">Column 4</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td></td>
+          <td>Row 1, Column 2</td>
+          <td>Row 1, Column 3</td>
+          <td>Row 1, Column 4</td>
+        </tr>
+        <tr>
+          <td>Row 2, Column 1</td>
+          <td></td>
+          <td>Row 2, Column 3</td>
+          <td>Row 2, Column 4</td>
+        </tr>
+        <tr>
+          <td>Row 3, Column 1</td>
+          <td>Row 3, Column 2</td>
+          <td></td>
+          <td>Row 3, Column 4</td>
+        </tr>
+        <tr>
+          <td>Row 4, Column 1</td>
+          <td>Row 4, Column 2</td>
+          <td>Row 4, Column 3</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td>Row 5, Column 4</td>
+        </tr>
+      </tbody>
+    </table>
+</div>
+<pre class="expected">| Column 1 | Column 2 | Column 3 | Column 4 |
+| :-- | :-: | --: | --- |
+|  | Row 1, Column 2 | Row 1, Column 3 | Row 1, Column 4 |
+| Row 2, Column 1 |  | Row 2, Column 3 | Row 2, Column 4 |
+| Row 3, Column 1 | Row 3, Column 2 |  | Row 3, Column 4 |
+| Row 4, Column 1 | Row 4, Column 2 | Row 4, Column 3 |  |
+|  |  |  | Row 5, Column 4 |</pre>
+</div>
+
+<div class="case" data-name="empty rows">
+  <div class="input">
+    <table>
+      <thead>
+        <td>Heading 1</td>
+        <td>Heading 2</td>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Row 1</td>
+          <td>Row 1</td>
+        </tr>
+        <tr>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>Row 3</td>
+          <td>Row 3</td>
+        </tr>
+      </tbody>
+    </table>
+</div>
+<pre class="expected">| Heading 1 | Heading 2 |
+| --- | --- |
+| Row 1 | Row 1 |
+| Row 3 | Row 3 |</pre>
+</div>
+
+<div class="case" data-name="th in first row">
+  <div class="input">
+    <table>
+      <tr>
+        <th>Heading</th>
+      </tr>
+      <tr>
+        <td>Content</td>
+      </tr>
+    </table>
+  </div>
+  <pre class="expected">| Heading |
+| --- |
+| Content |</pre>
+</div>
+
+<div class="case" data-name="th first row in tbody">
+  <div class="input">
+    <table>
+      <tbody>
+        <tr>
+          <th>Heading</th>
+        </tr>
+        <tr>
+          <td>Content</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <pre class="expected">| Heading |
+| --- |
+| Content |</pre>
+</div>
+
+<div class="case" data-name="table with two tbodies">
+  <div class="input">
+    <table>
+      <tbody>
+        <tr>
+          <th>Heading</th>
+        </tr>
+        <tr>
+          <td>Content</td>
+        </tr>
+      </tbody>
+      <tbody>
+        <tr>
+          <th>Heading</th>
+        </tr>
+        <tr>
+          <td>Content</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <pre class="expected">| Heading |
+| --- |
+| Content |
+| Heading |
+| Content |</pre>
+</div>
+
+<div class="case" data-name="heading cells in both thead and tbody">
+  <div class="input">
+    <table>
+      <thead><tr><th>Heading</th></tr></thead>
+      <tbody><tr><th>Cell</th></tr></tbody>
+    </table>
+  </div>
+  <pre class="expected">| Heading |
+| --- |
+| Cell |</pre>
+</div>
+
+<div class="case" data-name="empty head">
+  <div class="input">
+    <table>
+      <thead><tr><th></th></tr></thead>
+      <tbody><tr><th>Heading</th></tr></tbody>
+    </table>
+  </div>
+  <pre class="expected">| Heading |
+| --- |</pre>
+</div>
+
+<div class="case" data-name="non-definitive heading row (converted but with empty header)">
+  <div class="input">
+    <table>
+      <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
+      <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
+    </table>
+  </div>
+  <pre class="expected">|     |     |
+| --- | --- |
+| Row 1 Cell 1 | Row 1 Cell 2 |
+| Row 2 Cell 1 | Row 2 Cell 2 |</pre>
+</div>
+
+<div class="case" data-name="non-definitive heading row with th (converted but with empty header)">
+  <div class="input">
+    <table>
+      <tr>
+        <th>Heading</th>
+        <td>Not a heading</td>
+      </tr>
+      <tr>
+        <td>Heading</td>
+        <td>Not a heading</td>
+      </tr>
+    </table>
+  </div>
+  <pre class="expected">|     |     |
+| --- | --- |
+| Heading | Not a heading |
+| Heading | Not a heading |</pre>
+</div>
+
+<div class="case" data-name="highlighted code block with html">
+  <div class="input">
+    <div class="highlight highlight-text-html-basic">
+      <pre>&lt;<span class="pl-ent">p</span>&gt;Hello world&lt;/<span class="pl-ent">p</span>&gt;</pre>
+    </div>
+  </div>
+  <pre class="expected">```html
+&lt;p&gt;Hello world&lt;/p&gt;
+```</pre>
+</div>
+
+<div class="case" data-name="highlighted code block with js">
+  <div class="input">
+    <div class="highlight highlight-source-js">
+      <pre>;(<span class="pl-k">function</span> () {})()</pre>
+    </div>
+  </div>
+  <pre class="expected">```js
+;(function () {})()
+```</pre>
+</div>
+
+<!-- /TEST CASES -->
+
+<script src="turndown-plugin-gfm-test.browser.js"></script>
+</body>
+</html>

packages/turndown-plugin-gfm/test/turndown-plugin-gfm-test.js

@@ -0,0 +1,13 @@
+const Attendant = require('turndown-attendant');
+const TurndownService = require('turndown');
+const gfm = require('../lib/turndown-plugin-gfm.cjs').gfm;
+
+const attendant = new Attendant({
+	file: `${__dirname}/index.html`,
+	TurndownService: TurndownService,
+	beforeEach: function(turndownService) {
+		turndownService.use(gfm);
+	},
+});
+
+attendant.run();

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;
 }
 
@@ -175,9 +174,9 @@ export type CommandMappings = {
         callback: (value: NoteDetailWidget | PromiseLike<NoteDetailWidget>) => void;
     };
     executeWithTextEditor: CommandData &
-        ExecuteCommandData<TextEditor> & {
-            callback?: GetTextEditorCallback;
-        };
+    ExecuteCommandData<TextEditor> & {
+        callback?: GetTextEditorCallback;
+    };
     executeWithCodeEditor: CommandData & ExecuteCommandData<CodeMirrorInstance>;
     /**
      * Called upon when attempting to retrieve the content element of a {@link NoteContext}.
@@ -298,16 +297,13 @@ type EventMappings = {
         noteContext: NoteContext;
         notePath?: string | null;
     };
-    noteSwitchedAndActivatedEvent: {
+    noteSwitchedAndActivated: {
         noteContext: NoteContext;
         notePath: string;
     };
     setNoteContext: {
         noteContext: NoteContext;
     };
-    noteTypeMimeChangedEvent: {
-        noteId: string;
-    };
     reEvaluateHighlightsListWidgetVisibility: {
         noteId: string | undefined;
     };
@@ -328,14 +324,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[];
@@ -343,7 +339,7 @@ type EventMappings = {
     newNoteContextCreated: {
         noteContext: NoteContext;
     };
-    noteContextRemovedEvent: {
+    noteContextRemoved: {
         ntxIds: string[];
     };
     exportSvg: {
@@ -364,12 +360,17 @@ type EventMappings = {
     relationMapResetPanZoom: { ntxId: string | null | undefined };
     relationMapResetZoomIn: { ntxId: string | null | undefined };
     relationMapResetZoomOut: { ntxId: string | null | undefined };
-    activeNoteChangedEvent: {};
+    activeNoteChanged: {};
     showAddLinkDialog: {
         textTypeWidget: EditableTextTypeWidget;
         text: string;
     };
-
+    openBulkActionsDialog: {
+        selectedOrActiveNoteIds: string[];
+    };
+    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/main_tree_executors.ts

@@ -1,4 +1,4 @@
-import appContext from "./app_context.js";
+import appContext, { type EventData } from "./app_context.js";
 import noteCreateService from "../services/note_create.js";
 import treeService from "../services/tree.js";
 import hoistedNoteService from "../services/hoisted_note.js";
@@ -14,23 +14,19 @@ export default class MainTreeExecutors extends Component {
         return appContext.noteTreeWidget;
     }
 
-    async cloneNotesToCommand() {
+    async cloneNotesToCommand({ selectedOrActiveNoteIds }: EventData<"cloneNotesTo">) {
         if (!this.tree) {
             return;
         }
 
-        const selectedOrActiveNoteIds = this.tree.getSelectedOrActiveNodes().map((node) => node.data.noteId);
-
         this.triggerCommand("cloneNoteIdsTo", { noteIds: selectedOrActiveNoteIds });
     }
 
-    async moveNotesToCommand() {
+    async moveNotesToCommand({ selectedOrActiveBranchIds }: EventData<"moveNotesTo">) {
         if (!this.tree) {
             return;
         }
 
-        const selectedOrActiveBranchIds = this.tree.getSelectedOrActiveNodes().map((node) => node.data.branchId);
-
         this.triggerCommand("moveBranchIdsTo", { branchIds: selectedOrActiveBranchIds });
     }
 

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,6 +18,16 @@
         </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>
@@ -71,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
@@ -102,6 +112,23 @@
               <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>
@@ -136,6 +163,19 @@
                 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>
@@ -159,24 +199,24 @@
               <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>
+                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: 
+                like this:   
                 <br>
                 <br>
-                <img src="11_Calendar View_image.png">
+                <img src="9_Calendar View_image.png"> 
                 <br>
-                <br><code>&lt;br&gt;#weight="70"&lt;br&gt;#Mood="Good"&lt;br&gt;#calendar:displayedAttributes="weight,Mood"&lt;br&gt;</code> 
+                <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:
+                title of the target note:  
                 <br>
-                <br><code>&lt;br&gt;~assignee=@My assignee&lt;br&gt;#calendar:displayedAttributes="assignee"&lt;br&gt;</code>
+                <br><code>~assignee=@My assignee #calendar:displayedAttributes="assignee"</code>
               </td>
             </tr>
             <tr>
@@ -189,16 +229,27 @@
             <tr>
               <td><code>#calendar:endDate</code>
               </td>
-              <td>Allows using a different label to represent the start date, other than <code>endDate</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>
+              <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="14_Calendar View_image.png">
+          <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>
@@ -208,7 +259,7 @@
 #hidePromotedAttributes </code></pre>
         <p>This will result in:</p>
         <p>
-          <img src="12_Calendar View_image.png">
+          <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
@@ -233,31 +284,30 @@
             will not be displayed.</li>
         </ul>
         <p>
-          <img src="10_Calendar View_image.png">
+          <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. 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>
+          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>
+              <th> </th>
+              <th> </th>
             </tr>
           </thead>
           <tbody>
             <tr>
-              <td>
-                <img src="5_Calendar View_image.png">
+              <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="7_Calendar View_image.png">
+                <img src="5_Calendar View_image.png">
               </td>
             </tr>
           </tbody>
@@ -265,7 +315,7 @@
         
 <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
+          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>
@@ -278,11 +328,10 @@
           </thead>
           <tbody>
             <tr>
-              <td>
-                <img src="6_Calendar View_image.png">
+              <td><code>#startDate=2025-02-14 #endDate=2025-02-15 ~for=@John Smith ~for=@Jane Doe #calendar:title="for"</code>
               </td>
               <td>
-                <img src="8_Calendar View_image.png">
+                <img src="6_Calendar View_image.png">
               </td>
             </tr>
           </tbody>
@@ -301,8 +350,7 @@
           </thead>
           <tbody>
             <tr>
-              <td>
-                <img src="13_Calendar View_image.png">
+              <td><code>#calendar:title="shortName" #shortName="John S."</code>
               </td>
               <td>
                 <img src="1_Calendar View_image.png">

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/resizer.ts

@@ -1,6 +1,8 @@
 import options from "./options.js";
 import Split from "split.js"
 
+export const DEFAULT_GUTTER_SIZE = 5;
+
 let leftInstance: ReturnType<typeof Split> | null;
 let rightInstance: ReturnType<typeof Split> | null;
 
@@ -26,7 +28,7 @@ function setupLeftPaneResizer(leftPaneVisible: boolean) {
     if (leftPaneVisible) {
         leftInstance = Split(["#left-pane", "#rest-pane"], {
             sizes: [leftPaneWidth, 100 - leftPaneWidth],
-            gutterSize: 5,
+            gutterSize: DEFAULT_GUTTER_SIZE,
             onDragEnd: (sizes) => options.save("leftPaneWidth", Math.round(sizes[0]))
         });
     }
@@ -54,7 +56,7 @@ function setupRightPaneResizer() {
     if (rightPaneVisible) {
         rightInstance = Split(["#center-pane", "#right-pane"], {
             sizes: [100 - rightPaneWidth, rightPaneWidth],
-            gutterSize: 5,
+            gutterSize: DEFAULT_GUTTER_SIZE,
             minSize: [ 300, 180 ],
             onDragEnd: (sizes) => options.save("rightPaneWidth", Math.round(sizes[1]))
         });

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/branch_prefix.ts

@@ -8,8 +8,6 @@ import appContext from "../../components/app_context.js";
 import { t } from "../../services/i18n.js";
 import { Modal } from "bootstrap";
 
-let branchId;
-
 const TPL = `<div class="branch-prefix-dialog modal fade mx-auto" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg" role="document">
         <form class="branch-prefix-form">
@@ -25,7 +23,7 @@ const TPL = `<div class="branch-prefix-dialog modal fade mx-auto" tabindex="-1"
 
                         <div class="input-group">
                             <input class="branch-prefix-input form-control">
-                            <div class="branch-prefix-note-title input-group-text"></div>                            
+                            <div class="branch-prefix-note-title input-group-text"></div>
                         </div>
                     </div>
                 </div>
@@ -38,61 +36,70 @@ const TPL = `<div class="branch-prefix-dialog modal fade mx-auto" tabindex="-1"
 </div>`;
 
 export default class BranchPrefixDialog extends BasicWidget {
+    private modal!: Modal;
+    private $form!: JQuery<HTMLElement>;
+    private $treePrefixInput!: JQuery<HTMLElement>;
+    private $noteTitle!: JQuery<HTMLElement>;
+    private branchId: string | null = null;
+
     doRender() {
         this.$widget = $(TPL);
-        this.modal = Modal.getOrCreateInstance(this.$widget);
+        this.modal = Modal.getOrCreateInstance(this.$widget[0]);
         this.$form = this.$widget.find(".branch-prefix-form");
         this.$treePrefixInput = this.$widget.find(".branch-prefix-input");
         this.$noteTitle = this.$widget.find(".branch-prefix-note-title");
 
         this.$form.on("submit", () => {
             this.savePrefix();
-
             return false;
         });
 
         this.$widget.on("shown.bs.modal", () => this.$treePrefixInput.trigger("focus"));
     }
 
-    async refresh(notePath) {
+    async refresh(notePath: string) {
         const { noteId, parentNoteId } = treeService.getNoteIdAndParentIdFromUrl(notePath);
 
         if (!noteId || !parentNoteId) {
             return;
         }
 
-        branchId = await froca.getBranchId(parentNoteId, noteId);
-        const branch = froca.getBranch(branchId);
+        const newBranchId = await froca.getBranchId(parentNoteId, noteId);
+        if (!newBranchId) {
+            return;
+        }
+        this.branchId = newBranchId;
 
+        const branch = froca.getBranch(this.branchId);
         if (!branch || branch.noteId === "root") {
             return;
         }
 
         const parentNote = await froca.getNote(branch.parentNoteId);
-
-        if (parentNote.type === "search") {
+        if (!parentNote || parentNote.type === "search") {
             return;
         }
 
-        this.$treePrefixInput.val(branch.prefix);
+        this.$treePrefixInput.val(branch.prefix || "");
 
         const noteTitle = await treeService.getNoteTitle(noteId);
-
         this.$noteTitle.text(` - ${noteTitle}`);
     }
 
     async editBranchPrefixEvent() {
         const notePath = appContext.tabManager.getActiveContextNotePath();
+        if (!notePath) {
+            return;
+        }
 
         await this.refresh(notePath);
-
         utils.openDialog(this.$widget);
     }
 
     async savePrefix() {
         const prefix = this.$treePrefixInput.val();
 
-        await server.put(`branches/${branchId}/set-prefix`, { prefix: prefix });
+        await server.put(`branches/${this.branchId}/set-prefix`, { prefix: prefix });
 
         this.modal.hide();
 

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

@@ -5,6 +5,8 @@ import utils from "../../services/utils.js";
 import server from "../../services/server.js";
 import toastService from "../../services/toast.js";
 import { t } from "../../services/i18n.js";
+import type { EventData } from "../../components/app_context.js";
+
 
 const TPL = `
 <div class="bulk-actions-dialog modal mx-auto" tabindex="-1" role="dialog">
@@ -67,6 +69,13 @@ const TPL = `
 </div>`;
 
 export default class BulkActionsDialog extends BasicWidget {
+    private $includeDescendants!: JQuery<HTMLElement>;
+    private $affectedNoteCount!: JQuery<HTMLElement>;
+    private $availableActionList!: JQuery<HTMLElement>;
+    private $existingActionList!: JQuery<HTMLElement>;
+    private $executeButton!: JQuery<HTMLElement>;
+    private selectedOrActiveNoteIds: string[] | null = null;
+
     doRender() {
         this.$widget = $(TPL);
         this.$includeDescendants = this.$widget.find(".include-descendants");
@@ -79,9 +88,11 @@ export default class BulkActionsDialog extends BasicWidget {
 
         this.$widget.on("click", "[data-action-add]", async (event) => {
             const actionName = $(event.target).attr("data-action-add");
+            if (!actionName) {
+                return;
+            }
 
             await bulkActionService.addAction("_bulkAction", actionName);
-
             await this.refresh();
         });
 
@@ -93,7 +104,6 @@ export default class BulkActionsDialog extends BasicWidget {
             });
 
             toastService.showMessage(t("bulk_actions.bulk_actions_executed"), 3000);
-
             utils.closeActiveDialog();
         });
     }
@@ -101,21 +111,28 @@ export default class BulkActionsDialog extends BasicWidget {
     async refresh() {
         this.renderAvailableActions();
 
+        if (!this.selectedOrActiveNoteIds) {
+            return;
+        }
+
         const { affectedNoteCount } = await server.post("bulk-action/affected-notes", {
             noteIds: this.selectedOrActiveNoteIds,
             includeDescendants: this.$includeDescendants.is(":checked")
-        });
+        }) as { affectedNoteCount: number };
 
         this.$affectedNoteCount.text(affectedNoteCount);
 
         const bulkActionNote = await froca.getNote("_bulkAction");
+        if (!bulkActionNote) {
+            return;
+        }
 
         const actions = bulkActionService.parseActions(bulkActionNote);
 
         this.$existingActionList.empty();
 
         if (actions.length > 0) {
-            this.$existingActionList.append(...actions.map((action) => action.render()));
+            this.$existingActionList.append(...actions.map((action) => action.render()).filter((action) => action !== null));
         } else {
             this.$existingActionList.append($("<p>").text(t("bulk_actions.none_yet")));
         }
@@ -138,7 +155,7 @@ export default class BulkActionsDialog extends BasicWidget {
         }
     }
 
-    entitiesReloadedEvent({ loadResults }) {
+    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         // only refreshing deleted attrs, otherwise components update themselves
         if (loadResults.getAttributeRows().find((row) => row.type === "label" && row.name === "action" && row.noteId === "_bulkAction" && row.isDeleted)) {
             // this may be triggered from e.g., sync without open widget, then no need to refresh the widget
@@ -148,12 +165,11 @@ export default class BulkActionsDialog extends BasicWidget {
         }
     }
 
-    async openBulkActionsDialogEvent({ selectedOrActiveNoteIds }) {
+    async openBulkActionsDialogEvent({ selectedOrActiveNoteIds }: EventData<"openBulkActionsDialog">) {
         this.selectedOrActiveNoteIds = selectedOrActiveNoteIds;
         this.$includeDescendants.prop("checked", false);
 
         await this.refresh();
-
         utils.openDialog(this.$widget);
     }
 }

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

@@ -7,6 +7,8 @@ import branchService from "../../services/branches.js";
 import appContext from "../../components/app_context.js";
 import BasicWidget from "../basic_widget.js";
 import { t } from "../../services/i18n.js";
+import type { EventData } from "../../components/app_context.js";
+
 
 const TPL = `
 <div class="clone-to-dialog modal mx-auto" tabindex="-1" role="dialog">
@@ -48,10 +50,14 @@ const TPL = `
 </div>`;
 
 export default class CloneToDialog extends BasicWidget {
+    private $form!: JQuery<HTMLElement>;
+    private $noteAutoComplete!: JQuery<HTMLElement>;
+    private $clonePrefix!: JQuery<HTMLElement>;
+    private $noteList!: JQuery<HTMLElement>;
+    private clonedNoteIds: string[] | null = null;
+
     constructor() {
         super();
-
-        this.clonedNoteIds = null;
     }
 
     doRender() {
@@ -66,7 +72,6 @@ export default class CloneToDialog extends BasicWidget {
 
             if (notePath) {
                 this.$widget.modal("hide");
-
                 this.cloneNotesTo(notePath);
             } else {
                 logError(t("clone_to.no_path_to_clone_to"));
@@ -76,9 +81,9 @@ export default class CloneToDialog extends BasicWidget {
         });
     }
 
-    async cloneNoteIdsToEvent({ noteIds }) {
+    async cloneNoteIdsToEvent({ noteIds }: EventData<"cloneNoteIdsTo">) {
         if (!noteIds || noteIds.length === 0) {
-            noteIds = [appContext.tabManager.getActiveContextNoteId()];
+            noteIds = [appContext.tabManager.getActiveContextNoteId() ?? ""];
         }
 
         this.clonedNoteIds = [];
@@ -90,14 +95,14 @@ export default class CloneToDialog extends BasicWidget {
         }
 
         utils.openDialog(this.$widget);
-
         this.$noteAutoComplete.val("").trigger("focus");
-
         this.$noteList.empty();
 
         for (const noteId of this.clonedNoteIds) {
             const note = await froca.getNote(noteId);
-
+            if (!note) {
+                continue;
+            }
             this.$noteList.append($("<li>").text(note.title));
         }
 
@@ -105,15 +110,29 @@ export default class CloneToDialog extends BasicWidget {
         noteAutocompleteService.showRecentNotes(this.$noteAutoComplete);
     }
 
-    async cloneNotesTo(notePath) {
+    async cloneNotesTo(notePath: string) {
         const { noteId, parentNoteId } = treeService.getNoteIdAndParentIdFromUrl(notePath);
+        if (!noteId || !parentNoteId) {
+            return;
+        }
+
         const targetBranchId = await froca.getBranchId(parentNoteId, noteId);
+        if (!targetBranchId || !this.clonedNoteIds) {
+            return;
+        }
 
         for (const cloneNoteId of this.clonedNoteIds) {
-            await branchService.cloneNoteToBranch(cloneNoteId, targetBranchId, this.$clonePrefix.val());
+            await branchService.cloneNoteToBranch(cloneNoteId, targetBranchId, this.$clonePrefix.val() as string);
 
             const clonedNote = await froca.getNote(cloneNoteId);
-            const targetNote = await froca.getBranch(targetBranchId).getNote();
+            const targetBranch = froca.getBranch(targetBranchId);
+            if (!clonedNote || !targetBranch) {
+                continue;
+            }
+            const targetNote = await targetBranch.getNote();
+            if (!targetNote) {
+                continue;
+            }
 
             toastService.showMessage(t("clone_to.note_cloned", { clonedTitle: clonedNote.title, targetTitle: targetNote.title }));
         }

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/mermaid.ts

@@ -6,17 +6,26 @@ import utils from "../services/utils.js";
 import { loadElkIfNeeded, postprocessMermaidSvg } from "../services/mermaid.js";
 import type FNote from "../entities/fnote.js";
 import type { EventData } from "../components/app_context.js";
+import ScrollingContainer from "./containers/scrolling_container.js";
+import Split from "split.js";
+import { DEFAULT_GUTTER_SIZE } from "../services/resizer.js";
 
 const TPL = `<div class="mermaid-widget">
     <style>
         .mermaid-widget {
-            flex-grow: 2;
             overflow: auto;
+        }
+
+        body.mobile .mermaid-widget {
             min-height: 200px;
-            border-bottom: 1px solid var(--main-border-color);
-            padding: 20px;
-            margin-bottom: 10px;
+            flex-grow: 2;
             flex-basis: 0;
+            border-bottom: 1px solid var(--main-border-color);
+            margin-bottom: 10px;
+        }
+
+        body.desktop .mermaid-widget + .gutter {
+            border-bottom: 1px solid var(--main-border-color);
         }
 
         .mermaid-render {
@@ -24,10 +33,6 @@ const TPL = `<div class="mermaid-widget">
             height: 100%;
             text-align: center;
         }
-
-        .mermaid-render svg {
-            width: 95%; /* https://github.com/zadam/trilium/issues/4340 */
-        }
     </style>
 
     <div class="mermaid-error alert alert-warning">
@@ -46,6 +51,10 @@ export default class MermaidWidget extends NoteContextAwareWidget {
     private $errorContainer!: JQuery<HTMLElement>;
     private $errorMessage!: JQuery<HTMLElement>;
     private dirtyAttachment?: boolean;
+    private zoomHandler?: () => void;
+    private zoomInstance?: SvgPanZoom.Instance;
+    private splitInstance?: Split.Instance;
+    private lastNote?: FNote;
 
     isEnabled() {
         return super.isEnabled() && this.note?.type === "mermaid" && this.note.isContentAvailable() && this.noteContext?.viewScope?.viewMode === "default";
@@ -60,6 +69,9 @@ export default class MermaidWidget extends NoteContextAwareWidget {
     }
 
     async refreshWithNote(note: FNote) {
+        const isSameNote = (this.lastNote === note);
+
+        this.cleanup();
         this.$errorContainer.hide();
 
         await libraryLoader.requireLibrary(libraryLoader.MERMAID);
@@ -69,9 +81,9 @@ export default class MermaidWidget extends NoteContextAwareWidget {
             ...(getMermaidConfig() as any)
         });
 
-        this.$display.empty();
-
-        const wheelZoomLoaded = libraryLoader.requireLibrary(libraryLoader.WHEEL_ZOOM);
+        if (!isSameNote) {
+            this.$display.empty();
+        }
 
         this.$errorContainer.hide();
 
@@ -93,21 +105,47 @@ export default class MermaidWidget extends NoteContextAwareWidget {
             }
 
             this.$display.html(svg);
-
-            await wheelZoomLoaded;
-
             this.$display.attr("id", `mermaid-render-${idCounter}`);
 
-            WZoom.create(`#mermaid-render-${idCounter}`, {
-                maxScale: 50,
-                speed: 1.3,
-                zoomOnClick: false
-            });
+            // Fit the image to bounds.
+            const $svg = this.$display.find("svg");
+            $svg.attr("width", "100%").attr("height", "100%");
+
+            // Enable pan to zoom.
+            this.#setupPanZoom($svg[0], isSameNote);
         } catch (e: any) {
             console.warn(e);
+            this.#cleanUpZoom();
+            this.$display.empty();
             this.$errorMessage.text(e.message);
             this.$errorContainer.show();
         }
+
+        this.#setupResizer();
+        this.lastNote = note;
+    }
+
+    cleanup() {
+        super.cleanup();
+        if (this.zoomHandler) {
+            $(window).off("resize", this.zoomHandler);
+            this.zoomHandler = undefined;
+        }
+    }
+
+    #cleanUpZoom() {
+        if (this.zoomInstance) {
+            this.zoomInstance.destroy();
+            this.zoomInstance = undefined;
+        }
+    }
+
+    toggleInt(show: boolean | null | undefined): void {
+        super.toggleInt(show);
+
+        if (!show) {
+            this.cleanup();
+        }
     }
 
     async renderSvg() {
@@ -125,6 +163,66 @@ export default class MermaidWidget extends NoteContextAwareWidget {
         return postprocessMermaidSvg(svg);
     }
 
+    async #setupPanZoom(svgEl: SVGElement, isSameNote: boolean) {
+        // Clean up
+        let pan = null;
+        let zoom = null;
+        if (this.zoomInstance) {
+            // Store pan and zoom for same note, when the user is editing the note.
+            if (isSameNote && this.zoomInstance) {
+                pan = this.zoomInstance.getPan();
+                zoom = this.zoomInstance.getZoom();
+            }
+            this.#cleanUpZoom();
+        }
+
+        const svgPanZoom = (await import("svg-pan-zoom")).default;
+        const zoomInstance = svgPanZoom(svgEl, {
+            zoomEnabled: true,
+            controlIconsEnabled: true
+        });
+
+        if (pan && zoom) {
+            // Restore the pan and zoom.
+            zoomInstance.zoom(zoom);
+            zoomInstance.pan(pan);
+        } else {
+            // New instance, reposition properly.
+            zoomInstance.center();
+            zoomInstance.fit();
+        }
+
+        this.zoomHandler = () => {
+            zoomInstance.resize();
+            zoomInstance.fit();
+            zoomInstance.center();
+        };
+        this.zoomInstance = zoomInstance;
+        $(window).on("resize", this.zoomHandler);
+    }
+
+    #setupResizer() {
+        if (!utils.isDesktop()) {
+            return;
+        }
+
+        const selfEl = this.$widget;
+        const scrollingContainer = this.parent?.children.find((ch) => ch instanceof ScrollingContainer)?.$widget;
+
+        if (!selfEl.length || !scrollingContainer?.length) {
+            return;
+        }
+
+        if (!this.splitInstance) {
+            this.splitInstance = Split([ selfEl[0], scrollingContainer[0] ], {
+                sizes: [ 50, 50 ],
+                direction: "vertical",
+                gutterSize: DEFAULT_GUTTER_SIZE,
+                onDragEnd: () => this.zoomHandler?.()
+            });
+        }
+    }
+
     async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         if (this.noteId && loadResults.isNoteContentReloaded(this.noteId)) {
             this.dirtyAttachment = true;

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/app/widgets/view_widgets/calendar_view.spec.ts

@@ -124,7 +124,7 @@ describe("Promoted attributes", () => {
             "#calendar:displayedAttributes": "weight,mood"
         });
 
-        const event = await CalendarView.buildEvent(note, "2025-04-04");
+        const event = await CalendarView.buildEvent(note, { startDate: "2025-04-04" });
         expect(event).toHaveLength(1);
         expect(event[0]?.promotedAttributes).toMatchObject([
             [ "weight", "75" ],
@@ -142,10 +142,35 @@ describe("Promoted attributes", () => {
             "#relation:assignee": "promoted,alias=Assignee,single,text",
         });
 
-        const event = await CalendarView.buildEvent(note, "2025-04-04");
+        const event = await CalendarView.buildEvent(note, { startDate: "2025-04-04" });
         expect(event).toHaveLength(1);
         expect(event[0]?.promotedAttributes).toMatchObject([
             [ "assignee", "Target note" ]
         ])
     });
+
+    it("supports start time and end time", async () => {
+        const noteIds = buildNotes([
+            { title: "Note 1", "#startDate": "2025-05-05", "#startTime": "13:36", "#endTime": "14:56" },
+            { title: "Note 2", "#startDate": "2025-05-07", "#endDate": "2025-05-08", "#startTime": "13:36", "#endTime": "14:56" },
+        ]);
+        const events = await CalendarView.buildEvents(noteIds);
+
+        expect(events).toHaveLength(2);
+        expect(events[0]).toMatchObject({ title: "Note 1", start: "2025-05-05T13:36:00", end: "2025-05-05T14:56:00" });
+        expect(events[1]).toMatchObject({ title: "Note 2", start: "2025-05-07T13:36:00", end: "2025-05-08T14:56:00" });
+    });
+
+    it("handles start time with missing end time", async () => {
+        const noteIds = buildNotes([
+            { title: "Note 1", "#startDate": "2025-05-05", "#startTime": "13:30" },
+            { title: "Note 2", "#startDate": "2025-05-07", "#endDate": "2025-05-08", "#startTime": "13:36" },
+        ]);
+        const events = await CalendarView.buildEvents(noteIds);
+
+        expect(events).toHaveLength(2);
+        expect(events[0]).toMatchObject({ title: "Note 1", start: "2025-05-05T13:30:00" });
+        expect(events[1]).toMatchObject({ title: "Note 2", start: "2025-05-07T13:36:00", end: "2025-05-08" });
+    });
+
 });

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

@@ -1,9 +1,8 @@
-import type { Calendar, DateSelectArg, EventChangeArg, EventDropArg, EventInput, EventSourceFunc, EventSourceFuncArg, EventSourceInput, PluginDef } from "@fullcalendar/core";
+import type { Calendar, DateSelectArg, DatesSetArg, EventChangeArg, EventDropArg, EventInput, EventSourceFunc, EventSourceFuncArg, EventSourceInput, PluginDef } from "@fullcalendar/core";
 import froca from "../../services/froca.js";
 import ViewMode, { type ViewModeArgs } from "./view_mode.js";
 import type FNote from "../../entities/fnote.js";
 import server from "../../services/server.js";
-import ws from "../../services/ws.js";
 import { t } from "../../services/i18n.js";
 import options from "../../services/options.js";
 import dialogService from "../../services/dialog.js";
@@ -12,6 +11,8 @@ import type { EventData } from "../../components/app_context.js";
 import utils from "../../services/utils.js";
 import date_notes from "../../services/date_notes.js";
 import appContext from "../../components/app_context.js";
+import type { EventImpl } from "@fullcalendar/core/internal";
+import debounce, { type DebouncedFunction } from "debounce";
 
 const TPL = `
 <div class="calendar-view">
@@ -30,12 +31,20 @@ const TPL = `
 
     .calendar-container {
         height: 100%;
+        --fc-page-bg-color: var(--main-background-color);
+        --fc-border-color: var(--main-border-color);
+        --fc-neutral-bg-color: var(--launcher-pane-background-color);
+        --fc-list-event-hover-bg-color: var(--left-pane-item-hover-background);
     }
 
     .calendar-container .fc-toolbar.fc-header-toolbar {
         margin-bottom: 0.5em;
     }
 
+    .calendar-container .fc-list-sticky .fc-list-day > * {
+        z-index: 50;
+    }
+
     body.desktop:not(.zen) .calendar-container .fc-toolbar.fc-header-toolbar {
         padding-right: 5em;
     }
@@ -71,6 +80,13 @@ interface CreateChildResponse {
     };
 }
 
+const CALENDAR_VIEWS = [
+    "timeGridWeek",
+    "dayGridMonth",
+    "multiMonthYear",
+    "listMonth"
+]
+
 export default class CalendarView extends ViewMode {
 
     private $root: JQuery<HTMLElement>;
@@ -79,6 +95,8 @@ export default class CalendarView extends ViewMode {
     private parentNote: FNote;
     private calendar?: Calendar;
     private isCalendarRoot: boolean;
+    private lastView?: string;
+    private debouncedSaveView?: DebouncedFunction<() => void>;
 
     constructor(args: ViewModeArgs) {
         super(args);
@@ -102,6 +120,9 @@ export default class CalendarView extends ViewMode {
         const { Calendar } = await import("@fullcalendar/core");
         const plugins: PluginDef[] = [];
         plugins.push((await import("@fullcalendar/daygrid")).default);
+        plugins.push((await import("@fullcalendar/timegrid")).default);
+        plugins.push((await import("@fullcalendar/list")).default);
+        plugins.push((await import("@fullcalendar/multimonth")).default);
         if (isEditable || this.isCalendarRoot) {
             plugins.push((await import("@fullcalendar/interaction")).default);
         }
@@ -113,9 +134,16 @@ export default class CalendarView extends ViewMode {
             eventBuilder = async (e: EventSourceFuncArg) => await this.#buildEventsForCalendar(e);
         }
 
+        // Parse user's initial view, if valid.
+        let initialView = "dayGridMonth";
+        const userInitialView = this.parentNote.getLabelValue("calendar:view");
+        if (userInitialView && CALENDAR_VIEWS.includes(userInitialView)) {
+            initialView = userInitialView;
+        }
+
         const calendar = new Calendar(this.$calendarContainer[0], {
             plugins,
-            initialView: "dayGridMonth",
+            initialView,
             events: eventBuilder,
             editable: isEditable,
             selectable: isEditable,
@@ -126,6 +154,7 @@ export default class CalendarView extends ViewMode {
             weekNumbers: this.parentNote.hasAttribute("label", "calendar:weekNumbers"),
             locale: await CalendarView.#getLocale(),
             height: "100%",
+            nowIndicator: true,
             eventContent: (e) => {
                 let html = "";
                 const { iconClass, promotedAttributes } = e.event.extendedProps;
@@ -157,6 +186,11 @@ export default class CalendarView extends ViewMode {
                 if (note) {
                     appContext.tabManager.getActiveContext()?.setNote(note.noteId);
                 }
+            },
+            datesSet: (e) => this.#onDatesSet(e),
+            headerToolbar: {
+                start: "title",
+                end: `${CALENDAR_VIEWS.join(",")} today prev,next`
             }
         });
         calendar.render();
@@ -188,34 +222,91 @@ export default class CalendarView extends ViewMode {
         }
     }
 
+    #onDatesSet(e: DatesSetArg) {
+        const currentView = e.view.type;
+        if (currentView === this.lastView) {
+            return;
+        }
+
+        if (!this.debouncedSaveView) {
+            this.debouncedSaveView = debounce(() => {
+                if (this.lastView) {
+                    attributes.setLabel(this.parentNote.noteId, "calendar:view", this.lastView);
+                }
+            }, 1_000);
+        }
+
+        this.debouncedSaveView();
+        this.lastView = currentView;
+    }
+
     async #onCalendarSelection(e: DateSelectArg) {
-        const startDate = CalendarView.#formatDateToLocalISO(e.start);
+        // Handle start and end date
+        const { startDate, endDate } = this.#parseStartEndDateFromEvent(e);
         if (!startDate) {
             return;
         }
 
-        const endDate = CalendarView.#formatDateToLocalISO(CalendarView.#offsetDate(e.end, -1));
+        // Handle start and end time.
+        const { startTime, endTime } = this.#parseStartEndTimeFromEvent(e);
 
+        // Ask for the title
         const title = await dialogService.prompt({ message: t("relation_map.enter_title_of_new_note"), defaultValue: t("relation_map.default_new_note_title") });
         if (!title?.trim()) {
             return;
         }
 
+        // Create the note.
         const { note } = await server.post<CreateChildResponse>(`notes/${this.parentNote.noteId}/children?target=into`, {
             title,
             content: "",
             type: "text"
         });
+
+        // Set the attributes.
         attributes.setLabel(note.noteId, "startDate", startDate);
         if (endDate) {
             attributes.setLabel(note.noteId, "endDate", endDate);
         }
+        if (startTime) {
+            attributes.setLabel(note.noteId, "startTime", startTime);
+        }
+        if (endTime) {
+            attributes.setLabel(note.noteId, "endTime", endTime);
+        }
+    }
+
+    #parseStartEndDateFromEvent(e: DateSelectArg | EventImpl) {
+        const startDate = CalendarView.#formatDateToLocalISO(e.start);
+        if (!startDate) {
+            return { startDate: null, endDate: null };
+        }
+        let endDate;
+        if (e.allDay) {
+            endDate = CalendarView.#formatDateToLocalISO(CalendarView.#offsetDate(e.end, -1));
+        } else {
+            endDate = CalendarView.#formatDateToLocalISO(e.end);
+        }
+        return { startDate, endDate };
+    }
+
+    #parseStartEndTimeFromEvent(e: DateSelectArg | EventImpl) {
+        let startTime = null;
+        let endTime = null;
+        if (!e.allDay) {
+            startTime = CalendarView.#formatTimeToLocalISO(e.start);
+            endTime = CalendarView.#formatTimeToLocalISO(e.end);
+        }
+
+        return { startTime, endTime };
     }
 
     async #onEventMoved(e: EventChangeArg) {
-        const startDate = CalendarView.#formatDateToLocalISO(e.event.start);
-        // Fullcalendar end date is exclusive, not inclusive but we store it the other way around.
-        let endDate = CalendarView.#formatDateToLocalISO(CalendarView.#offsetDate(e.event.end, -1));
+        // Handle start and end date
+        let { startDate, endDate } = this.#parseStartEndDateFromEvent(e.event);
+        if (!startDate) {
+            return;
+        }
         const noteId = e.event.extendedProps.noteId;
 
         // Don't store the end date if it's empty.
@@ -231,11 +322,21 @@ export default class CalendarView extends ViewMode {
 
         // Since they can be customized via calendar:startDate=$foo and calendar:endDate=$bar we need to determine the
         // attributes to be effectively updated
-        const startAttribute = note.getAttributes("label").filter(attr => attr.name == "calendar:startDate").shift()?.value||"startDate"
-        const endAttribute = note.getAttributes("label").filter(attr => attr.name == "calendar:endDate").shift()?.value||"endDate"
+        const startAttribute = note.getAttributes("label").filter(attr => attr.name == "calendar:startDate").shift()?.value||"startDate";
+        const endAttribute = note.getAttributes("label").filter(attr => attr.name == "calendar:endDate").shift()?.value||"endDate";
 
         attributes.setAttribute(note, "label", startAttribute, startDate);
         attributes.setAttribute(note, "label", endAttribute, endDate);
+
+        // Update start time and end time if needed.
+        if (!e.event.allDay) {
+            const startAttribute = note.getAttributes("label").filter(attr => attr.name == "calendar:startTime").shift()?.value||"startTime";
+            const endAttribute = note.getAttributes("label").filter(attr => attr.name == "calendar:endTime").shift()?.value||"endTime";
+
+            const { startTime, endTime } = this.#parseStartEndTimeFromEvent(e.event);
+            attributes.setAttribute(note, "label", startAttribute, startTime);
+            attributes.setAttribute(note, "label", endAttribute, endTime);
+        }
     }
 
     onEntitiesReloaded({ loadResults }: EventData<"entitiesReloaded">) {
@@ -245,7 +346,7 @@ export default class CalendarView extends ViewMode {
         }
 
         // Refresh calendar on attribute change.
-        if (loadResults.getAttributeRows().some((attribute) => attribute.noteId === this.parentNote.noteId && attribute.name?.startsWith("calendar:"))) {
+        if (loadResults.getAttributeRows().some((attribute) => attribute.noteId === this.parentNote.noteId && attribute.name?.startsWith("calendar:") && attribute.name !== "calendar:view")) {
             return true;
         }
 
@@ -277,7 +378,7 @@ export default class CalendarView extends ViewMode {
                 continue;
             }
 
-            events.push(await CalendarView.buildEvent(dateNote, startDate));
+            events.push(await CalendarView.buildEvent(dateNote, { startDate }));
 
             if (dateNote.hasChildren()) {
                 const childNoteIds = dateNote.getChildNoteIds();
@@ -292,7 +393,7 @@ export default class CalendarView extends ViewMode {
         const childNotes = await froca.getNotes(childNoteIds);
         for (const childNote of childNotes) {
             const startDate = childNoteToDateMapping[childNote.noteId];
-            const event = await CalendarView.buildEvent(childNote, startDate);
+            const event = await CalendarView.buildEvent(childNote, { startDate });
             events.push(event);
         }
 
@@ -318,7 +419,9 @@ export default class CalendarView extends ViewMode {
             }
 
             const endDate = CalendarView.#getCustomisableLabel(note, "endDate", "calendar:endDate");
-            events.push(await CalendarView.buildEvent(note, startDate, endDate));
+            const startTime = CalendarView.#getCustomisableLabel(note, "startTime", "calendar:startTime");
+            const endTime = CalendarView.#getCustomisableLabel(note, "endTime", "calendar:endTime");
+            events.push(await CalendarView.buildEvent(note, { startDate, endDate, startTime, endTime }));
         }
 
         return events.flat();
@@ -346,7 +449,12 @@ export default class CalendarView extends ViewMode {
         return note.getLabelValue(defaultLabelName);
     }
 
-    static async buildEvent(note: FNote, startDate: string, endDate?: string | null) {
+    static async buildEvent(note: FNote, { startDate, endDate, startTime, endTime }: {
+            startDate: string,
+            endDate?: string | null,
+            startTime?: string | null,
+            endTime?: string | null
+        }) {
         const customTitleAttributeName = note.getLabelValue("calendar:title");
         const titles = await CalendarView.#parseCustomTitle(customTitleAttributeName, note);
         const color = note.getLabelValue("calendar:color") ?? note.getLabelValue("color");
@@ -359,6 +467,19 @@ export default class CalendarView extends ViewMode {
         }
 
         for (const title of titles) {
+            if (startTime && endTime && !endDate) {
+                endDate = startDate;
+            }
+
+            startDate = (startTime ? `${startDate}T${startTime}:00` : startDate);
+            if (!startTime) {
+                const endDateOffset = CalendarView.#offsetDate(endDate ?? startDate, 1);
+                if (endDateOffset) {
+                    endDate = CalendarView.#formatDateToLocalISO(endDateOffset);
+                }
+            }
+
+            endDate = (endTime ? `${endDate}T${endTime}:00` : endDate);
             const eventData: EventInput = {
                 title: title,
                 start: startDate,
@@ -368,10 +489,8 @@ export default class CalendarView extends ViewMode {
                 iconClass: note.getLabelValue("iconClass"),
                 promotedAttributes: displayedAttributesData
             };
-
-            const endDateOffset = CalendarView.#offsetDate(endDate ?? startDate, 1);
-            if (endDateOffset) {
-                eventData.end = CalendarView.#formatDateToLocalISO(endDateOffset);
+            if (endDate) {
+                eventData.end = endDate;
             }
             events.push(eventData);
         }
@@ -404,7 +523,6 @@ export default class CalendarView extends ViewMode {
 
                     for (const targetNote of notesFromRelation) {
                         const targetCustomTitleValue = targetNote.getAttributeValue("label", "calendar:title");
-                        console.log("Parse custom title for ", targetNote.noteId, targetNote.getAttributes(), targetNote.getOwnedAttributes());
                         const targetTitles = await CalendarView.#parseCustomTitle(targetCustomTitleValue, targetNote, false);
                         titles.push(targetTitles.flat());
                     }
@@ -427,6 +545,18 @@ export default class CalendarView extends ViewMode {
         return localDate.toISOString().split("T")[0];
     }
 
+    static #formatTimeToLocalISO(date: Date | null | undefined) {
+        if (!date) {
+            return undefined;
+        }
+
+        const offset = date.getTimezoneOffset();
+        const localDate = new Date(date.getTime() - offset * 60 * 1000);
+        return localDate.toISOString()
+            .split("T")[1]
+            .substring(0, 5);
+    }
+
     static #offsetDate(date: Date | string | null | undefined, offset: number) {
         if (!date) {
             return undefined;

src/public/stylesheets/style.css

@@ -1912,7 +1912,6 @@ footer.file-footer button {
     padding: 1em;
 }
     margin: 1.25em 0;
-    margin-right: 14px;
     position: relative;
     padding-left: 2.5em;
     overflow: hidden;

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" ]);
     }