diff --git a/src/mathcommand.js b/src/mathcommand.js index 73fbc5bec..72004bc14 100644 --- a/src/mathcommand.js +++ b/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; } } diff --git a/src/mathediting.js b/src/mathediting.js index 61eef47a1..bcab44d54 100644 --- a/src/mathediting.js +++ b/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;', - class: 'mathtex' + style: styles, + class: classes } ); // Div is formatted as parent container diff --git a/src/mathui.js b/src/mathui.js index 9cc18ee42..bfce006f3 100644 --- a/src/mathui.js +++ b/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() { diff --git a/src/ui/mainformview.js b/src/ui/mainformview.js index 7e36a75a8..47e885fc4 100644 --- a/src/ui/mainformview.js +++ b/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; + } } diff --git a/src/ui/mathview.js b/src/ui/mathview.js index 11efe4ae9..573c8bfa6 100644 --- a/src/ui/mathview.js +++ b/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() {