Merge f8d84814e079bdca892c1c2cac75c53baa96f20b into 64662d5215ea01f6634fd72b5ff7a77dbc7e9e7d

.gitignore

@@ -48,4 +48,4 @@ upload
 .svelte-kit
 
 # docs
-site/
+site/

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

@@ -49,30 +49,6 @@
     z-index: 50;
 }
 
-.calendar-container a.fc-event {
-    text-decoration: none;
-}
-
-.calendar-container a.fc-event.archived {
-    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 {
     padding: 0.2em 0.5em;
 }
@@ -113,15 +89,38 @@ body.desktop:not(.zen) .calendar-view .calendar-header {
 
 /* #region Events */
 
-.calendar-view a.fc-timegrid-event,
-.calendar-view a.fc-daygrid-event,
-.fc-daygrid-dot-event .fc-event-title {
-    font-weight: 500;
+/*
+ * week, month, year views
+ */
+
+ .calendar-container a.fc-event {
+    text-decoration: none;
 }
 
-.calendar-view a.fc-timegrid-event:focus-visible,
-.calendar-view a.fc-daygrid-event:focus-visible {
-    outline: none;
+.calendar-container a.fc-event.archived {
+    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);
+}
+
+.calendar-view a.fc-timegrid-event,
+.calendar-view a.fc-daygrid-event,
+.calendar-view .fc-daygrid-dot-event .fc-event-title {
+    font-weight: 500;
 }
 
 .calendar-view a.fc-timegrid-event,
@@ -137,6 +136,20 @@ body.desktop:not(.zen) .calendar-view .calendar-header {
     padding-left: 8px;
 }
 
+.calendar-view .fc-timegrid-event.with-hue,
+.calendar-view .fc-daygrid-event.with-hue {
+    --fc-event-text-color: var(--custom-color);
+
+    --fc-event-bg-color: hsl(var(--custom-color-hue),
+                    var(--calendar-coll-event-background-saturation),
+                    var(--calendar-coll-event-background-lightness)) !important;
+}
+
+.calendar-view a.fc-timegrid-event:focus-visible,
+.calendar-view a.fc-daygrid-event:focus-visible {
+    outline: none;
+}
+
 .calendar-view a.fc-timegrid-event.fc-event-selected,
 .calendar-view a.fc-timegrid-event.fc-event:focus,
 .calendar-view a.fc-daygrid-event.fc-event-selected,
@@ -153,21 +166,26 @@ body.desktop:not(.zen) .calendar-view .calendar-header {
     opacity: 1;
 }
 
-.calendar-view .fc-timegrid-event.with-hue,
-.calendar-view .fc-daygrid-event.with-hue {
-    --fc-event-text-color: var(--custom-color);
-
-    --fc-event-bg-color: hsl(var(--custom-color-hue),
-                    var(--calendar-coll-event-background-saturation),
-                    var(--calendar-coll-event-background-lightness)) !important;
+.calendar-view .fc-daygrid-event-dot {
+    display: none;
 }
 
+
 .calendar-view .fc-event-time {
     opacity: .75;
 }
 
-.fc-daygrid-event-dot {
-    display: none;
+/* 
+ * List view
+ */
+
+.fc-list-table tr.fc-event.archived {
+    opacity: .5;
+}
+
+.fc-list-table .fc-list-event-dot {
+    /* Apply note colors to the list item dots */
+    --fc-event-border-color: var(--custom-color);
 }
 
 /* #endregion */

docs/User Guide/User Guide/Collections/Calendar.md

@@ -63,7 +63,7 @@ For each note of the calendar, the following attributes can be used:
 | `#startTime` | The time the event starts at. If this value is missing, then the event is considered a full-day event. The format is `HH:MM` (hours in 24-hour format and minutes). |
 | `#endTime` | Similar to `startTime`, it mentions the time at which the event ends (in relation with `endDate` if present, or `startDate`). |
 | `#color` | Displays the event with a specified color (named such as `red`, `gray` or hex such as `#FF0000`). This will also change the color of the note in other places such as the note tree. |
-| `#calendar:color` | Similar to `#color`, but applies the color only for the event in the calendar and not for other places such as the note tree. |
+| `#calendar:color` | Similar to `#color`, but applies the color only for the event in the calendar and not for other places such as the note tree. (*Deprecated*) |
 | `#iconClass` | If present, the icon of the note will be displayed to the left of the event title. |
 | `#calendar:title` | Changes the title of an event to point to an attribute of the note other than the title, can either a label or a relation (without the `#` or `~` symbol). See _Use-cases_ for more information. |
 | `#calendar:displayedAttributes` | Allows displaying the value of one or more attributes in the calendar like this:      <br>  <br>![](9_Calendar_image.png)     <br>  <br>`#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"`    <br>  <br>It can also be used with relations, case in which it will display the title of the target note:     <br>  <br>`~assignee=@My assignee #calendar:displayedAttributes="assignee"` |

packages/ckeditor5-math/package.json

@@ -25,7 +25,6 @@
   ],
   "devDependencies": {
     "@ckeditor/ckeditor5-dev-build-tools": "43.1.0",
-    "@ckeditor/ckeditor5-dev-utils": "43.1.0",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
     "@ckeditor/ckeditor5-package-tools": "5.0.1",
     "@typescript-eslint/eslint-plugin": "~8.48.0",
@@ -71,6 +70,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;
+		const children: View[] = [
+			this.mathLiveInputView,
+			this.rawLatexInputView,
+			this.displayButtonView
+		];
 
-		let children = [];
-		if ( this.previewEnabled ) {
-			// Preview label
-			this.previewLabel = new LabelView( locale );
-			this.previewLabel.text = t( 'Equation preview' );
+		if ( previewEnabled ) {
+			const previewLabel = new LabelView( locale );
+			previewLabel.text = t( 'Equation preview' );
 
-			// Math element
-			this.mathView = new MathView( engine, lazyLoad, locale, previewUid, previewClassName, katexRenderOptions );
+			// 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 = [
-				this.mathInputView,
-				this.displayButtonView,
-				this.previewLabel,
-				this.mathView
-			];
-		} else {
-			children = [
-				this.mathInputView,
-				this.displayButtonView
-			];
+			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'
-						]
-					},
-					children
+					attributes: { class: [ 'ck-math-scroll' ] },
+					children: [ { tag: 'div', attributes: { class: [ 'ck-math-view' ] }, 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;
-		}
-	}
+			// Delimiter Normalization
+			if ( hasDelimiters( eq ) ) {
+				const params = extractDelimiters( eq );
+				eq = params.equation;
+				this.displayButtonView.isOn = params.display;
 
-	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
-					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 );
+			// Sync to Raw LaTeX
+			if ( this.rawLatexInputView.value !== eq ) {
+				this.rawLatexInputView.value = eq;
+			}
 
-		return mathInput;
+			// Sync to Preview
+			if ( previewEnabled && this.mathView && this.mathView.value !== eq ) {
+				this.mathView.value = eq;
+			}
+		} );
+
+		// 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;
+			}
+
+			// Sync to Preview
+			if ( previewEnabled && this.mathView && this.mathView.value !== eq ) {
+				this.mathView.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
-			}
-		} );
-
-		if ( eventName ) {
-			button.delegate( 'execute' ).to( this, eventName );
-		}
-
-		return button;
+	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() {
-		const t = this.locale.t;
+	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' } } );
 
-		const switchButton = new SwitchButtonView( this.locale );
-
-		switchButton.set( {
-			label: t( 'Display mode' ),
-			withText: true
+		btn.on( 'execute', () => {
+			btn.isOn = !btn.isOn;
+			// mathView updates automatically via bind()
 		} );
-
-		switchButton.extendTemplate( {
-			attributes: {
-				class: 'ck-button-display-toggle'
-			}
-		} );
-
-		switchButton.on( 'execute', () => {
-			// Toggle state
-			switchButton.isOn = !switchButton.isOn;
-
-			if ( this.previewEnabled && this.mathView ) {
-				// Update preview view
-				this.mathView.display = switchButton.isOn;
-			}
-		} );
-
-		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,22 +407,30 @@ 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']);
+					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', () => {

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;
-	padding: var(--ck-spacing-standard);
-
-	@media screen and (max-width: 600px) {
-		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%;
-		}
-	}
+    display: flex;
+    flex-direction: column;
+    padding: var(--ck-spacing-standard);
+    box-sizing: border-box;
+    max-width: 80vw;
+    max-height: 80vh;
+    height: 100%;
+    overflow-x: hidden;
 }
 
-.ck-math-tex.ck-placeholder::before {
-	display: none !important;
+/* Mobile responsiveness */
+@media screen and (max-width: 600px) {
+    .ck.ck-math-form {
+        flex-wrap: wrap;
+    }
 }
 
-.ck.ck-toolbar-container {
-	z-index: calc(var(--ck-z-panel) + 2);
+/* ============================================================================
+   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%;
+}
+
+/* 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;
+}
+
+/* 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;
 }