Merge f8d84814e079bdca892c1c2cac75c53baa96f20b into a867a25d5f09e410d0c73b7fbeab18b4641f484a

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

@@ -48,7 +48,8 @@ export default class MainFormView extends View {
 		this.rawLatexInputView = new RawLatexInputView( locale );
 		this.rawLatexInputView.label = t( 'LaTeX' );
 
-		this.saveButtonView = this._createButton( t( 'Save' ), IconCheck, 'ck-button-save', 'submit' );
+		this.saveButtonView = this._createButton( t( 'Save' ), IconCheck, 'ck-button-save' );
+		this.saveButtonView.type = 'submit';
 
 		this.cancelButtonView = this._createButton( t( 'Cancel' ), IconCancel, 'ck-button-cancel' );
 		this.cancelButtonView.delegate( 'execute' ).to( this, 'cancel' );
@@ -149,67 +150,58 @@ export default class MainFormView extends View {
 	}
 
 	/**
-	 * Checks if a view currently has focus.
+	 * Sets up split handlers for synchronization.
 	 */
-	private _isViewFocused(view: View): boolean {
+	private _setupInputSync( previewEnabled: boolean ): void {
-		const el = view.element;
+		// Handler 1: MathLive -> Raw LaTeX
-		const active = document.activeElement;
+		this.mathLiveInputView.on( 'change:value', () => {
-		return !!(el && active && el.contains(active));
+			let eq = ( this.mathLiveInputView.value ?? '' ).trim();
-	}
 
-	/**
+			// Delimiter Normalization
-	 * Sets up synchronization with Focus Gating.
+			if ( hasDelimiters( eq ) ) {
-	 */
+				const params = extractDelimiters( eq );
-	private _setupInputSync(previewEnabled: boolean): void {
-		const updatePreview = (eq: string) => {
-			if (previewEnabled && this.mathView && this.mathView.value !== eq) {
-				this.mathView.value = eq;
-			}
-		};
-
-		// Handler 1: MathLive -> Raw LaTeX + Preview
-		this.mathLiveInputView.on('change:value', () => {
-			let eq = (this.mathLiveInputView.value ?? '').trim();
-
-			// Strip delimiters if present (e.g. pasted content)
-			if (hasDelimiters(eq)) {
-				const params = extractDelimiters(eq);
 				eq = params.equation;
 				this.displayButtonView.isOn = params.display;
 
-				// Only strip delimiters if not actively editing
+				// UX Fix: If we stripped delimiters, update the source
-				if (!this._isViewFocused(this.mathLiveInputView) && this.mathLiveInputView.value !== eq) {
+				// so the visual editor doesn't show them.
+				if ( this.mathLiveInputView.value !== eq ) {
 					this.mathLiveInputView.value = eq;
 				}
 			}
 
-			// Sync to Raw LaTeX only if user isn't typing there
+			// Sync to Raw LaTeX
-			if (!this._isViewFocused(this.rawLatexInputView) && this.rawLatexInputView.value !== eq) {
+			if ( this.rawLatexInputView.value !== eq ) {
 				this.rawLatexInputView.value = eq;
 			}
 
-			updatePreview(eq);
+			// Sync to Preview
-		});
+			if ( previewEnabled && this.mathView && this.mathView.value !== eq ) {
+				this.mathView.value = eq;
+			}
+		} );
 
-		// Handler 2: Raw LaTeX -> MathLive + Preview
+		// Handler 2: Raw LaTeX -> MathLive
-		this.rawLatexInputView.on('change:value', () => {
+		this.rawLatexInputView.on( 'change:value', () => {
-			const eq = (this.rawLatexInputView.value ?? '').trim();
+			const eq = ( this.rawLatexInputView.value ?? '' ).trim();
 			const normalized = eq.length ? eq : null;
 
-			// Sync to MathLive only if user isn't interacting with it
+			// Sync to MathLive
-			if (!this._isViewFocused(this.mathLiveInputView) && this.mathLiveInputView.value !== normalized) {
+			if ( this.mathLiveInputView.value !== normalized ) {
 				this.mathLiveInputView.value = normalized;
 			}
 
-			updatePreview(eq);
+			// Sync to Preview
-		});
+			if ( previewEnabled && this.mathView && this.mathView.value !== eq ) {
+				this.mathView.value = eq;
+			}
+		} );
 	}
 
-	private _createButton( label: string, icon: string, className: string, type?: 'submit' | 'button' ): ButtonView {
+	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 } } );
-		if (type) btn.type = type;
 		return btn;
 	}
 

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

@@ -1,98 +1,104 @@
 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;
-    inlineShortcuts?: Record<string, 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) {
+    constructor( locale: Locale ) {
-        super(locale);
+        super( locale );
-        this.set('value', null);
-        this.set('isReadOnly', false);
 
-        this.setTemplate({
+        this.set( 'value', null );
+        this.set( 'isReadOnly', false );
+
+        this.setTemplate( {
             tag: 'div',
             attributes: {
-                class: ['ck', 'ck-mathlive-input']
+                class: [ 'ck', 'ck-mathlive-input' ]
             }
-        });
+        } );
     }
 
     public override render(): void {
         super.render();
-        this._loadMathLive();
-    }
 
-    private async _loadMathLive(): Promise<void> {
+        // 1. Create element with the specific type
-        try {
+        const mathfield = document.createElement( 'math-field' ) as MathFieldElement;
-            await import('mathlive');
-            await customElements.whenDefined('math-field');
 
-            // Configure global MathLive settings
+        // 2. Configure Options
-            const MathfieldClass = customElements.get( 'math-field' ) as any;
-            if ( MathfieldClass ) {
-                MathfieldClass.soundsDirectory = null;
-                MathfieldClass.plonkSound = null;
-            }
-
-            if (!this.element) return;
-
-            this._createMathField();
-        } catch (error) {
-            console.error('MathLive load failed:', error);
-            if (this.element) {
-                this.element.textContent = 'Math editor unavailable';
-            }
-        }
-    }
-
-    private _createMathField(): void {
-        if (!this.element) return;
-
-        const mathfield = document.createElement('math-field') as MathFieldElement;
-
-        // Instance-level config (no prototype pollution)
         mathfield.mathVirtualKeyboardPolicy = 'manual';
 
-        // Configure shortcuts after mount
+        //Disable differential D
-        mathfield.addEventListener('mount', () => {
+        mathfield.addEventListener( 'mount', () => {
             mathfield.inlineShortcuts = {
-                ...mathfield.inlineShortcuts,
+                ...mathfield.inlineShortcuts, // Safe to read now
                 dx: 'dx',
                 dy: 'dy',
                 dt: 'dt'
             };
-        }, { once: true });
+        } );
 
-        // Initial state
+
+        // 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;
 
-        // DOM -> Observable
+        // 4. Bind Events (DOM -> Observable)
-        mathfield.addEventListener('input', () => {
+        mathfield.addEventListener( 'input', () => {
             const val = mathfield.value;
             this.value = val.length ? val : null;
-        });
+        } );
 
-        // Observable -> DOM
+        // 5. Bind Events (Observable -> DOM)
-        this.on('change:value', (_evt, _name, nextValue) => {
+        this.on( 'change:value', ( _evt, _name, nextValue ) => {
-            if (mathfield.value !== nextValue) {
+            if ( mathfield.value !== nextValue ) {
                 mathfield.value = nextValue ?? '';
             }
-        });
+        } );
 
-        this.on('change:isReadOnly', (_evt, _name, nextValue) => {
+        this.on( 'change:isReadOnly', ( _evt, _name, nextValue ) => {
             mathfield.readOnly = nextValue;
-        });
+        } );
 
-        this.element.appendChild(mathfield);
+        // 6. Mount to the wrapper view
+        this.element?.appendChild( mathfield );
         this.mathfield = mathfield;
     }
 
@@ -101,7 +107,7 @@ export default class MathLiveInputView extends View {
     }
 
     public override destroy(): void {
-        if (this.mathfield) {
+        if ( this.mathfield ) {
             this.mathfield.remove();
             this.mathfield = null;
         }

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

@@ -55,39 +55,23 @@ export default class MathView extends View {
 	}
 
 	public updateMath(): void {
-		if (!this.element) {
+		if ( this.element ) {
-			return;
-		}
 
-		// Handle empty equations
+			// This prevents the new render from appending to the old one.
-		if (!this.value || !this.value.trim()) {
 			this.element.textContent = '';
-			this.element.classList.remove('ck-math-render-error');
+
-			return;
+			void renderEquation(
+				this.value,
+				this.element,
+				this.options.engine,
+				this.options.lazyLoad,
+				this.display,
+				true, // isPreview
+				this.options.previewUid,
+				this.options.previewClassName,
+				this.options.katexRenderOptions
+			);
 		}
-
-		// Clear previous render
-		this.element.textContent = '';
-		this.element.classList.remove('ck-math-render-error');
-
-		renderEquation(
-			this.value,
-			this.element,
-			this.options.engine,
-			this.options.lazyLoad,
-			this.display,
-			true, // isPreview
-			this.options.previewUid,
-			this.options.previewClassName,
-			this.options.katexRenderOptions
-		).catch(error => {
-			console.error('Math rendering failed:', error);
-
-			if (this.element) {
-				this.element.textContent = 'Error rendering equation';
-				this.element.classList.add('ck-math-render-error');
-			}
-		});
 	}
 
 	public override render(): void {

packages/ckeditor5-math/tests/lazyload.ts

@@ -37,7 +37,6 @@ describe( 'Lazy load', () => {
 		await buildEditor( {
 			math: {
 				engine: 'katex',
-				enablePreview: true,
 				lazyLoad: async () => {
 					lazyLoadInvoked = true;
 				}
@@ -45,15 +44,6 @@ describe( 'Lazy load', () => {
 		} );
 
 		mathUIFeature._showUI();
-
-		// Trigger render with a non-empty value to bypass empty check optimization
-		if ( mathUIFeature.formView ) {
-			mathUIFeature.formView.equation = 'x^2';
-		}
-
-		// Wait for async rendering and lazy loading
-		await new Promise( resolve => setTimeout( resolve, 100 ) );
-
 		expect( lazyLoadInvoked ).to.be.true;
 	} );
 } );

packages/ckeditor5-math/theme/mathform.css

@@ -212,13 +212,3 @@
     outline: none !important;
     box-shadow: none !important;
 }
-
-.ck-math-render-error {
-    color: var(--ck-color-error-text, #db1d1d);
-    padding: var(--ck-spacing-small);
-    font-style: italic;
-    font-size: 0.9em;
-    border: 1px dashed var(--ck-color-error-text, #db1d1d);
-    border-radius: 2px;
-    background: var(--ck-color-base-background, #fff);
-}