Merge f8d84814e079bdca892c1c2cac75c53baa96f20b into 8eca14069a263efac5133f0aa6e946e0ad9d554e

Currently translated at 100.0% (1638 of 1638 strings)

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

.github/workflows/playwright.yml

@@ -79,7 +79,7 @@ jobs:
         if: failure()
         uses: actions/upload-artifact@v5
         with:
-          name: e2e report
+          name: e2e report ${{ matrix.arch }}
           path: apps/server-e2e/test-output
 
       - name: Kill the server

apps/client/src/menus/context_menu_utils.ts

@@ -0,0 +1,21 @@
+import { t } from "../services/i18n"
+import attributes from "../services/attributes"
+import FNote from "../entities/fnote"
+
+export function getArchiveMenuItem(note: FNote) {
+    if (!note.isArchived) {
+        return {
+            title: t("board_view.archive-note"),
+            uiIcon: "bx bx-archive",
+            handler: () => attributes.addLabel(note.noteId, "archived")
+        }
+    } else {
+        return {
+            title: t("board_view.unarchive-note"),
+            uiIcon: "bx bx-archive-out",
+            handler: async () => {
+                attributes.removeOwnedLabelByName(note, "archived")
+            }
+        }
+    }
+}

apps/client/src/services/utils.ts

@@ -207,7 +207,7 @@ function toObject<T, R>(array: T[], fn: (arg0: T) => [key: string, value: R]) {
     return obj;
 }
 
-function randomString(len: number) {
+export function randomString(len: number) {
     let text = "";
     const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 

apps/client/src/stylesheets/style.css

@@ -257,6 +257,11 @@ button.close:hover {
     color: var(--hover-item-text-color);
 }
 
+button.custom-title-bar-button {
+    background: transparent;
+    border: unset;
+}
+
 .modal-content {
     background-color: var(--modal-background-color) !important;
 }

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

@@ -275,7 +275,8 @@
     --calendar-coll-event-background-lightness: 20%;
     --calendar-coll-event-background-color: #3c3c3c;
     --calendar-coll-event-text-color: white;
-    --calendar-cell-event-hover-filter: brightness(1.25);
+    --calendar-coll-event-hover-filter: brightness(1.25);
+    --callendar-coll-event-archived-sripe-color: #00000026;
     --calendar-coll-today-background-color: #ffffff08;
 }
 

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

@@ -273,7 +273,8 @@
     --calendar-coll-event-background-saturation: 80%;
     --calendar-coll-event-background-color: #eaeaea;
     --calendar-coll-event-text-color: black;
-    --calendar-cell-event-hover-filter: brightness(.95) saturate(1.25);
+    --calendar-coll-event-hover-filter: brightness(.95) saturate(1.25);
+    --callendar-coll-event-archived-sripe-color: #0000000a;
     --calendar-coll-today-background-color: #00000006;
 }
 

apps/client/src/stylesheets/theme-next/notes/text.css

@@ -643,7 +643,7 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
     }
 }
 
-.note-detail-printable:not(.word-wrap) pre code {
+.ck-content:not(.word-wrap) pre code {
     white-space: pre;
 }
 

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

@@ -162,7 +162,8 @@
     "inPageSearch": "页面内搜索",
     "newTabWithActivationNoteLink": "在新标签页打开笔记链接并激活该标签页",
     "title": "资料表",
-    "newTabNoteLink": "在新标签页开启链接"
+    "newTabNoteLink": "在新标签页开启链接",
+    "editShortcuts": "编辑键盘快捷键"
   },
   "import": {
     "importIntoNote": "导入到笔记",
@@ -2104,5 +2105,8 @@
     "clear-color": "清除笔记颜色",
     "set-color": "设置笔记颜色",
     "set-custom-color": "设置自定义笔记颜色"
+  },
+  "popup-editor": {
+    "maximize": "切换至完整编辑器"
   }
 }

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

@@ -736,8 +736,8 @@
     "zoom_out_title": "Zoom Out"
   },
   "zpetne_odkazy": {
-    "backlink": "{{count}} Backlink",
-    "backlinks": "{{count}} Backlinks",
+    "backlink_one": "{{count}} Backlink",
+    "backlink_other": "{{count}} Backlinks",
     "relation": "relation"
   },
   "mobile_detail_menu": {

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

@@ -2105,5 +2105,8 @@
     "clear-color": "ノートの色をクリア",
     "set-color": "ノートの色を設定",
     "set-custom-color": "ノートの色をカスタム設定"
+  },
+  "popup-editor": {
+    "maximize": "フルエディターに切り替え"
   }
 }

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

@@ -1362,8 +1362,9 @@
     "title": "Factorul de zoom (doar pentru versiunea desktop)"
   },
   "zpetne_odkazy": {
-    "backlink": "{{count}} legături de retur",
-    "backlinks": "{{count}} legături de retur",
+    "backlink_one": "{{count}} legătură de retur",
+    "backlink_few": "{{count}} legături de retur",
+    "backlink_other": "{{count}} de legături de retur",
     "relation": "relație"
   },
   "svg_export_button": {

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

@@ -162,7 +162,8 @@
     "inPageSearch": "頁面內搜尋",
     "title": "列表",
     "newTabNoteLink": "在新分頁開啟筆記連結",
-    "newTabWithActivationNoteLink": "在新分頁開啟並切換至筆記連結"
+    "newTabWithActivationNoteLink": "在新分頁開啟並切換至筆記連結",
+    "editShortcuts": "編輯鍵盤快捷鍵"
   },
   "import": {
     "importIntoNote": "匯入至筆記",
@@ -2104,5 +2105,8 @@
     "clear-color": "清除筆記顏色",
     "set-color": "設定筆記顏色",
     "set-custom-color": "設定自訂筆記顏色"
+  },
+  "popup-editor": {
+    "maximize": "切換至完整編輯器"
   }
 }

apps/client/src/widgets/FloatingButtonsDefinitions.tsx

@@ -18,6 +18,7 @@ import froca from "../services/froca";
 import NoteLink from "./react/NoteLink";
 import RawHtml from "./react/RawHtml";
 import { ViewTypeOptions } from "./collections/interface";
+import attributes from "../services/attributes";
 
 export interface FloatingButtonContext {
     parentComponent: Component;
@@ -310,13 +311,24 @@ function Backlinks({ note, isDefaultViewMode }: FloatingButtonContext) {
     let [ popupOpen, setPopupOpen ] = useState(false);
     const backlinksContainerRef = useRef<HTMLDivElement>(null);
 
-    useEffect(() => {
+    function refresh() {
         if (!isDefaultViewMode) return;
 
         server.get<BacklinkCountResponse>(`note-map/${note.noteId}/backlink-count`).then(resp => {
             setBacklinkCount(resp.count);
         });
-    }, [ note ]);
+    }
+
+    useEffect(() => refresh(), [ note ]);
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        loadResults.getAttributeRows().some(attr =>
+            attr.type === "relation" &&
+            attr.name === "internalLink" &&
+            attributes.isAffecting(attr, note))
+        {
+            refresh();
+        }
+    });
 
     // Determine the max height of the container.
     const { windowHeight } = useWindowSize();

apps/client/src/widgets/PromotedAttributes.tsx

@@ -14,8 +14,10 @@ import ws from "../services/ws";
 import { UpdateAttributeResponse } from "@triliumnext/commons";
 import attributes from "../services/attributes";
 import debounce from "../services/debounce";
+import { randomString } from "../services/utils";
 
 interface Cell {
+    uniqueId: string;
     definitionAttr: FAttribute;
     definition: DefinitionObject;
     valueAttr: Attribute;
@@ -44,6 +46,7 @@ export default function PromotedAttributes() {
         <div className="promoted-attributes-widget">
             {cells && cells.length > 0 && <div className="promoted-attributes-container">
                 {note && cells?.map(cell => <PromotedAttributeCell
+                    key={cell.uniqueId}
                     cell={cell}
                     cells={cells} setCells={setCells}
                     shouldFocus={cell === cellToFocus} setCellToFocus={setCellToFocus}
@@ -103,7 +106,8 @@ function usePromotedAttributeData(note: FNote | null | undefined, componentId: s
                     valueAttr.attributeId = "";
                 }
 
-                cells.push({  definitionAttr, definition, valueAttr, valueName });
+                const uniqueId = randomString(10);
+                cells.push({  definitionAttr, definition, valueAttr, valueName, uniqueId });
             }
         }
         setCells(cells);

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

@@ -2,9 +2,9 @@ import FNote from "../../../entities/fnote";
 import NoteColorPicker from "../../../menus/custom-items/NoteColorPicker";
 import contextMenu, { ContextMenuEvent } from "../../../menus/context_menu";
 import link_context_menu from "../../../menus/link_context_menu";
-import attributes from "../../../services/attributes";
 import branches from "../../../services/branches";
 import dialog from "../../../services/dialog";
+import { getArchiveMenuItem } from "../../../menus/context_menu_utils";
 import { t } from "../../../services/i18n";
 import Api from "./api";
 
@@ -43,17 +43,6 @@ export function openNoteContextMenu(api: Api, event: ContextMenuEvent, note: FNo
         items: [
             ...link_context_menu.getItems(),
             { kind: "separator" },
-            {
-                title: t("board_view.move-to"),
-                uiIcon: "bx bx-transfer",
-                items: api.columns.map(columnToMoveTo => ({
-                    title: columnToMoveTo,
-                    enabled: columnToMoveTo !== column,
-                    handler: () => api.changeColumn(note.noteId, columnToMoveTo)
-                })),
-            },
-            getArchiveMenuItem(note),
-            { kind: "separator" },
             {
                 title: t("board_view.insert-above"),
                 uiIcon: "bx bx-list-plus",
@@ -65,6 +54,17 @@ export function openNoteContextMenu(api: Api, event: ContextMenuEvent, note: FNo
                 handler: () => api.insertRowAtPosition(column, branchId, "after")
             },
             { kind: "separator" },
+            {
+                title: t("board_view.move-to"),
+                uiIcon: "bx bx-transfer",
+                items: api.columns.map(columnToMoveTo => ({
+                    title: columnToMoveTo,
+                    enabled: columnToMoveTo !== column,
+                    handler: () => api.changeColumn(note.noteId, columnToMoveTo)
+                })),
+            },
+            { kind: "separator" },
+            getArchiveMenuItem(note),
             {
                 title: t("board_view.remove-from-board"),
                 uiIcon: "bx bx-task-x",
@@ -85,20 +85,3 @@ export function openNoteContextMenu(api: Api, event: ContextMenuEvent, note: FNo
     });
 }
 
-function getArchiveMenuItem(note: FNote) {
-    if (!note.isArchived) {
-        return {
-            title: t("board_view.archive-note"),
-            uiIcon: "bx bx-archive",
-            handler: () => attributes.addLabel(note.noteId, "archived")
-        }
-    } else {
-        return {
-            title: t("board_view.unarchive-note"),
-            uiIcon: "bx bx-archive-out",
-            handler: async () => {
-                attributes.removeOwnedLabelByName(note, "archived")
-            }
-        }
-    }
-}

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

@@ -3,11 +3,10 @@ import FNote from "../../../entities/fnote";
 import contextMenu, { ContextMenuEvent } from "../../../menus/context_menu";
 import link_context_menu from "../../../menus/link_context_menu";
 import branches from "../../../services/branches";
-import froca from "../../../services/froca";
-import { note } from "mermaid/dist/rendering-util/rendering-elements/shapes/note.js";
+import { getArchiveMenuItem } from "../../../menus/context_menu_utils";
 import { t } from "../../../services/i18n";
 
-export function openCalendarContextMenu(e: ContextMenuEvent, noteId: string, parentNote: FNote) {
+export function openCalendarContextMenu(e: ContextMenuEvent, note: FNote, parentNote: FNote) {
     e.preventDefault();
     e.stopPropagation();
 
@@ -17,15 +16,13 @@ export function openCalendarContextMenu(e: ContextMenuEvent, noteId: string, par
         items: [
             ...link_context_menu.getItems(),
             { kind: "separator" },
+            getArchiveMenuItem(note),
             {
                 title: t("calendar_view.delete_note"),
                 uiIcon: "bx bx-trash",
                 handler: async () => {
-                    const noteToDelete = await froca.getNote(noteId);
-                    if (!noteToDelete) return;
-
                     let branchIdToDelete: string | null = null;
-                    for (const parentBranch of noteToDelete.getParentBranches()) {
+                    for (const parentBranch of note.getParentBranches()) {
                         const parentNote = await parentBranch.getNote();
                         if (parentNote?.hasAncestor(parentNote.noteId)) {
                             branchIdToDelete = parentBranch.branchId;
@@ -40,9 +37,9 @@ export function openCalendarContextMenu(e: ContextMenuEvent, noteId: string, par
             { kind: "separator" },
             {
                 kind: "custom",
-                componentFn: () => NoteColorPicker({note: noteId})
+                componentFn: () => NoteColorPicker({note: note})
             }
         ],
-        selectMenuItemHandler: ({ command }) =>  link_context_menu.handleLinkContextMenuItem(command, noteId),
+        selectMenuItemHandler: ({ command }) =>  link_context_menu.handleLinkContextMenuItem(command, note.noteId),
     })
 }

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

@@ -3,8 +3,9 @@
     --calendar-coll-event-background-lightness: 95%;
     --calendar-coll-event-background-saturation: 80%;
     --calendar-coll-event-background-color: var(--accented-background-color);
-    --calendar-coll-event-text-color: var(--primary-button-text-color);
-    --calendar-cell-event-hover-filter: none;
+    --calendar-coll-event-text-color: var(--main-text-color);
+    --calendar-coll-event-hover-filter: none;
+    --callendar-coll-event-archived-sripe-color: #00000013;
     --calendar-coll-today-background-color: var(--more-accented-background-color);
 }
 
@@ -53,7 +54,23 @@
 }
 
 .calendar-container a.fc-event.archived {
-    opacity: 0.5;
+    opacity: .65;
+}
+
+.calendar-container a.fc-event.archived::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+
+    --c1: transparent;
+    --c2: var(--callendar-coll-event-archived-sripe-color);
+
+    background: repeating-linear-gradient(45deg, var(--c1), var(--c1) 8px,
+                                          var(--c2) 8px, var(--c2) 16px) !important;
 }
 
 .calendar-container .fc-button {
@@ -129,17 +146,18 @@ body.desktop:not(.zen) .calendar-view .calendar-header {
 
 .calendar-view a.fc-timegrid-event:hover,
 .calendar-view a.fc-daygrid-event:hover {
-    filter: var(--calendar-cell-event-hover-filter);
+    filter: var(--calendar-coll-event-hover-filter);
     border-color: var(--fc-event-text-color);
     text-decoration: none;
     color: currentColor;
+    opacity: 1;
 }
 
 .calendar-view .fc-timegrid-event.with-hue,
 .calendar-view .fc-daygrid-event.with-hue {
     --fc-event-text-color: var(--custom-color);
 
-    background: hsl(var(--custom-color-hue),
+    --fc-event-bg-color: hsl(var(--custom-color-hue),
                     var(--calendar-coll-event-background-saturation),
                     var(--calendar-coll-event-background-lightness)) !important;
 }

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

@@ -307,9 +307,11 @@ function useEventDisplayCustomization(parentNote: FNote) {
             $(mainContainer ?? e.el).append($(promotedAttributesHtml));
         }
 
-        e.el.addEventListener("contextmenu", (contextMenuEvent) => {
-            const noteId = e.event.extendedProps.noteId;
-            openCalendarContextMenu(contextMenuEvent, noteId, parentNote);
+        e.el.addEventListener("contextmenu", async (contextMenuEvent) => {
+            const note = await froca.getNote(e.event.extendedProps.noteId);
+            if (!note) return;
+
+            openCalendarContextMenu(contextMenuEvent, note, parentNote);
         });
     }, []);
     return { eventDidMount };

apps/dump-db/package.json

@@ -7,7 +7,7 @@
     "better-sqlite3": "12.5.0",
     "mime-types": "3.0.2",
     "sanitize-filename": "1.6.3",
-    "tsx": "4.20.6",
+    "tsx": "4.21.0",
     "yargs": "18.0.0"
   },
   "devDependencies": {

apps/server-e2e/src/i18n.spec.ts

@@ -43,7 +43,7 @@ test("User can change language from settings", async ({ page, context }) => {
     // Check that the default value (English) is set.
     await expect(app.currentNoteSplit).toContainText("First day of the week");
     const languageCombobox = app.dropdown(app.currentNoteSplit.locator(".options-section .dropdown").first());
-    await expect(languageCombobox).toContainText("English");
+    await expect(languageCombobox).toContainText("English (United States)");
 
     // Select Chinese and ensure the translation is set.
     await languageCombobox.selectOptionByText("简体中文");
@@ -53,8 +53,8 @@ test("User can change language from settings", async ({ page, context }) => {
     await expect(languageCombobox).toContainText("简体中文");
 
     // Select English again.
-    await languageCombobox.selectOptionByText("English");
+    await languageCombobox.selectOptionByText("English (United States)");
     await app.currentNoteSplit.locator("button[name=restart-app-button]").click();
     await expect(app.currentNoteSplit).toContainText("Language", { timeout: 15000 });
-    await expect(languageCombobox).toContainText("English");
+    await expect(languageCombobox).toContainText("English (United States)");
 });

docs/README-fa.md

@@ -33,50 +33,39 @@ quick overview:
 
 <a href="https://triliumnext.github.io/Docs/Wiki/screenshot-tour"><img src="./docs/app.png" alt="Trilium Screenshot" width="1000"></a>
 
-## ⏬ Download
-- [Latest release](https://github.com/TriliumNext/Trilium/releases/latest) –
-  stable version, recommended for most users.
+## ⏬ دانلود
+- [آخرین انتشار]{‍‏1} – نسخه پایدار، برای بیشتر کاربران ‎ پیشنهاد می‌شود.
 - [Nightly build](https://github.com/TriliumNext/Trilium/releases/tag/nightly) –
   unstable development version, updated daily with the latest features and
   fixes.
 
-## 📚 Documentation
+## 📚 کتابچه راهنما
 
 **Visit our comprehensive documentation at
 [docs.triliumnotes.org](https://docs.triliumnotes.org/)**
 
-Our documentation is available in multiple formats:
-- **Online Documentation**: Browse the full documentation at
-  [docs.triliumnotes.org](https://docs.triliumnotes.org/)
-- **In-App Help**: Press `F1` within Trilium to access the same documentation
-  directly in the application
-- **GitHub**: Navigate through the [User
-  Guide](./docs/User%20Guide/User%20Guide/) in this repository
+مستندات ما در چندین قالب مختلف در دسترس است:
+- مستندات آنلاین: می‌توانید نسخهٔ کامل مستندات را در
+  ‎[docs.triliumnotes.org](https://docs.triliumnotes.org/)‎ مرور کنید
+- ** In-App Help **: Press `F1 ` در Trilium برای دسترسی به همان اسناد به طور
+  مستقیم در برنامه
+- ** GitHub **: از طریق [راهنمای کاربر] در این مخزن حرکت کنید
 
-### Quick Links
-- [Getting Started Guide](https://docs.triliumnotes.org/)
-- [Installation
-  Instructions](./docs/User%20Guide/User%20Guide/Installation%20&%20Setup/Server%20Installation.md)
-- [Docker
-  Setup](./docs/User%20Guide/User%20Guide/Installation%20&%20Setup/Server%20Installation/1.%20Installing%20the%20server/Using%20Docker.md)
-- [Upgrading
-  TriliumNext](./docs/User%20Guide/User%20Guide/Installation%20%26%20Setup/Upgrading%20TriliumNext.md)
-- [Basic Concepts and
-  Features](./docs/User%20Guide/User%20Guide/Basic%20Concepts%20and%20Features/Notes.md)
-- [Patterns of Personal Knowledge
-  Base](https://triliumnext.github.io/Docs/Wiki/patterns-of-personal-knowledge)
+### لینک‌های سریع
+- راهنمای شروع کار
+- دستورالعمل‌های نصب
+- راه‌اندازی داکر
+- ارتقای TriliumNext
+- مفاهیم و ویژگی‌های پایه
+- الگوهای پایگاه دانشی شخصی
 
-## 🎁 Features
+## 🎁 ویژگی‌ها
 
-* Notes can be arranged into arbitrarily deep tree. Single note can be placed
-  into multiple places in the tree (see
-  [cloning](https://triliumnext.github.io/Docs/Wiki/cloning-notes))
-* Rich WYSIWYG note editor including e.g. tables, images and
-  [math](https://triliumnext.github.io/Docs/Wiki/text-notes) with markdown
-  [autoformat](https://triliumnext.github.io/Docs/Wiki/text-notes#autoformat)
-* Support for editing [notes with source
-  code](https://triliumnext.github.io/Docs/Wiki/code-notes), including syntax
-  highlighting
+* یادداشت‌ها می‌توانند در یک درخت با عمق دلخواه سازمان‌دهی شوند. یک یادداشت
+  می‌تواند در چندین نقطهٔ مختلف از درخت قرار گیرد.
+* ویرایشگر یادداشت غنی WYSIWYG از جمله جداول، تصاویر و [math] [1] با علامت گذاری
+  [autoformat] [2]
+* پشتیبانی از ویرایش [یادداشت با کد منبع][۱]، از جمله نحو برجسته
 * Fast and easy [navigation between
   notes](https://triliumnext.github.io/Docs/Wiki/note-navigation), full text
   search and [note

package.json

@@ -53,7 +53,7 @@
     "esbuild": "0.27.0",
     "eslint": "9.39.1",
     "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-playwright": "2.3.0",
+    "eslint-plugin-playwright": "2.4.0",
     "eslint-plugin-react-hooks": "7.0.1",
     "happy-dom": "~20.0.0",
     "http-server": "14.1.1",
@@ -62,7 +62,7 @@
     "react-refresh": "0.18.0",
     "rollup-plugin-webpack-stats": "2.1.8",
     "tslib": "2.8.1",
-    "tsx": "4.20.6",
+    "tsx": "4.21.0",
     "typescript": "~5.9.0",
     "typescript-eslint": "8.48.0",
     "upath": "2.0.1",

packages/ckeditor5-math/package.json

@@ -71,6 +71,7 @@
     ]
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-icons": "47.2.0"
+    "@ckeditor/ckeditor5-icons": "47.2.0",
+    "mathlive": "0.108.2"
   }
 }

packages/ckeditor5-math/src/index.ts

@@ -1,6 +1,9 @@
 import ckeditor from './../theme/icons/math.svg?raw';
 import './augmentation.js';
 import "../theme/mathform.css";
+import 'mathlive';
+import 'mathlive/fonts.css';
+import 'mathlive/static.css';
 
 export { default as Math } from './math.js';
 export { default as MathUI } from './mathui.js';

packages/ckeditor5-math/src/mathui.ts

@@ -56,7 +56,7 @@ export default class MathUI extends Plugin {
 		this._balloon.showStack( 'main' );
 
 		requestAnimationFrame(() => {
-			this.formView?.mathInputView.fieldView.element?.focus();
+			this.formView?.mathLiveInputView.focus();
 		});
 	}
 
@@ -71,31 +71,38 @@ export default class MathUI extends Plugin {
 			throw new CKEditorError( 'math-command' );
 		}
 
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
 		const mathConfig = editor.config.get( 'math' )!;
 
 		const formView = new MainFormView(
 			editor.locale,
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			mathConfig.engine!,
-			mathConfig.lazyLoad,
+			{
+				engine: mathConfig.engine!,
+				lazyLoad: mathConfig.lazyLoad,
+				previewUid: this._previewUid,
+				previewClassName: mathConfig.previewClassName!,
+				katexRenderOptions: mathConfig.katexRenderOptions!
+			},
 			mathConfig.enablePreview,
-			this._previewUid,
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			mathConfig.previewClassName!,
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			mathConfig.popupClassName!,
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			mathConfig.katexRenderOptions!
+			mathConfig.popupClassName!
 		);
 
-		formView.mathInputView.bind( 'value' ).to( mathCommand, 'value' );
+		formView.mathLiveInputView.bind( 'value' ).to( mathCommand, 'value' );
 		formView.displayButtonView.bind( 'isOn' ).to( mathCommand, 'display' );
 
 		// Form elements should be read-only when corresponding commands are disabled.
-		formView.mathInputView.bind( 'isReadOnly' ).to( mathCommand, 'isEnabled', value => !value );
-		formView.saveButtonView.bind( 'isEnabled' ).to( mathCommand );
-		formView.displayButtonView.bind( 'isEnabled' ).to( mathCommand );
+		formView.mathLiveInputView.bind( 'isReadOnly' ).to( mathCommand, 'isEnabled', value => !value );
+		formView.saveButtonView.bind( 'isEnabled' ).to(
+			mathCommand,
+			'isEnabled',
+			formView.mathLiveInputView,
+			'value',
+			( commandEnabled, equation ) => {
+				const normalizedEquation = ( equation ?? '' ).trim();
+				return commandEnabled && normalizedEquation.length > 0;
+			}
+		);
+		formView.displayButtonView.bind( 'isEnabled' ).to( mathCommand, 'isEnabled' );
 
 		// Listen to submit button click
 		this.listenTo( formView, 'submit', () => {
@@ -122,18 +129,6 @@ export default class MathUI extends Plugin {
 			}
 		});
 
-		// Allow the textarea to be resizable
-		formView.mathInputView.fieldView.once('render', () => {
-			const textarea = formView.mathInputView.fieldView.element;
-			if (!textarea) return;
-			Object.assign(textarea.style, {
-				resize: 'both',
-				height: '100px',
-				width: '400px',
-				minWidth: '100%',
-			});
-		});
-
 		return formView;
 	}
 
@@ -162,14 +157,14 @@ export default class MathUI extends Plugin {
 		} );
 
 		if ( this._balloon.visibleView === this.formView ) {
-			this.formView.mathInputView.fieldView.element?.select();
+			this.formView.mathLiveInputView.focus();
 		}
 
 		// Show preview element
 		const previewEl = document.getElementById( this._previewUid );
-		if ( previewEl && this.formView.previewEnabled ) {
+		if ( previewEl && this.formView.mathView ) {
 			// Force refresh preview
-			this.formView.mathView?.updateMath();
+			this.formView.mathView.updateMath();
 		}
 
 		this.formView.equation = mathCommand.value ?? '';

packages/ckeditor5-math/src/ui/mainformview.ts

@@ -1,270 +1,219 @@
-import { ButtonView, createLabeledTextarea, FocusCycler, LabelView, LabeledFieldView, submitHandler, SwitchButtonView, View, ViewCollection, type TextareaView, type FocusableView, Locale, FocusTracker, KeystrokeHandler } from 'ckeditor5';
-import IconCheck from "@ckeditor/ckeditor5-icons/theme/icons/check.svg?raw";
-import IconCancel from "@ckeditor/ckeditor5-icons/theme/icons/cancel.svg?raw";
+import {
+	ButtonView,
+	FocusCycler,
+	LabelView,
+	submitHandler,
+	SwitchButtonView,
+	View,
+	ViewCollection,
+	type FocusableView,
+	Locale,
+	FocusTracker,
+	KeystrokeHandler
+} from 'ckeditor5';
+import IconCheck from '@ckeditor/ckeditor5-icons/theme/icons/check.svg?raw';
+import IconCancel from '@ckeditor/ckeditor5-icons/theme/icons/cancel.svg?raw';
 import { extractDelimiters, hasDelimiters } from '../utils.js';
-import MathView from './mathview.js';
+import MathView, { type MathViewOptions } from './mathview.js';
+import MathLiveInputView from './mathliveinputview.js';
+import RawLatexInputView from './rawlatexinputview.js';
 import '../../theme/mathform.css';
-import type { KatexOptions } from '../typings-external.js';
-
-class MathInputView extends LabeledFieldView<TextareaView> {
-	public value: null | string = null;
-	public isReadOnly = false;
-
-	constructor( locale: Locale ) {
-		super( locale, createLabeledTextarea );
-	}
-}
 
 export default class MainFormView extends View {
 	public saveButtonView: ButtonView;
-	public mathInputView: MathInputView;
-	public displayButtonView: SwitchButtonView;
 	public cancelButtonView: ButtonView;
-	public previewEnabled: boolean;
-	public previewLabel?: LabelView;
+	public displayButtonView: SwitchButtonView;
+
+	public mathLiveInputView: MathLiveInputView;
+	public rawLatexInputView: RawLatexInputView;
 	public mathView?: MathView;
-	public override locale: Locale = new Locale();
-	public lazyLoad: undefined | ( () => Promise<void> );
+
+	public focusTracker = new FocusTracker();
+	public keystrokes = new KeystrokeHandler();
+	private _focusables = new ViewCollection<FocusableView>();
+	private _focusCycler: FocusCycler;
 
 	constructor(
 		locale: Locale,
-		engine:
-			| 'mathjax'
-			| 'katex'
-			| ( (
-				equation: string,
-				element: HTMLElement,
-				display: boolean,
-			) => void ),
-		lazyLoad: undefined | ( () => Promise<void> ),
+		mathViewOptions: MathViewOptions,
 		previewEnabled = false,
-		previewUid: string,
-		previewClassName: Array<string>,
-		popupClassName: Array<string>,
-		katexRenderOptions: KatexOptions
+		popupClassName: string[] = []
 	) {
 		super( locale );
-
 		const t = locale.t;
 
-		// Submit button
-		this.saveButtonView = this._createButton( t( 'Save' ), IconCheck, 'ck-button-save', null );
+		// --- 1. View Initialization ---
+
+		this.mathLiveInputView = new MathLiveInputView( locale );
+		this.rawLatexInputView = new RawLatexInputView( locale );
+		this.rawLatexInputView.label = t( 'LaTeX' );
+
+		this.saveButtonView = this._createButton( t( 'Save' ), IconCheck, 'ck-button-save' );
 		this.saveButtonView.type = 'submit';
 
-		// Equation input
-		this.mathInputView = this._createMathInput();
+		this.cancelButtonView = this._createButton( t( 'Cancel' ), IconCancel, 'ck-button-cancel' );
+		this.cancelButtonView.delegate( 'execute' ).to( this, 'cancel' );
 
-		// Display button
-		this.displayButtonView = this._createDisplayButton();
+		this.displayButtonView = this._createDisplayButton( t );
 
-		// Cancel button
-		this.cancelButtonView = this._createButton( t( 'Cancel' ), IconCancel, 'ck-button-cancel', 'cancel' );
+		// --- 2. Construct Children & Preview ---
 
-		this.previewEnabled = previewEnabled;
-
-		let children = [];
-		if ( this.previewEnabled ) {
-			// Preview label
-			this.previewLabel = new LabelView( locale );
-			this.previewLabel.text = t( 'Equation preview' );
-
-			// Math element
-			this.mathView = new MathView( engine, lazyLoad, locale, previewUid, previewClassName, katexRenderOptions );
-			this.mathView.bind( 'display' ).to( this.displayButtonView, 'isOn' );
-
-			children = [
-				this.mathInputView,
-				this.displayButtonView,
-				this.previewLabel,
-				this.mathView
-			];
-		} else {
-			children = [
-				this.mathInputView,
+		const children: View[] = [
+			this.mathLiveInputView,
+			this.rawLatexInputView,
 			this.displayButtonView
 		];
+
+		if ( previewEnabled ) {
+			const previewLabel = new LabelView( locale );
+			previewLabel.text = t( 'Equation preview' );
+
+			// Clean instantiation using the options object
+			this.mathView = new MathView( locale, mathViewOptions );
+
+			// Bind display mode: When button flips, preview updates automatically
+			this.mathView.bind( 'display' ).to( this.displayButtonView, 'isOn' );
+
+			children.push( previewLabel, this.mathView );
 		}
 
-		// Add UI elements to template
+		// --- 3. Sync Logic ---
+		this._setupInputSync( previewEnabled );
+
+		// --- 4. Template Setup ---
 		this.setTemplate( {
 			tag: 'form',
 			attributes: {
-				class: [
-					'ck',
-					'ck-math-form',
-					...popupClassName
-				],
+				class: [ 'ck', 'ck-math-form', ...popupClassName ],
 				tabindex: '-1',
 				spellcheck: 'false'
 			},
 			children: [
 				{
 					tag: 'div',
-					attributes: {
-						class: [
-							'ck-math-view'
-						]
+					attributes: { class: [ 'ck-math-scroll' ] },
+					children: [ { tag: 'div', attributes: { class: [ 'ck-math-view' ] }, children } ]
 				},
-					children
-				},
-				this.saveButtonView,
-				this.cancelButtonView
+				{
+					tag: 'div',
+					attributes: { class: [ 'ck-math-button-row' ] },
+					children: [ this.saveButtonView, this.cancelButtonView ]
+				}
 			]
 		} );
+
+		// --- 5. Accessibility ---
+		this._focusCycler = new FocusCycler( {
+			focusables: this._focusables,
+			focusTracker: this.focusTracker,
+			keystrokeHandler: this.keystrokes,
+			actions: { focusPrevious: 'shift + tab', focusNext: 'tab' }
+		} );
 	}
 
 	public override render(): void {
 		super.render();
 
-		// Prevent default form submit event & trigger custom 'submit'
-		submitHandler( {
-			view: this
-		} );
+		submitHandler( { view: this } );
 
-		// Register form elements to focusable elements
-		const childViews = [
-			this.mathInputView,
+		// Register focusables
+		[
+			this.mathLiveInputView,
+			this.rawLatexInputView,
 			this.displayButtonView,
 			this.saveButtonView,
 			this.cancelButtonView
-		];
-
-		childViews.forEach( v => {
+		].forEach( v => {
 			if ( v.element ) {
 				this._focusables.add( v );
 				this.focusTracker.add( v.element );
 			}
 		} );
 
-		// Listen to keypresses inside form element
-		if ( this.element ) {
-			this.keystrokes.listenTo( this.element );
+		if ( this.element ) this.keystrokes.listenTo( this.element );
 	}
+
+	public get equation(): string {
+		return this.mathLiveInputView.value ?? '';
+	}
+
+	public set equation( equation: string ) {
+		const norm = equation.trim();
+		// Direct updates to the "source of truth"
+		this.mathLiveInputView.value = norm.length ? norm : null;
+		this.rawLatexInputView.value = norm;
+		if ( this.mathView ) this.mathView.value = norm;
 	}
 
 	public focus(): void {
 		this._focusCycler.focusFirst();
 	}
 
-	public get equation(): string {
-		return this.mathInputView.fieldView.element?.value ?? '';
-	}
+	/**
+	 * Sets up split handlers for synchronization.
+	 */
+	private _setupInputSync( previewEnabled: boolean ): void {
+		// Handler 1: MathLive -> Raw LaTeX
+		this.mathLiveInputView.on( 'change:value', () => {
+			let eq = ( this.mathLiveInputView.value ?? '' ).trim();
 
-	public set equation( equation: string ) {
-		if ( this.mathInputView.fieldView.element ) {
-			this.mathInputView.fieldView.element.value = equation;
-		}
-		if ( this.previewEnabled && this.mathView ) {
-			this.mathView.value = equation;
-		}
-	}
-
-	public focusTracker: FocusTracker = new FocusTracker();
-	public keystrokes: KeystrokeHandler = new KeystrokeHandler();
-	private _focusables = new ViewCollection<FocusableView>();
-	private _focusCycler: FocusCycler = new FocusCycler( {
-		focusables: this._focusables,
-		focusTracker: this.focusTracker,
-		keystrokeHandler: this.keystrokes,
-		actions: {
-			focusPrevious: 'shift + tab',
-			focusNext: 'tab'
-		}
-	} );
-
-	private _createMathInput() {
-		const t = this.locale.t;
-
-		// Create equation input
-		const mathInput = new MathInputView( this.locale );
-		const fieldView = mathInput.fieldView;
-		mathInput.infoText = t( 'Insert equation in TeX format.' );
-
-		const onInput = () => {
-			if ( fieldView.element != null ) {
-				let equationInput = fieldView.element.value.trim();
-
-				// If input has delimiters
-				if ( hasDelimiters( equationInput ) ) {
-					// Get equation without delimiters
-					const params = extractDelimiters( equationInput );
-
-					// Remove delimiters from input field
-					fieldView.element.value = params.equation;
-
-					equationInput = params.equation;
-
-					// update display button and preview
+			// Delimiter Normalization
+			if ( hasDelimiters( eq ) ) {
+				const params = extractDelimiters( eq );
+				eq = params.equation;
 				this.displayButtonView.isOn = params.display;
+
+				// UX Fix: If we stripped delimiters, update the source
+				// so the visual editor doesn't show them.
+				if ( this.mathLiveInputView.value !== eq ) {
+					this.mathLiveInputView.value = eq;
 				}
-				if ( this.previewEnabled && this.mathView ) {
-					// Update preview view
-					this.mathView.value = equationInput;
 			}
 
-				this.saveButtonView.isEnabled = !!equationInput;
-			}
-		};
-
-		fieldView.on( 'render', onInput );
-		fieldView.on( 'input', onInput );
-
-		return mathInput;
+			// Sync to Raw LaTeX
+			if ( this.rawLatexInputView.value !== eq ) {
+				this.rawLatexInputView.value = eq;
 			}
 
-	private _createButton(
-		label: string,
-		icon: string,
-		className: string,
-		eventName: string | null
-	) {
-		const button = new ButtonView( this.locale );
-
-		button.set( {
-			label,
-			icon,
-			tooltip: true
-		} );
-
-		button.extendTemplate( {
-			attributes: {
-				class: className
+			// Sync to Preview
+			if ( previewEnabled && this.mathView && this.mathView.value !== eq ) {
+				this.mathView.value = eq;
 			}
 		} );
 
-		if ( eventName ) {
-			button.delegate( 'execute' ).to( this, eventName );
+		// Handler 2: Raw LaTeX -> MathLive
+		this.rawLatexInputView.on( 'change:value', () => {
+			const eq = ( this.rawLatexInputView.value ?? '' ).trim();
+			const normalized = eq.length ? eq : null;
+
+			// Sync to MathLive
+			if ( this.mathLiveInputView.value !== normalized ) {
+				this.mathLiveInputView.value = normalized;
 			}
 
-		return button;
-	}
-
-	private _createDisplayButton() {
-		const t = this.locale.t;
-
-		const switchButton = new SwitchButtonView( this.locale );
-
-		switchButton.set( {
-			label: t( 'Display mode' ),
-			withText: true
-		} );
-
-		switchButton.extendTemplate( {
-			attributes: {
-				class: 'ck-button-display-toggle'
+			// Sync to Preview
+			if ( previewEnabled && this.mathView && this.mathView.value !== eq ) {
+				this.mathView.value = eq;
 			}
 		} );
-
-		switchButton.on( 'execute', () => {
-			// Toggle state
-			switchButton.isOn = !switchButton.isOn;
-
-			if ( this.previewEnabled && this.mathView ) {
-				// Update preview view
-				this.mathView.display = switchButton.isOn;
 	}
+
+	private _createButton( label: string, icon: string, className: string ): ButtonView {
+		const btn = new ButtonView( this.locale );
+		btn.set( { label, icon, tooltip: true } );
+		btn.extendTemplate( { attributes: { class: className } } );
+		return btn;
+	}
+
+	private _createDisplayButton( t: ( str: string ) => string ): SwitchButtonView {
+		const btn = new SwitchButtonView( this.locale );
+		btn.set( { label: t( 'Display mode' ), withText: true } );
+		btn.extendTemplate( { attributes: { class: 'ck-button-display-toggle' } } );
+
+		btn.on( 'execute', () => {
+			btn.isOn = !btn.isOn;
+			// mathView updates automatically via bind()
 		} );
-
-		return switchButton;
+		return btn;
 	}
 }

packages/ckeditor5-math/src/ui/mathliveinputview.ts

@@ -0,0 +1,116 @@
+import { View, type Locale } from 'ckeditor5';
+import 'mathlive'; // Import side-effects only (registers the <math-field> tag)
+
+/**
+ * Interface describing the custom <math-field> element.
+ */
+interface MathFieldElement extends HTMLElement {
+    value: string;
+    readOnly: boolean;
+    mathVirtualKeyboardPolicy: string;
+    // Interface includes the shortcuts property
+    inlineShortcuts: Record<string, string>;
+}
+
+/**
+ * A wrapper for the MathLive <math-field> component.
+ */
+export default class MathLiveInputView extends View {
+    /**
+     * The current LaTeX value.
+     * @observable
+     */
+    public declare value: string | null;
+
+    /**
+     * Read-only state.
+     * @observable
+     */
+    public declare isReadOnly: boolean;
+
+    /**
+     * Reference to the DOM element.
+     * Typed as MathFieldElement | null for proper TS support.
+     */
+    public mathfield: MathFieldElement | null = null;
+
+    constructor( locale: Locale ) {
+        super( locale );
+
+        this.set( 'value', null );
+        this.set( 'isReadOnly', false );
+
+        this.setTemplate( {
+            tag: 'div',
+            attributes: {
+                class: [ 'ck', 'ck-mathlive-input' ]
+            }
+        } );
+    }
+
+    public override render(): void {
+        super.render();
+
+        // 1. Create element with the specific type
+        const mathfield = document.createElement( 'math-field' ) as MathFieldElement;
+
+        // 2. Configure Options
+        mathfield.mathVirtualKeyboardPolicy = 'manual';
+
+        //Disable differential D
+        mathfield.addEventListener( 'mount', () => {
+            mathfield.inlineShortcuts = {
+                ...mathfield.inlineShortcuts, // Safe to read now
+                dx: 'dx',
+                dy: 'dy',
+                dt: 'dt'
+            };
+        } );
+
+
+        // Disable sounds safely
+        const MathfieldConstructor = customElements.get( 'math-field' );
+        if ( MathfieldConstructor ) {
+            const proto = MathfieldConstructor as any;
+            if ( proto.soundsDirectory !== null ) proto.soundsDirectory = null;
+            if ( proto.plonkSound !== null ) proto.plonkSound = null;
+        }
+
+        // 3. Set Initial State
+        mathfield.value = this.value ?? '';
+        mathfield.readOnly = this.isReadOnly;
+
+        // 4. Bind Events (DOM -> Observable)
+        mathfield.addEventListener( 'input', () => {
+            const val = mathfield.value;
+            this.value = val.length ? val : null;
+        } );
+
+        // 5. Bind Events (Observable -> DOM)
+        this.on( 'change:value', ( _evt, _name, nextValue ) => {
+            if ( mathfield.value !== nextValue ) {
+                mathfield.value = nextValue ?? '';
+            }
+        } );
+
+        this.on( 'change:isReadOnly', ( _evt, _name, nextValue ) => {
+            mathfield.readOnly = nextValue;
+        } );
+
+        // 6. Mount to the wrapper view
+        this.element?.appendChild( mathfield );
+        this.mathfield = mathfield;
+    }
+
+    public focus(): void {
+        this.mathfield?.focus();
+    }
+
+    public override destroy(): void {
+        if ( this.mathfield ) {
+            this.mathfield.remove();
+            this.mathfield = null;
+        }
+        super.destroy();
+    }
+}

packages/ckeditor5-math/src/ui/mathview.ts

@@ -2,44 +2,44 @@ import { View, type Locale } from 'ckeditor5';
 import type { KatexOptions } from '../typings-external.js';
 import { renderEquation } from '../utils.js';
 
+/**
+ * Configuration options for the MathView.
+ */
+export interface MathViewOptions {
+	engine: 'mathjax' | 'katex' | ( ( equation: string, element: HTMLElement, display: boolean ) => void );
+	lazyLoad: undefined | ( () => Promise<void> );
+	previewUid: string;
+	previewClassName: Array<string>;
+	katexRenderOptions: KatexOptions;
+}
+
 export default class MathView extends View {
+	/**
+	 * The LaTeX equation value to render.
+	 * @observable
+	 */
 	public declare value: string;
+
+	/**
+	 * Whether to render in display mode (centered) or inline.
+	 * @observable
+	 */
 	public declare display: boolean;
-	public previewUid: string;
-	public previewClassName: Array<string>;
-	public katexRenderOptions: KatexOptions;
-	public engine:
-		| 'mathjax'
-		| 'katex'
-		| ( ( equation: string, element: HTMLElement, display: boolean ) => void );
-	public lazyLoad: undefined | ( () => Promise<void> );
 
-	constructor(
-		engine:
-			| 'mathjax'
-			| 'katex'
-			| ( (
-				equation: string,
-				element: HTMLElement,
-				display: boolean,
-			) => void ),
-		lazyLoad: undefined | ( () => Promise<void> ),
-		locale: Locale,
-		previewUid: string,
-		previewClassName: Array<string>,
-		katexRenderOptions: KatexOptions
-	) {
+	/**
+	 * Configuration options passed during initialization.
+	 */
+	private options: MathViewOptions;
+
+	constructor( locale: Locale, options: MathViewOptions ) {
 		super( locale );
-
-		this.engine = engine;
-		this.lazyLoad = lazyLoad;
-		this.previewUid = previewUid;
-		this.katexRenderOptions = katexRenderOptions;
-		this.previewClassName = previewClassName;
+		this.options = options;
 
 		this.set( 'value', '' );
 		this.set( 'display', false );
 
+		// Update rendering when state changes.
+		// Checking isRendered prevents errors during initialization.
 		this.on( 'change', () => {
 			if ( this.isRendered ) {
 				this.updateMath();
@@ -56,16 +56,20 @@ export default class MathView extends View {
 
 	public updateMath(): void {
 		if ( this.element ) {
+
+			// This prevents the new render from appending to the old one.
+			this.element.textContent = '';
+
 			void renderEquation(
 				this.value,
 				this.element,
-				this.engine,
-				this.lazyLoad,
+				this.options.engine,
+				this.options.lazyLoad,
 				this.display,
-				true,
-				this.previewUid,
-				this.previewClassName,
-				this.katexRenderOptions
+				true, // isPreview
+				this.options.previewUid,
+				this.options.previewClassName,
+				this.options.katexRenderOptions
 			);
 		}
 	}

packages/ckeditor5-math/src/ui/rawlatexinputview.ts

@@ -0,0 +1,54 @@
+import { LabeledFieldView, createLabeledTextarea, type Locale, type TextareaView } from 'ckeditor5';
+
+/**
+ * A labeled textarea view for direct LaTeX code editing.
+ */
+export default class RawLatexInputView extends LabeledFieldView<TextareaView> {
+    /**
+     * The current LaTeX value.
+     * @observable
+     */
+    public declare value: string;
+
+    /**
+     * Whether the input is in read-only mode.
+     * @observable
+     */
+    public declare isReadOnly: boolean;
+
+    constructor( locale: Locale ) {
+        super( locale, createLabeledTextarea );
+
+        this.set( 'value', '' );
+        this.set( 'isReadOnly', false );
+
+        const fieldView = this.fieldView;
+
+        // 1. Sync: DOM (Textarea) -> Observable
+        fieldView.on( 'input', () => {
+            // We cast strictly to HTMLTextAreaElement to access '.value' safely
+            const textarea = fieldView.element as HTMLTextAreaElement;
+            if ( textarea ) {
+                this.value = textarea.value;
+            }
+        } );
+
+        // 2. Sync: Observable -> DOM (Textarea)
+        this.on( 'change:value', () => {
+            const textarea = fieldView.element as HTMLTextAreaElement;
+            // Check for difference to avoid cursor jumping
+            if ( textarea && textarea.value !== this.value ) {
+                textarea.value = this.value;
+            }
+        } );
+
+        // 3. Sync: ReadOnly State
+        this.on( 'change:isReadOnly', ( _evt, _name, nextValue ) => {
+            fieldView.isReadOnly = nextValue;
+        } );
+    }
+
+    public override render(): void {
+        super.render();
+    }
+}

packages/ckeditor5-math/tests/mathui.ts

@@ -168,13 +168,13 @@ describe( 'MathUI', () => {
 
 			command.isEnabled = true;
 
-			expect( formView!.mathInputView.isReadOnly ).to.be.false;
+			expect( formView!.mathLiveInputView.isReadOnly ).to.be.false;
 			expect( formView!.saveButtonView.isEnabled ).to.be.false;
 			expect( formView!.cancelButtonView.isEnabled ).to.be.true;
 
 			command.isEnabled = false;
 
-			expect( formView!.mathInputView.isReadOnly ).to.be.true;
+			expect( formView!.mathLiveInputView.isReadOnly ).to.be.true;
 			expect( formView!.saveButtonView.isEnabled ).to.be.false;
 			expect( formView!.cancelButtonView.isEnabled ).to.be.true;
 		} );
@@ -407,24 +407,32 @@ describe( 'MathUI', () => {
 					setModelData( editor.model, '<paragraph>f[o]o</paragraph>' );
 				} );
 
-				it( 'should bind mainFormView.mathInputView#value to math command value', () => {
+				it( 'should bind mainFormView.mathLiveInputView#value to math command value', () => {
 					const command = editor.commands.get( 'math' );
 
-					expect( formView!.mathInputView.value ).to.null;
+					expect( formView!.mathLiveInputView.value ).to.be.null;
 
 					command!.value = 'x^2';
-					expect( formView!.mathInputView.value ).to.equal( 'x^2' );
+					expect( formView!.mathLiveInputView.value ).to.equal( 'x^2' );
 				} );
 
 				it( 'should execute math command on mainFormView#submit event', () => {
 					const executeSpy = vi.spyOn( editor, 'execute' );
 
-					formView!.mathInputView.fieldView.element!.value = 'x^2';
+					formView!.mathLiveInputView.value = 'x^2';
 					formView!.fire( 'submit' );
 
 					expect( executeSpy.mock.lastCall?.slice( 0, 2 ) ).toMatchObject( [ 'math', 'x^2' ] );
 				} );
 
+				it( 'should sync mathLiveInputView and rawLatexInputView', () => {
+					formView!.mathLiveInputView.value = 'x^2';
+					expect( formView!.rawLatexInputView.value ).to.equal( 'x^2' );
+
+					formView!.rawLatexInputView.value = '\\frac{1}{2}';
+					expect( formView!.mathLiveInputView.value ).to.equal( '\\frac{1}{2}' );
+				} );
+
 				it( 'should hide the balloon on mainFormView#cancel if math command does not have a value', () => {
 					mathUIFeature._showUI();
 					formView!.fire( 'cancel' );

packages/ckeditor5-math/theme/mathform.css

@@ -1,35 +1,214 @@
+/**
+ * Math equation editor dialog styles
+ * Supports MathLive input, raw LaTeX textarea, and equation preview
+ */
+
+/* ============================================================================
+   Main Dialog Container
+   ========================================================================= */
+
 .ck.ck-math-form {
     display: flex;
-	align-items: flex-start;
-	flex-direction: row;
-	flex-wrap: nowrap;
+    flex-direction: column;
     padding: var(--ck-spacing-standard);
+    box-sizing: border-box;
+    max-width: 80vw;
+    max-height: 80vh;
+    height: 100%;
+    overflow-x: hidden;
+}
 
+/* Mobile responsiveness */
 @media screen and (max-width: 600px) {
+    .ck.ck-math-form {
         flex-wrap: wrap;
-
-		& .ck-math-view {
-			flex-basis: 100%;
-
-			& .ck-labeled-view {
-				flex-basis: 100%;
-			}
-
-			& .ck-label {
-				flex-basis: 100%;
     }
 }
 
-		& .ck-button {
-			flex-basis: 50%;
-		}
-	}
+/* ============================================================================
+   Content Layout
+   ========================================================================= */
+
+.ck-math-view {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    gap: var(--ck-spacing-standard);
+    min-height: fit-content;
+    min-width: 0;
+    width: 100%;
 }
 
-.ck-math-tex.ck-placeholder::before {
+/* LaTeX section heading */
+.ck-math-view > .ck-labeled-field-view::before {
+    content: "LaTeX";
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--ck-color-text, #333);
+    margin-bottom: 4px;
+    padding-left: 2px;
+    opacity: 0.8;
+}
+
+/* Equation preview section heading */
+.ck-math-view > math-field::before {
+    content: "Equation preview";
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--ck-color-text, #333);
+    margin-bottom: 4px;
+    padding-left: 2px;
+    opacity: 0.8;
+}
+
+/* Add spacing between preview and action buttons */
+.ck-math-view > math-field {
+    margin-bottom: var(--ck-spacing-large, 16px);
+}
+
+/* Action buttons row (Save/Cancel) */
+.ck-math-button-row {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--ck-spacing-standard);
+    margin-top: var(--ck-spacing-standard);
+    width: fit-content;
+    max-width: 100%;
+    flex-wrap: wrap;
+}
+
+/* ============================================================================
+   Shared Styles for Input Fields
+   ========================================================================= */
+
+/* Base styling for both MathLive fields and textareas */
+.ck.ck-math-form math-field,
+.ck.ck-math-form textarea {
+    box-sizing: border-box;
+    padding: var(--ck-spacing-small);
+    background: var(--ck-color-input-background) !important;
+    color: var(--ck-color-input-text, inherit);
+    font-size: var(--ck-font-size-base);
+    border: none !important;
+    border-radius: var(--ck-border-radius, 6px);
+    outline: 3px solid transparent;
+    outline-offset: 6px;
+}
+
+/* MathLive-specific configuration */
+.ck.ck-math-form math-field {
+    display: block !important;
+    width: 100%;
+    max-width: 100%;
+    overflow-x: auto !important;
+
+    /* MathLive theme customization */
+    --selection-background-color: rgba(33, 150, 243, 0.2);
+    --selection-color: inherit;
+    --contains-highlight-background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* ============================================================================
+   MathLive Visual Editor (Top Input)
+   ========================================================================= */
+
+.ck.ck-mathlive-input {
+    display: inline-block;
+    flex: 0 0 auto;
+    width: 100%;
+    max-width: 100%;
+    min-height: fit-content;
+    max-height: 80vh;
+    overflow: auto;
+    padding-bottom: var(--ck-spacing-small);
+    resize: none;
+}
+
+/* Configure MathLive shadow DOM layout */
+.ck.ck-math-form math-field::part(container),
+.ck.ck-math-form math-field::part(content),
+.ck.ck-math-form math-field::part(field) {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    height: 100%;
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+
+/* Position MathLive UI controls */
+.ck.ck-math-form math-field::part(virtual-keyboard-toggle),
+.ck.ck-math-form math-field::part(menu-toggle) {
+    position: absolute;
+    top: 8px;
+}
+
+.ck.ck-math-form math-field::part(virtual-keyboard-toggle) {
+    right: 40px;
+}
+
+.ck.ck-math-form math-field::part(menu-toggle) {
+    right: 8px;
+    display: flex !important;
+    visibility: visible !important;
+}
+
+/* ============================================================================
+   Raw LaTeX Textarea (Middle Input)
+   ========================================================================= */
+
+.ck-math-view .ck-labeled-field-view {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 auto;
+    min-width: 100%;
+    width: 100%;
+    max-width: 100%;
+    min-height: 60px;
+    max-height: 65vh;
+    resize: both;
+    overflow: auto;
+    background: transparent;
+}
+
+/* Hide the default label (we use ::before for custom heading) */
+.ck-math-view .ck-labeled-field-view .ck-label {
     display: none !important;
 }
 
-.ck.ck-toolbar-container {
-	z-index: calc(var(--ck-z-panel) + 2);
+/* Textarea wrapper */
+.ck-math-view .ck-labeled-field-view .ck-labeled-field-view__input-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    width: 100%;
+    min-height: 100px;
+    height: auto;
+    padding: 0;
+    border: none;
+    background: transparent;
+    box-shadow: none;
+}
+
+/* Raw LaTeX textarea styling */
+.ck-math-view .ck-labeled-field-view textarea {
+    display: block;
+    flex: 1 1 auto;
+    width: 100% !important;
+    height: 100%;
+    min-height: 140px;
+    resize: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    transition: none !important;
+}
+
+/* Textarea hover and focus states */
+.ck-math-view .ck-labeled-field-view textarea:hover,
+.ck-math-view .ck-labeled-field-view textarea:focus {
+    background: var(--ck-color-input-background) !important;
+    outline: none !important;
+    box-shadow: none !important;
 }

packages/commons/src/lib/i18n.ts

@@ -14,7 +14,7 @@ export interface Locale {
 const UNSORTED_LOCALES = [
     { id: "cn", name: "简体中文", electronLocale: "zh_CN" },
     { id: "de", name: "Deutsch", electronLocale: "de" },
-    { id: "en", name: "English", electronLocale: "en" },
+    { id: "en", name: "English (United States)", electronLocale: "en" },
     { id: "en-GB", name: "English (United Kingdom)", electronLocale: "en_GB" },
     { id: "es", name: "Español", electronLocale: "es" },
     { id: "fr", name: "Français", electronLocale: "fr" },