style(lexical): improve toolbar

Updated by "Cleanup translation files" add-on in Weblate.

Translation: Trilium Notes/Client
Translate-URL: https://hosted.weblate.org/projects/trilium/client/

.github/actions/build-server/action.yml

@@ -8,7 +8,7 @@ inputs:
 runs:
   using: composite
   steps:
-  - uses: pnpm/action-setup@v4
+  - uses: pnpm/action-setup@v5
   - name: Set up node & dependencies
     uses: actions/setup-node@v6
     with:

.github/actions/report-size/action.yml

@@ -69,7 +69,7 @@ runs:
 
     # Post github action comment
     - name: Post comment
-      uses: marocchino/sticky-pull-request-comment@v2
+      uses: marocchino/sticky-pull-request-comment@v3
       if: ${{ steps.bundleSize.outputs.hasDifferences == 'true' }} # post only in case of changes
       with:
         number: ${{ github.event.pull_request.number }}

.github/workflows/deploy-docs.yml

@@ -45,7 +45,7 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v5
 
       - name: Setup Node.js
         uses: actions/setup-node@v6

.github/workflows/dev.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@v6
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -40,11 +40,32 @@ jobs:
       - name: Run the client-side tests
         run: pnpm run --filter=client test
 
+      - name: Upload client test report
+        uses: actions/upload-artifact@v7
+        if: always()
+        with:
+          name: client-test-report
+          path: apps/client/test-output/vitest/html/
+          retention-days: 30
+
       - name: Run the server-side tests
         run: pnpm run --filter=server test
 
+      - name: Upload server test report
+        uses: actions/upload-artifact@v7
+        if: always()
+        with:
+          name: server-test-report
+          path: apps/server/test-output/vitest/html/
+          retention-days: 30
+
+      - name: Run CKEditor e2e tests
+        run: |
+          pnpm run --filter=ckeditor5-mermaid test
+          pnpm run --filter=ckeditor5-math test
+
       - name: Run the rest of the tests
-        run: pnpm run --filter=\!client --filter=\!server test"
+        run: pnpm run --filter=\!client --filter=\!server --filter=\!ckeditor5-mermaid --filter=\!ckeditor5-math test
 
   build_docker:
     name: Build Docker image
@@ -53,7 +74,7 @@ jobs:
       - test_dev
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
       - name: Update build info
@@ -68,8 +89,8 @@ jobs:
           key: ${{ secrets.RELATIVE_CI_CLIENT_KEY }}
       - name: Trigger server build
         run: pnpm run server:build
-      - uses: docker/setup-buildx-action@v3
-      - uses: docker/build-push-action@v6
+      - uses: docker/setup-buildx-action@v4
+      - uses: docker/build-push-action@v7
         with:
           context: apps/server
           cache-from: type=gha
@@ -88,7 +109,7 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@v6
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
@@ -103,10 +124,10 @@ jobs:
         run: echo "TEST_TAG=${TEST_TAG,,}" >> $GITHUB_ENV
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
 
       - name: Build and export to Docker
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v7
         with:
           context: apps/server
           file: apps/server/${{ matrix.dockerfile }}

.github/workflows/i18n.yml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:

.github/workflows/main-docker.yml

@@ -40,9 +40,9 @@ jobs:
         run: echo "TEST_TAG=${TEST_TAG,,}" >> $GITHUB_ENV
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -59,7 +59,7 @@ jobs:
         run: pnpm run server:build
 
       - name: Build and export to Docker
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v7
         with:
           context: apps/server
           file: apps/server/${{ matrix.dockerfile }}
@@ -142,7 +142,7 @@ jobs:
 
       - name: Checkout repository
         uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -164,7 +164,7 @@ jobs:
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v6
         with:
           images: ${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |
@@ -175,13 +175,13 @@ jobs:
             latest=false
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+        uses: docker/setup-qemu-action@v4
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
 
       - name: Login to GHCR
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ${{ env.GHCR_REGISTRY }}
           username: ${{ github.actor }}
@@ -189,7 +189,7 @@ jobs:
 
       - name: Build and push by digest
         id: build
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v7
         with:
           context: apps/server
           file: apps/server/${{ matrix.dockerfile }}
@@ -229,17 +229,17 @@ jobs:
         run: echo "TEST_TAG=${TEST_TAG,,}" >> $GITHUB_ENV
 
       - name: Set up crane
-        uses: imjasonh/setup-crane@v0.4
+        uses: imjasonh/setup-crane@v0.5
 
       - name: Login to GHCR
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ${{ env.GHCR_REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Login to DockerHub
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ${{ env.DOCKERHUB_REGISTRY }}
           username: ${{ secrets.DOCKERHUB_USERNAME }}
@@ -247,7 +247,7 @@ jobs:
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v6
         with:
           images: ${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |

.github/workflows/nightly.yml

@@ -61,7 +61,7 @@ jobs:
     runs-on: ${{ matrix.os.image }}
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -91,7 +91,7 @@ jobs:
           GPG_SIGNING_KEY: ${{ secrets.GPG_SIGN_KEY }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.5.0
+        uses: softprops/action-gh-release@v2.6.1
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false
@@ -132,7 +132,7 @@ jobs:
           arch: ${{ matrix.arch }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.5.0
+        uses: softprops/action-gh-release@v2.6.1
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false

.github/workflows/playwright.yml

@@ -38,7 +38,7 @@ jobs:
           filter: tree:0
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
       - uses: actions/setup-node@v6
         with:
           node-version: 24

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
     steps:
       - uses: actions/checkout@v6
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -66,7 +66,7 @@ jobs:
     runs-on: ${{ matrix.os.image }}
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -150,7 +150,7 @@ jobs:
           path: upload
 
       - name: Publish stable release
-        uses: softprops/action-gh-release@v2.5.0
+        uses: softprops/action-gh-release@v2.6.1
         with:
           draft: false
           body_path: docs/Release Notes/Release Notes/${{ github.ref_name }}.md

.github/workflows/web-clipper.yml

@@ -32,7 +32,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -58,7 +58,7 @@ jobs:
           compression-level: 0
 
       - name: Release web clipper extension
-        uses: softprops/action-gh-release@v2.5.0
+        uses: softprops/action-gh-release@v2.6.1
         if: ${{ startsWith(github.ref, 'refs/tags/web-clipper-v') }}
         with:
           draft: false

.github/workflows/website.yml

@@ -26,7 +26,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:

.gitignore

@@ -46,7 +46,6 @@ upload
 
 /.direnv
 /result
-.svelte-kit
 
 # docs
 site/

apps/build-docs/package.json

@@ -14,9 +14,9 @@
   "keywords": [],
   "author": "Elian Doran <contact@eliandoran.me>",
   "license": "AGPL-3.0-only",
-  "packageManager": "pnpm@10.30.3",
+  "packageManager": "pnpm@10.32.1",
   "devDependencies": {
-    "@redocly/cli": "2.20.2",
+    "@redocly/cli": "2.24.0",
     "archiver": "7.0.1",
     "fs-extra": "11.3.4",
     "js-yaml": "4.1.1",

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/client",
-  "version": "0.102.0",
+  "version": "0.102.1",
   "description": "JQuery-based client for TriliumNext, used for both web and desktop (via Electron)",
   "private": true,
   "license": "AGPL-3.0-only",
@@ -24,20 +24,27 @@
     "@fullcalendar/multimonth": "6.1.20",
     "@fullcalendar/rrule": "6.1.20",
     "@fullcalendar/timegrid": "6.1.20",
+    "@lexical/react": "0.42.0",
     "@maplibre/maplibre-gl-leaflet": "0.1.3",
-    "@mermaid-js/layout-elk": "0.2.0",
+    "@mermaid-js/layout-elk": "0.2.1",
     "@mind-elixir/node-menu": "5.0.1",
     "@popperjs/core": "2.11.8",
-    "@preact/signals": "2.8.1",
+    "@preact/signals": "2.8.2",
     "@triliumnext/ckeditor5": "workspace:*",
     "@triliumnext/codemirror": "workspace:*",
     "@triliumnext/commons": "workspace:*",
     "@triliumnext/highlightjs": "workspace:*",
     "@triliumnext/share-theme": "workspace:*",
     "@triliumnext/split.js": "workspace:*",
-    "@univerjs/preset-sheets-core": "0.16.1",
-    "@univerjs/presets": "0.16.1",
-    "@zumer/snapdom": "2.0.2",
+    "@univerjs/preset-sheets-conditional-formatting": "0.18.0",
+    "@univerjs/preset-sheets-core": "0.18.0",
+    "@univerjs/preset-sheets-data-validation": "0.18.0",
+    "@univerjs/preset-sheets-filter": "0.18.0",
+    "@univerjs/preset-sheets-find-replace": "0.18.0",
+    "@univerjs/preset-sheets-note": "0.18.0",
+    "@univerjs/preset-sheets-sort": "0.18.0",
+    "@univerjs/presets": "0.18.0",
+    "@zumer/snapdom": "2.5.0",
     "autocomplete.js": "0.38.1",
     "bootstrap": "5.3.8",
     "boxicons": "2.1.4",
@@ -45,30 +52,30 @@
     "color": "5.0.3",
     "debounce": "3.0.0",
     "draggabilly": "3.0.0",
-    "force-graph": "1.51.1",
+    "force-graph": "1.51.2",
     "globals": "17.4.0",
-    "i18next": "25.8.13",
+    "i18next": "25.8.18",
     "i18next-http-backend": "3.0.2",
     "jquery": "4.0.0",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
-    "katex": "0.16.33",
-    "knockout": "3.5.1",
+    "katex": "0.16.39",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
+    "lexical": "0.42.0",
     "mark.js": "8.11.1",
-    "marked": "17.0.3",
-    "mermaid": "11.12.3",
-    "mind-elixir": "5.9.1",
+    "marked": "17.0.4",
+    "mermaid": "11.13.0",
+    "mind-elixir": "5.9.3",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
-    "preact": "10.28.4",
-    "react-i18next": "16.5.4",
+    "preact": "10.29.0",
+    "react-i18next": "16.5.8",
     "react-window": "2.2.7",
-    "reveal.js": "5.2.1",
+    "reveal.js": "6.0.0",
     "rrule": "2.8.1",
     "svg-pan-zoom": "3.6.2",
-    "tabulator-tables": "6.3.1",
+    "tabulator-tables": "6.4.0",
     "vanilla-js-wheel-zoom": "9.0.4"
   },
   "devDependencies": {
@@ -79,12 +86,11 @@
     "@types/leaflet": "1.9.21",
     "@types/leaflet-gpx": "1.3.8",
     "@types/mark.js": "8.11.12",
-    "@types/reveal.js": "5.2.2",
     "@types/tabulator-tables": "6.3.1",
     "copy-webpack-plugin": "14.0.0",
-    "happy-dom": "20.8.3",
-    "lightningcss": "1.31.1",
+    "happy-dom": "20.8.4",
+    "lightningcss": "1.32.0",
     "script-loader": "0.7.2",
-    "vite-plugin-static-copy": "3.2.0"
+    "vite-plugin-static-copy": "3.3.0"
   }
-}
+}

apps/client/src/components/note_context.ts

@@ -381,6 +381,10 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
 
         // Collections must always display a note list, even if no children.
         if (note.type === "book") {
+            if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
+                return false;
+            }
+
             const viewType = note.getLabelValue("viewType") ?? "grid";
             if (!["list", "grid"].includes(viewType)) {
                 return true;

apps/client/src/layouts/desktop_layout.tsx

@@ -3,29 +3,54 @@ import type { WidgetsByParent } from "../services/bundle.js";
 import { isExperimentalFeatureEnabled } from "../services/experimental_features.js";
 import options from "../services/options.js";
 import utils from "../services/utils.js";
+import ApiLog from "../widgets/api_log.jsx";
+import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
+import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
 import GlobalMenu from "../widgets/buttons/global_menu.jsx";
 import LeftPaneToggle from "../widgets/buttons/left_pane_toggle.js";
+import MovePaneButton from "../widgets/buttons/move_pane_button.js";
 import RightPaneToggle from "../widgets/buttons/right_pane_toggle.jsx";
 import CloseZenModeButton from "../widgets/close_zen_button.jsx";
+import NoteList from "../widgets/collections/NoteList.jsx";
+import ContentHeader from "../widgets/containers/content_header.js";
 import FlexContainer from "../widgets/containers/flex_container.js";
 import LeftPaneContainer from "../widgets/containers/left_pane_container.js";
 import RightPaneContainer from "../widgets/containers/right_pane_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
+import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 import SplitNoteContainer from "../widgets/containers/split_note_container.js";
 import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js";
 import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
+import FindWidget from "../widgets/find.js";
+import FloatingButtons from "../widgets/FloatingButtons.jsx";
+import { DESKTOP_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
 import HighlightsListWidget from "../widgets/highlights_list.js";
 import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
+import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
+import InlineTitle from "../widgets/layout/InlineTitle.jsx";
+import NoteBadges from "../widgets/layout/NoteBadges.jsx";
+import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
 import StatusBar from "../widgets/layout/StatusBar.jsx";
+import NoteIconWidget from "../widgets/note_icon.jsx";
+import NoteTitleWidget from "../widgets/note_title.jsx";
 import NoteTreeWidget from "../widgets/note_tree.js";
-import NoteWrapperWidget from "../widgets/NoteWrapper.js";
+import NoteWrapperWidget from "../widgets/note_wrapper.js";
+import NoteDetail from "../widgets/NoteDetail.jsx";
+import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
 import QuickSearchWidget from "../widgets/quick_search.js";
+import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
 import { FixedFormattingToolbar } from "../widgets/ribbon/FormattingToolbar.jsx";
+import NoteActions from "../widgets/ribbon/NoteActions.jsx";
+import Ribbon from "../widgets/ribbon/Ribbon.jsx";
+import ScrollPadding from "../widgets/scroll_padding.js";
+import SearchResult from "../widgets/search_result.jsx";
+import SharedInfo from "../widgets/shared_info.jsx";
 import RightPanelContainer from "../widgets/sidebar/RightPanelContainer.jsx";
 import TabRowWidget from "../widgets/tab_row.js";
 import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx";
 import TitleBarButtons from "../widgets/title_bar_buttons.jsx";
 import TocWidget from "../widgets/toc.js";
+import WatchedFileUpdateStatusWidget from "../widgets/watched_file_update_status.js";
 import { applyModals } from "./layout_commons.js";
 
 export default class DesktopLayout {
@@ -108,7 +133,44 @@ export default class DesktopLayout {
                                             .filling()
                                             .collapsible()
                                             .id("center-pane")
-                                            .child(new SplitNoteContainer(() => <NoteWrapperWidget />))
+                                            .child(
+                                                new SplitNoteContainer(() =>
+                                                    new NoteWrapperWidget()
+                                                        .child(new FlexContainer("row")
+                                                            .class("title-row note-split-title")
+                                                            .cssBlock(".title-row > * { margin: 5px; }")
+                                                            .child(<NoteIconWidget />)
+                                                            .child(<NoteTitleWidget />)
+                                                            .optChild(isNewLayout, <NoteBadges />)
+                                                            .child(<SpacerWidget baseSize={0} growthFactor={1} />)
+                                                            .optChild(!isNewLayout, <MovePaneButton direction="left" />)
+                                                            .optChild(!isNewLayout, <MovePaneButton direction="right" />)
+                                                            .optChild(!isNewLayout, <ClosePaneButton />)
+                                                            .optChild(!isNewLayout, <CreatePaneButton />)
+                                                            .optChild(isNewLayout, <NoteActions />))
+                                                        .optChild(!isNewLayout, <Ribbon />)
+                                                        .child(new WatchedFileUpdateStatusWidget())
+                                                        .optChild(!isNewLayout, <FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
+                                                        .child(
+                                                            new ScrollingContainer()
+                                                                .filling()
+                                                                .optChild(isNewLayout, <InlineTitle />)
+                                                                .optChild(isNewLayout, <NoteTitleActions />)
+                                                                .optChild(!isNewLayout, new ContentHeader()
+                                                                    .child(<ReadOnlyNoteInfoBar />)
+                                                                    .child(<SharedInfo />)
+                                                                )
+                                                                .optChild(!isNewLayout, <PromotedAttributes />)
+                                                                .child(<NoteDetail />)
+                                                                .child(<NoteList media="screen" />)
+                                                                .child(<SearchResult />)
+                                                                .child(<ScrollPadding />)
+                                                        )
+                                                        .child(<ApiLog />)
+                                                        .child(new FindWidget())
+                                                        .child(...this.customWidgets.get("note-detail-pane"))
+                                                )
+                                            )
                                             .child(...this.customWidgets.get("center-pane"))
 
                                     )

apps/client/src/layouts/mobile_layout.tsx

@@ -3,15 +3,29 @@ import "./mobile_layout.css";
 import type AppContext from "../components/app_context.js";
 import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
 import CloseZenModeButton from "../widgets/close_zen_button.js";
+import NoteList from "../widgets/collections/NoteList.jsx";
 import FlexContainer from "../widgets/containers/flex_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
+import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 import SplitNoteContainer from "../widgets/containers/split_note_container.js";
+import FindWidget from "../widgets/find.js";
 import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
+import InlineTitle from "../widgets/layout/InlineTitle.jsx";
+import NoteBadges from "../widgets/layout/NoteBadges.jsx";
+import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
+import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
 import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
+import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
+import NoteIconWidget from "../widgets/note_icon.jsx";
+import NoteTitleWidget from "../widgets/note_title.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
-import NoteWrapperWidget from "../widgets/NoteWrapper";
+import NoteWrapperWidget from "../widgets/note_wrapper.js";
+import NoteDetail from "../widgets/NoteDetail.jsx";
 import QuickSearchWidget from "../widgets/quick_search.js";
+import ScrollPadding from "../widgets/scroll_padding";
+import SearchResult from "../widgets/search_result.jsx";
+import MobileEditorToolbar from "../widgets/type_widgets/text/mobile_editor_toolbar.jsx";
 import { applyModals } from "./layout_commons.js";
 
 export default class MobileLayout {
@@ -38,7 +52,35 @@ export default class MobileLayout {
                         new ScreenContainer("detail", "row")
                             .id("detail-container")
                             .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-9")
-                            .child(new SplitNoteContainer(() => <NoteWrapperWidget />))
+                            .child(
+                                new SplitNoteContainer(() =>
+                                    new NoteWrapperWidget()
+                                        .child(
+                                            new FlexContainer("row")
+                                                .class("title-row note-split-title")
+                                                .contentSized()
+                                                .css("align-items", "center")
+                                                .child(<ToggleSidebarButton />)
+                                                .child(<NoteIconWidget />)
+                                                .child(<NoteTitleWidget />)
+                                                .child(<NoteBadges />)
+                                                .child(<MobileDetailMenu />)
+                                        )
+                                        .child(
+                                            new ScrollingContainer()
+                                                .filling()
+                                                .contentSized()
+                                                .child(<InlineTitle />)
+                                                .child(<NoteTitleActions />)
+                                                .child(<NoteDetail />)
+                                                .child(<NoteList media="screen" />)
+                                                .child(<SearchResult />)
+                                                .child(<ScrollPadding />)
+                                        )
+                                        .child(<MobileEditorToolbar />)
+                                        .child(new FindWidget())
+                                )
+                            )
                     )
             )
             .child(

apps/client/src/menus/context_menu.ts

@@ -39,6 +39,7 @@ export interface MenuCommandItem<T> {
     title: string;
     command?: T;
     type?: string;
+    mime?: string;
     /**
      * The icon to display in the menu item.
      *

apps/client/src/menus/tree_context_menu.ts

@@ -288,7 +288,7 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
         return items.filter((row) => row !== null) as MenuItem<TreeCommandNames>[];
     }
 
-    async selectMenuItemHandler({ command, type, templateNoteId }: MenuCommandItem<TreeCommandNames>) {
+    async selectMenuItemHandler({ command, type, mime, templateNoteId }: MenuCommandItem<TreeCommandNames>) {
         const notePath = treeService.getNotePath(this.node);
 
         if (utils.isMobile()) {
@@ -305,6 +305,7 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
                 target: "after",
                 targetBranchId: this.node.data.branchId,
                 type,
+                mime,
                 isProtected,
                 templateNoteId
             });
@@ -313,6 +314,7 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
 
             noteCreateService.createNote(parentNotePath, {
                 type,
+                mime,
                 isProtected: this.node.data.isProtected,
                 templateNoteId
             });

apps/client/src/services/content_renderer.ts

@@ -54,7 +54,7 @@ export async function getRenderedContent(this: {} | { ctx: string }, entity: FNo
         await renderText(entity, $renderedContent, options);
     } else if (type === "code") {
         await renderCode(entity, $renderedContent);
-    } else if (["image", "canvas", "mindMap"].includes(type)) {
+    } else if (["image", "canvas", "mindMap", "spreadsheet"].includes(type)) {
         renderImage(entity, $renderedContent, options);
     } else if (!options.tooltip && ["file", "pdf", "audio", "video"].includes(type)) {
         await renderFile(entity, type, $renderedContent);

apps/client/src/services/froca_updater.ts

@@ -110,7 +110,12 @@ function processNoteChange(loadResults: LoadResults, ec: EntityChange) {
                 }
             }
 
-            if (ec.componentId) {
+            // Only register as a content change if the protection status didn't change.
+            // When isProtected changes, the blobId change is a side effect of re-encryption,
+            // not a content edit. Registering it as content would cause the tree's content-only
+            // filter to incorrectly skip the note update (since both changes share the same
+            // componentId).
+            if (ec.componentId && note.isProtected === (ec.entity as FNoteRow).isProtected) {
                 loadResults.addNoteContent(note.noteId, ec.componentId);
             }
         }

apps/client/src/services/note_create.ts

@@ -1,15 +1,17 @@
+import type { CKTextEditor } from "@triliumnext/ckeditor5";
+import { AttributeRow } from "@triliumnext/commons";
+
 import appContext from "../components/app_context.js";
+import type FBranch from "../entities/fbranch.js";
+import type FNote from "../entities/fnote.js";
+import type { ChooseNoteTypeResponse } from "../widgets/dialogs/note_type_chooser.js";
+import froca from "./froca.js";
+import { t } from "./i18n.js";
 import protectedSessionHolder from "./protected_session_holder.js";
 import server from "./server.js";
-import ws from "./ws.js";
-import froca from "./froca.js";
-import treeService from "./tree.js";
 import toastService from "./toast.js";
-import { t } from "./i18n.js";
-import type FNote from "../entities/fnote.js";
-import type FBranch from "../entities/fbranch.js";
-import type { ChooseNoteTypeResponse } from "../widgets/dialogs/note_type_chooser.js";
-import type { CKTextEditor } from "@triliumnext/ckeditor5";
+import treeService from "./tree.js";
+import ws from "./ws.js";
 
 export interface CreateNoteOpts {
     isProtected?: boolean;
@@ -24,6 +26,8 @@ export interface CreateNoteOpts {
     target?: string;
     targetBranchId?: string;
     textEditor?: CKTextEditor;
+    /** Attributes to be set on the note. These are set atomically on note creation, so entity changes are not sent for attributes defined here. */
+    attributes?: Omit<AttributeRow, "noteId" | "attributeId">[];
 }
 
 interface Response {
@@ -37,7 +41,7 @@ interface DuplicateResponse {
     note: FNote;
 }
 
-async function createNote(parentNotePath: string | undefined, options: CreateNoteOpts = {}) {
+async function createNote(parentNotePath: string | undefined, options: CreateNoteOpts = {}, componentId?: string) {
     options = Object.assign(
         {
             activate: true,
@@ -63,22 +67,15 @@ async function createNote(parentNotePath: string | undefined, options: CreateNot
 
     const parentNoteId = treeService.getNoteIdFromUrl(parentNotePath);
 
-    if (options.type === "mermaid" && !options.content && !options.templateNoteId) {
-        options.content = `graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;`;
-    }
-
     const { note, branch } = await server.post<Response>(`notes/${parentNoteId}/children?target=${options.target}&targetBranchId=${options.targetBranchId || ""}`, {
         title: options.title,
         content: options.content || "",
         isProtected: options.isProtected,
         type: options.type,
         mime: options.mime,
-        templateNoteId: options.templateNoteId
-    });
+        templateNoteId: options.templateNoteId,
+        attributes: options.attributes
+    }, componentId);
 
     if (options.saveSelection) {
         // we remove the selection only after it was saved to server to make sure we don't lose anything
@@ -140,9 +137,8 @@ function parseSelectedHtml(selectedHtml: string) {
         const content = selectedHtml.replace(dom[0].outerHTML, "");
 
         return [title, content];
-    } else {
-        return [null, selectedHtml];
     }
+    return [null, selectedHtml];
 }
 
 async function duplicateSubtree(noteId: string, parentNotePath: string) {

apps/client/src/services/note_types.ts

@@ -26,6 +26,7 @@ export const NOTE_TYPES: NoteTypeMapping[] = [
 
     // The default note type (always the first item)
     { type: "text", mime: "text/html", title: t("note_types.text"), icon: "bx-note" },
+    { type: "text", mime: "application/json", title: "Text (Lexical)", icon: "bx-note" },
     { type: "spreadsheet", mime: "application/json", title: t("note_types.spreadsheet"), icon: "bx-table", isBeta: true },
 
     // Text notes group
@@ -97,6 +98,7 @@ function getBlankNoteTypes(command?: TreeCommandNames): MenuItem<TreeCommandName
                 title: nt.title,
                 command,
                 type: nt.type,
+                mime: nt.mime,
                 uiIcon: `bx ${nt.icon}`,
                 badges: []
             };

apps/client/src/services/promoted_attribute_definition_parser.ts

@@ -1,4 +1,4 @@
-export type LabelType = "text" | "number" | "boolean" | "date" | "datetime" | "time" | "url" | "color";
+export type LabelType = "text" | "textarea" | "number" | "boolean" | "date" | "datetime" | "time" | "url" | "color";
 type Multiplicity = "single" | "multi";
 
 export interface DefinitionObject {
@@ -17,7 +17,7 @@ function parse(value: string) {
     for (const token of tokens) {
         if (token === "promoted") {
             defObj.isPromoted = true;
-        } else if (["text", "number", "boolean", "date", "datetime", "time", "url", "color"].includes(token)) {
+        } else if (["text", "textarea", "number", "boolean", "date", "datetime", "time", "url", "color"].includes(token)) {
             defObj.labelType = token as LabelType;
         } else if (["single", "multi"].includes(token)) {
             defObj.multiplicity = token as Multiplicity;

apps/client/src/services/server.ts

@@ -89,21 +89,33 @@ async function remove<T>(url: string, componentId?: string) {
     return await call<T>("DELETE", url, componentId);
 }
 
-async function upload(url: string, fileToUpload: File, componentId?: string) {
+async function upload(url: string, fileToUpload: File, componentId?: string, method = "PUT") {
     const formData = new FormData();
     formData.append("upload", fileToUpload);
 
-    return await $.ajax({
+    const doUpload = async () => $.ajax({
         url: window.glob.baseApiUrl + url,
         headers: await getHeaders(componentId ? {
             "trilium-component-id": componentId
         } : undefined),
         data: formData,
-        type: "PUT",
+        type: method,
         timeout: 60 * 60 * 1000,
         contentType: false, // NEEDED, DON'T REMOVE THIS
         processData: false // NEEDED, DON'T REMOVE THIS
     });
+
+    try {
+        return await doUpload();
+    } catch (e: unknown) {
+        // jQuery rejects with the jqXHR object
+        const jqXhr = e as JQuery.jqXHR;
+        if (jqXhr?.status && isCsrfError(jqXhr.status, jqXhr.responseText)) {
+            await refreshCsrfToken();
+            return await doUpload();
+        }
+        throw e;
+    }
 }
 
 let idCounter = 1;
@@ -112,12 +124,55 @@ const idToRequestMap: Record<string, RequestData> = {};
 
 let maxKnownEntityChangeId = 0;
 
+let csrfRefreshInProgress: Promise<void> | null = null;
+
+/**
+ * Re-fetches /bootstrap to obtain a fresh CSRF token. This is needed when the
+ * server session expires (e.g. mobile tab backgrounded for a long time) and the
+ * existing CSRF token is no longer valid.
+ *
+ * Coalesces concurrent calls so only one bootstrap request is in-flight at a time.
+ */
+async function refreshCsrfToken(): Promise<void> {
+    if (csrfRefreshInProgress) {
+        return csrfRefreshInProgress;
+    }
+
+    csrfRefreshInProgress = (async () => {
+        try {
+            const response = await fetch(`./bootstrap${window.location.search}`, { cache: "no-store" });
+            if (response.ok) {
+                const json = await response.json();
+                glob.csrfToken = json.csrfToken;
+            }
+        } finally {
+            csrfRefreshInProgress = null;
+        }
+    })();
+
+    return csrfRefreshInProgress;
+}
+
+function isCsrfError(status: number, responseText: string): boolean {
+    if (status !== 403) {
+        return false;
+    }
+    try {
+        const body = JSON.parse(responseText);
+        return body.message === "Invalid CSRF token";
+    } catch {
+        return false;
+    }
+}
+
 interface CallOptions {
     data?: unknown;
     silentNotFound?: boolean;
     silentInternalServerError?: boolean;
     // If `true`, the value will be returned as a string instead of a JavaScript object if JSON, XMLDocument if XML, etc.
     raw?: boolean;
+    /** Used internally to prevent infinite retry loops on CSRF refresh. */
+    csrfRetried?: boolean;
 }
 
 async function call<T>(method: string, url: string, componentId?: string, options: CallOptions = {}) {
@@ -167,7 +222,7 @@ function ajax(url: string, method: string, data: unknown, headers: Headers, opts
             type: method,
             headers,
             timeout: 60000,
-            success: (body, textStatus, jqXhr) => {
+            success: (body, _textStatus, jqXhr) => {
                 const respHeaders: Headers = {};
 
                 jqXhr
@@ -192,7 +247,25 @@ function ajax(url: string, method: string, data: unknown, headers: Headers, opts
                     // don't report requests that are rejected by the browser, usually when the user is refreshing or going to a different page.
                     rej("rejected by browser");
                     return;
-                } else if (opts.silentNotFound && jqXhr.status === 404) {
+                }
+
+                // If the CSRF token is stale (e.g. session expired while tab was backgrounded),
+                // refresh it and retry the request once.
+                if (!opts.csrfRetried && isCsrfError(jqXhr.status, jqXhr.responseText)) {
+                    try {
+                        await refreshCsrfToken();
+                        // Rebuild headers so the fresh glob.csrfToken is picked up
+                        const retryHeaders = await getHeaders({ "trilium-component-id": headers["trilium-component-id"] });
+                        const retryResult = await ajax(url, method, data, retryHeaders, { ...opts, csrfRetried: true });
+                        res(retryResult);
+                        return;
+                    } catch (retryErr) {
+                        rej(retryErr);
+                        return;
+                    }
+                }
+
+                if (opts.silentNotFound && jqXhr.status === 404) {
                     // report nothing
                 } else if (opts.silentInternalServerError && jqXhr.status === 500) {
                     // report nothing

apps/client/src/setup.ts

@@ -1,66 +1,107 @@
 import "jquery";
+
 import utils from "./services/utils.js";
-import ko from "knockout";
 
-// TriliumNextTODO: properly make use of below types
-// type SetupModelSetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";
-// type SetupModelStep = "sync-in-progress" | "setup-type" | "new-document-in-progress" | "sync-from-desktop";
+type SetupStep = "sync-in-progress" | "setup-type" | "new-document-in-progress" | "sync-from-desktop" | "sync-from-server";
+type SetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";
 
-class SetupModel {
-    syncInProgress: boolean;
-    step: ko.Observable<string>;
-    setupType: ko.Observable<string>;
-    setupNewDocument: ko.Observable<boolean>;
-    setupSyncFromDesktop: ko.Observable<boolean>;
-    setupSyncFromServer: ko.Observable<boolean>;
-    syncServerHost: ko.Observable<string | undefined>;
-    syncProxy: ko.Observable<string | undefined>;
-    password: ko.Observable<string | undefined>;
+class SetupController {
+    private step: SetupStep;
+    private setupType: SetupType = "";
+    private syncPollIntervalId: number | null = null;
+    private rootNode: HTMLElement;
+    private setupTypeForm: HTMLFormElement;
+    private syncFromServerForm: HTMLFormElement;
+    private setupTypeNextButton: HTMLButtonElement;
+    private setupTypeInputs: HTMLInputElement[];
+    private syncServerHostInput: HTMLInputElement;
+    private syncProxyInput: HTMLInputElement;
+    private passwordInput: HTMLInputElement;
+    private sections: Record<SetupStep, HTMLElement>;
 
-    constructor(syncInProgress: boolean) {
-        this.syncInProgress = syncInProgress;
-        this.step = ko.observable(syncInProgress ? "sync-in-progress" : "setup-type");
-        this.setupType = ko.observable("");
-        this.setupNewDocument = ko.observable(false);
-        this.setupSyncFromDesktop = ko.observable(false);
-        this.setupSyncFromServer = ko.observable(false);
-        this.syncServerHost = ko.observable();
-        this.syncProxy = ko.observable();
-        this.password = ko.observable();
+    constructor(rootNode: HTMLElement, syncInProgress: boolean) {
+        this.rootNode = rootNode;
+        this.step = syncInProgress ? "sync-in-progress" : "setup-type";
+        this.setupTypeForm = mustGetElement("setup-type-form", HTMLFormElement);
+        this.syncFromServerForm = mustGetElement("sync-from-server-form", HTMLFormElement);
+        this.setupTypeNextButton = mustGetElement("setup-type-next", HTMLButtonElement);
+        this.setupTypeInputs = Array.from(document.querySelectorAll<HTMLInputElement>("input[name='setup-type']"));
+        this.syncServerHostInput = mustGetElement("sync-server-host", HTMLInputElement);
+        this.syncProxyInput = mustGetElement("sync-proxy", HTMLInputElement);
+        this.passwordInput = mustGetElement("password", HTMLInputElement);
+        this.sections = {
+            "setup-type": mustGetElement("setup-type-section", HTMLElement),
+            "new-document-in-progress": mustGetElement("new-document-in-progress-section", HTMLElement),
+            "sync-from-desktop": mustGetElement("sync-from-desktop-section", HTMLElement),
+            "sync-from-server": mustGetElement("sync-from-server-section", HTMLElement),
+            "sync-in-progress": mustGetElement("sync-in-progress-section", HTMLElement)
+        };
+    }
 
-        if (this.syncInProgress) {
-            setInterval(checkOutstandingSyncs, 1000);
+    init() {
+        this.setupTypeForm.addEventListener("submit", (event) => {
+            event.preventDefault();
+            void this.selectSetupType();
+        });
+
+        this.syncFromServerForm.addEventListener("submit", (event) => {
+            event.preventDefault();
+            void this.finish();
+        });
+
+        for (const input of this.setupTypeInputs) {
+            input.addEventListener("change", () => {
+                this.setupType = input.value as SetupType;
+                this.render();
+            });
         }
+
+        for (const backButton of document.querySelectorAll<HTMLElement>("[data-action='back']")) {
+            backButton.addEventListener("click", () => {
+                this.back();
+            });
+        }
+
         const serverAddress = `${location.protocol}//${location.host}`;
         $("#current-host").html(serverAddress);
+
+        if (this.step === "sync-in-progress") {
+            this.startSyncPolling();
+        }
+
+        this.render();
+        this.rootNode.style.display = "";
     }
 
-    // this is called in setup.ejs
-    setupTypeSelected() {
-        return !!this.setupType();
-    }
+    private async selectSetupType() {
+        if (this.setupType === "new-document") {
+            this.setStep("new-document-in-progress");
 
-    selectSetupType() {
-        if (this.setupType() === "new-document") {
-            this.step("new-document-in-progress");
+            await $.post("api/setup/new-document");
+            window.location.replace("./setup");
+            return;
+        }
 
-            $.post("api/setup/new-document").then(() => {
-                window.location.replace("./setup");
-            });
-        } else {
-            this.step(this.setupType());
+        if (this.setupType) {
+            this.setStep(this.setupType);
         }
     }
 
-    back() {
-        this.step("setup-type");
-        this.setupType("");
+    private back() {
+        this.setStep("setup-type");
+        this.setupType = "";
+
+        for (const input of this.setupTypeInputs) {
+            input.checked = false;
+        }
+
+        this.render();
     }
 
-    async finish() {
-        const syncServerHost = this.syncServerHost();
-        const syncProxy = this.syncProxy();
-        const password = this.password();
+    private async finish() {
+        const syncServerHost = this.syncServerHostInput.value.trim();
+        const syncProxy = this.syncProxyInput.value.trim();
+        const password = this.passwordInput.value;
 
         if (!syncServerHost) {
             showAlert("Trilium server address can't be empty");
@@ -74,21 +115,44 @@ class SetupModel {
 
         // not using server.js because it loads too many dependencies
         const resp = await $.post("api/setup/sync-from-server", {
-            syncServerHost: syncServerHost,
-            syncProxy: syncProxy,
-            password: password
+            syncServerHost,
+            syncProxy,
+            password
         });
 
         if (resp.result === "success") {
-            this.step("sync-in-progress");
-
-            setInterval(checkOutstandingSyncs, 1000);
-
             hideAlert();
+            this.setStep("sync-in-progress");
+            this.startSyncPolling();
         } else {
             showAlert(`Sync setup failed: ${resp.error}`);
         }
     }
+
+    private setStep(step: SetupStep) {
+        this.step = step;
+        this.render();
+    }
+
+    private render() {
+        for (const [step, section] of Object.entries(this.sections) as [SetupStep, HTMLElement][]) {
+            section.style.display = step === this.step ? "" : "none";
+        }
+
+        this.setupTypeNextButton.disabled = !this.setupType;
+    }
+
+    private getSelectedSetupType(): SetupType {
+        return (this.setupTypeInputs.find((input) => input.checked)?.value ?? "") as SetupType;
+    }
+
+    private startSyncPolling() {
+        if (this.syncPollIntervalId !== null) {
+            return;
+        }
+
+        this.syncPollIntervalId = window.setInterval(checkOutstandingSyncs, 1000);
+    }
 }
 
 async function checkOutstandingSyncs() {
@@ -122,7 +186,19 @@ function getSyncInProgress() {
     return !!parseInt(el.content);
 }
 
+function mustGetElement<T extends typeof HTMLElement>(id: string, ctor: T): InstanceType<T> {
+    const element = document.getElementById(id);
+
+    if (!element || !(element instanceof ctor)) {
+        throw new Error(`Expected element #${id}`);
+    }
+
+    return element as InstanceType<T>;
+}
+
 addEventListener("DOMContentLoaded", (event) => {
-    ko.applyBindings(new SetupModel(getSyncInProgress()), document.getElementById("setup-dialog"));
-    $("#setup-dialog").show();
+    const rootNode = document.getElementById("setup-dialog");
+    if (!rootNode || !(rootNode instanceof HTMLElement)) return;
+
+    new SetupController(rootNode, getSyncInProgress()).init();
 });

apps/client/src/stylesheets/style.css

@@ -1612,11 +1612,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     }
 
     body.mobile #launcher-container {
-        justify-content: center;
-    }
-
-    body.mobile #launcher-container button {
-        margin: 0 16px;
+        justify-content: space-evenly;
     }
 
     body.mobile .modal.show {

apps/client/src/stylesheets/theme-next/base.css

@@ -675,10 +675,11 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
 div.alert {
     margin-bottom: 8px;
     background: var(--alert-bar-background) !important;
+    color: var(--main-text-color);
     border-radius: 8px;
     font-size: .85em;
 }
 
 div.alert p + p {
     margin-block: 1em 0;
-}
+}

apps/client/src/translations/ar/translation.json

@@ -803,12 +803,13 @@
     "web-view": "عرض الويب",
     "mind-map": "خريطة ذهنية",
     "geo-map": "خريطة جغرافية",
-    "task-list": "قائمة المهام"
+    "task-list": "قائمة المهام",
+    "spreadsheet": "جدول البيانات"
   },
   "shared_switch": {
     "shared": "مشترك",
     "toggle-on-title": "مشاركة الملاحظة",
-    "toggle-off-title": "الغاء مشاركة الملاحظة"
+    "toggle-off-title": "إلغاء مشاركة الملاحظة"
   },
   "template_switch": {
     "template": "قالب"
@@ -1068,7 +1069,6 @@
     "rename_note": "اعادة تسمية الملاحظة",
     "remove_relation": "حذف العلاقة",
     "default_new_note_title": "ملاحظة جديدة",
-    "open_in_new_tab": "فتح في تبويب جديد",
     "enter_new_title": "ادخل عنوان ملاحظة جديدة:",
     "note_not_found": "الملاحظة {{noteId}} غير موجودة!",
     "cannot_match_transform": "تعذر مطابقة التحويل: {{transform}}"
@@ -1286,8 +1286,10 @@
     "search-for": "بحث ل \"{{term}}\""
   },
   "protect_note": {
-    "toggle-off": "ازالة الحماية عن الملاحظة",
-    "toggle-on": "حماية الملاحظة"
+    "toggle-off": "إزالة الحماية عن الملاحظة",
+    "toggle-on": "حماية الملاحظة",
+    "toggle-on-hint": "الملاحظة غير محمة، انقر لحمايتها",
+    "toggle-off-hint": "الملاحظة محمية، انقر لإزالة الحماية منها"
   },
   "open-help-page": "فتح صفحة المساعدة",
   "empty": {

apps/client/src/translations/cn/translation.json

@@ -1047,7 +1047,6 @@
     "unprotecting-title": "解除保护状态"
   },
   "relation_map": {
-    "open_in_new_tab": "在新标签页中打开",
     "remove_note": "删除笔记",
     "edit_title": "编辑标题",
     "rename_note": "重命名笔记",
@@ -1535,7 +1534,8 @@
     "new-feature": "新建",
     "collections": "集合",
     "book": "集合",
-    "ai-chat": "AI聊天"
+    "ai-chat": "AI聊天",
+    "spreadsheet": "电子表格"
   },
   "protect_note": {
     "toggle-on": "保护笔记",

apps/client/src/translations/de/translation.json

@@ -1046,7 +1046,6 @@
     "unprotecting-title": "Ungeschützt-Status"
   },
   "relation_map": {
-    "open_in_new_tab": "In neuem Tab öffnen",
     "remove_note": "Notiz entfernen",
     "edit_title": "Titel bearbeiten",
     "rename_note": "Notiz umbenennen",
@@ -1488,20 +1487,21 @@
     "mermaid-diagram": "Mermaid Diagramm",
     "canvas": "Leinwand",
     "web-view": "Webansicht",
-    "mind-map": "Mind Map",
+    "mind-map": "Mindmap",
     "file": "Datei",
     "image": "Bild",
     "launcher": "Starter",
     "doc": "Dokument",
     "widget": "Widget",
-    "confirm-change": "Es is nicht empfehlenswert den Notiz-Typ zu ändern, wenn der Inhalt der Notiz nicht leer ist. Möchtest du dennoch fortfahren?",
+    "confirm-change": "Es ist nicht empfehlenswert den Notiz-Typ zu ändern, wenn der Inhalt der Notiz nicht leer ist. Möchtest du dennoch fortfahren?",
     "geo-map": "Geo-Karte",
     "beta-feature": "Beta",
     "book": "Sammlung",
-    "ai-chat": "KI Chat",
+    "ai-chat": "KI-Chat",
     "task-list": "Aufgabenliste",
     "new-feature": "Neu",
-    "collections": "Sammlungen"
+    "collections": "Sammlungen",
+    "spreadsheet": "Tabelle"
   },
   "protect_note": {
     "toggle-on": "Notiz schützen",
@@ -2182,5 +2182,52 @@
   },
   "setup_form": {
     "more_info": "Mehr erfahren"
+  },
+  "media": {
+    "play": "Abspielen (Arbeitsbereich)",
+    "pause": "Pausieren (Arbeitsbereich)",
+    "back-10s": "10 s zurück (Linke Pfeiltaste)",
+    "forward-30s": "30 s vorwärts",
+    "mute": "Stumm (M)",
+    "unmute": "Stummschaltung aufheben (M)",
+    "playback-speed": "Wiedergabegeschwindigkeit",
+    "loop": "Schleife",
+    "disable-loop": "Schleife deaktivieren",
+    "rotate": "Rotieren",
+    "picture-in-picture": "Bild-in-Bild",
+    "exit-picture-in-picture": "Bild-in-Bild verlassen",
+    "fullscreen": "Vollbild (F)",
+    "exit-fullscreen": "Vollbild verlassen",
+    "unsupported-format": "Medienvorschau ist für dieses Format nicht verfügbar:\n{{mime}}",
+    "zoom-to-fit": "Zoomen um auszufüllen",
+    "zoom-reset": "Zoomen um auszufüllen zurücksetzen"
+  },
+  "mermaid": {
+    "placeholder": "Geben den Inhalt des Mermaid-Diagramms ein oder verwenden eine der folgenden Beispieldiagramme.",
+    "sample_diagrams": "Beispieldiagramme:",
+    "sample_flowchart": "Flussdiagramm",
+    "sample_class": "Klasse",
+    "sample_sequence": "Abfolge",
+    "sample_entity_relationship": "Entität Beziehung",
+    "sample_state": "Zustandsübergangsdiagramm",
+    "sample_mindmap": "Mindmap",
+    "sample_architecture": "Architektur",
+    "sample_block": "Block",
+    "sample_c4": "C4",
+    "sample_gantt": "Gantt",
+    "sample_git": "GitGraph",
+    "sample_kanban": "Kanban",
+    "sample_packet": "Paket",
+    "sample_pie": "Kuchen",
+    "sample_quadrant": "Quadrant",
+    "sample_radar": "Radar",
+    "sample_requirement": "Anforderung",
+    "sample_sankey": "Sankey",
+    "sample_timeline": "Zeitstrahl",
+    "sample_treemap": "Kachel",
+    "sample_user_journey": "Benutzererfahrung",
+    "sample_xy": "XY",
+    "sample_venn": "Mengen",
+    "sample_ishikawa": "Ursache-Wirkung"
   }
 }

apps/client/src/translations/en/translation.json

@@ -343,6 +343,7 @@
     "label_type_title": "Type of the label will help Trilium to choose suitable interface to enter the label value.",
     "label_type": "Type",
     "text": "Text",
+    "textarea": "Multi-line Text",
     "number": "Number",
     "boolean": "Boolean",
     "date": "Date",
@@ -1036,6 +1037,25 @@
     "file_preview_not_available": "File preview is not available for this file format.",
     "too_big": "The preview only shows the first {{maxNumChars}} characters of the file for performance reasons. Download the file and open it externally to be able to see the entire content."
   },
+  "media": {
+    "play": "Play (Space)",
+    "pause": "Pause (Space)",
+    "back-10s": "Back 10s (Left arrow key)",
+    "forward-30s": "Forward 30s",
+    "mute": "Mute (M)",
+    "unmute": "Unmute (M)",
+    "playback-speed": "Playback speed",
+    "loop": "Loop",
+    "disable-loop": "Disable loop",
+    "rotate": "Rotate",
+    "picture-in-picture": "Picture-in-picture",
+    "exit-picture-in-picture": "Exit picture-in-picture",
+    "fullscreen": "Fullscreen (F)",
+    "exit-fullscreen": "Exit fullscreen",
+    "unsupported-format": "Media preview is not available for this file format:\n{{mime}}",
+    "zoom-to-fit": "Zoom to fill",
+    "zoom-reset": "Reset zoom to fill"
+  },
   "protected_session": {
     "enter_password_instruction": "Showing protected note requires entering your password:",
     "start_session_button": "Start protected session",
@@ -1049,7 +1069,6 @@
     "unprotecting-title": "Unprotecting status"
   },
   "relation_map": {
-    "open_in_new_tab": "Open in new tab",
     "remove_note": "Remove note",
     "edit_title": "Edit title",
     "rename_note": "Rename note",
@@ -2183,5 +2202,33 @@
   },
   "setup_form": {
     "more_info": "Learn more"
+  },
+  "mermaid": {
+    "placeholder": "Type the content of your Mermaid diagram or use one of the sample diagrams below.",
+    "sample_diagrams": "Sample diagrams:",
+    "sample_flowchart": "Flowchart",
+    "sample_class": "Class",
+    "sample_sequence": "Sequence",
+    "sample_entity_relationship": "Entity Relationship",
+    "sample_state": "State",
+    "sample_mindmap": "Mindmap",
+    "sample_architecture": "Architecture",
+    "sample_block": "Block",
+    "sample_c4": "C4",
+    "sample_gantt": "Gantt",
+    "sample_git": "Git",
+    "sample_kanban": "Kanban",
+    "sample_packet": "Packet",
+    "sample_pie": "Pie",
+    "sample_quadrant": "Quadrant",
+    "sample_radar": "Radar",
+    "sample_requirement": "Requirement",
+    "sample_sankey": "Sankey",
+    "sample_timeline": "Timeline",
+    "sample_treemap": "Treemap",
+    "sample_user_journey": "User Journey",
+    "sample_xy": "XY",
+    "sample_venn": "Venn",
+    "sample_ishikawa": "Ishikawa"
   }
 }

apps/client/src/translations/es/translation.json

@@ -1051,7 +1051,6 @@
     "unprotecting-title": "Estado de desprotección"
   },
   "relation_map": {
-    "open_in_new_tab": "Abrir en nueva pestaña",
     "remove_note": "Quitar nota",
     "edit_title": "Editar título",
     "rename_note": "Cambiar nombre de nota",
@@ -1548,7 +1547,8 @@
     "task-list": "Lista de tareas",
     "book": "Colección",
     "new-feature": "Nuevo",
-    "collections": "Colecciones"
+    "collections": "Colecciones",
+    "spreadsheet": "Hoja de cálculo"
   },
   "protect_note": {
     "toggle-on": "Proteger la nota",
@@ -1650,7 +1650,8 @@
   },
   "search_result": {
     "no_notes_found": "No se han encontrado notas para los parámetros de búsqueda dados.",
-    "search_not_executed": "La búsqueda aún no se ha ejecutado. Dé clic en el botón «Buscar» para ver los resultados."
+    "search_not_executed": "La búsqueda aún no se ha ejecutado.",
+    "search_now": "Buscar ahora"
   },
   "spacer": {
     "configure_launchbar": "Configurar barra de lanzamiento"
@@ -2196,5 +2197,52 @@
   },
   "setup_form": {
     "more_info": "Para saber más"
+  },
+  "media": {
+    "play": "Reproducir (Espacio)",
+    "pause": "Pausa (Espacio)",
+    "back-10s": "Retroceder 10s (tecla de flecha izquierda)",
+    "forward-30s": "Adelantar 30s",
+    "mute": "Silenciar (M)",
+    "unmute": "Activar sonido (M)",
+    "playback-speed": "Velocidad de reproducción",
+    "loop": "Bucle",
+    "disable-loop": "Deshabilitar bucle",
+    "rotate": "Rotar",
+    "picture-in-picture": "Imagen en imagen",
+    "exit-picture-in-picture": "Salir del modo imagen en imagen",
+    "fullscreen": "Pantalla completa (F)",
+    "exit-fullscreen": "Salir de la pantalla completa",
+    "unsupported-format": "La vista previa del medio no está disponible para este formato de archivo:\n{{mime}}",
+    "zoom-to-fit": "Acercamiento para llenar",
+    "zoom-reset": "Reiniciar acercamiento para llenar"
+  },
+  "mermaid": {
+    "placeholder": "Ingrese el contenido de su diagrama Mermaid o utilice uno de los diagramas de muestra a continuación.",
+    "sample_diagrams": "Diagramas de muestra:",
+    "sample_flowchart": "Diagrama de flujo",
+    "sample_class": "Clase",
+    "sample_sequence": "Secuencia",
+    "sample_entity_relationship": "Relación entre entidades",
+    "sample_state": "Estado",
+    "sample_mindmap": "Mapa mental",
+    "sample_architecture": "Arquitectura",
+    "sample_block": "Bloque",
+    "sample_c4": "C4",
+    "sample_gantt": "Gantt",
+    "sample_git": "Git",
+    "sample_kanban": "Kanban",
+    "sample_packet": "Paquete",
+    "sample_pie": "Pastel",
+    "sample_quadrant": "Cuadrante",
+    "sample_radar": "Radar",
+    "sample_requirement": "Requerimiento",
+    "sample_sankey": "Sankey",
+    "sample_timeline": "Línea de tiempo",
+    "sample_user_journey": "Jornada de usuario",
+    "sample_xy": "XY",
+    "sample_venn": "Venn",
+    "sample_ishikawa": "Ishikawa",
+    "sample_treemap": "Mapa de árbol"
   }
 }

apps/client/src/translations/fr/translation.json

@@ -1036,7 +1036,6 @@
     "unprotecting-title": "Statut de la non-protection"
   },
   "relation_map": {
-    "open_in_new_tab": "Ouvrir dans un nouvel onglet",
     "remove_note": "Supprimer la note",
     "edit_title": "Modifier le titre",
     "rename_note": "Renommer la note",

apps/client/src/translations/ga/translation.json

@@ -1055,7 +1055,6 @@
     "unprotecting-title": "Stádas díchosanta"
   },
   "relation_map": {
-    "open_in_new_tab": "Oscail i gcluaisín nua",
     "remove_note": "Bain nóta",
     "edit_title": "Cuir an teideal in eagar",
     "rename_note": "Athainmnigh an nóta",
@@ -1571,7 +1570,8 @@
     "ai-chat": "Comhrá AI",
     "task-list": "Liosta Tascanna",
     "new-feature": "Nua",
-    "collections": "Bailiúcháin"
+    "collections": "Bailiúcháin",
+    "spreadsheet": "Scarbhileog"
   },
   "protect_note": {
     "toggle-on": "Cosain an nóta",
@@ -2227,5 +2227,52 @@
   },
   "setup_form": {
     "more_info": "Foghlaim níos mó"
+  },
+  "media": {
+    "play": "Seinn (Spás)",
+    "pause": "Sos (Spás)",
+    "back-10s": "10 soicind ar ais (eochair saighead chlé)",
+    "forward-30s": "Ar aghaidh 30s",
+    "mute": "Balbhaigh (M)",
+    "unmute": "Díbhalbhaigh (M)",
+    "playback-speed": "Luas athsheinm",
+    "loop": "Lúb",
+    "disable-loop": "Díchumasaigh an lúb",
+    "rotate": "Rothlaigh",
+    "picture-in-picture": "Pictiúr i bpictiúr",
+    "exit-picture-in-picture": "Scoir pictiúr-i-bpictiúr",
+    "fullscreen": "Lánscáileán (F)",
+    "exit-fullscreen": "Scoir lánscáileáin",
+    "unsupported-format": "Níl réamhamharc meán ar fáil don fhormáid comhaid seo:\n{{mime}}",
+    "zoom-to-fit": "Zúmáil chun líonadh",
+    "zoom-reset": "Athshocraigh súmáil chun líonadh"
+  },
+  "mermaid": {
+    "placeholder": "Clóscríobh ábhar do léaráid Maighdean Mhara nó bain úsáid as ceann de na léaráidí samplacha thíos.",
+    "sample_diagrams": "Léaráidí samplacha:",
+    "sample_flowchart": "Cairt Sreabhadh",
+    "sample_class": "Rang",
+    "sample_sequence": "Seicheamh",
+    "sample_entity_relationship": "Gaol Eintitis",
+    "sample_state": "Stát",
+    "sample_mindmap": "Léarscáil intinne",
+    "sample_architecture": "Ailtireacht",
+    "sample_block": "Bloc",
+    "sample_c4": "C4",
+    "sample_gantt": "Gantt",
+    "sample_git": "Git",
+    "sample_kanban": "Kanban",
+    "sample_packet": "Paicéad",
+    "sample_pie": "Pióg",
+    "sample_quadrant": "Ceathrú",
+    "sample_radar": "Radar",
+    "sample_requirement": "Riachtanas",
+    "sample_sankey": "Sankey",
+    "sample_timeline": "Amlíne",
+    "sample_treemap": "Léarscáil Crann",
+    "sample_user_journey": "Turas Úsáideora",
+    "sample_xy": "XY",
+    "sample_venn": "Venn",
+    "sample_ishikawa": "Ishikawa"
   }
 }

apps/client/src/translations/hi/translation.json

@@ -1049,7 +1049,6 @@
     "unprotecting-title": "अन-प्रोटेक्ट स्टेटस"
   },
   "relation_map": {
-    "open_in_new_tab": "नए टैब में खोलें",
     "remove_note": "नोट हटाएं",
     "edit_title": "टाइटल एडिट करें",
     "rename_note": "नोट का नाम बदलें",

apps/client/src/translations/it/translation.json

@@ -520,7 +520,7 @@
     "custom_name_label": "Nome del motore di ricerca personalizzato",
     "custom_name_placeholder": "Personalizza il nome del motore di ricerca",
     "custom_url_label": "L'URL del motore di ricerca personalizzato deve includere {keyword} come segnaposto per il termine di ricerca.",
-"custom_url_placeholder": "Personalizza l'URL del motore di ricerca"
+    "custom_url_placeholder": "Personalizza l'URL del motore di ricerca"
   },
   "sql_table_schemas": {
     "tables": "Tabelle"
@@ -1424,7 +1424,6 @@
     "unprotecting-title": "Stato non protetto"
   },
   "relation_map": {
-    "open_in_new_tab": "Apri in una nuova scheda",
     "remove_note": "Rimuovi nota",
     "edit_title": "Modifica titolo",
     "rename_note": "Rinomina nota",
@@ -1717,7 +1716,8 @@
     "task-list": "Elenco delle attività",
     "new-feature": "Nuovo",
     "collections": "Collezioni",
-    "ai-chat": "Chat con IA"
+    "ai-chat": "Chat con IA",
+    "spreadsheet": "Foglio di calcolo"
   },
   "protect_note": {
     "toggle-on": "Proteggi la nota",

apps/client/src/translations/ja/translation.json

@@ -588,7 +588,7 @@
     "note-map": "ノートマップ",
     "render-note": "レンダリングノート",
     "book": "コレクション",
-    "mermaid-diagram": "Mermaidダイアグラム",
+    "mermaid-diagram": "マーメイド図",
     "canvas": "キャンバス",
     "web-view": "Web ビュー",
     "mind-map": "マインドマップ",
@@ -600,7 +600,8 @@
     "task-list": "タスクリスト",
     "new-feature": "New",
     "collections": "コレクション",
-    "ai-chat": "AI チャット"
+    "ai-chat": "AI チャット",
+    "spreadsheet": "スプレッドシート"
   },
   "edited_notes": {
     "no_edited_notes_found": "この日の編集されたノートはまだありません...",
@@ -1536,7 +1537,6 @@
     "url_placeholder": "http://web サイト..."
   },
   "relation_map": {
-    "open_in_new_tab": "新しいタブで開く",
     "remove_note": "ノートを削除",
     "edit_title": "タイトルを編集",
     "rename_note": "ノート名を変更",
@@ -2167,5 +2167,52 @@
   },
   "setup_form": {
     "more_info": "さらに詳しく"
+  },
+  "media": {
+    "play": "再生 (スペース)",
+    "pause": "一時停止 (スペース)",
+    "back-10s": "10 秒戻る (左矢印キー)",
+    "forward-30s": "30 秒進む",
+    "mute": "ミュート (M)",
+    "unmute": "ミュート解除 (M)",
+    "playback-speed": "再生速度",
+    "loop": "ループ",
+    "disable-loop": "ループを解除",
+    "rotate": "回転",
+    "picture-in-picture": "ピクチャーインピクチャー",
+    "exit-picture-in-picture": "ピクチャーインピクチャーを終了",
+    "fullscreen": "全画面表示 (F)",
+    "exit-fullscreen": "全画面表示を終了",
+    "unsupported-format": "このファイル形式ではメディアプレビューはご利用いただけません:\n{{mime}}",
+    "zoom-to-fit": "ズームして全体を表示",
+    "zoom-reset": "ズーム設定をリセット"
+  },
+  "mermaid": {
+    "placeholder": "マーメイド図の内容を入力するか、以下のサンプル図のいずれかを使用してください。",
+    "sample_diagrams": "サンプル図：",
+    "sample_flowchart": "フローチャート",
+    "sample_class": "クラス図",
+    "sample_sequence": "シーケンス図",
+    "sample_entity_relationship": "ER 図",
+    "sample_state": "状態遷移図",
+    "sample_mindmap": "マインドマップ",
+    "sample_architecture": "アーキテクチャ図",
+    "sample_block": "ブロック図",
+    "sample_c4": "C4 図",
+    "sample_gantt": "ガントチャート",
+    "sample_git": "Git グラフ",
+    "sample_kanban": "カンバン",
+    "sample_packet": "パケット図",
+    "sample_pie": "円グラフ",
+    "sample_quadrant": "4象限図",
+    "sample_radar": "レーダーチャート",
+    "sample_requirement": "要件図",
+    "sample_sankey": "サンキー図",
+    "sample_timeline": "タイムライン",
+    "sample_treemap": "ツリーマップ",
+    "sample_user_journey": "ユーザージャーニー図",
+    "sample_xy": "XY チャート",
+    "sample_venn": "ベン図",
+    "sample_ishikawa": "石川図"
   }
 }

apps/client/src/translations/ko/translation.json

@@ -51,7 +51,7 @@
     "branch_prefix_saved": "브랜치 접두사가 저장되었습니다.",
     "edit_branch_prefix_multiple": "{{count}}개의 지점 접두사 편집",
     "branch_prefix_saved_multiple": "{{count}}개의 지점에 대해 지점 접두사가 저장되었습니다.",
-    "affected_branches": "영향을 받는 브랜치 수 ({{count}}):"
+    "affected_branches": "영향을 받은 분기 수({{count}}):"
   },
   "bulk_actions": {
     "bulk_actions": "대량 작업",
@@ -134,6 +134,27 @@
     "notSet": "미설정",
     "goBackForwards": "히스토리에서 뒤로/앞으로 이동",
     "showJumpToNoteDialog": "<a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/note-navigation.html#jump-to-note\">\"노트로 이동\" 대화 상자</a> 표시",
-    "scrollToActiveNote": "활성화된 노트로 스크롤 이동"
+    "scrollToActiveNote": "활성화된 노트로 스크롤 이동",
+    "collapseWholeTree": "모든 노트 트리를 접기",
+    "collapseSubTree": "하위 트리 접기",
+    "tabShortcuts": "탭 단축키",
+    "onlyInDesktop": "데스크톱에서만(일렉트론 빌드)",
+    "openEmptyTab": "빈 탭 열기",
+    "closeActiveTab": "활성 탭 닫기",
+    "jumpToParentNote": "부모 노트로 이동하기",
+    "activateNextTab": "다음 탭 활성화",
+    "activatePreviousTab": "이전 탭 활성화",
+    "creatingNotes": "노트 만들기",
+    "createNoteInto": "활성 노트에 새로운 하위 노트 추가",
+    "movingCloningNotes": "노트 이동/복제",
+    "moveNoteUpDown": "노트 목록에서 노트 위/아래 이동",
+    "selectAllNotes": "현재 레벨의 모든 노트 선택",
+    "selectNote": "노트 선택",
+    "deleteNotes": "노트/하위트리 삭제",
+    "editingNotes": "노트 편집",
+    "createEditLink": "외부 링크 생성/편집",
+    "createInternalLink": "내부 링크 생성",
+    "followLink": "커서아래 링크 따라가기",
+    "insertDateTime": "커서위치에 현재 날짜와 시간 삽입"
   }
 }

apps/client/src/translations/pl/translation.json

@@ -29,7 +29,7 @@
     "widget-render-error": {
       "title": "Nie udało się wyrenderować niestandardowego widżetu React"
     },
-    "widget-missing-parent": "Niestandardowy widżet nie ma zdefiniowanej obowiązkowej właściwości „{{property}}”.\nJeśli skrypt ma działać bez interfejsu użytkownika (UI) wyłącz go:  '#run=frontendStartup'.",
+    "widget-missing-parent": "Niestandardowy widżet nie ma zdefiniowanej obowiązkowej właściwości „{{property}}”.\n\nJeśli skrypt ma działać bez interfejsu użytkownika (UI) wyłącz go: '#run=frontendStartup'.",
     "open-script-note": "Otwórz notatkę ze skryptem",
     "scripting-error": "Błąd skryptu użytkownika: {{title}}"
   },
@@ -1275,7 +1275,6 @@
     "unprotecting-title": "Status zdejmowania ochrony"
   },
   "relation_map": {
-    "open_in_new_tab": "Otwórz w nowej karcie",
     "remove_note": "Usuń notatkę",
     "edit_title": "Edytuj tytuł",
     "rename_note": "Zmień nazwę notatki",
@@ -1487,7 +1486,7 @@
     "custom_name_label": "Nazwa niestandardowej wyszukiwarki",
     "custom_name_placeholder": "Dostosuj nazwę wyszukiwarki",
     "custom_url_label": "URL niestandardowej wyszukiwarki powinien zawierać {keyword} jako symbol zastępczy dla wyszukiwanej frazy.",
-    "custom_url_placeholder": "Dostosuj URL wyszukiwarki",
+    "custom_url_placeholder": "Dostosuj url wyszukiwarki",
     "save_button": "Zapisz"
   },
   "tray": {
@@ -1780,7 +1779,8 @@
     "ai-chat": "Czat AI",
     "task-list": "Lista zadań",
     "new-feature": "Nowość",
-    "collections": "Kolekcje"
+    "collections": "Kolekcje",
+    "spreadsheet": "Arkusz"
   },
   "protect_note": {
     "toggle-on": "Chroń notatkę",
@@ -2197,5 +2197,52 @@
   },
   "setup_form": {
     "more_info": "Dowiedz się więcej"
+  },
+  "media": {
+    "fullscreen": "Pełny ekran (F)",
+    "mute": "Wycisz (M)",
+    "unmute": "Wyłącz wyciszenie (M)",
+    "exit-fullscreen": "Wyłącz pełny ekran",
+    "loop": "Pętla",
+    "disable-loop": "Wyłącz pętle",
+    "rotate": "Obróć",
+    "picture-in-picture": "Obraz w obrazie",
+    "pause": "Zatrzymaj (Space)",
+    "back-10s": "Cofnij 10s (Lewa strzałka)",
+    "forward-30s": "Do przodu 30s",
+    "playback-speed": "Szybkość odtwarzania",
+    "exit-picture-in-picture": "Wyjdź z obrazu w obrazie",
+    "zoom-to-fit": "Powiększ aby wypełnić",
+    "unsupported-format": "Podgląd multimediów nie jest dostępny dla tego formatu pliku\n{{mime}}",
+    "play": "Odtwórz (Space)",
+    "zoom-reset": "Zresetuj powiększenie"
+  },
+  "mermaid": {
+    "sample_architecture": "Architektura",
+    "sample_diagrams": "Przykład diagramu:",
+    "sample_flowchart": "Schemat blokowy",
+    "sample_class": "Klasa",
+    "sample_sequence": "Sekwencja",
+    "sample_timeline": "Oś czasu",
+    "sample_treemap": "Mapa drzewa",
+    "sample_xy": "XY",
+    "sample_venn": "Diagram Venna",
+    "sample_ishikawa": "Diagram Ishikawa",
+    "placeholder": "Wpisz treść swojego diagramu lub skorzystaj z jednego z przykładowych diagramów poniżej.",
+    "sample_entity_relationship": "Diagram związków encji",
+    "sample_state": "Diagram stanów",
+    "sample_mindmap": "Mapa myśli",
+    "sample_block": "Diagram blokowy",
+    "sample_c4": "C4",
+    "sample_gantt": "Wykres Gantta",
+    "sample_git": "Diagram Git",
+    "sample_kanban": "Kanban",
+    "sample_packet": "Diagram pakietów",
+    "sample_pie": "Wykres kołowy",
+    "sample_quadrant": "Diagram kwadrantowy",
+    "sample_radar": "Wykres radarowy",
+    "sample_requirement": "Diagram wymagań",
+    "sample_sankey": "Wykres Sankeya",
+    "sample_user_journey": "Mapa Podróży Użytkownika"
   }
 }

apps/client/src/translations/pt/translation.json

@@ -1047,7 +1047,6 @@
     "unprotecting-title": "Estado da remoção de proteção"
   },
   "relation_map": {
-    "open_in_new_tab": "Abrir em nova guia",
     "remove_note": "Remover nota",
     "edit_title": "Editar título",
     "rename_note": "Renomear nota",

apps/client/src/translations/pt_br/translation.json

@@ -1111,7 +1111,6 @@
     "start_session_button": "Iniciar sessão protegida"
   },
   "relation_map": {
-    "open_in_new_tab": "Abrir em nova aba",
     "remove_note": "Remover nota",
     "edit_title": "Editar título",
     "rename_note": "Renomear nota",

apps/client/src/translations/ro/translation.json

@@ -1054,7 +1054,6 @@
     "enter_title_of_new_note": "Introduceți titlul noii notițe",
     "note_already_in_diagram": "Notița „{{title}}” deja se află pe diagramă.",
     "note_not_found": "Notița „{{noteId}}” nu a putut fi găsită!",
-    "open_in_new_tab": "Deschide într-un tab nou",
     "remove_note": "Șterge notița",
     "remove_relation": "Șterge relația",
     "rename_note": "Redenumește notița",

apps/client/src/translations/ru/translation.json

@@ -257,7 +257,7 @@
     "collapseExpand": "свернуть/развернуть узел",
     "notSet": "не установлено",
     "goBackForwards": "назад / вперед в истории",
-    "showJumpToNoteDialog": "показать <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/note-navigation.html#jump-to-note\">окно \"Перейти к\"</a>",
+    "showJumpToNoteDialog": "Перейти к <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/note-navigation.html#jump-to-note\">\"Перейти к\" окно</a>",
     "scrollToActiveNote": "прокрутка к активной заметке",
     "jumpToParentNote": "переход к родительской заметке",
     "collapseWholeTree": "свернуть все дерево заметок",
@@ -471,7 +471,7 @@
     "calendar_root": "отмечает заметку, которая должна использоваться в качестве корневой для заметок дня. Только одна должна быть отмечена как таковая.",
     "archived": "заметки с этой меткой не будут отображаться в результатах поиска по умолчанию (а также в диалоговых окнах «Перейти к», «Добавить ссылку» и т. д.).",
     "exclude_from_export": "заметки (с их поддеревьями) не будут включены ни в один экспорт заметок",
-    "run": "определяет, при каких событиях должен запускаться скрипт. Возможные значения:\n<ul>\n<li>frontendStartup — при запуске (или обновлении) фронтенда Trilium, но не на мобильном устройстве.</li>\n<li>mobileStartup — при запуске (или обновлении) фронтенда Trilium на мобильном устройстве.</li>\n<li>backendStartup — при запуске бэкенда Trilium.</li>\n<li>hourly — запускать каждый час. Для указания времени можно использовать дополнительную метку <code>runAtHour</code>.</li>\n<li>daily — запускать раз в день.</li>\n</ul>",
+    "run": "определяет, при каких событиях должен запускаться скрипт. Возможные значения:<ul>\n<li>frontendStartup — при запуске (или обновлении) фронтенда Trilium, но не на мобильном устройстве.</li>\n<li>mobileStartup — при запуске (или обновлении) фронтенда Trilium на мобильном устройстве.</li>\n<li>backendStartup — при запуске бэкенда Trilium.</li>\n<li>hourly — запускать каждый час. Для указания времени можно использовать дополнительную метку <code>runAtHour</code>.</li>\n<li>daily — запускать раз в день.</li></ul>",
     "run_on_instance": "Определить, на каком экземпляре Trilium это должно выполняться. По умолчанию — для всех экземпляров.",
     "run_at_hour": "В какой час это должно выполняться? Следует использовать вместе с <code>#run=hourly</code>. Можно задать несколько раз для большего количества запусков в течение дня.",
     "disable_inclusion": "скрипты с этой меткой не будут включены в выполнение родительского скрипта.",
@@ -594,7 +594,8 @@
     "display-week-numbers": "Отображать номера недель",
     "hide-weekends": "Скрыть выходные",
     "raster": "Растр",
-    "show-scale": "Показать масштаб"
+    "show-scale": "Показать масштаб",
+    "show-labels": "Показать названия маркеров"
   },
   "editorfeatures": {
     "note_completion_enabled": "Включить автодополнение",
@@ -782,7 +783,13 @@
     "shared-indicator-tooltip": "Эта заметка опубликована",
     "shared-indicator-tooltip-with-url": "Эта заметка доступно публично по адресу: {{- url}}",
     "subtree-hidden-moved-description-other": "В дереве, к которому относится эта заметка, скрыты дочерние заметки.",
-    "subtree-hidden-moved-description-collection": "Эта коллекция скрывает свои дочерние заметки в дереве."
+    "subtree-hidden-moved-description-collection": "Эта коллекция скрывает свои дочерние заметки в дереве.",
+    "clone-indicator-tooltip": "У этой заметки {{- count}} родителей: {{- parents}}",
+    "clone-indicator-tooltip-single": "Эта заметка клонирована (1 дополнительный родитель: {{- parent}})",
+    "subtree-hidden-moved-title": "Добавлено в {{title}}",
+    "subtree-hidden-tooltip_one": "{{count}} дочерняя заметка скрыта",
+    "subtree-hidden-tooltip_few": "Скрыто {{count}} дочерних заметок",
+    "subtree-hidden-tooltip_many": "Скрыто {{count}} дочерних заметок"
   },
   "quick-search": {
     "no-results": "Результаты не найдены",
@@ -826,7 +833,9 @@
     "mind-map": "Mind Map",
     "geo-map": "Географическая карта",
     "task-list": "Список задач",
-    "confirm-change": "Не рекомендуется менять тип заметки, если её содержимое не пустое. Вы всё равно хотите продолжить?"
+    "confirm-change": "Не рекомендуется менять тип заметки, если её содержимое не пустое. Вы всё равно хотите продолжить?",
+    "ai-chat": "Чат с ИИ",
+    "spreadsheet": "Электронная таблица"
   },
   "tree-context-menu": {
     "open-in-popup": "Быстрое редактирование",
@@ -1153,7 +1162,8 @@
     "search_note_saved": "Заметка с настройкой поиска сохранена в {{- notePathTitle}}",
     "unknown_search_option": "Неизвестный параметр поиска {{searchOptionName}}",
     "actions_executed": "Действия выполнены.",
-    "view_options": "Просмотреть опции:"
+    "view_options": "Просмотреть опции:",
+    "option": "опция"
   },
   "ancestor": {
     "depth_label": "глубина",
@@ -1403,7 +1413,8 @@
     "type_text_to_filter": "Введите текст для фильтрации сочетаний клавиш...",
     "reload_app": "Перезагрузить приложение, чтобы применить изменения",
     "confirm_reset": "Вы действительно хотите сбросить все сочетания клавиш до значений по умолчанию?",
-    "set_all_to_default": "Установить все сочетания клавиш по умолчанию"
+    "set_all_to_default": "Установить все сочетания клавиш по умолчанию",
+    "no_results": "Не найдено ярлыков, соответствующих '{{filter}}'"
   },
   "sync_2": {
     "timeout_unit": "миллисекунд",
@@ -1614,7 +1625,6 @@
     "rename_note": "Переименовать заметку",
     "remove_relation": "Удалить отношение",
     "default_new_note_title": "новая заметка",
-    "open_in_new_tab": "Открыть в новой вкладке",
     "confirm_remove_relation": "Вы уверены, что хотите удалить связь?",
     "enter_new_title": "Введите новое название заметки:",
     "note_not_found": "Заметка {{noteId}} не найдена!",
@@ -1713,7 +1723,8 @@
     "delete_this_note": "Удалить эту заметку",
     "insert_child_note": "Вставить дочернюю заметку",
     "note_revisions": "История изменений",
-    "content_language_switcher": "Язык содержимого: {{language}}"
+    "content_language_switcher": "Язык содержимого: {{language}}",
+    "backlinks": "Ссылки"
   },
   "svg_export_button": {
     "button_title": "Экспортировать диаграмму как SVG"
@@ -1790,7 +1801,8 @@
   },
   "search_result": {
     "no_notes_found": "По заданным параметрам поиска заметки не найдены.",
-    "search_not_executed": "Поиск ещё не выполнен. Нажмите кнопку «Поиск» выше, чтобы увидеть результаты."
+    "search_not_executed": "Поиск ещё не выполнен.",
+    "search_now": "Искать сейчас"
   },
   "empty": {
     "search_placeholder": "поиск заметки по ее названию",
@@ -1988,10 +2000,12 @@
     "print_report_collection_content_few": "{{count}} заметки в коллекции не удалось распечатать, поскольку они не поддерживаются или защищены.",
     "print_report_collection_content_many": "{{count}} заметок в коллекции не удалось распечатать, поскольку они не поддерживаются или защищены.",
     "print_report_collection_details_button": "Подробнее",
-    "print_report_collection_details_ignored_notes": "Пропущенные заметки"
+    "print_report_collection_details_ignored_notes": "Пропущенные заметки",
+    "print_report_error_title": "Не удалось напечатать",
+    "print_report_stack_trace": "Трассировка стека"
   },
   "book": {
-    "no_children_help": "В этой коллекции нет дочерних заметок, поэтому отображать нечего. Подробности см. в <a href=\"https://triliumnext.github.io/Docs/Wiki/book-note.html\">wiki</a>.",
+    "no_children_help": "В этой коллекции нет дочерних заметок, поэтому отображать нечего.",
     "drag_locked_title": "Защищено от изменения",
     "drag_locked_message": "Перетаскивание не допускается, так как коллекция защищена от редактирования."
   },
@@ -2007,7 +2021,9 @@
     "rendering_error": "Невозможно отобразить содержимое из-за ошибки."
   },
   "pagination": {
-    "total_notes": "{{count}} заметок"
+    "total_notes": "{{count}} заметок",
+    "prev_page": "Предыдущая страница",
+    "next_page": "Следующая страница"
   },
   "status_bar": {
     "attributes_one": "{{count}} атрибут",
@@ -2137,5 +2153,49 @@
   },
   "platform_indicator": {
     "available_on": "Доступно для {{platform}}"
+  },
+  "render": {
+    "setup_title": "Отобразить настраиваемый HTML или Preact JSX в этой заметке",
+    "setup_create_sample_preact": "Создать образец заметки с помощью Preact",
+    "setup_create_sample_html": "Создать образец заметки с помощью HTML",
+    "setup_sample_created": "Образец заметки был создан в качестве дочерней записи.",
+    "disabled_description": "Эти заметки для рендера поступают из внешнего источника. Чтобы защитить вас от вредоносного содержимого, они не включены по умолчанию. Убедитесь, что вы доверяете источнику до его включения.",
+    "disabled_button_enable": "Включить заметки для рендера"
+  },
+  "web_view_setup": {
+    "title": "Создайте живой просмотр веб-страницы прямо в Trilium",
+    "url_placeholder": "Введите или вставьте адрес сайта, например https://triliumnotes.org",
+    "create_button": "Создать веб-просмотр",
+    "invalid_url_title": "Неверный адрес",
+    "invalid_url_message": "Введите корректный веб-адрес, например https://triliumnotes.org.",
+    "disabled_description": "Этот веб-просмотр был импортирован из внешнего источника. Чтобы защитить вас от фишинга или вредоносного контента, он не загружается автоматически. Вы можете включить его, если доверяете источнику.",
+    "disabled_button_enable": "Включить просмотр веб-страниц"
+  },
+  "active_content_badges": {
+    "type_icon_pack": "Набор иконок",
+    "type_backend_script": "Бэкенд скрипт",
+    "type_frontend_script": "Фронтенд скрипт",
+    "type_widget": "Виджет",
+    "type_app_css": "Пользовательский CSS",
+    "type_render_note": "Заметка для рендера",
+    "type_web_view": "Просмотр веб-страницы",
+    "type_app_theme": "Пользовательская тема",
+    "toggle_tooltip_enable_tooltip": "Нажмите, чтобы включить этот {{type}}.",
+    "toggle_tooltip_disable_tooltip": "Нажмите, чтобы выключить этот {{type}}.",
+    "menu_docs": "Открытая документация",
+    "menu_execute_now": "Выполнить скрипт сейчас",
+    "menu_run": "Выполнять автоматически",
+    "menu_run_disabled": "Вручную",
+    "menu_run_backend_startup": "При запуске бэкенда",
+    "menu_run_hourly": "Ежечасно",
+    "menu_run_daily": "Ежедневно",
+    "menu_run_frontend_startup": "Когда запускается интерфейс ПК",
+    "menu_run_mobile_startup": "При запуске мобильного интерфейса",
+    "menu_change_to_widget": "Изменить виджет",
+    "menu_change_to_frontend_script": "Перейти к фронтенд скрипту",
+    "menu_theme_base": "Базовая тема"
+  },
+  "setup_form": {
+    "more_info": "Узнать больше"
   }
 }

apps/client/src/translations/sv/translation.json

@@ -3,6 +3,38 @@
     "title": "Om Trilium Notes",
     "homepage": "Hemsida:",
     "app_version": "App version:",
-    "db_version": "DB version:"
+    "db_version": "DB version:",
+    "sync_version": "Sync version:",
+    "build_date": "Bygg datum:",
+    "build_revision": "Bygg version:",
+    "data_directory": "Data sökväg:"
+  },
+  "toast": {
+    "critical-error": {
+      "title": "Kritiskt fel",
+      "message": "Ett kritiskt fel har inträffat som förhindrar klientprogrammet från att starta:\n\n{{message}}\n\nDetta beror troligen på att ett skript har misslyckats på ett oväntat sätt. Försök att starta programmet i felsäkert läge och åtgärda problemet."
+    },
+    "widget-error": {
+      "title": "Misslyckades att starta widget",
+      "message-custom": "Anpassad widget från anteckning med ID \"{{id}}\", med rubrik \"{{title}}\" kunde inte startas på grund av:\n\n{{message}}",
+      "message-unknown": "Okänd widget kunde inte startas på grund av:\n\n{{message}}"
+    },
+    "bundle-error": {
+      "title": "Misslyckades att starta ett anpassat skript",
+      "message": "Skript kunde inte startas på grund av:\n\n{{message}}"
+    },
+    "widget-list-error": {
+      "title": "Misslyckades att hämta widget-listan från servern"
+    },
+    "widget-render-error": {
+      "title": "Misslyckades att renderera en anpassad React-widget"
+    },
+    "widget-missing-parent": "Anpassad widget saknar '{{property}}', som måste vara definierad.\n\nOm skriptet är avsett att köras utan gränssnitt, använd '#run-frontendStartup' istället.",
+    "open-script-note": "Öppna skriptanteckning",
+    "scripting-error": "Fel i anpassat skript: {{title}}"
+  },
+  "add_link": {
+    "add_link": "Infoga länk",
+    "help_on_links": "Hjälp om länkar"
   }
 }

apps/client/src/translations/tw/translation.json

@@ -1046,7 +1046,6 @@
     "unprotecting-title": "解除保護狀態"
   },
   "relation_map": {
-    "open_in_new_tab": "在新分頁中打開",
     "remove_note": "刪除筆記",
     "edit_title": "編輯標題",
     "rename_note": "重新命名筆記",
@@ -1496,7 +1495,8 @@
     "task-list": "任務列表",
     "new-feature": "新增",
     "collections": "集合",
-    "ai-chat": "AI 聊天"
+    "ai-chat": "AI 聊天",
+    "spreadsheet": "試算表"
   },
   "protect_note": {
     "toggle-on": "保護筆記",

apps/client/src/translations/uk/translation.json

@@ -1151,7 +1151,6 @@
     "unprotecting-title": "Статус зняття захисту"
   },
   "relation_map": {
-    "open_in_new_tab": "Відкрити в новій вкладці",
     "remove_note": "Видалити нотатку",
     "edit_title": "Редагувати заголовок",
     "rename_note": "Перейменувати нотатку",

apps/client/src/widgets/NoteDetail.tsx

@@ -40,6 +40,21 @@ export default function NoteDetail() {
     const widgetRequestId = useRef(0);
     const hasFixedTree = note && noteContext?.hoistedNoteId === "_lbMobileRoot" && isMobile() && note.noteId.startsWith("_lbMobile");
 
+    // Defer loading for tabs that haven't been active yet (e.g. on app refresh).
+    // Special contexts (ntxId starting with "_", e.g. popup editor) are always considered active.
+    const isSpecialContext = ntxId?.startsWith("_") ?? false;
+    const [ hasTabBeenActive, setHasTabBeenActive ] = useState(() => isSpecialContext || (noteContext?.isActive() ?? false));
+    useEffect(() => {
+        if (!hasTabBeenActive && noteContext?.isActive()) {
+            setHasTabBeenActive(true);
+        }
+    }, [ noteContext, hasTabBeenActive ]);
+    useTriliumEvent("activeNoteChanged", ({ ntxId: eventNtxId }) => {
+        if (eventNtxId === ntxId && !hasTabBeenActive) {
+            setHasTabBeenActive(true);
+        }
+    });
+
     const props: TypeWidgetProps = {
         note: note!,
         viewScope,
@@ -49,7 +64,7 @@ export default function NoteDetail() {
     };
 
     useEffect(() => {
-        if (!type) return;
+        if (!type || !hasTabBeenActive) return;
         const requestId = ++widgetRequestId.current;
 
         if (!noteTypesToRender[type]) {
@@ -68,7 +83,7 @@ export default function NoteDetail() {
         } else {
             setActiveNoteType(type);
         }
-    }, [ note, viewScope, type, noteTypesToRender ]);
+    }, [ note, viewScope, type, noteTypesToRender, hasTabBeenActive ]);
 
     // Detect note type changes.
     useTriliumEvent("entitiesReloaded", async ({ loadResults }) => {
@@ -247,9 +262,8 @@ function NoteDetailWrapper({ Element, type, isVisible, isFullHeight, props }: {
     useEffect(() => {
         if (isVisible) {
             setCachedProps(props);
-        } else {
-            // Do nothing, keep the old props.
         }
+        // When not visible, keep the old props to avoid re-rendering in the background.
     }, [ props, isVisible ]);
 
     const typeMapping = TYPE_MAPPINGS[type];
@@ -260,7 +274,7 @@ function NoteDetailWrapper({ Element, type, isVisible, isFullHeight, props }: {
                 height: isFullHeight ? "100%" : ""
             }}
         >
-            { <Element {...cachedProps} /> }
+            <Element {...cachedProps} />
         </div>
     );
 }

apps/client/src/widgets/NoteWrapper.css

@@ -1,16 +0,0 @@
-.component.note-split {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-    contain: none;
-
-    > .title-row {
-        display: flex;
-        flex-direction: row;
-        contain: none;
-    }
-}
-
-body.desktop .component.note-split > .title-row > * {
-    margin: 5px;
-}

apps/client/src/widgets/NoteWrapper.tsx

@@ -1,96 +0,0 @@
-import "./NoteWrapper.css";
-
-import { isExperimentalFeatureEnabled } from "../services/experimental_features";
-import { isDesktop } from "../services/utils";
-import ApiLog from "./api_log";
-import ClosePaneButton from "./buttons/close_pane_button";
-import CreatePaneButton from "./buttons/create_pane_button";
-import MovePaneButton from "./buttons/move_pane_button";
-import NoteList from "./collections/NoteList";
-import ScrollingContainer from "./containers/ScrollingContainer";
-import FindWidget from "./find";
-import FloatingButtons from "./FloatingButtons";
-import { DESKTOP_FLOATING_BUTTONS } from "./FloatingButtonsDefinitions";
-import { LegacyWidgetRenderer } from "./launch_bar/LauncherDefinitions";
-import SpacerWidget from "./launch_bar/SpacerWidget";
-import InlineTitle from "./layout/InlineTitle";
-import NoteBadges from "./layout/NoteBadges";
-import NoteTitleActions from "./layout/NoteTitleActions";
-import MobileDetailMenu from "./mobile_widgets/mobile_detail_menu";
-import ToggleSidebarButton from "./mobile_widgets/toggle_sidebar_button";
-import NoteIcon from "./note_icon";
-import NoteTitleWidget from "./note_title";
-import NoteDetail from "./NoteDetail";
-import PromotedAttributes from "./PromotedAttributes";
-import ReadOnlyNoteInfoBar from "./ReadOnlyNoteInfoBar";
-import NoteActions from "./ribbon/NoteActions";
-import Ribbon from "./ribbon/Ribbon";
-import ScrollPadding from "./scroll_padding";
-import SearchResult from "./search_result";
-import SharedInfo from "./shared_info";
-import MobileEditorToolbar from "./type_widgets/text/mobile_editor_toolbar";
-import WatchedFileUpdateStatusWidget from "./watched_file_update_status";
-
-const isNewLayout = isExperimentalFeatureEnabled("new-layout");
-const cachedIsDesktop = isDesktop();
-const cachedIsMobile = !cachedIsDesktop;
-
-export default function NoteWrapper() {
-    return (
-        <div className="component note-split">
-            <TitleRow />
-            {!isNewLayout && <Ribbon />}
-            {cachedIsDesktop && <LegacyWidgetRenderer widget={new WatchedFileUpdateStatusWidget()} />}
-            {!isNewLayout && <FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />}
-            <ScrollingContainer>
-                {isNewLayout ? (
-                    <>
-                        <InlineTitle />
-                        <NoteTitleActions />
-                    </>
-                ) : (
-                    <>
-                        <ReadOnlyNoteInfoBar />
-                        <SharedInfo />
-                    </>
-                )}
-                {!isNewLayout && <PromotedAttributes />}
-                <NoteDetail />
-                <NoteList media="screen" />
-                <SearchResult />
-                <ScrollPadding />
-            </ScrollingContainer>
-            <ApiLog />
-            {cachedIsMobile && <MobileEditorToolbar />}
-            <LegacyWidgetRenderer widget={new FindWidget()} />
-        </div>
-    );
-}
-
-function TitleRow() {
-    return (
-        <div className="component title-row note-split-title">
-            {cachedIsMobile && <ToggleSidebarButton />}
-            <NoteIcon />
-            <NoteTitleWidget />
-            {isNewLayout && <NoteBadges />}
-            {cachedIsDesktop ? (
-                <>
-                    <SpacerWidget baseSize={0} growthFactor={1} />
-                    {!isNewLayout ? (
-                        <>
-                            <MovePaneButton direction="left" />
-                            <MovePaneButton direction="right" />
-                            <ClosePaneButton />
-                            <CreatePaneButton />
-                        </>
-                    ) : (
-                        <NoteActions />
-                    )}
-                </>
-            ) : (
-                <MobileDetailMenu />
-            )}
-        </div>
-    );
-}

apps/client/src/widgets/PromotedAttributes.tsx

@@ -2,7 +2,7 @@ import "./PromotedAttributes.css";
 
 import { UpdateAttributeResponse } from "@triliumnext/commons";
 import clsx from "clsx";
-import { ComponentChild, HTMLInputTypeAttribute, InputHTMLAttributes, MouseEventHandler, TargetedEvent, TargetedInputEvent } from "preact";
+import { ComponentChild, createElement, HTMLInputTypeAttribute, InputHTMLAttributes, MouseEventHandler, TargetedEvent, TargetedInputEvent } from "preact";
 import { Dispatch, StateUpdater, useCallback, useEffect, useRef, useState } from "preact/hooks";
 
 import NoteContext from "../components/note_context";
@@ -36,7 +36,7 @@ interface CellProps {
     setCellToFocus(cell: Cell): void;
 }
 
-type OnChangeEventData = TargetedEvent<HTMLInputElement, Event> | InputEvent | JQuery.TriggeredEvent<HTMLInputElement, undefined, HTMLInputElement, HTMLInputElement>;
+type OnChangeEventData = TargetedEvent<HTMLInputElement | HTMLTextAreaElement, Event> | InputEvent | JQuery.TriggeredEvent<HTMLInputElement, undefined, HTMLInputElement, HTMLInputElement>;
 type OnChangeListener = (e: OnChangeEventData) => void | Promise<void>;
 
 export default function PromotedAttributes() {
@@ -171,8 +171,9 @@ function PromotedAttributeCell(props: CellProps) {
     );
 }
 
-const LABEL_MAPPINGS: Record<LabelType, HTMLInputTypeAttribute> = {
+const LABEL_MAPPINGS: Record<LabelType, HTMLInputTypeAttribute | undefined> = {
     text: "text",
+    textarea: undefined,
     number: "number",
     boolean: "checkbox",
     date: "date",
@@ -226,20 +227,21 @@ function LabelInput(props: CellProps & { inputId: string }) {
         }
     }
 
-    const inputNode = <input
-        className="form-control promoted-attribute-input"
-        tabIndex={200 + definitionAttr.position}
-        id={inputId}
-        type={LABEL_MAPPINGS[definition.labelType ?? "text"]}
-        value={valueDraft}
-        checked={definition.labelType === "boolean" ? valueAttr.value === "true" : undefined}
-        placeholder={t("promoted_attributes.unset-field-placeholder")}
-        data-attribute-id={valueAttr.attributeId}
-        data-attribute-type={valueAttr.type}
-        data-attribute-name={valueAttr.name}
-        onBlur={onChangeListener}
-        {...extraInputProps}
-    />;
+
+    const inputNode = createElement(definition.labelType === "textarea" ? "textarea" : "input", {
+        className: "form-control promoted-attribute-input",
+        tabIndex: 200 + definitionAttr.position,
+        id: inputId,
+        type: LABEL_MAPPINGS[definition.labelType ?? "text"],
+        value: valueDraft,
+        checked: definition.labelType === "boolean" ? valueAttr.value === "true" : undefined,
+        placeholder: t("promoted_attributes.unset-field-placeholder"),
+        "data-attribute-id": valueAttr.attributeId,
+        "data-attribute-type": valueAttr.type,
+        "data-attribute-name": valueAttr.name,
+        onBlur: onChangeListener,
+        ...extraInputProps
+    });
 
     if (definition.labelType === "boolean") {
         return <>

apps/client/src/widgets/attribute_widgets/attribute_detail.ts

@@ -137,6 +137,7 @@ const TPL = /*html*/`
             <td>
                 <select class="attr-input-label-type form-control">
                   <option value="text">${t("attribute_detail.text")}</option>
+                  <option value="textarea">${t("attribute_detail.textarea")}</option>
                   <option value="number">${t("attribute_detail.number")}</option>
                   <option value="boolean">${t("attribute_detail.boolean")}</option>
                   <option value="date">${t("attribute_detail.date")}</option>

apps/client/src/widgets/collections/board/api.ts

@@ -1,5 +1,5 @@
 import { BulkAction } from "@triliumnext/commons";
-import { BoardViewData } from ".";
+
 import appContext from "../../../components/app_context";
 import FNote from "../../../entities/fnote";
 import attributes from "../../../services/attributes";
@@ -9,6 +9,7 @@ import froca from "../../../services/froca";
 import { t } from "../../../services/i18n";
 import note_create from "../../../services/note_create";
 import server from "../../../services/server";
+import { BoardViewData } from ".";
 import { ColumnMap } from "./data";
 
 export default class BoardApi {
@@ -35,13 +36,11 @@ export default class BoardApi {
 
     async createNewItem(column: string, title: string) {
         try {
-            // Get the parent note path
-            const parentNotePath = this.parentNote.noteId;
-
             // Create a new note as a child of the parent note
-            const { note: newNote, branch: newBranch } = await note_create.createNote(parentNotePath, {
+            const { note: newNote, branch: newBranch } = await note_create.createNote(this.parentNote.noteId, {
                 activate: false,
-                title
+                title,
+                isProtected: this.parentNote.isProtected
             });
 
             if (newNote && newBranch) {
@@ -87,7 +86,7 @@ export default class BoardApi {
 
         const action: BulkAction = this.isRelationMode
             ? { name: "deleteRelation", relationName: this.statusAttribute }
-            : { name: "deleteLabel", labelName: this.statusAttribute }
+            : { name: "deleteLabel", labelName: this.statusAttribute };
         await executeBulkActions(noteIds, [ action ]);
         this.viewConfig.columns = (this.viewConfig.columns ?? []).filter(col => col.value !== column);
         this.saveConfig(this.viewConfig);
@@ -99,7 +98,7 @@ export default class BoardApi {
         // Change the value in the notes.
         const action: BulkAction = this.isRelationMode
             ? { name: "updateRelationTarget", relationName: this.statusAttribute, targetNoteId: newValue }
-            : { name: "updateLabelValue", labelName: this.statusAttribute, labelValue: newValue }
+            : { name: "updateLabelValue", labelName: this.statusAttribute, labelValue: newValue };
         await executeBulkActions(noteIds, [ action ]);
 
         // Rename the column in the persisted data.
@@ -137,9 +136,9 @@ export default class BoardApi {
     }
 
     async insertRowAtPosition(
-            column: string,
-            relativeToBranchId: string,
-            direction: "before" | "after") {
+        column: string,
+        relativeToBranchId: string,
+        direction: "before" | "after") {
         const { note, branch } = await note_create.createNote(this.parentNote.noteId, {
             activate: false,
             targetBranchId: relativeToBranchId,
@@ -179,9 +178,8 @@ export default class BoardApi {
         if (!note) return;
         if (this.isRelationMode) {
             return attributes.removeOwnedRelationByName(note, this.statusAttribute);
-        } else {
-            return attributes.removeOwnedLabelByName(note, this.statusAttribute);
         }
+        return attributes.removeOwnedLabelByName(note, this.statusAttribute);
     }
 
     async moveWithinBoard(noteId: string, sourceBranchId: string, sourceIndex: number, targetIndex: number, sourceColumn: string, targetColumn: string) {

apps/client/src/widgets/collections/board/index.css

@@ -14,8 +14,7 @@
   height: 100%;
   display: flex;
   gap: 1em;
-  margin-inline: var(--content-margin-inline);
-  padding-block: 4px;
+  padding: 4px var(--content-margin-inline);
   align-items: flex-start;
   overflow-x: auto;
 }
@@ -42,7 +41,11 @@ body.mobile .board-view-container {
 body.mobile .board-view-container .board-column {
   width: 75vw;
   max-width: 300px;
-  scroll-snap-align: center;
+}
+
+body.mobile .board-view-container .board-column,
+body.mobile .board-view-container .board-add-column {
+    scroll-snap-align: center;
 }
 
 .board-view-container .board-column.drag-over {

apps/client/src/widgets/collections/calendar/api.ts

@@ -1,8 +1,8 @@
-import { AttributeRow, CreateChildrenResponse } from "@triliumnext/commons";
+import { AttributeRow } from "@triliumnext/commons";
 
 import FNote from "../../../entities/fnote";
 import { setAttribute, setLabel } from "../../../services/attributes";
-import server from "../../../services/server";
+import note_create from "../../../services/note_create";
 
 interface NewEventOpts {
     title: string;
@@ -51,11 +51,13 @@ export async function newEvent(parentNote: FNote, { title, startDate, endDate, s
     }
 
     // Create the note.
-    await server.post<CreateChildrenResponse>(`notes/${parentNote.noteId}/children?target=into`, {
+    await note_create.createNote(parentNote.noteId, {
         title,
+        isProtected: parentNote.isProtected,
         content: "",
         type: "text",
-        attributes
+        attributes,
+        activate: false
     }, componentId);
 }
 

apps/client/src/widgets/collections/geomap/api.ts

@@ -1,10 +1,11 @@
 import type { LatLng, LeafletMouseEvent } from "leaflet";
-import { LOCATION_ATTRIBUTE } from ".";
+
+import FNote from "../../../entities/fnote";
 import attributes from "../../../services/attributes";
 import { prompt } from "../../../services/dialog";
-import server from "../../../services/server";
 import { t } from "../../../services/i18n";
-import { CreateChildrenResponse } from "@triliumnext/commons";
+import note_create from "../../../services/note_create";
+import { LOCATION_ATTRIBUTE } from ".";
 
 const CHILD_NOTE_ICON = "bx bx-pin";
 
@@ -13,16 +14,20 @@ export async function moveMarker(noteId: string, latLng: LatLng | null) {
     await attributes.setLabel(noteId, LOCATION_ATTRIBUTE, value);
 }
 
-export async function createNewNote(noteId: string, e: LeafletMouseEvent) {
+export async function createNewNote(parentNote: FNote, e: LeafletMouseEvent) {
     const title = await prompt({ message: t("relation_map.enter_title_of_new_note"), defaultValue: t("relation_map.default_new_note_title") });
 
     if (title?.trim()) {
-        const { note } = await server.post<CreateChildrenResponse>(`notes/${noteId}/children?target=into`, {
+        await note_create.createNote(parentNote.noteId, {
             title,
             content: "",
-            type: "text"
+            type: "text",
+            activate: false,
+            isProtected: parentNote.isProtected,
+            attributes: [
+                { type: "label", name: LOCATION_ATTRIBUTE, value: [e.latlng.lat, e.latlng.lng].join(",") },
+                { type: "label", name: "iconClass", value: CHILD_NOTE_ICON }
+            ]
         });
-        attributes.setLabel(note.noteId, "iconClass", CHILD_NOTE_ICON);
-        moveMarker(note.noteId, e.latlng);
     }
 }

apps/client/src/widgets/collections/geomap/context_menu.ts

@@ -1,12 +1,14 @@
 import type { LatLng, LeafletMouseEvent } from "leaflet";
+
 import appContext, { type CommandMappings } from "../../../components/app_context.js";
+import FNote from "../../../entities/fnote.js";
 import contextMenu, { type MenuItem } from "../../../menus/context_menu.js";
-import linkContextMenu from "../../../menus/link_context_menu.js";
 import NoteColorPicker from "../../../menus/custom-items/NoteColorPicker.jsx";
-import { t } from "../../../services/i18n.js";
-import { createNewNote } from "./api.js";
+import linkContextMenu from "../../../menus/link_context_menu.js";
 import { copyTextWithToast } from "../../../services/clipboard_ext.js";
+import { t } from "../../../services/i18n.js";
 import link from "../../../services/link.js";
+import { createNewNote } from "./api.js";
 
 export default function openContextMenu(noteId: string, e: LeafletMouseEvent, isEditable: boolean) {
     let items: MenuItem<keyof CommandMappings>[] = [
@@ -44,7 +46,7 @@ export default function openContextMenu(noteId: string, e: LeafletMouseEvent, is
     });
 }
 
-export function openMapContextMenu(noteId: string, e: LeafletMouseEvent, isEditable: boolean) {
+export function openMapContextMenu(note: FNote, e: LeafletMouseEvent, isEditable: boolean) {
     let items: MenuItem<keyof CommandMappings>[] = [
         ...buildGeoLocationItem(e)
     ];
@@ -55,10 +57,10 @@ export function openMapContextMenu(noteId: string, e: LeafletMouseEvent, isEdita
             { kind: "separator" },
             {
                 title: t("geo-map-context.add-note"),
-                handler: () => createNewNote(noteId, e),
+                handler: () => createNewNote(note, e),
                 uiIcon: "bx bx-plus"
             }
-        ]
+        ];
     }
 
     contextMenu.show({

apps/client/src/widgets/collections/geomap/index.tsx

@@ -93,14 +93,14 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
     const onClick = useCallback(async (e: LeafletMouseEvent) => {
         if (state === State.NewNote) {
             toast.closePersistent("geo-new-note");
-            await createNewNote(note.noteId, e);
+            await createNewNote(note, e);
             setState(State.Normal);
         }
-    }, [ state ]);
+    }, [ note, state ]);
 
     const onContextMenu = useCallback((e: LeafletMouseEvent) => {
-        openMapContextMenu(note.noteId, e, !isReadOnly);
-    }, [ note.noteId, isReadOnly ]);
+        openMapContextMenu(note, e, !isReadOnly);
+    }, [ note, isReadOnly ]);
 
     // Dragging
     const containerRef = useRef<HTMLDivElement>(null);

apps/client/src/widgets/collections/presentation/index.tsx

@@ -2,8 +2,8 @@ import "./index.css";
 
 import { RefObject } from "preact";
 import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
-import Reveal from "reveal.js";
-import slideBaseStylesheet from "reveal.js/dist/reveal.css?raw";
+import Reveal, { RevealApi } from "reveal.js";
+import slideBaseStylesheet from "reveal.js/reveal.css?raw";
 
 import { openInCurrentNoteContext } from "../../../components/note_context";
 import FNote from "../../../entities/fnote";
@@ -20,7 +20,7 @@ import { DEFAULT_THEME, loadPresentationTheme } from "./themes";
 export default function PresentationView({ note, noteIds, media, onReady, onProgressChanged }: ViewModeProps<{}>) {
     const [ presentation, setPresentation ] = useState<PresentationModel>();
     const containerRef = useRef<HTMLDivElement>(null);
-    const [ api, setApi ] = useState<Reveal.Api>();
+    const [ api, setApi ] = useState<RevealApi>();
     const stylesheets = usePresentationStylesheets(note, media);
 
     function refresh() {
@@ -98,7 +98,7 @@ function usePresentationStylesheets(note: FNote, media: ViewModeMedia) {
     return stylesheets;
 }
 
-function ButtonOverlay({ containerRef, api }: { containerRef: RefObject<HTMLDivElement>, api: Reveal.Api | undefined }) {
+function ButtonOverlay({ containerRef, api }: { containerRef: RefObject<HTMLDivElement>, api: RevealApi | undefined }) {
     const [ isOverviewActive, setIsOverviewActive ] = useState(false);
     useEffect(() => {
         if (!api) return;
@@ -144,9 +144,9 @@ function ButtonOverlay({ containerRef, api }: { containerRef: RefObject<HTMLDivE
     );
 }
 
-function Presentation({ presentation, setApi } : { presentation: PresentationModel, setApi: (api: Reveal.Api | undefined) => void }) {
+function Presentation({ presentation, setApi } : { presentation: PresentationModel, setApi: (api: RevealApi | undefined) => void }) {
     const containerRef = useRef<HTMLDivElement>(null);
-    const [revealApi, setRevealApi] = useState<Reveal.Api>();
+    const [revealApi, setRevealApi] = useState<RevealApi>();
 
     useEffect(() => {
         if (!containerRef.current) return;
@@ -222,7 +222,7 @@ function getNoteIdFromSlide(slide: HTMLElement | undefined) {
     return slide.dataset.noteId;
 }
 
-function rewireLinks(container: HTMLElement, api: Reveal.Api) {
+function rewireLinks(container: HTMLElement, api: RevealApi) {
     const links = container.querySelectorAll<HTMLLinkElement>("a.reference-link");
     for (const link of links) {
         link.addEventListener("click", () => {

apps/client/src/widgets/collections/presentation/themes.ts

@@ -3,49 +3,49 @@ export const DEFAULT_THEME = "white";
 const themes = {
     black: {
         name: "Black",
-        loadTheme: () => import("reveal.js/dist/theme/black.css?raw")
+        loadTheme: () => import("reveal.js/theme/black.css?raw")
     },
     white: {
         name: "White",
-        loadTheme: () => import("reveal.js/dist/theme/white.css?raw")
+        loadTheme: () => import("reveal.js/theme/white.css?raw")
     },
     beige: {
         name: "Beige",
-        loadTheme: () => import("reveal.js/dist/theme/beige.css?raw")
+        loadTheme: () => import("reveal.js/theme/beige.css?raw")
     },
     serif: {
         name: "Serif",
-        loadTheme: () => import("reveal.js/dist/theme/serif.css?raw")
+        loadTheme: () => import("reveal.js/theme/serif.css?raw")
     },
     simple: {
         name: "Simple",
-        loadTheme: () => import("reveal.js/dist/theme/simple.css?raw")
+        loadTheme: () => import("reveal.js/theme/simple.css?raw")
     },
     solarized: {
         name: "Solarized",
-        loadTheme: () => import("reveal.js/dist/theme/solarized.css?raw")
+        loadTheme: () => import("reveal.js/theme/solarized.css?raw")
     },
     moon: {
         name: "Moon",
-        loadTheme: () => import("reveal.js/dist/theme/moon.css?raw")
+        loadTheme: () => import("reveal.js/theme/moon.css?raw")
     },
     dracula: {
         name: "Dracula",
-        loadTheme: () => import("reveal.js/dist/theme/dracula.css?raw")
+        loadTheme: () => import("reveal.js/theme/dracula.css?raw")
     },
     sky: {
         name: "Sky",
-        loadTheme: () => import("reveal.js/dist/theme/sky.css?raw")
+        loadTheme: () => import("reveal.js/theme/sky.css?raw")
     },
     blood: {
         name: "Blood",
-        loadTheme: () => import("reveal.js/dist/theme/blood.css?raw")
+        loadTheme: () => import("reveal.js/theme/blood.css?raw")
     }
 } as const;
 
 export function getPresentationThemes() {
     return Object.entries(themes).map(([ id, theme ]) => ({
-        id: id,
+        id,
         name: theme.name
     }));
 }

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

@@ -19,6 +19,13 @@ const labelTypeMappings: Record<ColumnType, Partial<ColumnDefinition>> = {
     text: {
         editor: "input"
     },
+    textarea: {
+        editor: "textarea",
+        formatter: "textarea",
+        editorParams: {
+            shiftEnterSubmit: true
+        }
+    },
     boolean: {
         formatter: "tickCross",
         editor: "tickCross"

apps/client/src/widgets/collections/table/index.css

@@ -75,3 +75,9 @@
     font-size: 1.5em;
     transform: translateY(-50%);
 }
+
+.tabulator .tabulator-editable {
+    textarea {
+        padding: 7px !important;
+    }
+}

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

@@ -18,14 +18,14 @@ import useRowTableEditing from "./row_editing";
 import { TableData } from "./rows";
 import Tabulator from "./tabulator";
 
-export default function TableView({ note, noteIds, notePath, viewConfig, saveConfig }: ViewModeProps<TableConfig>) {
+export default function TableView({ note, noteIds, viewConfig, saveConfig }: ViewModeProps<TableConfig>) {
     const tabulatorRef = useRef<VanillaTabulator>(null);
     const parentComponent = useContext(ParentComponent);
 
     const [ attributeDetailWidgetEl, attributeDetailWidget ] = useLegacyWidget(() => new AttributeDetailWidget().contentSized());
     const contextMenuEvents = useContextMenu(note, parentComponent, tabulatorRef);
     const persistenceProps = usePersistence(viewConfig, saveConfig);
-    const rowEditingEvents = useRowTableEditing(tabulatorRef, attributeDetailWidget, notePath);
+    const rowEditingEvents = useRowTableEditing(tabulatorRef, attributeDetailWidget, note);
     const { newAttributePosition, resetNewAttributePosition } = useColTableEditing(tabulatorRef, attributeDetailWidget, note);
     const { columnDefs, rowData, movableRows, hasChildren } = useData(note, noteIds, viewConfig, newAttributePosition, resetNewAttributePosition);
     const dataTreeProps = useMemo<Options>(() => {

apps/client/src/widgets/collections/table/row_editing.ts

@@ -1,24 +1,27 @@
-import { EventCallBackMethods, RowComponent, Tabulator } from "tabulator-tables";
-import { CommandListenerData } from "../../../components/app_context";
-import note_create, { CreateNoteOpts } from "../../../services/note_create";
-import { useLegacyImperativeHandlers } from "../../react/hooks";
 import { RefObject } from "preact";
-import { setAttribute, setLabel } from "../../../services/attributes";
-import froca from "../../../services/froca";
-import server from "../../../services/server";
-import branches from "../../../services/branches";
-import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
+import { EventCallBackMethods, RowComponent, Tabulator } from "tabulator-tables";
 
-export default function useRowTableEditing(api: RefObject<Tabulator>, attributeDetailWidget: AttributeDetailWidget, parentNotePath: string): Partial<EventCallBackMethods> {
+import { CommandListenerData } from "../../../components/app_context";
+import FNote from "../../../entities/fnote";
+import { setAttribute, setLabel } from "../../../services/attributes";
+import branches from "../../../services/branches";
+import froca from "../../../services/froca";
+import note_create, { CreateNoteOpts } from "../../../services/note_create";
+import server from "../../../services/server";
+import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
+import { useLegacyImperativeHandlers } from "../../react/hooks";
+
+export default function useRowTableEditing(api: RefObject<Tabulator>, attributeDetailWidget: AttributeDetailWidget, parentNote: FNote): Partial<EventCallBackMethods> {
     // Adding new rows
     useLegacyImperativeHandlers({
         addNewRowCommand({ customOpts, parentNotePath: customNotePath }: CommandListenerData<"addNewRow">) {
-            const notePath = customNotePath ?? parentNotePath;
+            const notePath = customNotePath ?? parentNote.noteId;
             if (notePath) {
                 const opts: CreateNoteOpts = {
                     activate: false,
+                    isProtected: parentNote.isProtected,
                     ...customOpts
-                }
+                };
                 note_create.createNote(notePath, opts).then(({ branch }) => {
                     if (branch) {
                         setTimeout(() => {
@@ -26,7 +29,7 @@ export default function useRowTableEditing(api: RefObject<Tabulator>, attributeD
                             focusOnBranch(api.current, branch?.branchId);
                         }, 100);
                     }
-                })
+                });
             }
         }
     });
@@ -91,14 +94,14 @@ function focusOnBranch(api: Tabulator, branchId: string) {
 }
 
 function findRowDataById(rows: RowComponent[], branchId: string): RowComponent | null {
-    for (let row of rows) {
+    for (const row of rows) {
         const item = row.getIndex() as string;
 
         if (item === branchId) {
             return row;
         }
 
-        let found = findRowDataById(row.getTreeChildren(), branchId);
+        const found = findRowDataById(row.getTreeChildren(), branchId);
         if (found) return found;
     }
     return null;

apps/client/src/widgets/containers/ScrollingContainer.tsx

@@ -1,9 +0,0 @@
-import { ComponentChildren } from "preact";
-
-export default function ScrollingContainer({ children }: { children: ComponentChildren }) {
-    return (
-        <div className="scrolling-container">
-            {children}
-        </div>
-    );
-}

apps/client/src/widgets/containers/scrolling_container.css

@@ -4,7 +4,6 @@
     overflow: auto;
     scroll-behavior: smooth;
     position: relative;
-    flex-grow: 1;
 
     > .note-detail > .note-detail-editable-text > .note-detail-editable-text-editor,
     > .note-list-widget:not(.full-height) .note-list-wrapper {

apps/client/src/widgets/containers/scrolling_container.ts

@@ -10,6 +10,8 @@ export default class ScrollingContainer extends Container<BasicWidget> {
 
     constructor() {
         super();
+
+        this.class("scrolling-container");
     }
 
     setNoteContextEvent({ noteContext }: EventData<"setNoteContext">) {

apps/client/src/widgets/containers/split_note_container.ts

@@ -1,12 +1,9 @@
-import { VNode } from "preact";
-
 import appContext, { type CommandData, type CommandListenerData, type EventData, type EventNames, type NoteSwitchedContext } from "../../components/app_context.js";
 import Component from "../../components/component.js";
 import NoteContext from "../../components/note_context.js";
 import splitService from "../../services/resizer.js";
 import { isMobile } from "../../services/utils.js";
 import type BasicWidget from "../basic_widget.js";
-import { wrapReactWidgets } from "../basic_widget.js";
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 import FlexContainer from "./flex_container.js";
 
@@ -15,7 +12,7 @@ interface SplitNoteWidget extends BasicWidget {
     ntxId?: string;
 }
 
-type WidgetFactory = () => (SplitNoteWidget | VNode);
+type WidgetFactory = () => SplitNoteWidget;
 
 export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
 
@@ -34,7 +31,7 @@ export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
     }
 
     async newNoteContextCreatedEvent({ noteContext }: EventData<"newNoteContextCreated">) {
-        const widget = wrapReactWidgets([ this.widgetFactory() ])[0];
+        const widget = this.widgetFactory();
 
         const $renderedWidget = widget.render();
 

apps/client/src/widgets/dialogs/revisions.tsx

@@ -272,7 +272,8 @@ function RevisionContent({ noteContent, revisionItem, fullRevision, showDiff }:
             return <FilePreview fullRevision={fullRevision} revisionItem={revisionItem} />;
         case "canvas":
         case "mindMap":
-        case "mermaid": {
+        case "mermaid":
+        case "spreadsheet": {
             const encodedTitle = encodeURIComponent(revisionItem.title);
             return <img
                 src={`api/revisions/${revisionItem.revisionId}/image/${encodedTitle}?${Math.random()}`}

apps/client/src/widgets/layout/NoteBadges.css

@@ -36,6 +36,10 @@
                 animation: fadeOut 250ms ease-in 5s forwards;
                 pointer-events: none;
             }
+
+            body#trilium-app.motion-disabled &.saved {
+                animation: fadeOut 0s 5s forwards !important;
+            }
         }
         &.active-content-badge { --color: var(--badge-active-content-background-color); }
         &.active-content-badge.disabled {

apps/client/src/widgets/layout/NoteContentSwitcher.css

@@ -0,0 +1,19 @@
+.note-content-switcher {
+    --badge-radius: 12px;
+    position: relative;
+    display: flex;
+    min-height: 35px;
+    gap: 5px;
+    padding: 5px;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+    font-size: 0.9rem;
+    align-items: center;
+
+    .ext-badge {
+        --color: var(--input-background-color);
+        color: var(--main-text-color);
+        font-size: 1em;
+        flex-shrink: 0;
+    }
+}

apps/client/src/widgets/layout/NoteContentSwitcher.tsx

@@ -0,0 +1,39 @@
+import "./NoteContentSwitcher.css";
+
+import FNote from "../../entities/fnote";
+import server from "../../services/server";
+import { Badge } from "../react/Badge";
+import { useNoteSavedData } from "../react/hooks";
+
+export interface NoteContentTemplate {
+    name: string;
+    content: string;
+}
+
+interface NoteContentSwitcherProps {
+    text: string;
+    note: FNote;
+    templates: NoteContentTemplate[];
+}
+
+export default function NoteContentSwitcher({ text, note, templates }: NoteContentSwitcherProps) {
+    const blob = useNoteSavedData(note?.noteId);
+
+    return (blob?.trim().length === 0 &&
+        <div className="note-content-switcher">
+            {text}{" "}
+
+            {templates.map(sample => (
+                <Badge
+                    key={sample.name}
+                    text={sample.name}
+                    onClick={async () => {
+                        await server.put(`notes/${note.noteId}/data`, {
+                            content: sample.content
+                        });
+                    }}
+                />
+            ))}
+        </div>
+    );
+}

apps/client/src/widgets/note_types.tsx

@@ -84,7 +84,7 @@ export const TYPE_MAPPINGS: Record<ExtendedNoteType, NoteTypeMapping> = {
         printable: true
     },
     mermaid: {
-        view: () => import("./type_widgets/Mermaid"),
+        view: () => import("./type_widgets/mermaid/Mermaid"),
         className: "note-detail-mermaid",
         printable: true,
         isFullHeight: true
@@ -143,7 +143,7 @@ export const TYPE_MAPPINGS: Record<ExtendedNoteType, NoteTypeMapping> = {
         isFullHeight: true
     },
     spreadsheet: {
-        view: () => import("./type_widgets/Spreadsheet"),
+        view: () => import("./type_widgets/spreadsheet/Spreadsheet"),
         className: "note-detail-spreadsheet",
         printable: true,
         isFullHeight: true

apps/client/src/widgets/note_wrapper.ts

@@ -11,6 +11,12 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
 
     private noteContext?: NoteContext;
 
+    constructor() {
+        super("column");
+
+        this.css("flex-grow", "1").collapsible();
+    }
+
     setNoteContextEvent({ noteContext }: EventData<"setNoteContext">) {
         this.noteContext = noteContext;
 
@@ -47,6 +53,8 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
             this.$widget.addClass("active");
         }
 
+        this.$widget.addClass("component note-split");
+
         const note = this.noteContext?.note;
         if (!note) {
             this.$widget.addClass("bgfx empty-note");
@@ -75,7 +83,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
             return true;
         }
 
-        if (note.type === "file" && (note.mime === "application/pdf" || note.mime.startsWith("video/"))) {
+        if (note.type === "file" && (note.mime === "application/pdf" || note.mime.startsWith("video/") || note.mime.startsWith("audio/"))) {
             return true;
         }
 
@@ -100,7 +108,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
             return true;
         }
 
-        if (note.type === "file" && MIME_TYPES_WITH_BACKGROUND_EFFECTS.includes(note.mime)) {
+        if (note.type === "file" && (MIME_TYPES_WITH_BACKGROUND_EFFECTS.includes(note.mime) || note.mime.startsWith("audio/"))) {
             return true;
         }
 

apps/client/src/widgets/react/NoItems.css

@@ -8,6 +8,7 @@
     color: var(--muted-text-color);
     height: 100%;
     text-align: center;
+    white-space: pre-line;
 
     .tn-icon {
         font-size: 4em;

apps/client/src/widgets/react/hooks.tsx

@@ -98,6 +98,7 @@ export interface SavedData {
         mime: string;
         content: string;
         position: number;
+        encoding?: "base64";
     }[];
 }
 

apps/client/src/widgets/ribbon/NoteActions.tsx

@@ -75,7 +75,7 @@ export function NoteContextMenu({ note, noteContext, itemsAtStart, itemsNearNote
     const noteType = useNoteProperty(note, "type") ?? "";
     const [viewType] = useNoteLabel(note, "viewType");
     const canBeConvertedToAttachment = note?.isEligibleForConversionToAttachment();
-    const isSearchable = ["text", "code", "book", "mindMap", "doc"].includes(noteType);
+    const isSearchable = ["text", "code", "book", "mindMap", "doc", "spreadsheet"].includes(noteType);
     const isInOptionsOrHelp = note?.noteId.startsWith("_options") || note?.noteId.startsWith("_help");
     const isExportableToImage = ["mermaid", "mindMap"].includes(noteType);
     const isContentAvailable = note.isContentAvailable();

apps/client/src/widgets/ribbon/NoteActionsCustom.tsx

@@ -189,7 +189,7 @@ function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: N
 export function ToggleReadOnlyButton({ note, isDefaultViewMode }: NoteActionsCustomInnerProps) {
     const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
     const isSavedSqlite = note.isTriliumSqlite() && !note.isHiddenCompletely();
-    const isEnabled = ([ "mermaid", "mindMap", "canvas" ].includes(note.type) || isSavedSqlite)
+    const isEnabled = ([ "mermaid", "mindMap", "canvas", "spreadsheet" ].includes(note.type) || isSavedSqlite)
             && note.isContentAvailable() && isDefaultViewMode;
 
     return isEnabled && <NoteAction

apps/client/src/widgets/sidebar/TableOfContents.tsx

@@ -1,6 +1,6 @@
 import "./TableOfContents.css";
 
-import { CKTextEditor, ModelElement } from "@triliumnext/ckeditor5";
+import { attributeChangeAffectsHeading, CKTextEditor, ModelElement } from "@triliumnext/ckeditor5";
 import clsx from "clsx";
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 
@@ -170,11 +170,14 @@ function EditableTextTableOfContents() {
 
             const affectsHeadings = changes.some( change => {
                 return (
-                    change.type === 'insert' || change.type === 'remove' || (change.type === 'attribute' && change.attributeKey === 'headingLevel')
+                    change.type === 'insert' || change.type === 'remove' ||
+                    (change.type === 'attribute' && attributeChangeAffectsHeading(change, textEditor))
                 );
             });
             if (affectsHeadings) {
-                setHeadings(extractTocFromTextEditor(textEditor));
+                requestAnimationFrame(() => {
+                    setHeadings(extractTocFromTextEditor(textEditor));
+                });
             }
         };
 

apps/client/src/widgets/type_widgets/File.css

@@ -24,8 +24,7 @@
     margin: 10px;
 }
 
-.note-detail-file > .pdf-preview,
-.note-detail-file > .video-preview {
+.note-detail-file > .pdf-preview {
     width: 100%;
     height: 100%;
     flex-grow: 100;
@@ -38,4 +37,4 @@
     right: 15px;
     width: calc(100% - 30px);
     transform: translateY(-50%);
-}
+}

apps/client/src/widgets/type_widgets/File.tsx

@@ -1,11 +1,11 @@
 import "./File.css";
 
-import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
-import { getUrlForDownload } from "../../services/open";
 import Alert from "../react/Alert";
 import { useNoteBlob } from "../react/hooks";
+import AudioPreview from "./file/Audio";
 import PdfPreview from "./file/Pdf";
+import VideoPreview from "./file/Video";
 import { TypeWidgetProps } from "./type_widget";
 
 const TEXT_MAX_NUM_CHARS = 5000;
@@ -42,27 +42,6 @@ function TextPreview({ content }: { content: string }) {
     );
 }
 
-function VideoPreview({ note }: { note: FNote }) {
-    return (
-        <video
-            class="video-preview"
-            src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
-            datatype={note?.mime}
-            controls
-        />
-    );
-}
-
-function AudioPreview({ note }: { note: FNote }) {
-    return (
-        <audio
-            class="audio-preview"
-            src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
-            controls
-        />
-    );
-}
-
 function NoPreview() {
     return (
         <Alert className="file-preview-not-available" type="info">

apps/client/src/widgets/type_widgets/MindMap.tsx

@@ -6,7 +6,7 @@ import "./MindMap.css";
 import nodeMenu from "@mind-elixir/node-menu";
 import { DISPLAYABLE_LOCALE_IDS } from "@triliumnext/commons";
 import { snapdom } from "@zumer/snapdom";
-import { default as VanillaMindElixir,MindElixirData, MindElixirInstance, Operation, Options, THEME as LIGHT_THEME, DARK_THEME } from "mind-elixir";
+import { DARK_THEME, default as VanillaMindElixir, MindElixirData, MindElixirInstance, Operation, Options, THEME as LIGHT_THEME } from "mind-elixir";
 import { HTMLAttributes, RefObject } from "preact";
 import { useCallback, useEffect, useRef } from "preact/hooks";
 
@@ -154,6 +154,7 @@ function MindElixir({ containerRef: externalContainerRef, containerProps, apiRef
     const apiRef = useRef<MindElixirInstance>(null);
     const [ locale ] = useTriliumOption("locale");
     const colorScheme = useColorScheme();
+    const defaultColorScheme = useRef(colorScheme);
 
     function reinitialize() {
         if (!containerRef.current) return;
@@ -162,7 +163,7 @@ function MindElixir({ containerRef: externalContainerRef, containerProps, apiRef
             el: containerRef.current,
             locale: LOCALE_MAPPINGS[locale as DISPLAYABLE_LOCALE_IDS] ?? undefined,
             editable,
-            theme: LIGHT_THEME
+            theme: defaultColorScheme.current === "dark" ? DARK_THEME : LIGHT_THEME
         });
 
         if (editable) {
@@ -188,7 +189,11 @@ function MindElixir({ containerRef: externalContainerRef, containerProps, apiRef
         if (!apiRef.current) return;
         const newTheme = colorScheme === "dark" ? DARK_THEME : LIGHT_THEME;
         if (apiRef.current.theme === newTheme) return; // Avoid unnecessary theme changes, which can be expensive to render.
-        apiRef.current.changeTheme(newTheme);
+        try {
+            apiRef.current.changeTheme(newTheme);
+        } catch (e) {
+            console.warn("Failed to change mind map theme:", e);
+        }
     }, [ colorScheme ]);
 
     useEffect(() => {

apps/client/src/widgets/type_widgets/Spreadsheet.tsx

@@ -1,125 +0,0 @@
-import "@univerjs/preset-sheets-core/lib/index.css";
-import "./Spreadsheet.css";
-
-import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core';
-import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US';
-import { CommandType, createUniver, FUniver, IDisposable, IWorkbookData, LocaleType, mergeLocales } from '@univerjs/presets';
-import { MutableRef, useEffect, useRef } from "preact/hooks";
-
-import NoteContext from "../../components/note_context";
-import FNote from "../../entities/fnote";
-import { useColorScheme, useEditorSpacedUpdate } from "../react/hooks";
-import { TypeWidgetProps } from "./type_widget";
-
-interface PersistedData {
-    version: number;
-    workbook: Parameters<FUniver["createWorkbook"]>[0];
-}
-
-export default function Spreadsheet({ note, noteContext }: TypeWidgetProps) {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const apiRef = useRef<FUniver>();
-
-    useInitializeSpreadsheet(containerRef, apiRef);
-    useDarkMode(apiRef);
-    usePersistence(note, noteContext, apiRef);
-
-    return <div ref={containerRef} className="spreadsheet" />;
-}
-
-function useInitializeSpreadsheet(containerRef: MutableRef<HTMLDivElement | null>, apiRef: MutableRef<FUniver | undefined>) {
-    useEffect(() => {
-        if (!containerRef.current) return;
-
-        const { univerAPI } = createUniver({
-            locale: LocaleType.EN_US,
-            locales: {
-                [LocaleType.EN_US]: mergeLocales(
-                    UniverPresetSheetsCoreEnUS
-                ),
-            },
-            presets: [
-                UniverSheetsCorePreset({
-                    container: containerRef.current,
-                })
-            ]
-        });
-        apiRef.current = univerAPI;
-        return () => univerAPI.dispose();
-    }, [ apiRef, containerRef ]);
-}
-
-function useDarkMode(apiRef: MutableRef<FUniver | undefined>) {
-    const colorScheme = useColorScheme();
-
-    // React to dark mode.
-    useEffect(() => {
-        const univerAPI = apiRef.current;
-        if (!univerAPI) return;
-        univerAPI.toggleDarkMode(colorScheme === 'dark');
-    }, [ colorScheme, apiRef ]);
-}
-
-function usePersistence(note: FNote, noteContext: NoteContext | null | undefined, apiRef: MutableRef<FUniver | undefined>) {
-    const changeListener = useRef<IDisposable>(null);
-
-    const spacedUpdate = useEditorSpacedUpdate({
-        noteType: "spreadsheet",
-        note,
-        noteContext,
-        getData() {
-            const univerAPI = apiRef.current;
-            if (!univerAPI) return undefined;
-            const workbook = univerAPI.getActiveWorkbook();
-            if (!workbook) return undefined;
-            const content = {
-                version: 1,
-                workbook: workbook.save()
-            };
-            return {
-                content: JSON.stringify(content)
-            };
-        },
-        onContentChange(newContent) {
-            const univerAPI = apiRef.current;
-            if (!univerAPI) return undefined;
-
-            // Dispose the existing workbook.
-            const existingWorkbook = univerAPI.getActiveWorkbook();
-            if (existingWorkbook) {
-                univerAPI.disposeUnit(existingWorkbook.getId());
-            }
-
-            let workbookData: Partial<IWorkbookData> = {};
-            if (newContent) {
-                try {
-                    const parsedContent = JSON.parse(newContent) as unknown;
-                    if (parsedContent && typeof parsedContent === "object" && "workbook" in parsedContent) {
-                        const persistedData = parsedContent as PersistedData;
-                        workbookData = persistedData.workbook;
-                    }
-                } catch (e) {
-                    console.error("Failed to parse spreadsheet content", e);
-                }
-            }
-
-            const workbook = univerAPI.createWorkbook(workbookData);
-            if (changeListener.current) {
-                changeListener.current.dispose();
-            }
-            changeListener.current = workbook.onCommandExecuted(command => {
-                if (command.type !== CommandType.MUTATION) return;
-                spacedUpdate.scheduleUpdate();
-            });
-        },
-    });
-
-    useEffect(() => {
-        return () => {
-            if (changeListener.current) {
-                changeListener.current.dispose();
-                changeListener.current = null;
-            }
-        };
-    }, []);
-}

apps/client/src/widgets/type_widgets/code/Code.tsx

@@ -30,6 +30,7 @@ export interface EditableCodeProps extends TypeWidgetProps, Omit<CodeEditorProps
     onContentChanged?: (content: string) => void;
     /** Invoked after the content of the note has been uploaded to the server, using a spaced update. */
     dataSaved?: () => void;
+    placeholder?: string;
 }
 
 export function ReadOnlyCode({ note, viewScope, ntxId, parentComponent }: TypeWidgetProps) {
@@ -74,7 +75,7 @@ function formatViewSource(note: FNote, content: string) {
     return content;
 }
 
-export function EditableCode({ note, ntxId, noteContext, debounceUpdate, parentComponent, updateInterval, noteType = "code", onContentChanged, dataSaved, ...editorProps }: EditableCodeProps) {
+export function EditableCode({ note, ntxId, noteContext, debounceUpdate, parentComponent, updateInterval, noteType = "code", onContentChanged, dataSaved, placeholder, ...editorProps }: EditableCodeProps) {
     const editorRef = useRef<VanillaCodeMirror>(null);
     const containerRef = useRef<HTMLPreElement>(null);
     const [ vimKeymapEnabled ] = useTriliumOptionBool("vimKeymapEnabled");
@@ -115,7 +116,7 @@ export function EditableCode({ note, ntxId, noteContext, debounceUpdate, parentC
                 editorRef={editorRef} containerRef={containerRef}
                 mime={mime ?? "text/plain"}
                 className="note-detail-code-editor"
-                placeholder={t("editable_code.placeholder")}
+                placeholder={placeholder ?? t("editable_code.placeholder")}
                 vimKeybindings={vimKeymapEnabled}
                 tabIndex={300}
                 onContentChanged={() => {

apps/client/src/widgets/type_widgets/file/Audio.tsx

@@ -0,0 +1,112 @@
+import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";
+
+import FNote from "../../../entities/fnote";
+import { t } from "../../../services/i18n";
+import { getUrlForDownload } from "../../../services/open";
+import Icon from "../../react/Icon";
+import NoItems from "../../react/NoItems";
+import { LoopButton, PlaybackSpeed, PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
+
+export default function AudioPreview({ note }: { note: FNote }) {
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const audioRef = useRef<HTMLAudioElement>(null);
+    const [playing, setPlaying] = useState(false);
+    const [error, setError] = useState(false);
+    const togglePlayback = useCallback(() => {
+        const audio = audioRef.current;
+        if (!audio) return;
+        if (audio.paused) {
+            audio.play();
+        } else {
+            audio.pause();
+        }
+    }, []);
+    const onKeyDown = useKeyboardShortcuts(audioRef, togglePlayback);
+
+    useEffect(() => setError(false), [note.noteId]);
+    const onError = useCallback(() => setError(true), []);
+
+    if (error) {
+        return <NoItems icon="bx bx-volume-mute" text={t("media.unsupported-format", { mime: note.mime.replace("/", "-") })} />;
+    }
+
+    return (
+        <div ref={wrapperRef} className="audio-preview-wrapper" onKeyDown={onKeyDown} tabIndex={0}>
+            <audio
+                class="audio-preview"
+                src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+                ref={audioRef}
+                onPlay={() => setPlaying(true)}
+                onPause={() => setPlaying(false)}
+                onError={onError}
+            />
+            <div className="audio-preview-icon-wrapper">
+                <Icon icon="bx bx-music" className="audio-preview-icon" />
+            </div>
+            <div className="media-preview-controls">
+                <SeekBar mediaRef={audioRef} />
+
+                <div class="media-buttons-row">
+                    <div className="left">
+                        <PlaybackSpeed mediaRef={audioRef} />
+                    </div>
+
+                    <div className="center">
+                        <div className="spacer" />
+                        <SkipButton mediaRef={audioRef} seconds={-10} icon="bx bx-rewind" text={t("media.back-10s")} />
+                        <PlayPauseButton playing={playing} togglePlayback={togglePlayback} />
+                        <SkipButton mediaRef={audioRef} seconds={30} icon="bx bx-fast-forward" text={t("media.forward-30s")} />
+                        <LoopButton mediaRef={audioRef} />
+                    </div>
+
+                    <div className="right">
+                        <VolumeControl mediaRef={audioRef} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function useKeyboardShortcuts(audioRef: MutableRef<HTMLAudioElement | null>, togglePlayback: () => void) {
+    return useCallback((e: KeyboardEvent) => {
+        const audio = audioRef.current;
+        if (!audio) return;
+
+        switch (e.key) {
+            case " ":
+                e.preventDefault();
+                togglePlayback();
+                break;
+            case "ArrowLeft":
+                e.preventDefault();
+                audio.currentTime = Math.max(0, audio.currentTime - (e.ctrlKey ? 60 : 10));
+                break;
+            case "ArrowRight":
+                e.preventDefault();
+                audio.currentTime = Math.min(audio.duration, audio.currentTime + (e.ctrlKey ? 60 : 10));
+                break;
+            case "m":
+            case "M":
+                e.preventDefault();
+                audio.muted = !audio.muted;
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                audio.volume = Math.min(1, audio.volume + 0.05);
+                break;
+            case "ArrowDown":
+                e.preventDefault();
+                audio.volume = Math.max(0, audio.volume - 0.05);
+                break;
+            case "Home":
+                e.preventDefault();
+                audio.currentTime = 0;
+                break;
+            case "End":
+                e.preventDefault();
+                audio.currentTime = audio.duration;
+                break;
+        }
+    }, [ audioRef, togglePlayback ]);
+}

apps/client/src/widgets/type_widgets/file/MediaPlayer.css

@@ -0,0 +1,98 @@
+.media-preview-controls {
+    padding: 1.25em;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+
+    .media-buttons-row {
+        display: flex;
+
+        > * {
+            flex: 1;
+            align-items: center;
+            gap: 0.5em;
+            display: flex;
+        }
+
+        .spacer {
+            width: var(--icon-button-size, 32px);
+            height: var(--icon-button-size, 32px);
+        }
+
+        .center {
+            justify-content: center;
+        }
+
+        .right {
+            display: flex;
+            justify-content: flex-end;
+        }
+
+        .play-button {
+            --icon-button-size: 48px;
+        }
+    }
+
+    .media-seekbar-row {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+
+        .media-time {
+            font-size: 0.85em;
+            font-variant-numeric: tabular-nums;
+            white-space: nowrap;
+        }
+
+        .media-trackbar {
+            flex: 1;
+            cursor: pointer;
+        }
+    }
+
+    .media-volume-row {
+        display: flex;
+        align-items: center;
+        gap: 0.25em;
+
+        .media-volume-slider {
+            width: 80px;
+            cursor: pointer;
+        }
+    }
+
+    .speed-dropdown {
+        position: relative;
+
+        .tn-icon {
+            transform: translateY(-10%);
+        }
+
+        .media-speed-label {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            transform: translateY(15%);
+            text-align: center;
+            font-size: 0.6rem;
+            font-variant-numeric: tabular-nums;
+        }
+    }
+}
+
+.audio-preview-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .audio-preview-icon-wrapper {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 8em;
+        opacity: 0.6;
+    }
+}

apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx

@@ -0,0 +1,220 @@
+import "./MediaPlayer.css";
+
+import { RefObject } from "preact";
+import { useEffect, useState } from "preact/hooks";
+
+import { t } from "../../../services/i18n";
+import ActionButton from "../../react/ActionButton";
+import Dropdown from "../../react/Dropdown";
+import Icon from "../../react/Icon";
+
+export function SeekBar({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement> }) {
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+
+    useEffect(() => {
+        const media = mediaRef.current;
+        if (!media) return;
+
+        const onTimeUpdate = () => setCurrentTime(media.currentTime);
+        const onDurationChange = () => setDuration(media.duration);
+
+        media.addEventListener("timeupdate", onTimeUpdate);
+        media.addEventListener("durationchange", onDurationChange);
+        return () => {
+            media.removeEventListener("timeupdate", onTimeUpdate);
+            media.removeEventListener("durationchange", onDurationChange);
+        };
+    }, [ mediaRef ]);
+
+    const onSeek = (e: Event) => {
+        const media = mediaRef.current;
+        if (!media) return;
+        media.currentTime = parseFloat((e.target as HTMLInputElement).value);
+    };
+
+    return (
+        <div class="media-seekbar-row">
+            <span class="media-time">{formatTime(currentTime)}</span>
+            <input
+                type="range"
+                class="media-trackbar"
+                min={0}
+                max={duration || 0}
+                step={0.1}
+                value={currentTime}
+                onInput={onSeek}
+            />
+            <span class="media-time">-{formatTime(Math.max(0, duration - currentTime))}</span>
+        </div>
+    );
+}
+
+function formatTime(seconds: number): string {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+
+export function PlayPauseButton({ playing, togglePlayback }: {    
+    playing: boolean,
+    togglePlayback: () => void
+}) {
+    return (
+        <ActionButton
+            className="play-button"
+            icon={playing ? "bx bx-pause" : "bx bx-play"}
+            text={playing ? t("media.pause") : t("media.play")}
+            onClick={togglePlayback}
+        />
+    );
+}
+
+export function VolumeControl({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement> }) {
+    const [volume, setVolume] = useState(() => mediaRef.current?.volume ?? 1);
+    const [muted, setMuted] = useState(() => mediaRef.current?.muted ?? false);
+
+    // Sync state when the media element changes volume externally.
+    useEffect(() => {
+        const media = mediaRef.current;
+        if (!media) return;
+
+        setVolume(media.volume);
+        setMuted(media.muted);
+
+        const onVolumeChange = () => {
+            setVolume(media.volume);
+            setMuted(media.muted);
+        };
+        media.addEventListener("volumechange", onVolumeChange);
+        return () => media.removeEventListener("volumechange", onVolumeChange);
+    }, [ mediaRef ]);
+
+    const onVolumeChange = (e: Event) => {
+        const media = mediaRef.current;
+        if (!media) return;
+        const val = parseFloat((e.target as HTMLInputElement).value);
+        media.volume = val;
+        setVolume(val);
+        if (val > 0 && media.muted) {
+            media.muted = false;
+            setMuted(false);
+        }
+    };
+
+    const toggleMute = () => {
+        const media = mediaRef.current;
+        if (!media) return;
+        media.muted = !media.muted;
+        setMuted(media.muted);
+    };
+
+    return (
+        <div class="media-volume-row">
+            <ActionButton
+                icon={muted || volume === 0 ? "bx bx-volume-mute" : volume < 0.5 ? "bx bx-volume-low" : "bx bx-volume-full"}
+                text={muted ? t("media.unmute") : t("media.mute")}
+                onClick={toggleMute}
+            />
+            <input
+                type="range"
+                class="media-volume-slider"
+                min={0}
+                max={1}
+                step={0.05}
+                value={muted ? 0 : volume}
+                onInput={onVolumeChange}
+            />
+        </div>
+    );
+}
+
+export function SkipButton({ mediaRef, seconds, icon, text }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>, seconds: number, icon: string, text: string }) {
+    const skip = () => {
+        const media = mediaRef.current;
+        if (!media) return;
+        media.currentTime = Math.max(0, Math.min(media.duration, media.currentTime + seconds));
+    };
+
+    return (
+        <ActionButton icon={icon} text={text} onClick={skip} />
+    );
+}
+
+export function LoopButton({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement> }) {
+    const [loop, setLoop] = useState(() => mediaRef.current?.loop ?? false);
+
+    useEffect(() => {
+        const media = mediaRef.current;
+        if (!media) return;
+        setLoop(media.loop);
+
+        const observer = new MutationObserver(() => setLoop(media.loop));
+        observer.observe(media, { attributes: true, attributeFilter: ["loop"] });
+        return () => observer.disconnect();
+    }, [ mediaRef ]);
+
+    const toggle = () => {
+        const media = mediaRef.current;
+        if (!media) return;
+        media.loop = !media.loop;
+        setLoop(media.loop);
+    };
+
+    return (
+        <ActionButton
+            className={loop ? "active" : ""}
+            icon="bx bx-repeat"
+            text={loop ? t("media.disable-loop") : t("media.loop")}
+            onClick={toggle}
+        />
+    );
+}
+
+const PLAYBACK_SPEEDS = [0.5, 1, 1.25, 1.5, 2];
+
+export function PlaybackSpeed({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement> }) {
+    const [speed, setSpeed] = useState(() => mediaRef.current?.playbackRate ?? 1);
+
+    useEffect(() => {
+        const media = mediaRef.current;
+        if (!media) return;
+
+        setSpeed(media.playbackRate);
+
+        const onRateChange = () => setSpeed(media.playbackRate);
+        media.addEventListener("ratechange", onRateChange);
+        return () => media.removeEventListener("ratechange", onRateChange);
+    }, [ mediaRef ]);
+
+    const selectSpeed = (rate: number) => {
+        const media = mediaRef.current;
+        if (!media) return;
+        media.playbackRate = rate;
+        setSpeed(rate);
+    };
+
+    return (
+        <Dropdown
+            iconAction
+            hideToggleArrow
+            buttonClassName="speed-dropdown"
+            text={<>
+                <Icon icon="bx bx-tachometer" />
+                <span class="media-speed-label">{speed}x</span>
+            </>}
+            title={t("media.playback-speed")}
+        >
+            {PLAYBACK_SPEEDS.map((rate) => (
+                <li key={rate}>
+                    <button
+                        class={`dropdown-item ${rate === speed ? "active" : ""}`}
+                        onClick={() => selectSpeed(rate)}
+                    >
+                        {rate}x
+                    </button>
+                </li>
+            ))}
+        </Dropdown>
+    );
+}

apps/client/src/widgets/type_widgets/file/Pdf.tsx

@@ -184,7 +184,7 @@ export default function PdfPreview({ note, blob, componentId, noteContext }: {
         <PdfViewer
             iframeRef={iframeRef}
             tabIndex={300}
-            pdfUrl={`../../api/notes/${note.noteId}/open`}
+            pdfUrl={new URL(`${window.glob.baseApiUrl}notes/${note.noteId}/open`, window.location.href).pathname}
             onLoad={() => {
                 const win = iframeRef.current?.contentWindow;
                 if (win) {

apps/client/src/widgets/type_widgets/file/PdfViewer.tsx

@@ -1,7 +1,8 @@
 import type { HTMLAttributes, RefObject } from "preact";
 import { useCallback, useEffect, useRef } from "preact/hooks";
-import Inter from "./../../../fonts/Inter/Inter-VariableFont_opsz,wght.ttf";
+
 import { useSyncedRef, useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
+import Inter from "./../../../fonts/Inter/Inter-VariableFont_opsz,wght.ttf";
 
 interface FontDefinition {
     name: string;
@@ -10,11 +11,11 @@ interface FontDefinition {
 
 const FONTS: FontDefinition[] = [
     {name: "Inter", url: Inter},
-]
+];
 
 interface PdfViewerProps extends Pick<HTMLAttributes<HTMLIFrameElement>, "tabIndex"> {
     iframeRef?: RefObject<HTMLIFrameElement>;
-    /** Note: URLs are relative to /pdfjs/web. */
+    /** Note: URLs are relative to /pdfjs/web, ideally use absolute paths (but without domain name) to avoid issues with some proxies. */
     pdfUrl: string;
     onLoad?(): void;
     /**
@@ -37,7 +38,7 @@ export default function PdfViewer({ iframeRef: externalIframeRef, pdfUrl, onLoad
             ref={iframeRef}
             class="pdf-preview"
             style={{width: "100%", height: "100%"}}
-            src={`pdfjs/web/viewer.html?file=${pdfUrl}&lang=${locale}&sidebar=${newLayout ? "0" : "1"}&editable=${editable ? "1" : "0"}`}
+            src={`pdfjs/web/viewer.html?v=${glob.triliumVersion}&file=${pdfUrl}&lang=${locale}&sidebar=${newLayout ? "0" : "1"}&editable=${editable ? "1" : "0"}`}
             onLoad={() => {
                 injectStyles();
                 onLoad?.();
@@ -63,7 +64,7 @@ function useStyleInjection(iframeRef: RefObject<HTMLIFrameElement>) {
         const fontStyles = doc.createElement("style");
         fontStyles.textContent = FONTS.map(injectFont).join("\n");
         doc.head.appendChild(fontStyles);
-        
+
     }, [ iframeRef ]);
 
     // React to changes.
@@ -107,4 +108,4 @@ function injectFont(font: FontDefinition) {
             src: url('${font.url}');
         }
     `;
-}
+}

apps/client/src/widgets/type_widgets/file/Video.css

@@ -0,0 +1,35 @@
+.note-detail-file > .video-preview-wrapper {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background-color: black;    
+
+    .video-preview {
+        background-color: black;
+        width: 100%;
+        height: 100%;
+    }
+
+    &.controls-hidden {
+        cursor: pointer;
+
+        .media-preview-controls {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+
+    .media-preview-controls {
+        --icon-button-hover-color: white;
+        --icon-button-hover-background: rgba(255, 255, 255, 0.2);
+        opacity: 1;
+        transition: opacity 300ms ease;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(6px);
+        color: white;
+    }
+}

apps/client/src/widgets/type_widgets/file/Video.tsx

@@ -0,0 +1,298 @@
+import "./Video.css";
+
+import { RefObject } from "preact";
+import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";
+
+import FNote from "../../../entities/fnote";
+import { t } from "../../../services/i18n";
+import { getUrlForDownload } from "../../../services/open";
+import ActionButton from "../../react/ActionButton";
+import NoItems from "../../react/NoItems";
+import { LoopButton, PlaybackSpeed, PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
+
+const AUTO_HIDE_DELAY = 3000;
+
+export default function VideoPreview({ note }: { note: FNote }) {
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const [playing, setPlaying] = useState(false);
+    const [error, setError] = useState(false);
+    const { visible: controlsVisible, onMouseMove, flash: flashControls } = useAutoHideControls(videoRef, playing);
+
+    useEffect(() => setError(false), [note.noteId]);
+    const onError = useCallback(() => setError(true), []);
+
+    const togglePlayback = useCallback(() => {
+        const video = videoRef.current;
+        if (!video) return;
+        if (video.paused) {
+            video.play();
+        } else {
+            video.pause();
+        }
+    }, []);
+
+    const onVideoClick = useCallback((e: MouseEvent) => {
+        if ((e.target as HTMLElement).closest(".media-preview-controls")) return;
+        togglePlayback();
+    }, [togglePlayback]);
+
+    const onKeyDown = useKeyboardShortcuts(videoRef, wrapperRef, togglePlayback, flashControls);
+
+    if (error) {
+        return <NoItems icon="bx bx-video-off" text={t("media.unsupported-format", { mime: note.mime.replace("/", "-") })} />;
+    }
+
+    return (
+        <div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} tabIndex={0} onClick={onVideoClick} onKeyDown={onKeyDown} onMouseMove={onMouseMove}>
+            <video
+                ref={videoRef}
+                class="video-preview"
+                src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+                datatype={note?.mime}
+                onPlay={() => setPlaying(true)}
+                onPause={() => setPlaying(false)}
+                onError={onError}
+            />
+
+            <div className="media-preview-controls">
+                <SeekBar mediaRef={videoRef} />
+                <div class="media-buttons-row">
+                    <div className="left">
+                        <PlaybackSpeed mediaRef={videoRef} />
+                        <RotateButton videoRef={videoRef} />
+                    </div>
+                    <div className="center">
+                        <div className="spacer" />
+                        <SkipButton mediaRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("media.back-10s")} />
+                        <PlayPauseButton playing={playing} togglePlayback={togglePlayback} />
+                        <SkipButton mediaRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("media.forward-30s")} />
+                        <LoopButton mediaRef={videoRef} />
+                    </div>
+                    <div className="right">
+                        <VolumeControl mediaRef={videoRef} />
+                        <ZoomToFitButton videoRef={videoRef} />
+                        <PictureInPictureButton videoRef={videoRef} />
+                        <FullscreenButton targetRef={wrapperRef} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function useKeyboardShortcuts(videoRef: MutableRef<HTMLVideoElement | null>, wrapperRef: MutableRef<HTMLDivElement | null>, togglePlayback: () => void, flashControls: () => void) {
+    return useCallback((e: KeyboardEvent) => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        switch (e.key) {
+            case " ":
+                e.preventDefault();
+                togglePlayback();
+                flashControls();
+                break;
+            case "ArrowLeft":
+                e.preventDefault();
+                video.currentTime = Math.max(0, video.currentTime - (e.ctrlKey ? 60 : 10));
+                flashControls();
+                break;
+            case "ArrowRight":
+                e.preventDefault();
+                video.currentTime = Math.min(video.duration, video.currentTime + (e.ctrlKey ? 60 : 10));
+                flashControls();
+                break;
+            case "f":
+            case "F":
+                e.preventDefault();
+                if (document.fullscreenElement) {
+                    document.exitFullscreen();
+                } else {
+                    wrapperRef.current?.requestFullscreen();
+                }
+                break;
+            case "m":
+            case "M":
+                e.preventDefault();
+                video.muted = !video.muted;
+                flashControls();
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                video.volume = Math.min(1, video.volume + 0.05);
+                flashControls();
+                break;
+            case "ArrowDown":
+                e.preventDefault();
+                video.volume = Math.max(0, video.volume - 0.05);
+                flashControls();
+                break;
+            case "Home":
+                e.preventDefault();
+                video.currentTime = 0;
+                flashControls();
+                break;
+            case "End":
+                e.preventDefault();
+                video.currentTime = video.duration;
+                flashControls();
+                break;
+        }
+    }, [ wrapperRef, videoRef, togglePlayback, flashControls ]);
+}
+
+function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boolean) {
+    const [visible, setVisible] = useState(true);
+    const hideTimerRef = useRef<ReturnType<typeof setTimeout>>();
+
+    const scheduleHide = useCallback(() => {
+        clearTimeout(hideTimerRef.current);
+        if (videoRef.current && !videoRef.current.paused) {
+            hideTimerRef.current = setTimeout(() => setVisible(false), AUTO_HIDE_DELAY);
+        }
+    }, [ videoRef]);
+
+    const onMouseMove = useCallback(() => {
+        setVisible(true);
+        scheduleHide();
+    }, [scheduleHide]);
+
+    // Hide immediately when playback starts, show when paused.
+    useEffect(() => {
+        if (playing) {
+            setVisible(false);
+        } else {
+            clearTimeout(hideTimerRef.current);
+            setVisible(true);
+        }
+        return () => clearTimeout(hideTimerRef.current);
+    }, [playing, scheduleHide]);
+
+    return { visible, onMouseMove, flash: onMouseMove };
+}
+
+function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [rotation, setRotation] = useState(0);
+
+    const rotate = () => {
+        const video = videoRef.current;
+        if (!video) return;
+        const next = (rotation + 90) % 360;
+        setRotation(next);
+
+        const isSideways = next === 90 || next === 270;
+        if (isSideways) {
+            // Scale down so the rotated video fits within its container.
+            const container = video.parentElement;
+            if (container) {
+                const ratio = container.clientWidth / container.clientHeight;
+                video.style.transform = `rotate(${next}deg) scale(${1 / ratio})`;
+            } else {
+                video.style.transform = `rotate(${next}deg)`;
+            }
+        } else {
+            video.style.transform = next === 0 ? "" : `rotate(${next}deg)`;
+        }
+    };
+
+    return (
+        <ActionButton
+            icon="bx bx-rotate-right"
+            text={t("media.rotate")}
+            onClick={rotate}
+        />
+    );
+}
+
+function ZoomToFitButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [fitted, setFitted] = useState(false);
+
+    const toggle = () => {
+        const video = videoRef.current;
+        if (!video) return;
+        const next = !fitted;
+        video.style.objectFit = next ? "cover" : "";
+        setFitted(next);
+    };
+
+    return (
+        <ActionButton
+            className={fitted ? "active" : ""}
+            icon={fitted ? "bx bx-collapse" : "bx bx-expand"}
+            text={fitted ? t("media.zoom-reset") : t("media.zoom-to-fit")}
+            onClick={toggle}
+        />
+    );
+}
+
+function PictureInPictureButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [active, setActive] = useState(false);
+    // The standard PiP API is only supported in Chromium-based browsers.
+    // Firefox uses its own proprietary PiP implementation.
+    const supported = "requestPictureInPicture" in HTMLVideoElement.prototype;
+
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video || !supported) return;
+
+        const onEnter = () => setActive(true);
+        const onLeave = () => setActive(false);
+
+        video.addEventListener("enterpictureinpicture", onEnter);
+        video.addEventListener("leavepictureinpicture", onLeave);
+        return () => {
+            video.removeEventListener("enterpictureinpicture", onEnter);
+            video.removeEventListener("leavepictureinpicture", onLeave);
+        };
+    }, [ videoRef, supported ]);
+
+    if (!supported) return null;
+
+    const toggle = () => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        if (document.pictureInPictureElement) {
+            document.exitPictureInPicture();
+        } else {
+            video.requestPictureInPicture();
+        }
+    };
+
+    return (
+        <ActionButton
+            icon={active ? "bx bx-exit" : "bx bx-window-open"}
+            text={active ? t("media.exit-picture-in-picture") : t("media.picture-in-picture")}
+            onClick={toggle}
+        />
+    );
+}
+
+function FullscreenButton({ targetRef }: { targetRef: RefObject<HTMLElement> }) {
+    const [isFullscreen, setIsFullscreen] = useState(false);
+
+    useEffect(() => {
+        const onFullscreenChange = () => setIsFullscreen(!!document.fullscreenElement);
+        document.addEventListener("fullscreenchange", onFullscreenChange);
+        return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
+    }, []);
+
+    const toggleFullscreen = () => {
+        const target = targetRef.current;
+        if (!target) return;
+
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        } else {
+            target.requestFullscreen();
+        }
+    };
+
+    return (
+        <ActionButton
+            icon={isFullscreen ? "bx bx-exit-fullscreen" : "bx bx-fullscreen"}
+            text={isFullscreen ? t("media.exit-fullscreen") : t("media.fullscreen")}
+            onClick={toggleFullscreen}
+        />
+    );
+}

apps/client/src/widgets/type_widgets/helpers/SplitEditor.css

@@ -27,12 +27,18 @@
     margin: 0 !important;
 }
 
+body.desktop .note-detail-split .note-detail-code-editor {
+    border-radius: 6px;
+    margin-top: 1px;
+}
+
 .note-detail-split .note-detail-error-container {
     font-family: var(--monospace-font-family);
     margin: 5px;
     white-space: pre-wrap;
     font-size: 0.85em;
     overflow: auto;
+    user-select: text;
 }
 
 .note-detail-split .note-detail-split-preview {

apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx

@@ -19,6 +19,7 @@ export interface SplitEditorProps extends EditableCodeProps {
     previewButtons?: ComponentChildren;
     editorBefore?: ComponentChildren;
     forceOrientation?: "horizontal" | "vertical";
+    extraContent?: ComponentChildren;
 }
 
 /**
@@ -41,7 +42,7 @@ export default function SplitEditor(props: SplitEditorProps) {
 
 }
 
-function EditorWithSplit({ note, error, splitOptions, previewContent, previewButtons, className, editorBefore, forceOrientation, ...editorProps }: SplitEditorProps) {
+function EditorWithSplit({ note, error, splitOptions, previewContent, previewButtons, className, editorBefore, forceOrientation, extraContent, ...editorProps }: SplitEditorProps) {
     const containerRef = useRef<HTMLDivElement>(null);
     const splitEditorOrientation = useSplitOrientation(forceOrientation);
 
@@ -57,9 +58,12 @@ function EditorWithSplit({ note, error, splitOptions, previewContent, previewBut
                     {...editorProps}
                 />
             </div>
-            {error && <Admonition type="caution" className="note-detail-error-container">
-                {error}
-            </Admonition>}
+            {error && (
+                <Admonition type="caution" className="note-detail-error-container">
+                    {error}
+                </Admonition>
+            )}
+            {extraContent}
         </div>
     );
 

apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx

@@ -117,6 +117,7 @@ export default function SvgSplitEditor({ ntxId, note, attachmentName, renderSvg,
             error={error}
             onContentChanged={onContentChanged}
             dataSaved={onSave}
+            placeholder={t("mermaid.placeholder")}
             previewContent={(
                 <RawHtmlBlock
                     className="render-container"
@@ -151,6 +152,7 @@ export default function SvgSplitEditor({ ntxId, note, attachmentName, renderSvg,
 function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg: string | undefined) {
     const lastPanZoom = useRef<{ pan: SvgPanZoom.Point, zoom: number }>();
     const lastNoteId = useRef<string>();
+    const wasEmpty = useRef<boolean>(false);
     const zoomRef = useRef<SvgPanZoom.Instance>();
     const width = useElementSize(containerRef);
 
@@ -158,9 +160,14 @@ function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg
     useEffect(() => {
         if (zoomRef.current || width?.width === 0) return;
 
-        const shouldPreservePanZoom = (lastNoteId.current === noteId);
+        const shouldPreservePanZoom = (lastNoteId.current === noteId) && !wasEmpty.current;
         const svgEl = containerRef.current?.querySelector("svg");
-        if (!svgEl) return;
+        if (!svgEl) {
+            if (svg?.trim().length === 0) {
+                wasEmpty.current = true;
+            }
+            return;
+        };
 
         const zoomInstance = svgPanZoom(svgEl, {
             zoomEnabled: true,
@@ -186,7 +193,7 @@ function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg
             zoomRef.current = undefined;
             zoomInstance.destroy();
         };
-    }, [ svg, width ]);
+    }, [ containerRef, noteId, svg, width ]);
 
     // React to container changes.
     useEffect(() => {

apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx

@@ -1,7 +1,11 @@
 import { useCallback } from "preact/hooks";
-import SvgSplitEditor from "./helpers/SvgSplitEditor";
-import { TypeWidgetProps } from "./type_widget";
-import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid";
+
+import { t } from "../../../services/i18n";
+import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../../services/mermaid";
+import NoteContentSwitcher from "../../layout/NoteContentSwitcher";
+import SvgSplitEditor from "../helpers/SvgSplitEditor";
+import { TypeWidgetProps } from "../type_widget";
+import SAMPLE_DIAGRAMS from "./sample_diagrams";
 
 let idCounter = 1;
 let registeredErrorReporter = false;
@@ -15,6 +19,10 @@ export default function Mermaid(props: TypeWidgetProps) {
             registeredErrorReporter = true;
         }
 
+        if (!content.trim()) {
+            return "";
+        }
+
         mermaid.initialize({
             startOnLoad: false,
             ...(getMermaidConfig() as any),
@@ -30,6 +38,12 @@ export default function Mermaid(props: TypeWidgetProps) {
             attachmentName="mermaid-export"
             renderSvg={renderSvg}
             noteType="mermaid"
+            extraContent={(
+                <NoteContentSwitcher
+                    text={t("mermaid.sample_diagrams")}
+                    note={props.note}
+                    templates={SAMPLE_DIAGRAMS} />
+            )}
             {...props}
         />
     );

apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts

@@ -0,0 +1,512 @@
+import { t } from "../../../services/i18n";
+import type { NoteContentTemplate } from "../../layout/NoteContentSwitcher";
+
+const SAMPLE_DIAGRAMS: NoteContentTemplate[] = [
+    {
+        name: t("mermaid.sample_flowchart"),
+        content: `\
+flowchart TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me think}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[fa:fa-car Car]
+`
+    },
+    {
+        name: t("mermaid.sample_class"),
+        content: `\
+classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+      +String beakColor
+      +swim()
+      +quack()
+    }
+    class Fish{
+      -int sizeInFeet
+      -canEat()
+    }
+    class Zebra{
+      +bool is_wild
+      +run()
+    }
+`
+    },
+    {
+        name: t("mermaid.sample_sequence"),
+        content: `\
+sequenceDiagram
+    Alice->>+John: Hello John, how are you?
+    Alice->>+John: John, can you hear me?
+    John-->>-Alice: Hi Alice, I can hear you!
+    John-->>-Alice: I feel great!
+`
+    },
+    {
+        name: t("mermaid.sample_entity_relationship"),
+        content: `\
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ ORDER_ITEM : contains
+    PRODUCT ||--o{ ORDER_ITEM : includes
+    CUSTOMER {
+        string id
+        string name
+        string email
+    }
+    ORDER {
+        string id
+        date orderDate
+        string status
+    }
+    PRODUCT {
+        string id
+        string name
+        float price
+    }
+    ORDER_ITEM {
+        int quantity
+        float price
+    }
+`
+    },
+    {
+        name: t("mermaid.sample_state"),
+        content: `\
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+`
+    },
+    {
+        name: t("mermaid.sample_mindmap"),
+        content: `\
+mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectiveness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid
+`
+    },
+    {
+        name: t("mermaid.sample_architecture"),
+        content: `\
+architecture-beta
+    group api(cloud)[API]
+
+    service db(database)[Database] in api
+    service disk1(disk)[Storage] in api
+    service disk2(disk)[Storage] in api
+    service server(server)[Server] in api
+
+    db:L -- R:server
+    disk1:T -- B:server
+    disk2:T -- B:db
+`
+    },
+    {
+        name: t("mermaid.sample_block"),
+        content: `\
+block-beta
+columns 1
+  db(("DB"))
+  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
+  block:ID
+    A
+    B["A wide one in the middle"]
+    C
+  end
+  space
+  D
+  ID --> D
+  C --> D
+  style B fill:#969,stroke:#333,stroke-width:4px
+`
+    },
+    {
+        name: t("mermaid.sample_c4"),
+        content: `\
+C4Context
+    title System Context diagram for Internet Banking System
+    Enterprise_Boundary(b0, "BankBoundary0") {
+        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+        Person(customerB, "Banking Customer B")
+        Person_Ext(customerC, "Banking Customer C", "desc")
+
+        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
+
+        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+        Enterprise_Boundary(b1, "BankBoundary") {
+            SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+            System_Boundary(b2, "BankBoundary2") {
+                System(SystemA, "Banking System A")
+                System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
+            }
+
+            System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+            SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+            Boundary(b3, "BankBoundary3", "boundary") {
+                SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
+                SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+            }
+        }
+    }
+
+    BiRel(customerA, SystemAA, "Uses")
+    BiRel(SystemAA, SystemE, "Uses")
+    Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+    Rel(SystemC, customerA, "Sends e-mails to")
+`
+    },
+    {
+        name: t("mermaid.sample_gantt"),
+        content: `\
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task      : 24d
+`
+    },
+    {
+        name: t("mermaid.sample_git"),
+        content: `\
+gitGraph
+    commit
+    branch develop
+    checkout develop
+    commit
+    commit
+    checkout main
+    merge develop
+    commit
+    branch feature
+    checkout feature
+    commit
+    commit
+    checkout main
+    merge feature
+`
+    },
+    {
+        name: t("mermaid.sample_kanban"),
+        content: `\
+---
+config:
+  kanban:
+    ticketBaseUrl: 'https://github.com/mermaid-js/mermaid/issues/#TICKET#'
+---
+kanban
+  Todo
+    [Create Documentation]
+    docs[Create Blog about the new diagram]
+  [In progress]
+    id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
+  id9[Ready for deploy]
+    id8[Design grammar]@{ assigned: 'knsv' }
+  id10[Ready for test]
+    id4[Create parsing tests]@{ ticket: 2038, assigned: 'K.Sveidqvist', priority: 'High' }
+    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
+  id11[Done]
+    id5[define getData]
+    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: 2036, priority: 'Very High'}
+    id3[Update DB function]@{ ticket: 2037, assigned: knsv, priority: 'High' }
+
+  id12[Can't reproduce]
+    id3[Weird flickering in Firefox]
+`
+    },
+    {
+        name: t("mermaid.sample_packet"),
+        content: `\
+---
+title: "TCP Packet"
+---
+packet
+0-15: "Source Port"
+16-31: "Destination Port"
+32-63: "Sequence Number"
+64-95: "Acknowledgment Number"
+96-99: "Data Offset"
+100-105: "Reserved"
+106: "URG"
+107: "ACK"
+108: "PSH"
+109: "RST"
+110: "SYN"
+111: "FIN"
+112-127: "Window"
+128-143: "Checksum"
+144-159: "Urgent Pointer"
+160-191: "(Options and Padding)"
+192-255: "Data (variable length)"
+        `
+    },
+    {
+        name: t("mermaid.sample_pie"),
+        content: `\
+pie title Pets adopted by volunteers
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+`
+    },
+    {
+        name: t("mermaid.sample_quadrant"),
+        content: `\
+quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]
+`
+    },
+    {
+        name: t("mermaid.sample_radar"),
+        content: `\
+---
+title: "Grades"
+---
+radar-beta
+  axis m["Math"], s["Science"], e["English"]
+  axis h["History"], g["Geography"], a["Art"]
+  curve a["Alice"]{85, 90, 80, 70, 75, 90}
+  curve b["Bob"]{70, 75, 85, 80, 90, 85}
+
+  max 100
+  min 0
+        `
+    },
+    {
+        name: t("mermaid.sample_requirement"),
+        content: `\
+requirementDiagram
+
+    requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    test_entity - satisfies -> test_req
+`
+    },
+    {
+        name: t("mermaid.sample_sankey"),
+        content: `\
+---
+config:
+  sankey:
+    showValues: false
+---
+sankey-beta
+
+Agricultural 'waste',Bio-conversion,124.729
+Bio-conversion,Liquid,0.597
+Bio-conversion,Losses,26.862
+Bio-conversion,Solid,280.322
+Bio-conversion,Gas,81.144
+Biofuel imports,Liquid,35
+Biomass imports,Solid,35
+Coal imports,Coal,11.606
+Coal reserves,Coal,63.965
+Coal,Solid,75.571
+District heating,Industry,10.639
+District heating,Heating and cooling - commercial,22.505
+District heating,Heating and cooling - homes,46.184
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+Electricity grid,Industry,342.165
+Electricity grid,Road transport,37.797
+Electricity grid,Agriculture,4.412
+Electricity grid,Heating and cooling - commercial,40.858
+Electricity grid,Losses,56.691
+Electricity grid,Rail transport,7.863
+Electricity grid,Lighting & appliances - commercial,90.008
+Electricity grid,Lighting & appliances - homes,93.494
+Gas imports,NGas,40.719
+Gas reserves,NGas,82.233
+Gas,Heating and cooling - commercial,0.129
+Gas,Losses,1.401
+Gas,Thermal generation,151.891
+Gas,Agriculture,2.096
+Gas,Industry,48.58
+Geothermal,Electricity grid,7.013
+H2 conversion,H2,20.897
+H2 conversion,Losses,6.242
+H2,Road transport,20.897
+Hydro,Electricity grid,6.995
+Liquid,Industry,121.066
+Liquid,International shipping,128.69
+Liquid,Road transport,135.835
+Liquid,Domestic aviation,14.458
+Liquid,International aviation,206.267
+Liquid,Agriculture,3.64
+Liquid,National navigation,33.218
+Liquid,Rail transport,4.413
+Marine algae,Bio-conversion,4.375
+NGas,Gas,122.952
+Nuclear,Thermal generation,839.978
+Oil imports,Oil,504.287
+Oil reserves,Oil,107.703
+Oil,Liquid,611.99
+Other waste,Solid,56.587
+Other waste,Bio-conversion,77.81
+Pumped heat,Heating and cooling - homes,193.026
+Pumped heat,Heating and cooling - commercial,70.672
+Solar PV,Electricity grid,59.901
+Solar Thermal,Heating and cooling - homes,19.263
+Solar,Solar Thermal,19.263
+Solar,Solar PV,59.901
+Solid,Agriculture,0.882
+Solid,Thermal generation,400.12
+Solid,Industry,46.477
+Thermal generation,Electricity grid,525.531
+Thermal generation,Losses,787.129
+Thermal generation,District heating,79.329
+Tidal,Electricity grid,9.452
+UK land based bioenergy,Bio-conversion,182.01
+Wave,Electricity grid,19.013
+Wind,Electricity grid,289.366
+`
+    },
+    {
+        name: t("mermaid.sample_timeline"),
+        content: `\
+timeline
+    title History of Social Media Platform
+    2002 : LinkedIn
+    2004 : Facebook
+         : Google
+    2005 : YouTube
+    2006 : Twitter
+        `
+    },
+    {
+        name: t("mermaid.sample_treemap"),
+        content: `\
+treemap-beta
+"Section 1"
+    "Leaf 1.1": 12
+    "Section 1.2"
+      "Leaf 1.2.1": 12
+"Section 2"
+    "Leaf 2.1": 20
+    "Leaf 2.2": 25
+`
+    },
+    {
+        name: t("mermaid.sample_user_journey"),
+        content: `\
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+`
+    },
+    {
+        name: t("mermaid.sample_xy"),
+        content: `\
+xychart-beta
+    title "Sales Revenue"
+    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+    y-axis "Revenue (in $)" 4000 --> 11000
+    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+`
+    },
+    {
+        name: t("mermaid.sample_venn"),
+        content: `\
+venn-beta
+    title Web Dev
+    set Frontend
+        text React
+        text shadcn-ui
+        text Firebase
+    set Backend
+        text Hono
+        text PostgreSQL
+        text S3
+        text Lambda
+    union Frontend,Backend["APIs"]
+        `
+    },
+    {
+        name: t("mermaid.sample_ishikawa"),
+        content: `\
+ishikawa-beta
+  Blurry Photo
+  Process
+    Out of focus
+    Shutter speed too slow
+    Protective film not removed
+    Beautification filter applied
+  User
+    Shaky hands
+  Equipment
+    LENS
+      Inappropriate lens
+      Damaged lens
+      Dirty lens
+    SENSOR
+      Damaged sensor
+      Dirty sensor
+  Environment
+    Subject moved too quickly
+    Too dark
+`
+    }
+];
+
+export default SAMPLE_DIAGRAMS;

apps/client/src/widgets/type_widgets/relation_map/context_menu.ts

@@ -1,12 +1,14 @@
+import { Connection } from "jsplumb";
 import { RefObject } from "preact";
+
 import appContext from "../../../components/app_context";
 import FNote from "../../../entities/fnote";
 import contextMenu from "../../../menus/context_menu";
+import link_context_menu from "../../../menus/link_context_menu";
 import dialog from "../../../services/dialog";
 import { t } from "../../../services/i18n";
 import server from "../../../services/server";
 import RelationMapApi from "./api";
-import { Connection } from "jsplumb";
 
 export function buildNoteContextMenuHandler(note: FNote | null | undefined, mapApiRef: RefObject<RelationMapApi>) {
     return (e: MouseEvent) => {
@@ -17,22 +19,8 @@ export function buildNoteContextMenuHandler(note: FNote | null | undefined, mapA
             x: e.pageX,
             y: e.pageY,
             items: [
-                {
-                    title: t("relation_map.open_in_new_tab"),
-                    uiIcon: "bx bx-empty",
-                    handler: () => appContext.tabManager.openTabWithNoteWithHoisting(note.noteId)
-                },
-                {
-                    title: t("relation_map.remove_note"),
-                    uiIcon: "bx bx-trash",
-                    handler: async () => {
-                        if (!note) return;
-                        const result = await dialog.confirmDeleteNoteBoxWithNote(note.title);
-                        if (typeof result !== "object" || !result.confirmed) return;
-
-                        mapApiRef.current?.removeItem(note.noteId, result.isDeleteNoteChecked);
-                    }
-                },
+                ...link_context_menu.getItems(e),
+                { kind: "separator" },
                 {
                     title: t("relation_map.edit_title"),
                     uiIcon: "bx bx-pencil",
@@ -49,10 +37,26 @@ export function buildNoteContextMenuHandler(note: FNote | null | undefined, mapA
 
                         await server.put(`notes/${note.noteId}/title`, { title });
                     }
-                }
+                },
+                { kind: "separator" },
+
+                {
+                    title: t("relation_map.remove_note"),
+                    uiIcon: "bx bx-trash",
+                    handler: async () => {
+                        if (!note) return;
+                        const result = await dialog.confirmDeleteNoteBoxWithNote(note.title);
+                        if (typeof result !== "object" || !result.confirmed) return;
+
+                        mapApiRef.current?.removeItem(note.noteId, result.isDeleteNoteChecked);
+                    }
+                },
             ],
-            selectMenuItemHandler() {}
-        })
+            selectMenuItemHandler({ command }) {
+                // Pass the events to the link context menu
+                link_context_menu.handleLinkContextMenuItem(command, e, note.noteId);
+            }
+        });
     };
 }
 

apps/client/src/widgets/type_widgets/spreadsheet/Spreadsheet.tsx

@@ -0,0 +1,153 @@
+import "./Spreadsheet.css";
+import "@univerjs/preset-sheets-core/lib/index.css";
+import "@univerjs/preset-sheets-sort/lib/index.css";
+import "@univerjs/preset-sheets-conditional-formatting/lib/index.css";
+import "@univerjs/preset-sheets-find-replace/lib/index.css";
+import "@univerjs/preset-sheets-note/lib/index.css";
+import "@univerjs/preset-sheets-filter/lib/index.css";
+import "@univerjs/preset-sheets-data-validation/lib/index.css";
+
+import { UniverSheetsConditionalFormattingPreset } from '@univerjs/preset-sheets-conditional-formatting';
+import UniverPresetSheetsConditionalFormattingEnUS from '@univerjs/preset-sheets-conditional-formatting/locales/en-US';
+import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core';
+import sheetsCoreEnUS  from '@univerjs/preset-sheets-core/locales/en-US';
+import { UniverSheetsDataValidationPreset } from '@univerjs/preset-sheets-data-validation';
+import UniverPresetSheetsDataValidationEnUS from '@univerjs/preset-sheets-data-validation/locales/en-US';
+import { UniverSheetsFilterPreset } from '@univerjs/preset-sheets-filter';
+import UniverPresetSheetsFilterEnUS from '@univerjs/preset-sheets-filter/locales/en-US';
+import { UniverSheetsFindReplacePreset } from '@univerjs/preset-sheets-find-replace';
+import sheetsFindReplaceEnUS from '@univerjs/preset-sheets-find-replace/locales/en-US';
+import { UniverSheetsNotePreset } from '@univerjs/preset-sheets-note';
+import sheetsNoteEnUS from '@univerjs/preset-sheets-note/locales/en-US';
+import { UniverSheetsSortPreset } from '@univerjs/preset-sheets-sort';
+import UniverPresetSheetsSortEnUS from '@univerjs/preset-sheets-sort/locales/en-US';
+import { createUniver, FUniver, LocaleType, mergeLocales } from '@univerjs/presets';
+import { MutableRef, useEffect, useRef } from "preact/hooks";
+
+import { useColorScheme, useNoteLabelBoolean, useTriliumEvent } from "../../react/hooks";
+import { TypeWidgetProps } from "../type_widget";
+import usePersistence from "./persistence";
+
+export default function Spreadsheet(props: TypeWidgetProps) {
+    const [ readOnly ] = useNoteLabelBoolean(props.note, "readOnly");
+
+    // Use readOnly as key to force full remount (and data reload) when it changes.
+    return <SpreadsheetEditor key={String(readOnly)} {...props} readOnly={readOnly} />;
+}
+
+function SpreadsheetEditor({ note, noteContext, readOnly }: TypeWidgetProps & { readOnly: boolean }) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const apiRef = useRef<FUniver>();
+
+    useInitializeSpreadsheet(containerRef, apiRef, readOnly);
+    useDarkMode(apiRef);
+    usePersistence(note, noteContext, apiRef, containerRef, readOnly);
+    useSearchIntegration(apiRef);
+    useFixRadixPortals();
+
+    // Focus the spreadsheet when the note is focused.
+    useTriliumEvent("focusOnDetail", () => {
+        const focusable = containerRef.current?.querySelector('[data-u-comp="editor"]');
+        if (focusable instanceof HTMLElement) {
+            focusable.focus();
+        }
+    });
+
+    return <div ref={containerRef} className="spreadsheet" />;
+}
+
+/**
+ * Univer's design system uses Radix UI primitives whose DismissableLayer detects
+ * "outside" clicks/focus via document-level pointerdown/focusin listeners combined
+ * with a React capture-phase flag. In React, portal events bubble through the
+ * component tree so onPointerDownCapture fires on the DismissableLayer, setting an
+ * internal flag that suppresses the "outside" detection. With preact/compat, portal
+ * events don't bubble through the React tree, so the flag never gets set and Radix
+ * immediately dismisses popups.
+ *
+ * Radix dispatches cancelable custom events ("dismissableLayer.pointerDownOutside"
+ * and "dismissableLayer.focusOutside") on the original event target before calling
+ * onDismiss. The dismiss is skipped if defaultPrevented is true. This hook intercepts
+ * those custom events in the capture phase and prevents default when the target is
+ * inside a Radix portal, restoring the expected behavior.
+ */
+function useFixRadixPortals() {
+    useEffect(() => {
+        function preventDismiss(e: Event) {
+            if (e.target instanceof HTMLElement && e.target.closest("[id^='radix-']")) {
+                e.preventDefault();
+            }
+        }
+
+        document.addEventListener("dismissableLayer.pointerDownOutside", preventDismiss, true);
+        document.addEventListener("dismissableLayer.focusOutside", preventDismiss, true);
+        return () => {
+            document.removeEventListener("dismissableLayer.pointerDownOutside", preventDismiss, true);
+            document.removeEventListener("dismissableLayer.focusOutside", preventDismiss, true);
+        };
+    }, []);
+}
+
+function useInitializeSpreadsheet(containerRef: MutableRef<HTMLDivElement | null>, apiRef: MutableRef<FUniver | undefined>, readOnly: boolean) {
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        const { univerAPI } = createUniver({
+            locale: LocaleType.EN_US,
+            locales: {
+                [LocaleType.EN_US]: mergeLocales(
+                    sheetsCoreEnUS,
+                    sheetsFindReplaceEnUS,
+                    sheetsNoteEnUS,
+                    UniverPresetSheetsFilterEnUS,
+                    UniverPresetSheetsSortEnUS,
+                    UniverPresetSheetsDataValidationEnUS,
+                    UniverPresetSheetsConditionalFormattingEnUS,
+                ),
+            },
+            presets: [
+                UniverSheetsCorePreset({
+                    container: containerRef.current,
+                    toolbar: !readOnly,
+                    contextMenu: !readOnly,
+                    formulaBar: !readOnly,
+                    footer: readOnly ? false : undefined,
+                    menu: {
+                        "sheet.contextMenu.permission": { hidden: true },
+                        "sheet-permission.operation.openPanel": { hidden: true },
+                        "sheet.command.add-range-protection-from-toolbar": { hidden: true },
+                    },
+                }),
+                UniverSheetsFindReplacePreset(),
+                UniverSheetsNotePreset(),
+                UniverSheetsFilterPreset(),
+                UniverSheetsSortPreset(),
+                UniverSheetsDataValidationPreset(),
+                UniverSheetsConditionalFormattingPreset()
+            ]
+        });
+        apiRef.current = univerAPI;
+        return () => univerAPI.dispose();
+    }, [ apiRef, containerRef, readOnly ]);
+}
+
+function useDarkMode(apiRef: MutableRef<FUniver | undefined>) {
+    const colorScheme = useColorScheme();
+
+    // React to dark mode.
+    useEffect(() => {
+        const univerAPI = apiRef.current;
+        if (!univerAPI) return;
+        univerAPI.toggleDarkMode(colorScheme === 'dark');
+    }, [ colorScheme, apiRef ]);
+}
+
+function useSearchIntegration(apiRef: MutableRef<FUniver | undefined>) {
+    useTriliumEvent("findInText", () => {
+        const univerAPI = apiRef.current;
+        if (!univerAPI) return;
+
+        // Open find/replace panel and populate the search term.
+        univerAPI.executeCommand("ui.operation.open-find-dialog");
+    });
+}

apps/client/src/widgets/type_widgets/spreadsheet/persistence.tsx

@@ -0,0 +1,194 @@
+import { CommandType, FUniver, IDisposable, IWorkbookData } from "@univerjs/presets";
+import { MutableRef, useEffect, useRef } from "preact/hooks";
+
+import NoteContext from "../../../components/note_context";
+import FNote from "../../../entities/fnote";
+import { SavedData, useEditorSpacedUpdate } from "../../react/hooks";
+
+interface PersistedData {
+    version: number;
+    workbook: Parameters<FUniver["createWorkbook"]>[0];
+}
+
+interface SpreadsheetViewState {
+    activeSheetId?: string;
+    cursorRow?: number;
+    cursorCol?: number;
+    scrollRow?: number;
+    scrollCol?: number;
+}
+
+export default function usePersistence(note: FNote, noteContext: NoteContext | null | undefined, apiRef: MutableRef<FUniver | undefined>, containerRef: MutableRef<HTMLDivElement | null>, readOnly: boolean) {
+    const changeListener = useRef<IDisposable>(null);
+    const pendingContent = useRef<string | null>(null);
+
+    function saveViewState(univerAPI: FUniver): SpreadsheetViewState {
+        const state: SpreadsheetViewState = {};
+        try {
+            const workbook = univerAPI.getActiveWorkbook();
+            if (!workbook) return state;
+
+            const activeSheet = workbook.getActiveSheet();
+            state.activeSheetId = activeSheet?.getSheetId();
+
+            const currentCell = activeSheet?.getSelection()?.getCurrentCell();
+            if (currentCell) {
+                state.cursorRow = currentCell.actualRow;
+                state.cursorCol = currentCell.actualColumn;
+            }
+
+            const scrollState = activeSheet?.getScrollState?.();
+            if (scrollState) {
+                state.scrollRow = scrollState.sheetViewStartRow;
+                state.scrollCol = scrollState.sheetViewStartColumn;
+            }
+        } catch {
+            // Ignore errors when reading state from a workbook being disposed.
+        }
+        return state;
+    }
+
+    function restoreViewState(workbook: ReturnType<FUniver["createWorkbook"]>, state: SpreadsheetViewState) {
+        try {
+            if (state.activeSheetId) {
+                const targetSheet = workbook.getSheetBySheetId(state.activeSheetId);
+                if (targetSheet) {
+                    workbook.setActiveSheet(targetSheet);
+                }
+            }
+            if (state.cursorRow !== undefined && state.cursorCol !== undefined) {
+                workbook.getActiveSheet().getRange(state.cursorRow, state.cursorCol).activate();
+            }
+            if (state.scrollRow !== undefined && state.scrollCol !== undefined) {
+                workbook.getActiveSheet().scrollToCell(state.scrollRow, state.scrollCol);
+            }
+        } catch {
+            // Ignore errors when restoring state (e.g. sheet no longer exists).
+        }
+    }
+
+    function applyContent(univerAPI: FUniver, newContent: string) {
+        const viewState = saveViewState(univerAPI);
+
+        // Dispose the existing workbook.
+        const existingWorkbook = univerAPI.getActiveWorkbook();
+        if (existingWorkbook) {
+            univerAPI.disposeUnit(existingWorkbook.getId());
+        }
+
+        let workbookData: Partial<IWorkbookData> = {};
+        if (newContent) {
+            try {
+                const parsedContent = JSON.parse(newContent) as unknown;
+                if (parsedContent && typeof parsedContent === "object" && "workbook" in parsedContent) {
+                    const persistedData = parsedContent as PersistedData;
+                    workbookData = persistedData.workbook;
+                }
+            } catch (e) {
+                console.error("Failed to parse spreadsheet content", e);
+            }
+        }
+
+        const workbook = univerAPI.createWorkbook(workbookData);
+        if (readOnly) {
+            workbook.disableSelection();
+            const permission = workbook.getPermission();
+            permission.setWorkbookEditPermission(workbook.getId(), false);
+            permission.setPermissionDialogVisible(false);
+        }
+
+        restoreViewState(workbook, viewState);
+
+        if (changeListener.current) {
+            changeListener.current.dispose();
+        }
+        changeListener.current = workbook.onCommandExecuted(command => {
+            if (command.type !== CommandType.MUTATION) return;
+            spacedUpdate.scheduleUpdate();
+        });
+    }
+
+    function isContainerVisible() {
+        const el = containerRef.current;
+        if (!el) return false;
+        return el.offsetWidth > 0 && el.offsetHeight > 0;
+    }
+
+    const spacedUpdate = useEditorSpacedUpdate({
+        noteType: "spreadsheet",
+        note,
+        noteContext,
+        async getData() {
+            const univerAPI = apiRef.current;
+            if (!univerAPI) return undefined;
+            const workbook = univerAPI.getActiveWorkbook();
+            if (!workbook) return undefined;
+            const content = {
+                version: 1,
+                workbook: workbook.save()
+            };
+
+            const attachments: SavedData["attachments"] = [];
+            const canvasEl = containerRef.current?.querySelector<HTMLCanvasElement>("canvas[id]");
+            if (canvasEl) {
+                const dataUrl = canvasEl.toDataURL("image/png");
+                const base64 = dataUrl.split(",")[1];
+                attachments.push({
+                    role: "image",
+                    title: "spreadsheet-export.png",
+                    mime: "image/png",
+                    content: base64,
+                    position: 0,
+                    encoding: "base64"
+                });
+            }
+
+            return {
+                content: JSON.stringify(content),
+                attachments
+            };
+        },
+        onContentChange(newContent) {
+            const univerAPI = apiRef.current;
+            if (!univerAPI) return undefined;
+
+            // Defer content application if the container is hidden (zero size),
+            // since the spreadsheet library cannot calculate layout in that state.
+            if (!isContainerVisible()) {
+                pendingContent.current = newContent;
+                return;
+            }
+
+            pendingContent.current = null;
+            applyContent(univerAPI, newContent);
+        },
+    });
+
+    // Apply pending content once the container becomes visible (non-zero size).
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        const observer = new ResizeObserver(() => {
+            if (pendingContent.current === null || !isContainerVisible()) return;
+
+            const univerAPI = apiRef.current;
+            if (!univerAPI) return;
+
+            const content = pendingContent.current;
+            pendingContent.current = null;
+            applyContent(univerAPI, content);
+        });
+        observer.observe(containerRef.current);
+        return () => observer.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: applyContent/isContainerVisible use refs
+    }, [ containerRef ]);
+
+    useEffect(() => {
+        return () => {
+            if (changeListener.current) {
+                changeListener.current.dispose();
+                changeListener.current = null;
+            }
+        };
+    }, []);
+}