Disable preview in katex

This commit is contained in:
Sauli Anto 2019-09-17 20:07:01 +03:00
parent 4bae994b4f
commit 820ed0bd9d
2 changed files with 38 additions and 17 deletions

View File

@ -32,12 +32,8 @@ export default class MainFormView extends View {
// Equation input // Equation input
this.mathInputView = this._createMathInput(); this.mathInputView = this._createMathInput();
// Preview label // Preview isn't available in katex, because .ck-reset_all * css rule breaks it
this.previewLabel = new LabelView( locale ); this.previewEnabled = engine !== 'katex';
this.previewLabel.text = t( 'Equation preview' );
// Math element
this.mathView = new MathView( engine, locale );
// Display button // Display button
this.displayButtonView = this._createDisplayButton(); this.displayButtonView = this._createDisplayButton();
@ -49,6 +45,30 @@ export default class MainFormView extends View {
// Cancel button // Cancel button
this.cancelButtonView = this._createButton( t( 'Cancel' ), cancelIcon, 'ck-button-cancel', 'cancel' ); this.cancelButtonView = this._createButton( t( 'Cancel' ), cancelIcon, 'ck-button-cancel', 'cancel' );
// Preview label
this.previewLabel = new LabelView( locale );
let children = [];
if (this.previewEnabled) {
this.previewLabel.text = t( 'Equation preview' );
// Math element
this.mathView = new MathView( engine, locale );
children = [
this.mathInputView,
this.displayButtonView,
this.previewLabel,
this.mathView
]
} else {
this.previewLabel.text = t( `Equation preview isn't available` );
children = [
this.mathInputView,
this.displayButtonView,
this.previewLabel
]
}
// Add UI elements to template // Add UI elements to template
this.setTemplate( { this.setTemplate( {
@ -68,12 +88,7 @@ export default class MainFormView extends View {
'ck-math-view' 'ck-math-view'
] ]
}, },
children: [ children
this.mathInputView,
this.displayButtonView,
this.previewLabel,
this.mathView
]
}, },
this.saveButtonView, this.saveButtonView,
this.cancelButtonView, this.cancelButtonView,
@ -116,7 +131,9 @@ export default class MainFormView extends View {
set equation( equation ) { set equation( equation ) {
this.mathInputView.inputView.element.value = equation; this.mathInputView.inputView.element.value = equation;
this.mathView.value = equation; if (this.previewEnabled) {
this.mathView.value = equation;
}
} }
_createKeyAndFocusTrackers() { _createKeyAndFocusTrackers() {
@ -143,7 +160,9 @@ export default class MainFormView extends View {
const inputView = mathInput.inputView; const inputView = mathInput.inputView;
mathInput.infoText = t( 'Insert equation in TeX format.' ); mathInput.infoText = t( 'Insert equation in TeX format.' );
inputView.on( 'input', () => { inputView.on( 'input', () => {
this.mathView.value = inputView.element.value; if (this.previewEnabled) {
this.mathView.value = inputView.element.value;
}
} ); } );
return mathInput; return mathInput;
@ -193,8 +212,10 @@ export default class MainFormView extends View {
// Toggle state // Toggle state
this.set('displayIsOn', !this.displayIsOn); this.set('displayIsOn', !this.displayIsOn);
// Update preview view if (this.previewEnabled) {
this.mathView.display = this.displayIsOn; // Update preview view
this.mathView.display = this.displayIsOn;
}
} ); } );
return switchButton; return switchButton;

View File

@ -1,5 +1,5 @@
export function renderEquation( equation, element, engine = 'katex', display = false ) { export function renderEquation( equation, element, engine = 'katex', display = false ) {
if ( engine === 'mathjax' && typeof katex !== 'mathjax' ) { if ( engine === 'mathjax' && typeof MathJax !== 'undefined' ) {
if (display) { if (display) {
element.innerHTML = '\\[' + equation + '\\]'; element.innerHTML = '\\[' + equation + '\\]';
} else { } else {