Fix linting errors

src/mathui.js

@@ -62,7 +62,7 @@ export default class MathUI extends Plugin {
 		const mathConfig = {
 			...defaultConfig,
 			...this.editor.config.get( 'math' )
-		}
+		};
 
 		const formView = new MainFormView( editor.locale, mathConfig.engine );
 

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';
@@ -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
@@ -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' ),

src/utils.js

@@ -1,26 +1,45 @@
 export function renderEquation( equation, element, engine = 'katex', display = false ) {
+	/* eslint-disable */
 	if ( engine === 'mathjax' && typeof MathJax !== 'undefined' ) {
+		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 {
 			if ( display ) {
 				element.innerHTML = '\\[' + equation + '\\]';
 			} else {
 				element.innerHTML = '\\(' + equation + '\\)';
 			}
-		/* 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 );
 	} 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
-}
+};