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 [KaTeX](https://www.mathjax.org/) __KaTeX__ -- Tested by using version __0.11.0__ +- Tested with version __0.12.0__ [KaTeX](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.` ); + } } }