style(lexical): improve toolbar

fix(lexical): toolbar icon alignment
feat(lexical): add icons to toolbar and basic styling
2026-03-22 20:01:42 +01:00 · 2026-03-20 18:30:56 +02:00 · 2026-03-20 18:28:51 +02:00 · 2026-03-20 18:27:28 +02:00 · 2026-03-20 18:11:43 +02:00 · 2026-03-20 18:05:40 +02:00
35 changed files with 1056 additions and 524 deletions
--- a/apps/build-docs/package.json
+++ b/apps/build-docs/package.json
@@ -16,7 +16,7 @@
  "license": "AGPL-3.0-only",
  "packageManager": "pnpm@10.32.1",
  "devDependencies": {
-    "@redocly/cli": "2.24.1",
+    "@redocly/cli": "2.24.0",
    "archiver": "7.0.1",
    "fs-extra": "11.3.4",
    "js-yaml": "4.1.1",
--- a/apps/client/package.json
+++ b/apps/client/package.json
@@ -24,6 +24,7 @@
    "@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.1",
    "@mind-elixir/node-menu": "5.0.1",
@@ -53,22 +54,23 @@
    "draggabilly": "3.0.0",
    "force-graph": "1.51.2",
    "globals": "17.4.0",
-    "i18next": "25.10.3",
+    "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.40",
+    "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.5",
+    "marked": "17.0.4",
    "mermaid": "11.13.0",
    "mind-elixir": "5.9.3",
    "normalize.css": "8.0.1",
    "panzoom": "9.4.3",
    "preact": "10.29.0",
-    "react-i18next": "16.6.0",
+    "react-i18next": "16.5.8",
    "react-window": "2.2.7",
    "reveal.js": "6.0.0",
    "rrule": "2.8.1",
--- a/apps/client/src/menus/context_menu.ts
+++ b/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.
     *
--- a/apps/client/src/menus/tree_context_menu.ts
+++ b/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
            });
--- a/apps/client/src/services/note_types.ts
+++ b/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: []
            };
--- a/apps/client/src/translations/el/translation.json
+++ b/apps/client/src/translations/el/translation.json
@@ -1,6 +1,6 @@
 {
  "about": {
-    "title": "Σχετικά με το Trilium Notes",
+    "title": "Πληροφορίες για το Trilium Notes",
    "homepage": "Αρχική Σελίδα:",
    "app_version": "Έκδοση εφαρμογής:",
    "db_version": "Έκδοση βάσης δεδομένων:",
--- a/apps/client/src/translations/ja/translation.json
+++ b/apps/client/src/translations/ja/translation.json
@@ -1180,8 +1180,7 @@
    "is_owned_by_note": "ノートによって所有されています",
    "and_more": "...その他 {{count}} 件。",
    "print_landscape": "PDF にエクスポートするときに、ページの向きを縦向きではなく横向きに変更します。",
-    "print_page_size": "PDF にエクスポートするときに、ページのサイズを変更します。サポートされる値: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>。",
-    "textarea": "複数行テキスト"
+    "print_page_size": "PDF にエクスポートするときに、ページのサイズを変更します。サポートされる値: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>。"
  },
  "link_context_menu": {
    "open_note_in_popup": "クイック編集",
--- a/apps/client/src/translations/tw/translation.json
+++ b/apps/client/src/translations/tw/translation.json
@@ -446,8 +446,7 @@
    "app_theme_base": "設定為 \"next\"、\"next-light \" 或 \"next-dark\"，以使用相應的 TriliumNext 主題（自動、淺色或深色）作為自訂主題的基礎，而非傳統主題。",
    "print_landscape": "匯出為 PDF 時，將頁面方向更改為橫向而非縱向。",
    "print_page_size": "在匯出 PDF 時更改頁面大小。支援的值：<code>A0</code>、<code>A1</code>、<code>A2</code>、<code>A3</code>、<code>A4</code>、<code>A5</code>、<code>A6</code>、<code>Legal</code>、<code>Letter</code>、<code>Tabloid</code>、<code>Ledger</code>。",
-    "color_type": "顏色",
-    "textarea": "多行文字"
+    "color_type": "顏色"
  },
  "attribute_editor": {
    "help_text_body1": "要新增標籤，只需輸入例如 <code>#rock</code> 或者如果您還想新增值，則例如 <code>#year = 2020</code>",
@@ -2183,52 +2182,5 @@
  },
  "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": "實體關係圖",
-    "sample_state": "狀態圖",
-    "sample_mindmap": "心智圖",
-    "sample_architecture": "架構圖",
-    "sample_block": "區塊圖",
-    "sample_c4": "C4 圖",
-    "sample_gantt": "甘特圖",
-    "sample_git": "Git 分支圖",
-    "sample_kanban": "看板圖",
-    "sample_packet": "數據包圖",
-    "sample_pie": "圓餅圖",
-    "sample_quadrant": "象限圖",
-    "sample_radar": "雷達圖",
-    "sample_requirement": "需求圖",
-    "sample_sankey": "桑基圖",
-    "sample_timeline": "時間軸",
-    "sample_treemap": "樹狀圖",
-    "sample_user_journey": "用戶旅程",
-    "sample_xy": "XY 圖表",
-    "sample_venn": "韋恩圖",
-    "sample_ishikawa": "魚骨圖"
  }
 }
--- a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
+++ b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
@@ -1,18 +1,18 @@
-import appContext from "../../components/app_context.js";
-import attributeAutocompleteService from "../../services/attribute_autocomplete.js";
-import type { Attribute } from "../../services/attribute_parser.js";
-import { isExperimentalFeatureEnabled } from "../../services/experimental_features.js";
-import { focusSavedElement, saveFocusedElement } from "../../services/focus.js";
-import froca from "../../services/froca.js";
 import { t } from "../../services/i18n.js";
+import server from "../../services/server.js";
+import froca from "../../services/froca.js";
 import linkService from "../../services/link.js";
+import attributeAutocompleteService from "../../services/attribute_autocomplete.js";
 import noteAutocompleteService from "../../services/note_autocomplete.js";
 import promotedAttributeDefinitionParser from "../../services/promoted_attribute_definition_parser.js";
-import server from "../../services/server.js";
-import shortcutService from "../../services/shortcuts.js";
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
 import SpacedUpdate from "../../services/spaced_update.js";
 import utils from "../../services/utils.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import shortcutService from "../../services/shortcuts.js";
+import appContext from "../../components/app_context.js";
+import type { Attribute } from "../../services/attribute_parser.js";
+import { focusSavedElement, saveFocusedElement } from "../../services/focus.js";
+import { isExperimentalFeatureEnabled } from "../../services/experimental_features.js";

 const TPL = /*html*/`
 <div class="attr-detail tn-tool-dialog">
@@ -29,7 +29,6 @@ const TPL = /*html*/`
            max-height: 600px;
            overflow: auto;
            box-shadow: 10px 10px 93px -25px black;
-            contain: none;
        }

        .attr-help td {
@@ -344,7 +343,6 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
    private $relatedNotesList!: JQuery<HTMLElement>;
    private $relatedNotesMoreNotes!: JQuery<HTMLElement>;
    private $attrHelp!: JQuery<HTMLElement>;
-    private $statusBar?: JQuery<HTMLElement>;

    private relatedNotesSpacedUpdate!: SpacedUpdate;
    private attribute!: Attribute;
@@ -579,24 +577,17 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
            return;
        }

-        if (isNewLayout) {
-            if (!this.$statusBar) {
-                this.$statusBar = $(document.body).find(".component.status-bar");
-            }
+        this.$widget
+            .css("left", detPosition.left)
+            .css("right", detPosition.right)
+            .css("top", y - offset.top + 70)
+            .css("max-height", outerHeight + y > height - 50 ? height - y - 50 : 10000);

-            const statusBarHeight = this.$statusBar.outerHeight() ?? 0;
-            const maxHeight = document.body.clientHeight - statusBarHeight;
+        if (isNewLayout) {
            this.$widget
-                .css("left", offset.left + (typeof detPosition.left === "number" ? detPosition.left : 0))
                .css("top", "unset")
-                .css("bottom", statusBarHeight ?? 0)
-                .css("max-height", maxHeight);
-        } else {
-            this.$widget
-                .css("left", detPosition.left)
-                .css("right", detPosition.right)
-                .css("top", y - offset.top + 70)
-                .css("max-height", outerHeight + y > height - 50 ? height - y - 50 : 10000);
+                .css("bottom", 70)
+                .css("max-height", "80vh");
        }

        if (focus === "name") {
@@ -704,14 +695,14 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
                return "label-definition";
            } else if (attribute.name.startsWith("relation:")) {
                return "relation-definition";
+            } else {
+                return "label";
            }
-            return "label";
-
        } else if (attribute.type === "relation") {
            return "relation";
+        } else {
+            this.$title.text("");
        }
-        this.$title.text("");
-
    }

    updateAttributeInEditor() {
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -364,19 +364,23 @@
        mask-repeat: no-repeat;
        mask-size: 100% 100%;
    }
-
+    
    .ck-content p {
        margin-bottom: 0.5em;
        line-height: 1.3;
    }

+    .ck-content figure.image {
+        width: 25%;
+    }
+
    .ck-content .table {
        display: flex;
        flex-direction: column-reverse;
        overflow-x: scroll;
        --scrollbar-thickness: 0;
        scrollbar-width: none;
-
+        
        table {
            width: max-content;
            table-layout: auto;
@@ -431,4 +435,4 @@
    }
 }

-/* #endregion */
+/* #endregion */
--- a/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx
+++ b/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx
@@ -1,4 +1,3 @@
-import { createPortal } from "preact/compat";
 import { useEffect, useState } from "preact/hooks";

 import FAttribute from "../../entities/fattribute";
@@ -75,7 +74,7 @@ export default function InheritedAttributesTab({ note, componentId, emptyListStr
                )}
            </div>

-            {createPortal(attributeDetailWidgetEl, document.body)}
+            {attributeDetailWidgetEl}
        </div>
    );
 }
--- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
+++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
@@ -1,6 +1,5 @@
 import { AttributeEditor as CKEditorAttributeEditor, MentionFeed, ModelElement, ModelNode, ModelPosition } from "@triliumnext/ckeditor5";
 import { AttributeType } from "@triliumnext/commons";
-import { createPortal } from "preact/compat";
 import { MutableRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "preact/hooks";

 import type { CommandData, FilteredCommandNames } from "../../../components/app_context";
@@ -337,8 +336,7 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
                                let matchedAttr: Attribute | null = null;

                                for (const attr of parsedAttrs) {
-                                    if (attr.startIndex !== undefined && clickIndex > attr.startIndex &&
-                                        attr.endIndex !== undefined && clickIndex <= attr.endIndex) {
+                                    if (attr.startIndex && clickIndex > attr.startIndex && attr.endIndex && clickIndex <= attr.endIndex) {
                                        matchedAttr = attr;
                                        break;
                                    }
@@ -409,7 +407,7 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
                )}
            </div>}

-            {createPortal(attributeDetailWidgetEl, document.body)}
+            {attributeDetailWidgetEl}
        </>
    );
 }
--- a/apps/client/src/widgets/type_widgets/text/EditableText.tsx
+++ b/apps/client/src/widgets/type_widgets/text/EditableText.tsx
@@ -14,10 +14,11 @@ import note_create from "../../../services/note_create";
 import options from "../../../services/options";
 import toast from "../../../services/toast";
 import utils, { hasTouchBar, isMobile } from "../../../services/utils";
-import { useEditorSpacedUpdate, useLegacyImperativeHandlers, useNoteLabel, useTriliumEvent, useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
+import { useEditorSpacedUpdate, useLegacyImperativeHandlers, useNoteLabel, useNoteProperty, useTriliumEvent, useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
 import TouchBar, { TouchBarButton, TouchBarGroup, TouchBarSegmentedControl } from "../../react/TouchBar";
 import { TypeWidgetProps } from "../type_widget";
 import CKEditorWithWatchdog, { CKEditorApi } from "./CKEditorWithWatchdog";
+import LexicalText from "./lexical";
 import getTemplates, { updateTemplateCache } from "./snippets.js";
 import { loadIncludedNote, refreshIncludedNote, setupImageOpening } from "./utils";

@@ -27,7 +28,15 @@ import { loadIncludedNote, refreshIncludedNote, setupImageOpening } from "./util
 * - Ballon block mode, in which there is a floating toolbar for the selected text, but another floating button for the entire block (i.e. paragraph).
 * - Decoupled mode, in which the editing toolbar is actually added on the client side (in {@link ClassicEditorToolbar}), see https://ckeditor.com/docs/ckeditor5/latest/examples/framework/bottom-toolbar-editor.html for an example on how the decoupled editor works.
 */
-export default function EditableText({ note, parentComponent, ntxId, noteContext }: TypeWidgetProps) {
+export default function EditableText(props: TypeWidgetProps) {
+    const mime = useNoteProperty(props.note, "mime");
+    if (mime === "application/json") {
+        return <LexicalText {...props} />;
+    }
+    return <EditableTextCKEditor {...props} />;
+}
+
+function EditableTextCKEditor({ note, parentComponent, ntxId, noteContext }: TypeWidgetProps) {
    const containerRef = useRef<HTMLDivElement>(null);
    const contentRef = useRef<string>("");
    const watchdogRef = useRef<EditorWatchdog>(null);
--- a/apps/client/src/widgets/type_widgets/text/lexical/ToolbarPlugin.css
+++ b/apps/client/src/widgets/type_widgets/text/lexical/ToolbarPlugin.css
@@ -0,0 +1,41 @@
+.note-detail-editable-text {
+    .toolbar {
+        display: flex;
+        margin-bottom: 1px;
+        background: var(--classic-toolbar-vert-layout-background-color);
+        padding: 3px 6px;
+        border-radius: 6px;
+        margin: 20px;
+        vertical-align: middle;
+    }
+
+    .toolbar .divider {
+        width: 1px;
+        background-color: var(--main-border-color);
+        margin: 0 6px;
+    }
+
+    .toolbar .toolbar-item .text {
+        display: flex;
+        line-height: 20px;
+        width: 200px;
+        vertical-align: middle;
+        font-size: 14px;
+        color: #777;
+        text-overflow: ellipsis;
+        width: 70px;
+        overflow: hidden;
+        height: 20px;
+        text-align: left;
+    }
+
+    .toolbar .toolbar-item .icon {
+        display: flex;
+        width: 20px;
+        height: 20px;
+        user-select: none;
+        margin-right: 8px;
+        line-height: 16px;
+        background-size: contain;
+    }
+}
--- a/apps/client/src/widgets/type_widgets/text/lexical/ToolbarPlugin.tsx
+++ b/apps/client/src/widgets/type_widgets/text/lexical/ToolbarPlugin.tsx
@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import "./ToolbarPlugin.css";
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {mergeRegister} from '@lexical/utils';
+import {
+    $getSelection,
+    $isRangeSelection,
+    CAN_REDO_COMMAND,
+    CAN_UNDO_COMMAND,
+    COMMAND_PRIORITY_LOW,
+    FORMAT_ELEMENT_COMMAND,
+    FORMAT_TEXT_COMMAND,
+    REDO_COMMAND,
+    SELECTION_CHANGE_COMMAND,
+    UNDO_COMMAND,
+} from 'lexical';
+import {useCallback, useEffect, useRef, useState} from 'react';
+
+import ActionButton, { ActionButtonProps } from "../../../react/ActionButton";
+
+function Divider() {
+    return <div className="divider" />;
+}
+
+export default function ToolbarPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const toolbarRef = useRef(null);
+    const [canUndo, setCanUndo] = useState(false);
+    const [canRedo, setCanRedo] = useState(false);
+    const [isBold, setIsBold] = useState(false);
+    const [isItalic, setIsItalic] = useState(false);
+    const [isUnderline, setIsUnderline] = useState(false);
+    const [isStrikethrough, setIsStrikethrough] = useState(false);
+
+    const $updateToolbar = useCallback(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            // Update text format
+            setIsBold(selection.hasFormat('bold'));
+            setIsItalic(selection.hasFormat('italic'));
+            setIsUnderline(selection.hasFormat('underline'));
+            setIsStrikethrough(selection.hasFormat('strikethrough'));
+        }
+    }, []);
+
+    useEffect(() => {
+        return mergeRegister(
+            editor.registerUpdateListener(({editorState}) => {
+                editorState.read(
+                    () => {
+                        $updateToolbar();
+                    },
+                    {editor},
+                );
+            }),
+            editor.registerCommand(
+                SELECTION_CHANGE_COMMAND,
+                (_payload, _newEditor) => {
+                    $updateToolbar();
+                    return false;
+                },
+                COMMAND_PRIORITY_LOW,
+            ),
+            editor.registerCommand(
+                CAN_UNDO_COMMAND,
+                (payload) => {
+                    setCanUndo(payload);
+                    return false;
+                },
+                COMMAND_PRIORITY_LOW,
+            ),
+            editor.registerCommand(
+                CAN_REDO_COMMAND,
+                (payload) => {
+                    setCanRedo(payload);
+                    return false;
+                },
+                COMMAND_PRIORITY_LOW,
+            ),
+        );
+    }, [editor, $updateToolbar]);
+
+    return (
+        <div className="toolbar" ref={toolbarRef}>
+            <ToolbarButton
+                disabled={!canUndo}
+                onClick={() => {
+                    editor.dispatchCommand(UNDO_COMMAND, undefined);
+                }}
+                text="Undo"
+                icon="bx bx-undo"
+            />
+            <ToolbarButton
+                disabled={!canRedo}
+                onClick={() => {
+                    editor.dispatchCommand(REDO_COMMAND, undefined);
+                }}
+                text="Redo"
+                icon="bx bx-redo"
+            />
+            <Divider />
+            <ToolbarButton
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+                }}
+                active={isBold}
+                text="Format Bold"
+                icon="bx bx-bold"
+            />
+            <ToolbarButton
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
+                }}
+                active={isItalic}
+                text="Format Italics"
+                icon="bx bx-italic"
+            />
+            <ToolbarButton
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
+                }}
+                active={isUnderline}
+                text="Format Underline"
+                icon="bx bx-underline"
+            />
+            <ToolbarButton
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
+                }}
+                active={isStrikethrough}
+                text="Format Strikethrough"
+                icon="bx bx-strikethrough"
+            />
+            <Divider />
+            <ToolbarButton
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left');
+                }}
+                text="Left Align"
+                icon="bx bx-align-left"
+            />
+            <ToolbarButton
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center');
+                }}
+                text="Center Align"
+                icon="bx bx-align-middle"
+            />
+            <ToolbarButton
+                onClick={() => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right')}
+                text="Right Align"
+                icon="bx bx-align-right"
+            />
+            <ToolbarButton
+                onClick={() => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify')}
+                text="Justify Align"
+                icon="bx bx-align-justify"
+            />{' '}
+        </div>
+    );
+}
+
+function ToolbarButton(props: Pick<ActionButtonProps, "icon" | "disabled" | "onClick" | "text">) {
+    return (
+        <ActionButton
+            className="toolbar-item"
+            {...props}
+        />
+    );
+}
--- a/apps/client/src/widgets/type_widgets/text/lexical/index.css
+++ b/apps/client/src/widgets/type_widgets/text/lexical/index.css
@@ -0,0 +1,21 @@
+.note-detail-editable-text .lexical-wrapper {
+    color: var(--main-text-color);
+    font-family: var(--main-font-family);
+    font-size: var(--main-font-size);
+    line-height: 1.5;
+    word-break: break-word;
+    position: relative;
+    margin-inline: var(--content-margin-inline);
+
+    >div[contenteditable="true"] {
+        outline: 0;
+    }
+
+    .lexical-placeholder {
+        opacity: 0.5;
+        position: absolute;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+    }
+}
--- a/apps/client/src/widgets/type_widgets/text/lexical/index.tsx
+++ b/apps/client/src/widgets/type_widgets/text/lexical/index.tsx
@@ -0,0 +1,120 @@
+import "./index.css";
+
+import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
+import {LexicalComposer} from '@lexical/react/LexicalComposer';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {ContentEditable} from '@lexical/react/LexicalContentEditable';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
+import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
+import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
+import {$createRangeSelection, $getRoot, $setSelection, CLEAR_HISTORY_COMMAND} from 'lexical';
+import { useEffect } from 'preact/hooks';
+
+import { useEditorSpacedUpdate, useTriliumEvent } from '../../../react/hooks';
+import { TypeWidgetProps } from "../../type_widget";
+import ToolbarPlugin from "./ToolbarPlugin";
+
+const theme = {
+    // Theme styling goes here
+    //...
+};
+
+// Catch any errors that occur during Lexical updates and log them
+// or throw them as needed. If you don't throw them, Lexical will
+// try to recover gracefully without losing user data.
+function onError(error) {
+    console.error(error);
+}
+
+export default function LexicalText(props: TypeWidgetProps) {
+    const initialConfig = {
+        namespace: 'MyEditor',
+        theme,
+        onError,
+    };
+
+    const placeholder = (
+        <div className="lexical-placeholder">
+            Enter some text...
+        </div>
+    );
+
+    return (
+        <LexicalComposer initialConfig={initialConfig}>
+            <ToolbarPlugin />
+            <div className="lexical-wrapper">
+                <RichTextPlugin
+                    contentEditable={<ContentEditable /> as never}
+                    placeholder={placeholder as never}
+                    ErrorBoundary={LexicalErrorBoundary}
+                />
+            </div>
+            <HistoryPlugin />
+            <AutoFocusPlugin />
+            <ScrollToEndPlugin />
+            <CustomEditorPersistencePlugin {...props} />
+        </LexicalComposer>
+    );
+}
+
+function CustomEditorPersistencePlugin({ note, noteContext }: TypeWidgetProps) {
+    const [editor] = useLexicalComposerContext();
+
+    const spacedUpdate = useEditorSpacedUpdate({
+        note,
+        noteContext,
+        noteType: "text",
+        getData() {
+            return {
+                content: JSON.stringify(editor.toJSON().editorState)
+            };
+        },
+        onContentChange(newContent) {
+            if (!newContent) {
+                editor.update(() => {
+                    $getRoot().clear();
+                });
+                return;
+            }
+
+            try {
+                const editorState = editor.parseEditorState(newContent);
+                editor.setEditorState(editorState);
+            } catch (err) {
+                console.error("Error parsing Lexical content", err);
+            }
+        },
+    });
+
+    // Clear the history whenever note changes.
+    useEffect(() => {
+        editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
+    }, [ editor, note ]);
+
+    // Detect changes in content.
+    useEffect(() => {
+        return editor.registerUpdateListener(() => {
+            spacedUpdate.scheduleUpdate();
+        });
+    }, [ spacedUpdate, editor ]);
+}
+
+function ScrollToEndPlugin() {
+    const [editor] = useLexicalComposerContext();
+
+    useTriliumEvent("scrollToEnd", () => {
+        editor.update(() => {
+            const root = $getRoot();
+            const lastChild = root.getLastDescendant();
+            if (lastChild) {
+                const selection = $createRangeSelection();
+                selection.anchor.set(lastChild.getKey(), lastChild.getTextContentSize(), 'text');
+                selection.focus.set(lastChild.getKey(), lastChild.getTextContentSize(), 'text');
+                $setSelection(selection);
+            }
+        });
+        editor.focus();
+    });
+
+    return null;
+}
--- a/apps/dump-db/package.json
+++ b/apps/dump-db/package.json
@@ -6,7 +6,7 @@
  "dependencies": {
    "better-sqlite3": "12.8.0",
    "mime-types": "3.0.2",
-    "sanitize-filename": "1.6.4",
+    "sanitize-filename": "1.6.3",
    "tsx": "4.21.0",
    "yargs": "18.0.0"
  },
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -99,7 +99,7 @@
    "html2plaintext": "2.1.4",
    "http-proxy-agent": "8.0.0",
    "https-proxy-agent": "8.0.0",
-    "i18next": "25.10.3",
+    "i18next": "25.8.18",
    "i18next-fs-backend": "2.6.1",
    "image-type": "6.0.0",
    "ini": "6.0.0",
@@ -107,13 +107,13 @@
    "is-svg": "6.1.0",
    "jimp": "1.6.0",
    "lorem-ipsum": "2.0.8",
-    "marked": "17.0.5",
+    "marked": "17.0.4",
    "mime-types": "3.0.2",
    "multer": "2.1.1",
    "normalize-strings": "1.1.1",
    "rand-token": "1.0.1",
    "safe-compare": "1.1.4",
-    "sanitize-filename": "1.6.4",
+    "sanitize-filename": "1.6.3",
    "sanitize-html": "2.17.2",
    "sax": "1.6.0",
    "serve-favicon": "2.5.1",
@@ -127,7 +127,7 @@
    "turnish": "1.8.0",
    "unescape": "1.0.1",
    "vite": "8.0.1",
-    "ws": "8.20.0",
+    "ws": "8.19.0",
    "xml2js": "0.6.2",
    "yauzl": "3.2.1"
  }
--- a/apps/server/src/assets/db/schema.sql
+++ b/apps/server/src/assets/db/schema.sql
@@ -79,7 +79,7 @@ CREATE UNIQUE INDEX `IDX_entityChanges_entityName_entityId` ON "entity_changes"
                                                                                 `entityId`
    );
 CREATE INDEX `IDX_branches_noteId_parentNoteId` ON `branches` (`noteId`,`parentNoteId`);
-CREATE INDEX IDX_branches_parentNoteId_isDeleted_notePosition ON branches (parentNoteId, isDeleted, notePosition);
+CREATE INDEX IDX_branches_parentNoteId ON branches (parentNoteId);
 CREATE INDEX `IDX_notes_title` ON `notes` (`title`);
 CREATE INDEX `IDX_notes_type` ON `notes` (`type`);
 CREATE INDEX `IDX_notes_dateCreated` ON `notes` (`dateCreated`);
@@ -146,13 +146,6 @@ CREATE INDEX IDX_notes_blobId on notes (blobId);
 CREATE INDEX IDX_revisions_blobId on revisions (blobId);
 CREATE INDEX IDX_attachments_blobId on attachments (blobId);

-CREATE INDEX IDX_entity_changes_isSynced_id ON entity_changes (isSynced, id);
-CREATE INDEX IDX_entity_changes_isErased_entityName ON entity_changes (isErased, entityName);
-CREATE INDEX IDX_notes_isDeleted_utcDateModified ON notes (isDeleted, utcDateModified);
-CREATE INDEX IDX_branches_isDeleted_utcDateModified ON branches (isDeleted, utcDateModified);
-CREATE INDEX IDX_attributes_isDeleted_utcDateModified ON attributes (isDeleted, utcDateModified);
-CREATE INDEX IDX_attachments_isDeleted_utcDateModified ON attachments (isDeleted, utcDateModified);
-CREATE INDEX IDX_attachments_utcDateScheduledForErasureSince ON attachments (utcDateScheduledForErasureSince);

 CREATE TABLE IF NOT EXISTS sessions (
    id TEXT PRIMARY KEY,
--- a/apps/server/src/migrations/migrations.ts
+++ b/apps/server/src/migrations/migrations.ts
@@ -6,27 +6,6 @@

 // Migrations should be kept in descending order, so the latest migration is first.
 const MIGRATIONS: (SqlMigration | JsMigration)[] = [
-    // Add missing database indices for query performance
-    {
-        version: 235,
-        sql: /*sql*/`
-            CREATE INDEX IF NOT EXISTS IDX_entity_changes_isSynced_id
-                ON entity_changes (isSynced, id);
-            CREATE INDEX IF NOT EXISTS IDX_entity_changes_isErased_entityName
-                ON entity_changes (isErased, entityName);
-            CREATE INDEX IF NOT EXISTS IDX_notes_isDeleted_utcDateModified
-                ON notes (isDeleted, utcDateModified);
-            CREATE INDEX IF NOT EXISTS IDX_branches_isDeleted_utcDateModified
-                ON branches (isDeleted, utcDateModified);
-            CREATE INDEX IF NOT EXISTS IDX_attributes_isDeleted_utcDateModified
-                ON attributes (isDeleted, utcDateModified);
-            CREATE INDEX IF NOT EXISTS IDX_attachments_isDeleted_utcDateModified
-                ON attachments (isDeleted, utcDateModified);
-            DROP INDEX IF EXISTS IDX_branches_parentNoteId;
-            CREATE INDEX IF NOT EXISTS IDX_branches_parentNoteId_isDeleted_notePosition
-                ON branches (parentNoteId, isDeleted, notePosition);
-        `
-    },
    // Migrate aiChat notes to code notes since LLM integration has been removed
    {
        version: 234,
--- a/apps/server/src/services/app_info.ts
+++ b/apps/server/src/services/app_info.ts
@@ -5,7 +5,7 @@ import packageJson from "../../package.json" with { type: "json" };
 import build from "./build.js";
 import dataDir from "./data_dir.js";

-const APP_DB_VERSION = 235;
+const APP_DB_VERSION = 234;
 const SYNC_VERSION = 37;
 const CLIPPER_PROTOCOL_VERSION = "1.0";

--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -9,16 +9,16 @@
 		"preview": "pnpm build && vite preview"
 	},
 	"dependencies": {
-		"i18next": "25.10.3",
+		"i18next": "25.8.18",
 		"i18next-http-backend": "3.0.2",
 		"preact": "10.29.0",
 		"preact-iso": "2.11.1",
 		"preact-render-to-string": "6.6.6",
-		"react-i18next": "16.6.0"
+		"react-i18next": "16.5.8"
 	},
 	"devDependencies": {
-		"@preact/preset-vite": "2.10.5",
-		"eslint": "10.1.0",
+		"@preact/preset-vite": "2.10.4",
+		"eslint": "10.0.3",
 		"eslint-config-preact": "2.0.0",
 		"typescript": "5.9.3",
 		"user-agent-data-types": "0.4.2",
--- a/flake.lock
+++ b/flake.lock
@@ -20,11 +20,11 @@
    },
    "nixpkgs": {
      "locked": {
-        "lastModified": 1774171785,
-        "narHash": "sha256-upDSNdH1WEL2Z0ISvRXTWk7rEndTxUcaTOLY9imJYa8=",
+        "lastModified": 1769184885,
+        "narHash": "sha256-wVX5Cqpz66SINNsmt3Bv/Ijzzfl8EPUISq5rKK129K0=",
        "owner": "NixOS",
        "repo": "nixpkgs",
-        "rev": "f8a13215c766347f3da9beef4cfc952eb23fa46e",
+        "rev": "12689597ba7a6d776c3c979f393896be095269d4",
        "type": "github"
      },
      "original": {
@@ -43,16 +43,15 @@
        ]
      },
      "locked": {
-        "lastModified": 1774171918,
-        "narHash": "sha256-0OBrtBnowvYP/YMKh7GB1GX22ORK+2X771EVgT+1tsk=",
-        "owner": "TriliumNext",
+        "lastModified": 1749022118,
+        "narHash": "sha256-7Qzmy1snKbxFBKoqUrfyxxmEB8rPxDdV7PQwRiAR01o=",
+        "owner": "FliegendeWurst",
        "repo": "pnpm2nix-nzbr",
-        "rev": "536d67261ffe7c91cb286c8581cc799a1b61e969",
+        "rev": "35f88a41d29839b3989f31871263451c8e092cb1",
        "type": "github"
      },
      "original": {
-        "owner": "TriliumNext",
-        "ref": "fix/optional_dependencies_filtering",
+        "owner": "FliegendeWurst",
        "repo": "pnpm2nix-nzbr",
        "type": "github"
      }
--- a/flake.nix
+++ b/flake.nix
@@ -5,7 +5,7 @@
    nixpkgs.url = "github:NixOS/nixpkgs";
    flake-utils.url = "github:numtide/flake-utils";
    pnpm2nix = {
-      url = "github:TriliumNext/pnpm2nix-nzbr/fix/optional_dependencies_filtering";
+      url = "github:FliegendeWurst/pnpm2nix-nzbr";
      inputs = {
        flake-utils.follows = "flake-utils";
        nixpkgs.follows = "nixpkgs";
@@ -325,8 +325,6 @@
          buildInputs = [
            nodejs
            pnpm
-            electron
-            nodejs.python
          ];
        };
      }
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
    "cross-env": "10.1.0",
    "dpdm": "4.0.1",
    "esbuild": "0.27.4",
-    "eslint": "10.1.0",
+    "eslint": "10.0.3",
    "eslint-config-preact": "2.0.0",
    "eslint-config-prettier": "10.1.8",
    "eslint-plugin-playwright": "2.10.1",
--- a/packages/ckeditor5-admonition/package.json
+++ b/packages/ckeditor5-admonition/package.json
@@ -29,11 +29,11 @@
    "@vitest/browser": "4.1.0",
    "@vitest/coverage-istanbul": "4.1.0",
    "ckeditor5": "47.6.1",
-    "eslint": "10.1.0",
+    "eslint": "10.0.3",
    "eslint-config-ckeditor5": ">=9.1.0",
    "http-server": "14.1.1",
    "lint-staged": "16.4.0",
-    "stylelint": "17.5.0",
+    "stylelint": "17.4.0",
    "stylelint-config-ckeditor5": ">=9.1.0",
    "ts-node": "10.9.2",
    "typescript": "5.9.3",
--- a/packages/ckeditor5-footnotes/package.json
+++ b/packages/ckeditor5-footnotes/package.json
@@ -30,11 +30,11 @@
    "@vitest/browser": "4.1.0",
    "@vitest/coverage-istanbul": "4.1.0",
    "ckeditor5": "47.6.1",
-    "eslint": "10.1.0",
+    "eslint": "10.0.3",
    "eslint-config-ckeditor5": ">=9.1.0",
    "http-server": "14.1.1",
    "lint-staged": "16.4.0",
-    "stylelint": "17.5.0",
+    "stylelint": "17.4.0",
    "stylelint-config-ckeditor5": ">=9.1.0",
    "ts-node": "10.9.2",
    "typescript": "5.9.3",
--- a/packages/ckeditor5-keyboard-marker/package.json
+++ b/packages/ckeditor5-keyboard-marker/package.json
@@ -32,11 +32,11 @@
    "@vitest/browser": "4.1.0",
    "@vitest/coverage-istanbul": "4.1.0",
    "ckeditor5": "47.6.1",
-    "eslint": "10.1.0",
+    "eslint": "10.0.3",
    "eslint-config-ckeditor5": ">=9.1.0",
    "http-server": "14.1.1",
    "lint-staged": "16.4.0",
-    "stylelint": "17.5.0",
+    "stylelint": "17.4.0",
    "stylelint-config-ckeditor5": ">=9.1.0",
    "ts-node": "10.9.2",
    "typescript": "5.9.3",
--- a/packages/ckeditor5-math/package.json
+++ b/packages/ckeditor5-math/package.json
@@ -32,11 +32,11 @@
    "@vitest/browser": "4.1.0",
    "@vitest/coverage-istanbul": "4.1.0",
    "ckeditor5": "47.6.1",
-    "eslint": "10.1.0",
+    "eslint": "10.0.3",
    "eslint-config-ckeditor5": ">=9.1.0",
    "http-server": "14.1.1",
    "lint-staged": "16.4.0",
-    "stylelint": "17.5.0",
+    "stylelint": "17.4.0",
    "stylelint-config-ckeditor5": ">=9.1.0",
    "ts-node": "10.9.2",
    "typescript": "5.9.3",
--- a/packages/ckeditor5-math/theme/mathform.css
+++ b/packages/ckeditor5-math/theme/mathform.css
@@ -22,9 +22,8 @@
    flex-direction: column;
    padding: var(--ck-spacing-standard);
    box-sizing: border-box;
-	min-width: 400px;
-    max-width: 60vw;
-    max-height: 350px;
+    max-width: 80vw;
+    max-height: 80vh;
    overflow: visible;
    user-select: text;
 }
@@ -64,8 +63,8 @@
    border-radius: var(--ck-border-radius);
    background: var(--ck-color-input-background) !important;
    transition: border-color 120ms ease;
-    overflow: auto;
-    clip-path: none;
+    overflow: visible !important;
+    clip-path: none !important;
 }
 .ck.ck-math-input .ck-mathlive-container:focus-within {
    border-color: var(--ck-color-focus-border);
@@ -160,12 +159,16 @@
 .ck.ck-math-preview {
    width: 100%;
    min-height: 40px;
+    max-height: none !important;
+    height: auto !important;
    padding: var(--ck-spacing-small);
    background: transparent !important;
    border: none !important;
    display: block;
    text-align: left;
-    overflow: auto;
+    overflow-x: auto !important;
+    overflow-y: visible !important;
+    flex-shrink: 0;
 }

 /* Center equation when in display mode */
@@ -210,7 +213,8 @@
 .ck.ck-balloon-panel .ck-balloon-panel__content,
 .ck.ck-math-form,
 .ck-math-view,
-.ck.ck-math-input {
+.ck.ck-math-input,
+.ck.ck-math-input .ck-mathlive-container {
    overflow: visible !important;
    clip-path: none !important;
 }
--- a/packages/ckeditor5-mermaid/package.json
+++ b/packages/ckeditor5-mermaid/package.json
@@ -32,11 +32,11 @@
    "@vitest/browser": "4.1.0",
    "@vitest/coverage-istanbul": "4.1.0",
    "ckeditor5": "47.6.1",
-    "eslint": "10.1.0",
+    "eslint": "10.0.3",
    "eslint-config-ckeditor5": ">=9.1.0",
    "http-server": "14.1.1",
    "lint-staged": "16.4.0",
-    "stylelint": "17.5.0",
+    "stylelint": "17.4.0",
    "stylelint-config-ckeditor5": ">=9.1.0",
    "ts-node": "10.9.2",
    "typescript": "5.9.3",
--- a/packages/codemirror/package.json
+++ b/packages/codemirror/package.json
@@ -52,6 +52,6 @@
    "codemirror-lang-elixir": "4.0.1",
    "codemirror-lang-hcl": "0.1.0",
    "codemirror-lang-mermaid": "0.5.0",
-    "eslint-linter-browserify": "10.1.0"
+    "eslint-linter-browserify": "10.0.3"
  }
 }
--- a/packages/share-theme/package.json
+++ b/packages/share-theme/package.json
@@ -25,7 +25,7 @@
  "license": "Apache-2.0",
  "dependencies": {
    "fuse.js": "7.1.0",
-    "katex": "0.16.40",
+    "katex": "0.16.39",
    "mermaid": "11.13.0"
  },
  "devDependencies": {
@@ -35,7 +35,7 @@
    "@typescript-eslint/parser": "8.57.1",
    "dotenv": "17.3.1",
    "esbuild": "0.27.4",
-    "eslint": "10.1.0",
+    "eslint": "10.0.3",
    "highlight.js": "11.11.1",
    "typescript": "5.9.3"
  }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
Author	SHA1	Message	Date
Elian Doran	f729e5b379	style(lexical): improve toolbar	2026-03-20 18:30:56 +02:00
Elian Doran	6e8c4813d9	fix(lexical): toolbar icon alignment	2026-03-20 18:28:51 +02:00
Elian Doran	029e8469b4	feat(lexical): add icons to toolbar and basic styling	2026-03-20 18:27:28 +02:00
Elian Doran	715b87fb3d	chore(lexical): start working on a toolbar	2026-03-20 18:11:43 +02:00
Elian Doran	3d860ba2c4	feat(lexical): integrate scroll to end	2026-03-20 18:05:40 +02:00
Elian Doran	8b479ac4ba	fix(lexical): unnecessary outline	2026-03-20 18:03:04 +02:00
Elian Doran	dcfcc7a334	fix(lexical): missing margin	2026-03-20 18:02:07 +02:00
Elian Doran	daa0109f7f	fix(lexical): placeholder display issue	2026-03-20 18:00:47 +02:00
Elian Doran	f46e20aa25	feat(lexical): clear history when switching notes	2026-03-20 17:54:08 +02:00
Elian Doran	e8045424b2	feat(lexical): basic read	2026-03-20 17:51:23 +02:00
Elian Doran	7e6b628f86	feat(lexical): write without reading	2026-03-20 17:43:32 +02:00
Elian Doran	fc247fe790	feat(lexical): add very basic integration	2026-03-20 17:34:29 +02:00
Elian Doran	7a2fa2e829	feat(lexical): switch editable text based on MIME	2026-03-20 17:25:20 +02:00
Elian Doran	3e3f455b24	feat(lexical): integrate different MIME type for text	2026-03-20 17:17:44 +02:00