Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-10 10:22:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add hash to math preview

Browse Source
This commit is contained in:
Sauli Anto 2019-10-06 11:13:17 +03:00
parent 60a145333a
commit 98815fcef0
4 changed files with 50 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/mathui.js
View File

@ -2,6 +2,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver';
import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon';
import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler';
import uid from '@ckeditor/ckeditor5-utils/src/uid';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import MainFormView from './ui/mainformview';
@ -27,6 +28,8 @@ export default class MathUI extends Plugin {
const editor = this.editor;
editor.editing.view.addObserver( ClickObserver );
this._previewUid = `math-preview-${ uid() }`;
this._form = this._createFormView();
this._balloon = editor.plugins.get( ContextualBalloon );
@ -61,7 +64,7 @@ export default class MathUI extends Plugin {
const mathConfig = Object.assign( defaultConfig, this.editor.config.get( 'math' ) );
const formView = new MainFormView( editor.locale, mathConfig.engine, mathConfig.enablePreview );
const formView = new MainFormView( editor.locale, mathConfig.engine, mathConfig.enablePreview, this._previewUid );
formView.mathInputView.bind( 'value' ).to( mathCommand, 'value' );
formView.displayButtonView.bind( 'isOn' ).to( mathCommand, 'display' );
@ -104,8 +107,7 @@ export default class MathUI extends Plugin {
}
// Show preview element
const elId = 'math-preview';
let prewviewEl = document.getElementById( elId ); // eslint-disable-line
let prewviewEl = document.getElementById( this._previewUid ); // eslint-disable-line
if ( prewviewEl && this._form.previewEnabled ) {
// Force refresh preview
this._form.mathView.updateMath();
@ -147,8 +149,7 @@ export default class MathUI extends Plugin {
this._balloon.remove( this._form );
// Hide preview element
const elId = 'math-preview';
let prewviewEl = document.getElementById( elId );// eslint-disable-line
let prewviewEl = document.getElementById( this._previewUid );// eslint-disable-line
if ( prewviewEl ) {
prewviewEl.style.display = 'none';
}

4
src/ui/mainformview.js
View File

@ -22,7 +22,7 @@ import MathView from './mathview';
import '../../theme/mathform.css';
export default class MainFormView extends View {
constructor( locale, engine, previewEnabled ) {
constructor( locale, engine, 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 );
this.mathView = new MathView( engine, locale, previewUid );
this.mathView.bind( 'display' ).to( this.displayButtonView, 'isOn' );
children = [

5
src/ui/mathview.js
View File

@ -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 ) {
constructor( engine, locale, previewUid ) {
super( locale );
this.engine = engine;
this.previewUid = previewUid;
this.set( 'value', '' );
this.set( 'display', false );
@ -29,7 +30,7 @@ export default class MathView extends View {
}
updateMath() {
renderEquation( this.value, this.element, this.engine, this.display, true );
renderEquation( this.value, this.element, this.engine, this.display, true, this.previewUid );
}
render() {

78
src/utils.js
View File

@ -15,10 +15,37 @@ export function getSelectedMathModelWidget( selection ) {
return null;
}
export function renderEquation( equation, element, engine = 'katex', display = false, preview = false ) {
// Simple MathJax 3 version check
export function isMathJaxVersion3( version ) {
return version && typeof version === 'string' && version.split( '.' ).length === 3 && version.split( '.' )[ 0 ] === '3';
}
// Check if equation has delimiters
export function hasDelimiters( text ) {
return text.match( /^(\\\[.*?\\\]|\\\(.*?\\\))$/ );
}
// Extract delimiters and figure display mode for the model
export function extractDelimiters( equation ) {
equation = equation.trim();
// Remove delimiters (e.g. \( \) or \[ \])
const hasInlineDelimiters = equation.includes( '\\(' ) && equation.includes( '\\)' );
const hasDisplayDelimiters = equation.includes( '\\[' ) && equation.includes( '\\]' );
if ( hasInlineDelimiters || hasDisplayDelimiters ) {
equation = equation.substring( 2, equation.length - 2 ).trim();
}
return {
equation,
display: hasDisplayDelimiters
};
}
export function renderEquation( equation, element, engine = 'katex', display = false, preview = false, previewUid ) {
if ( engine === 'mathjax' && typeof MathJax !== 'undefined' ) {
if ( isMathJaxVersion3( MathJax.version ) ) {
selectRenderMode( element, preview, el => {
selectRenderMode( element, preview, previewUid, el => {
renderMathJax3( equation, el, display, () => {
if ( preview ) {
el.style.display = 'block';
@ -27,7 +54,7 @@ export function renderEquation( equation, element, engine = 'katex', display = f
} );
} );
} else {
selectRenderMode( element, preview, el => {
selectRenderMode( element, preview, previewUid, el => {
// Fixme: MathJax typesetting cause occasionally math processing error without asynchronous call
// eslint-disable-next-line
setTimeout( () => {
@ -45,7 +72,7 @@ export function renderEquation( equation, element, engine = 'katex', display = f
} );
}
} else if ( engine === 'katex' && typeof katex !== 'undefined' ) {
selectRenderMode( element, preview, el => {
selectRenderMode( element, preview, previewUid, el => {
katex.render( equation, el, {
throwOnError: false,
displayMode: display
@ -64,9 +91,9 @@ export function renderEquation( equation, element, engine = 'katex', display = f
}
}
function selectRenderMode( element, preview, cb ) {
function selectRenderMode( element, preview, previewUid, cb ) {
if ( preview ) {
createPreviewElement( element, prewviewEl => {
createPreviewElement( element, previewUid, prewviewEl => {
cb( prewviewEl );
} );
} else {
@ -102,17 +129,17 @@ function renderMathJax2( equation, element, display ) {
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, element ] ); // eslint-disable-line
}
function createPreviewElement( element, render ) {
const prewviewEl = getPreviewElement( element );
function createPreviewElement( element, previewUid, render ) {
const prewviewEl = getPreviewElement( element, previewUid );
render( prewviewEl );
}
export function getPreviewElement( element ) {
const elId = 'math-preview';
let prewviewEl = document.getElementById( elId ); // eslint-disable-line
function getPreviewElement( element, previewUid ) {
let prewviewEl = document.getElementById( previewUid ); // eslint-disable-line
// Create if not found
if ( !prewviewEl ) {
prewviewEl = document.createElement( 'div' ); // eslint-disable-line
prewviewEl.setAttribute( 'id', elId );
prewviewEl.setAttribute( 'id', previewUid );
document.body.appendChild( prewviewEl ); // eslint-disable-line
let ticking = false;
@ -156,30 +183,3 @@ function moveElement( parent, child ) {
child.style.zIndex = 'var(--ck-z-modal)';
child.style.pointerEvents = 'none';
}
// Simple MathJax 3 version check
export function isMathJaxVersion3( version ) {
return version && typeof version === 'string' && version.split( '.' ).length === 3 && version.split( '.' )[ 0 ] === '3';
}
// Check if equation has delimiters
export function hasDelimiters( text ) {
return text.match( /^(\\\[.*?\\\]|\\\(.*?\\\))$/ );
}
// Extract delimiters and figure display mode for the model
export function extractDelimiters( equation ) {
equation = equation.trim();
// Remove delimiters (e.g. \( \) or \[ \])
const hasInlineDelimiters = equation.includes( '\\(' ) && equation.includes( '\\)' );
const hasDisplayDelimiters = equation.includes( '\\[' ) && equation.includes( '\\]' );
if ( hasInlineDelimiters || hasDisplayDelimiters ) {
equation = equation.substring( 2, equation.length - 2 ).trim();
}
return {
equation,
display: hasDisplayDelimiters
};
}