Add typesetting engine lazy load feature

README.md

@@ -93,6 +93,7 @@ InlineEditor.defaultConfig = {
 	// ...
 	math: {
 		engine: 'mathjax', // or katex or function. E.g. (equation, element, display) => { ... }
+		lazyLoad: undefined // async () => { ... }, called once before rendering first equation if engine doesn't exist. After resolving promise, plugin renders equations.
 		outputType: 'script', // or span
 		forceOutputType: false, // forces output to use outputType
 		enablePreview: true // Enable preview view
@@ -102,14 +103,13 @@ InlineEditor.defaultConfig = {
 
 ### Available typesetting engines
 __MathJax__
-- Tested by using __latest 2.7__
+- Tested with __latest 2.7__
 - Has experimental (__CHTML__, __SVG__) support for __3.0.0__ or newer version
-- Use only __\\( \\)__ delimiters for inline and __\\[ \\]__ delimiters for display
 
 [<img src="https://www.mathjax.org/badge/badge-square.svg" width="130" alt="KaTeX">](https://www.mathjax.org/)
 
 __KaTeX__
-- Tested by using version __0.11.0__
+- Tested with version __0.12.0__
 
 [<img src="https://katex.org/img/katex-logo-black.svg" width="130" alt="KaTeX">](https://katex.org/)
 

src/mathediting.js

@@ -151,7 +151,7 @@ export default class MathEditing extends Plugin {
 			const uiElement = writer.createUIElement( 'div', null, function( domDocument ) {
 				const domElement = this.toDomElement( domDocument );
 
-				renderEquation( equation, domElement, mathConfig.engine, display, false );
+				renderEquation( equation, domElement, mathConfig.engine, mathConfig.lazyLoad, display, false );
 
 				return domElement;
 			} );

src/mathui.js

@@ -70,7 +70,13 @@ export default class MathUI extends Plugin {
 
 		const mathConfig = this.editor.config.get( 'math' );
 
-		const formView = new MainFormView( editor.locale, mathConfig.engine, mathConfig.enablePreview, this._previewUid );
+		const formView = new MainFormView(
+			editor.locale,
+			mathConfig.engine,
+			mathConfig.lazyLoad,
+			mathConfig.enablePreview,
+			this._previewUid
+		);
 
 		formView.mathInputView.bind( 'value' ).to( mathCommand, 'value' );
 		formView.displayButtonView.bind( 'isOn' ).to( mathCommand, 'display' );

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, previewEnabled, previewUid ) {
+	constructor( locale, engine, lazyLoad, previewEnabled, previewUid ) {
 		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, locale, previewUid );
+			this.mathView = new MathView( engine, lazyLoad, locale, previewUid );
 			this.mathView.bind( 'display' ).to( this.displayButtonView, 'isOn' );
 
 			children = [

src/ui/mathview.js

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

src/utils.js

@@ -42,7 +42,7 @@ export function extractDelimiters( equation ) {
 	};
 }
 
-export function renderEquation( equation, element, engine = 'katex', display = false, preview = false, previewUid ) {
+export async function renderEquation( equation, element, engine = 'katex', lazyLoad, display = false, preview = false, previewUid ) {
 	if ( engine === 'mathjax' && typeof MathJax !== 'undefined' ) {
 		if ( isMathJaxVersion3( MathJax.version ) ) {
 			selectRenderMode( element, preview, previewUid, el => {
@@ -84,8 +84,23 @@ export function renderEquation( equation, element, engine = 'katex', display = f
 	} 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.` );
+		if ( typeof lazyLoad !== 'undefined' ) {
+			try {
+				if ( !global.window.CKEDITOR_MATH_LAZY_LOAD ) {
+					global.window.CKEDITOR_MATH_LAZY_LOAD = lazyLoad();
+				}
+				element.innerHTML = equation;
+				await global.window.CKEDITOR_MATH_LAZY_LOAD;
+				renderEquation( equation, element, engine, undefined, display, preview, previewUid );
+			}
+			catch ( err ) {
+				element.innerHTML = equation;
+				console.error( `math-tex-typesetting-lazy-load-failed: Lazy load failed: ${ err }` );
+			}
+		} else {
+			element.innerHTML = equation;
+			console.warn( `math-tex-typesetting-missing: Missing the mathematical typesetting engine (${ engine }) for tex.` );
+		}
 	}
 }