From 566c9a40cb31cc99597a48f91ba94d8e0fb6aaff Mon Sep 17 00:00:00 2001 From: Sauli Anto Date: Sat, 28 Sep 2019 13:01:08 +0300 Subject: [PATCH] Fix linting errors --- src/mathcommand.js | 2 +- src/mathui.js | 6 +++--- src/ui/mainformview.js | 19 +++++++++--------- src/ui/mathview.js | 4 ++-- src/utils.js | 45 +++++++++++++++++++++++++++--------------- 5 files changed, 44 insertions(+), 32 deletions(-) diff --git a/src/mathcommand.js b/src/mathcommand.js index 43ac098f2..9e0fd73ca 100644 --- a/src/mathcommand.js +++ b/src/mathcommand.js @@ -15,7 +15,7 @@ export default class MathCommand extends Command { // Use already set type if found and is not forced const type = forceOutputType ? outputType : typeAttr || outputType; - + mathtex = writer.createElement( 'mathtex', { equation, type, display } ); } else { // Create new model element diff --git a/src/mathui.js b/src/mathui.js index b59b2aa50..76f2842e1 100644 --- a/src/mathui.js +++ b/src/mathui.js @@ -62,12 +62,12 @@ export default class MathUI extends Plugin { const mathConfig = { ...defaultConfig, ...this.editor.config.get( 'math' ) - } + }; const formView = new MainFormView( editor.locale, mathConfig.engine ); formView.mathInputView.bind( 'value' ).to( mathCommand, 'value' ); - formView.displayButtonView.bind( 'displayIsOn' ).to( mathCommand, 'display'); + formView.displayButtonView.bind( 'displayIsOn' ).to( mathCommand, 'display' ); // Listen to submit button click this.listenTo( formView, 'submit', () => { @@ -125,7 +125,7 @@ export default class MathUI extends Plugin { // Remove form first because it's on top of the stack. this._removeFormView(); } - + _closeFormView() { const mathCommand = this.editor.commands.get( 'math' ); if ( mathCommand.value !== undefined ) { diff --git a/src/ui/mainformview.js b/src/ui/mainformview.js index 6734832d7..1d4a5f546 100644 --- a/src/ui/mainformview.js +++ b/src/ui/mainformview.js @@ -2,7 +2,6 @@ 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'; @@ -49,7 +48,7 @@ export default class MainFormView extends View { this.previewLabel = new LabelView( locale ); let children = []; - if (this.previewEnabled) { + if ( this.previewEnabled ) { this.previewLabel.text = t( 'Equation preview' ); // Math element @@ -60,14 +59,14 @@ export default class MainFormView extends View { this.displayButtonView, this.previewLabel, this.mathView - ] + ]; } else { - this.previewLabel.text = t( `Equation preview isn't available` ); + this.previewLabel.text = t( 'Equation preview isn\'t available' ); children = [ this.mathInputView, this.displayButtonView, this.previewLabel - ] + ]; } // Add UI elements to template @@ -131,7 +130,7 @@ export default class MainFormView extends View { set equation( equation ) { this.mathInputView.inputView.element.value = equation; - if (this.previewEnabled) { + if ( this.previewEnabled ) { this.mathView.value = equation; } } @@ -160,7 +159,7 @@ export default class MainFormView extends View { const inputView = mathInput.inputView; mathInput.infoText = t( 'Insert equation in TeX format.' ); inputView.on( 'input', () => { - if (this.previewEnabled) { + if ( this.previewEnabled ) { this.mathView.value = inputView.element.value; } } ); @@ -193,7 +192,7 @@ export default class MainFormView extends View { _createDisplayButton() { const t = this.locale.t; - const switchButton = new SwitchButtonView( this.locale ); + const switchButton = new ButtonView( this.locale ); switchButton.set( { label: t( 'Display mode' ), @@ -210,9 +209,9 @@ export default class MainFormView extends View { switchButton.on( 'execute', () => { // Toggle state - this.set('displayIsOn', !this.displayIsOn); + this.set( 'displayIsOn', !this.displayIsOn ); - if (this.previewEnabled) { + if ( this.previewEnabled ) { // Update preview view this.mathView.display = this.displayIsOn; } diff --git a/src/ui/mathview.js b/src/ui/mathview.js index 01791b263..1ce3fe666 100644 --- a/src/ui/mathview.js +++ b/src/ui/mathview.js @@ -6,9 +6,9 @@ export default class MathView extends View { super( locale ); this.engine = engine; - + this.set( 'value', '' ); - this.set( 'display', false); + this.set( 'display', false ); this.on( 'change', () => { this.updateMath(); diff --git a/src/utils.js b/src/utils.js index 7bc4f8517..9b8c86473 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,26 +1,45 @@ export function renderEquation( equation, element, engine = 'katex', display = false ) { + /* eslint-disable */ if ( engine === 'mathjax' && typeof MathJax !== 'undefined' ) { - if (display) { - element.innerHTML = '\\[' + equation + '\\]'; + const version = MathJax.version; + // If major version is 3 + if ( isMathJaxVersion3( version ) ) { + const options = MathJax.getMetricsFor( element ); + + MathJax.texReset(); + MathJax.tex2chtmlPromise( equation, options ).then( node => { + if ( element.firstChild ) { + element.firstChild.replaceWith( node ); + } { + element.appendChild( node ); + } + MathJax.startup.document.clear(); + MathJax.startup.document.updateDocument(); + } ); } else { - element.innerHTML = '\\(' + equation + '\\)'; + if ( display ) { + element.innerHTML = '\\[' + equation + '\\]'; + } else { + element.innerHTML = '\\(' + equation + '\\)'; + } + MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, element ] ); } - /* eslint-disable */ - MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, element ] ); - /* eslint-enable */ } else if ( engine === 'katex' && typeof katex !== 'undefined' ) { - /* eslint-disable */ katex.render( equation, element, { throwOnError: false, displayMode: display } ); - /* eslint-enable */ } else if ( typeof engine === 'function' ) { - engine(equation, element, display); + engine( equation, element, display ); } else { element.innerHTML = equation; console.warn( `math-tex-typesetting-missing: Missing the mathematical typesetting engine (${engine}) for tex.` ); } + /* eslint-enable */ +} + +export function isMathJaxVersion3( version ) { + return version && typeof version === 'string' && version.split( '.' ).length === 3 && version.split( '.' )[0] === '3'; } export function getSelectedMathModelWidget( selection ) { @@ -33,14 +52,8 @@ export function getSelectedMathModelWidget( selection ) { return null; } - export const defaultConfig = { - /* - engine: (equation, element, display) => { - console.log(equation, element, display); - }, - */ engine: 'mathjax', outputType: 'script', forceOutputType: false -} \ No newline at end of file +};