Fix linting errors

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

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 ) {

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;
 			}

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();

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) {
+		const version = MathJax.version;
-			element.innerHTML = '\\[' + equation + '\\]';
+		// 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
-}
+};