Feat(math): Improve legacy math input with MathLive

.gitignore

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

packages/ckeditor5-math/package.json

@@ -71,6 +71,6 @@
     ]
   },
   "dependencies": {
-    "@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();
 		});
 	}
 
@@ -89,13 +89,22 @@ export default class MathUI extends Plugin {
 			mathConfig.katexRenderOptions!
 		);
 
-		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 +131,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,7 +159,7 @@ 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