diff --git a/README.md b/README.md
index 99705ac45..f6bb43fa3 100644
--- a/README.md
+++ b/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
[
](https://www.mathjax.org/)
__KaTeX__
-- Tested by using version __0.11.0__
+- Tested with version __0.12.0__
[
](https://katex.org/)
diff --git a/src/mathediting.js b/src/mathediting.js
index 13524cc57..0e79cb2b6 100644
--- a/src/mathediting.js
+++ b/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;
} );
diff --git a/src/mathui.js b/src/mathui.js
index 221218710..10d829ded 100644
--- a/src/mathui.js
+++ b/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' );
diff --git a/src/ui/mainformview.js b/src/ui/mainformview.js
index feb457a70..1389d8184 100644
--- a/src/ui/mainformview.js
+++ b/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 = [
diff --git a/src/ui/mathview.js b/src/ui/mathview.js
index 81e78b03b..40e731b36 100644
--- a/src/ui/mathview.js
+++ b/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() {
diff --git a/src/utils.js b/src/utils.js
index 6d29871de..51fa7d726 100644
--- a/src/utils.js
+++ b/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.` );
+ }
}
}