From ba34f1f3c1bbe159c77327dc3a7aa565237a1f29 Mon Sep 17 00:00:00 2001
From: Jules Bertholet <jules.bertholet@gmail.com>
Date: Sun, 9 May 2021 22:43:53 -0400
Subject: [PATCH] Don't allow inserting empty equations Keep the model free of
 invisible empty equation tags

---
 demo/app.js            |  1 +
 src/ui/mainformview.js | 32 +++++++++++++++++++-------------
 theme/mathform.css     |  2 +-
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/demo/app.js b/demo/app.js
index 398ecb3fd..82e10d89d 100644
--- a/demo/app.js
+++ b/demo/app.js
@@ -17,5 +17,6 @@ ClassicEditor.create(document.querySelector("#editor"), {
 		CKEditorInspector.attach(editor)
 	})
 	.catch((error) => {
+		console.error(error);
 		console.error(error.stack);
 	});
diff --git a/src/ui/mainformview.js b/src/ui/mainformview.js
index c6205c096..d3230b6c2 100644
--- a/src/ui/mainformview.js
+++ b/src/ui/mainformview.js
@@ -30,16 +30,16 @@ export default class MainFormView extends View {
 		// Create key event & focus trackers
 		this._createKeyAndFocusTrackers();
 
+		// Submit button
+		this.saveButtonView = this._createButton( t( 'Save' ), checkIcon, 'ck-button-save', null );
+		this.saveButtonView.type = 'submit';
+
 		// Equation input
 		this.mathInputView = this._createMathInput();
 
 		// Display button
 		this.displayButtonView = this._createDisplayButton();
 
-		// Submit button
-		this.saveButtonView = this._createButton( t( 'Save' ), checkIcon, 'ck-button-save', null );
-		this.saveButtonView.type = 'submit';
-
 		// Cancel button
 		this.cancelButtonView = this._createButton( t( 'Cancel' ), cancelIcon, 'ck-button-cancel', 'cancel' );
 
@@ -159,9 +159,10 @@ export default class MainFormView extends View {
 		const mathInput = new LabeledInputView( this.locale, InputTextView );
 		const inputView = mathInput.inputView;
 		mathInput.infoText = t( 'Insert equation in TeX format.' );
-		inputView.on( 'input', () => {
-			if ( this.previewEnabled ) {
-				const equationInput = inputView.element.value.trim();
+
+		const onInput = () => {
+			if ( inputView.element != null ) {
+				let equationInput = inputView.element.value.trim();
 
 				// If input has delimiters
 				if ( hasDelimiters( equationInput ) ) {
@@ -171,17 +172,22 @@ export default class MainFormView extends View {
 					// Remove delimiters from input field
 					inputView.element.value = params.equation;
 
+					equationInput = params.equation;
+
 					// update display button and preview
 					this.displayButtonView.isOn = params.display;
-					if ( this.previewEnabled ) {
-						// Update preview view
-						this.mathView.value = params.equation;
-					}
-				} else {
+				}
+				if ( this.previewEnabled ) {
+					// Update preview view
 					this.mathView.value = equationInput;
 				}
+
+				this.saveButtonView.isEnabled = !!equationInput;
 			}
-		} );
+		};
+
+		inputView.on( 'render', onInput );
+		inputView.on( 'input', onInput );
 
 		return mathInput;
 	}
diff --git a/theme/mathform.css b/theme/mathform.css
index d5046e254..271761058 100644
--- a/theme/mathform.css
+++ b/theme/mathform.css
@@ -26,7 +26,7 @@
 }
 
 .ck-math-tex.ck-placeholder::before {
-  display: none !important;
+	display: none !important;
 }
 
 .ck.ck-toolbar-container {