Config: Optional classes previewClassName and popupClassName

This commit is contained in:
Tony Narlock
2021-04-16 17:14:30 -05:00
parent 8f651a9100
commit 0fb49a523e
6 changed files with 27 additions and 18 deletions

View File

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

View File

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

View File

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

View File

@@ -22,7 +22,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 ) { constructor( locale, engine, lazyLoad, previewEnabled, previewUid, previewClassName, popupClassName ) {
super( locale ); super( locale );
const t = locale.t; const t = locale.t;
@@ -52,7 +52,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 ); this.mathView = new MathView( engine, lazyLoad, locale, previewUid, previewClassName );
this.mathView.bind( 'display' ).to( this.displayButtonView, 'isOn' ); this.mathView.bind( 'display' ).to( this.displayButtonView, 'isOn' );
children = [ children = [
@@ -74,7 +74,8 @@ export default class MainFormView extends View {
attributes: { attributes: {
class: [ class: [
'ck', 'ck',
'ck-math-form' 'ck-math-form',
...popupClassName
], ],
tabindex: '-1', tabindex: '-1',
spellcheck: 'false' spellcheck: 'false'

View File

@@ -3,12 +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 ) { constructor( engine, lazyLoad, locale, previewUid, previewClassName ) {
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.set( 'value', '' ); this.set( 'value', '' );
this.set( 'display', false ); this.set( 'display', false );
@@ -31,7 +32,7 @@ export default class MathView extends View {
} }
updateMath() { 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() { render() {

View File

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