New option: katexRenderOptions

See also: https://katex.org/docs/options.html
This commit is contained in:
Tony Narlock 2022-08-03 16:19:32 -05:00
parent f8b0c8e679
commit f15758b229
5 changed files with 17 additions and 11 deletions

View File

@ -32,7 +32,8 @@ export default class MathEditing extends Plugin {
forceOutputType: false, forceOutputType: false,
enablePreview: true, enablePreview: true,
previewClassName: [], previewClassName: [],
popupClassName: [] popupClassName: [],
katexRenderOptions: {}
} ); } );
} }
@ -168,7 +169,8 @@ export default class MathEditing extends Plugin {
const uiElement = writer.createUIElement( 'div', null, function( domDocument ) { const uiElement = writer.createUIElement( 'div', null, function( domDocument ) {
const domElement = this.toDomElement( domDocument ); const domElement = this.toDomElement( domDocument );
renderEquation( equation, domElement, mathConfig.engine, mathConfig.lazyLoad, display, false ); renderEquation( equation, domElement, mathConfig.engine, mathConfig.lazyLoad, display, false, mathConfig.previewClassName,
null, mathConfig.katexRenderOptions );
return domElement; return domElement;
} ); } );

View File

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

View File

@ -23,7 +23,7 @@ import MathView from './mathview';
import '../../theme/mathform.css'; import '../../theme/mathform.css';
export default class MainFormView extends View { export default class MainFormView extends View {
constructor( locale, engine, lazyLoad, previewEnabled, previewUid, previewClassName, popupClassName ) { constructor( locale, engine, lazyLoad, previewEnabled, previewUid, previewClassName, popupClassName, katexRenderOptions ) {
super( locale ); super( locale );
const t = locale.t; const t = locale.t;
@ -53,7 +53,7 @@ export default class MainFormView extends View {
this.previewLabel.text = t( 'Equation preview' ); this.previewLabel.text = t( 'Equation preview' );
// Math element // Math element
this.mathView = new MathView( engine, lazyLoad, locale, previewUid, previewClassName ); this.mathView = new MathView( engine, lazyLoad, locale, previewUid, previewClassName, katexRenderOptions );
this.mathView.bind( 'display' ).to( this.displayButtonView, 'isOn' ); this.mathView.bind( 'display' ).to( this.displayButtonView, 'isOn' );
children = [ children = [

View File

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

View File

@ -44,7 +44,8 @@ export function extractDelimiters( equation ) {
} }
export async function renderEquation( export async function renderEquation(
equation, element, engine = 'katex', lazyLoad, display = false, preview = false, previewUid, previewClassName = [] equation, element, engine = 'katex', lazyLoad, display = false, preview = false, previewUid, previewClassName = [],
katexRenderOptions = {}
) { ) {
if ( engine === 'mathjax' && typeof MathJax !== 'undefined' ) { if ( engine === 'mathjax' && typeof MathJax !== 'undefined' ) {
if ( isMathJaxVersion3( MathJax.version ) ) { if ( isMathJaxVersion3( MathJax.version ) ) {
@ -77,7 +78,8 @@ export async function renderEquation(
selectRenderMode( element, preview, previewUid, previewClassName, el => { selectRenderMode( element, preview, previewUid, previewClassName, el => {
katex.render( equation, el, { katex.render( equation, el, {
throwOnError: false, throwOnError: false,
displayMode: display displayMode: display,
...katexRenderOptions
} ); } );
if ( preview ) { if ( preview ) {
moveAndScaleElement( element, el ); moveAndScaleElement( element, el );
@ -94,7 +96,7 @@ export async function renderEquation(
} }
element.innerHTML = equation; element.innerHTML = equation;
await global.window.CKEDITOR_MATH_LAZY_LOAD; await global.window.CKEDITOR_MATH_LAZY_LOAD;
renderEquation( equation, element, engine, undefined, display, preview, previewUid, previewClassName ); renderEquation( equation, element, engine, undefined, display, preview, previewUid, previewClassName, katexRenderOptions );
} }
catch ( err ) { catch ( err ) {
element.innerHTML = equation; element.innerHTML = equation;