Add display toggle

src/mathcommand.js

@@ -2,7 +2,7 @@ import Command from '@ckeditor/ckeditor5-core/src/command';
 import { getSelectedMathModelWidget } from './utils';
 
 export default class MathCommand extends Command {
-	execute( equation ) {
+	execute( equation, display ) {
 		const model = this.editor.model;
 		const selection = model.document.selection;
 		const selectedElement = selection.getSelectedElement();
@@ -12,11 +12,10 @@ export default class MathCommand extends Command {
 			if ( selectedElement && selectedElement.is( 'mathtex' ) ) {
 				// Update selected element
 				const mode = selectedElement.getAttribute( 'mode' );
-				const display = selectedElement.getAttribute( 'display' );
 				mathtex = writer.createElement( 'mathtex', { equation, mode, display } );
 			} else {
 				// Create new model element
-				mathtex = writer.createElement( 'mathtex', { equation, mode: 'script', display: true } );
+				mathtex = writer.createElement( 'mathtex', { equation, mode: 'script', display } );
 			}
 			model.insertContent( mathtex );
 			writer.setSelection( mathtex, 'on' );
@@ -31,6 +30,8 @@ export default class MathCommand extends Command {
 		this.isEnabled = isAllowed;
 
 		const selectedEquation = getSelectedMathModelWidget( selection );
+		console.log(selectedEquation);
 		this.value = selectedEquation ? selectedEquation.getAttribute( 'equation' ) : null;
+		this.display = selectedEquation ? selectedEquation.getAttribute( 'display' ) : null;
 	}
 }

src/mathediting.js

@@ -107,11 +107,13 @@ export default class MathEditing extends Plugin {
 			const equation = modelItem.getAttribute( 'equation' );
 			const display = modelItem.getAttribute( 'display' );
 
+			const styles = 'user-select: none; ' + (display ? 'display: block;' : 'display: inline-block;');
+			const classes = 'ck-math-tex ' + (display ? 'ck-math-tex-display' : 'ck-math-tex-inline');
 
 			// CKEngine render multiple times if using span instead of div
 			const mathtexView = viewWriter.createContainerElement( 'div', {
-				style: display ? 'display: block;' : 'display: inline-block;',
+				style: styles,
-				class: 'mathtex'
+				class: classes
 			} );
 
 			// Div is formatted as parent container

src/mathui.js

@@ -62,10 +62,11 @@ export default class MathUI extends Plugin {
 		const formView = new MainFormView( editor.locale, engine );
 
 		formView.mathInputView.bind( 'value' ).to( mathCommand, 'value' );
+		formView.displayButtonView.bind( 'displayIsOn' ).to( mathCommand, 'display');
 
-		// Listen to 'submit' button click
+		// Listen to submit button click
 		this.listenTo( formView, 'submit', () => {
-			editor.execute( 'math', formView.equation );
+			editor.execute( 'math', formView.equation, formView.displayButtonView.isOn );
 			this._closeFormView();
 		} );
 
@@ -101,6 +102,7 @@ export default class MathUI extends Plugin {
 		}
 
 		this._form.equation = mathCommand.value || '';
+		this._form.displayButtonView.isOn = mathCommand.display || false;
 	}
 
 	_hideUI() {

src/ui/mainformview.js

@@ -2,6 +2,7 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
 
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import SwitchButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinputview';
 import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
 import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
@@ -38,6 +39,9 @@ export default class MainFormView extends View {
 		// Math element
 		this.mathView = new MathView( engine, locale );
 
+		// Display button
+		this.displayButtonView = this._createDisplayButton();
+
 		// Submit button
 		this.saveButtonView = this._createButton( t( 'Save' ), checkIcon, 'ck-button-save', null );
 		this.saveButtonView.type = 'submit';
@@ -66,6 +70,7 @@ export default class MainFormView extends View {
 					},
 					children: [
 						this.mathInputView,
+						this.displayButtonView,
 						this.previewLabel,
 						this.mathView
 					]
@@ -87,6 +92,7 @@ export default class MainFormView extends View {
 		// Register form elements to focusable elements
 		const childViews = [
 			this.mathInputView,
+			this.displayButtonView,
 			this.saveButtonView,
 			this.cancelButtonView,
 		];
@@ -164,4 +170,33 @@ export default class MainFormView extends View {
 
 		return button;
 	}
+
+	_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'
+			}
+		} );
+
+		switchButton.bind( 'isOn' ).to( this, 'displayIsOn' );
+
+		switchButton.on( 'execute', () => {
+			// Toggle state
+			this.set('displayIsOn', !this.displayIsOn);
+
+			// Update preview view
+			this.mathView.display = this.displayIsOn;
+		} );
+
+		return switchButton;
+	}
 }

src/ui/mathview.js

@@ -8,8 +8,9 @@ export default class MathView extends View {
 		this.engine = engine;
 
 		this.set( 'value', '' );
+		this.set( 'display', false);
 
-		this.on( 'change:value', () => {
+		this.on( 'change', () => {
 			this.updateMath();
 		} );
 
@@ -25,7 +26,7 @@ export default class MathView extends View {
 	}
 
 	updateMath() {
-		renderEquation( this.value, this.element, this.engine );
+		renderEquation( this.value, this.element, this.engine, this.display );
 	}
 
 	render() {