Config: Optional classes previewClassName and popupClassName

src/autoformatmath.js

@@ -34,5 +34,5 @@ function getCallbackFunctionForBlockAutoformat( editor, command ) {
 
 		command.display = true;
 		editor.plugins.get( 'MathUI' )._showUI();
-	}
+	};
 }

src/mathediting.js

@@ -30,7 +30,9 @@ export default class MathEditing extends Plugin {
 			engine: 'mathjax',
 			outputType: 'script',
 			forceOutputType: false,
-			enablePreview: true
+			enablePreview: true,
+			previewClassName: [],
+			popupClassName: []
 		} );
 	}
 

src/mathui.js

@@ -76,7 +76,9 @@ export default class MathUI extends Plugin {
 			mathConfig.engine,
 			mathConfig.lazyLoad,
 			mathConfig.enablePreview,
-			this._previewUid
+			this._previewUid,
+			mathConfig.previewClassName,
+			mathConfig.popupClassName
 		);
 
 		formView.mathInputView.bind( 'value' ).to( mathCommand, 'value' );

src/ui/mainformview.js

@@ -22,7 +22,7 @@ import MathView from './mathview';
 import '../../theme/mathform.css';
 
 export default class MainFormView extends View {
-	constructor( locale, engine, lazyLoad, previewEnabled, previewUid ) {
+	constructor( locale, engine, lazyLoad, previewEnabled, previewUid, previewClassName, popupClassName ) {
 		super( locale );
 
 		const t = locale.t;
@@ -52,7 +52,7 @@ export default class MainFormView extends View {
 			this.previewLabel.text = t( 'Equation preview' );
 
 			// Math element
-			this.mathView = new MathView( engine, lazyLoad, locale, previewUid );
+			this.mathView = new MathView( engine, lazyLoad, locale, previewUid, previewClassName );
 			this.mathView.bind( 'display' ).to( this.displayButtonView, 'isOn' );
 
 			children = [
@@ -74,7 +74,8 @@ export default class MainFormView extends View {
 			attributes: {
 				class: [
 					'ck',
-					'ck-math-form'
+					'ck-math-form',
+					...popupClassName
 				],
 				tabindex: '-1',
 				spellcheck: 'false'

src/ui/mathview.js

@@ -3,12 +3,13 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 import { renderEquation } from '../utils';
 
 export default class MathView extends View {
-	constructor( engine, lazyLoad, locale, previewUid ) {
+	constructor( engine, lazyLoad, locale, previewUid, previewClassName ) {
 		super( locale );
 
 		this.engine = engine;
 		this.lazyLoad = lazyLoad;
 		this.previewUid = previewUid;
+		this.previewClassName = previewClassName;
 
 		this.set( 'value', '' );
 		this.set( 'display', false );
@@ -31,7 +32,7 @@ export default class MathView extends View {
 	}
 
 	updateMath() {
-		renderEquation( this.value, this.element, this.engine, this.lazyLoad, this.display, true, this.previewUid );
+		renderEquation( this.value, this.element, this.engine, this.lazyLoad, this.display, true, this.previewUid, this.previewClassName );
 	}
 
 	render() {

src/utils.js

@@ -43,10 +43,12 @@ export function extractDelimiters( equation ) {
 	};
 }
 
-export async function renderEquation( equation, element, engine = 'katex', lazyLoad, display = false, preview = false, previewUid ) {
+export async function renderEquation(
+	equation, element, engine = 'katex', lazyLoad, display = false, preview = false, previewUid, previewClassName = []
+) {
 	if ( engine === 'mathjax' && typeof MathJax !== 'undefined' ) {
 		if ( isMathJaxVersion3( MathJax.version ) ) {
-			selectRenderMode( element, preview, previewUid, el => {
+			selectRenderMode( element, preview, previewUid, previewClassName, el => {
 				renderMathJax3( equation, el, display, () => {
 					if ( preview ) {
 						moveAndScaleElement( element, el );
@@ -55,7 +57,7 @@ export async function renderEquation( equation, element, engine = 'katex', lazyL
 				} );
 			} );
 		} else {
-			selectRenderMode( element, preview, previewUid, el => {
+			selectRenderMode( element, preview, previewUid, previewClassName, el => {
 				// Fixme: MathJax typesetting cause occasionally math processing error without asynchronous call
 				global.window.setTimeout( () => {
 					renderMathJax2( equation, el, display );
@@ -72,7 +74,7 @@ export async function renderEquation( equation, element, engine = 'katex', lazyL
 			} );
 		}
 	} else if ( engine === 'katex' && typeof katex !== 'undefined' ) {
-		selectRenderMode( element, preview, previewUid, el => {
+		selectRenderMode( element, preview, previewUid, previewClassName, el => {
 			katex.render( equation, el, {
 				throwOnError: false,
 				displayMode: display
@@ -92,7 +94,7 @@ export async function renderEquation( equation, element, engine = 'katex', lazyL
 				}
 				element.innerHTML = equation;
 				await global.window.CKEDITOR_MATH_LAZY_LOAD;
-				renderEquation( equation, element, engine, undefined, display, preview, previewUid );
+				renderEquation( equation, element, engine, undefined, display, preview, previewUid, previewClassName );
 			}
 			catch ( err ) {
 				element.innerHTML = equation;
@@ -133,9 +135,9 @@ export function getBalloonPositionData( editor ) {
 	}
 }
 
-function selectRenderMode( element, preview, previewUid, cb ) {
+function selectRenderMode( element, preview, previewUid, previewClassName, cb ) {
 	if ( preview ) {
-		createPreviewElement( element, previewUid, previewEl => {
+		createPreviewElement( element, previewUid, previewClassName, previewEl => {
 			cb( previewEl );
 		} );
 	} else {
@@ -172,17 +174,18 @@ function renderMathJax2( equation, element, display ) {
 	MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, element ] );
 }
 
-function createPreviewElement( element, previewUid, render ) {
-	const previewEl = getPreviewElement( element, previewUid );
+function createPreviewElement( element, previewUid, previewClassName, render ) {
+	const previewEl = getPreviewElement( element, previewUid, previewClassName );
 	render( previewEl );
 }
 
-function getPreviewElement( element, previewUid ) {
+function getPreviewElement( element, previewUid, previewClassName ) {
 	let previewEl = global.document.getElementById( previewUid );
 	// Create if not found
 	if ( !previewEl ) {
 		previewEl = global.document.createElement( 'div' );
 		previewEl.setAttribute( 'id', previewUid );
+		previewEl.classList.add( ...previewClassName );
 		previewEl.style.visibility = 'hidden';
 		global.document.body.appendChild( previewEl );