mirror of
https://github.com/zadam/trilium.git
synced 2025-11-07 05:46:10 +01:00
Config: Optional classes previewClassName and popupClassName
This commit is contained in:
@@ -34,5 +34,5 @@ function getCallbackFunctionForBlockAutoformat( editor, command ) {
|
|||||||
|
|
||||||
command.display = true;
|
command.display = true;
|
||||||
editor.plugins.get( 'MathUI' )._showUI();
|
editor.plugins.get( 'MathUI' )._showUI();
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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: []
|
||||||
} );
|
} );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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' );
|
||||||
|
|||||||
@@ -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'
|
||||||
|
|||||||
@@ -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() {
|
||||||
|
|||||||
23
src/utils.js
23
src/utils.js
@@ -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 );
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user