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

Fix preview rendering bug

Browse Source
This commit is contained in:
Sauli Anto 2019-10-04 20:01:28 +03:00
parent 1527c7c9eb
commit 070f84ebd6
4 changed files with 25 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/mathediting.js
View File

@ -124,7 +124,7 @@ export default class MathEditing extends Plugin {
const uiElement = viewWriter.createUIElement( 'div', null, function( domDocument ) {
const domElement = this.toDomElement( domDocument );
renderEquation( equation, domElement, mathConfig.engine, display );
renderEquation( equation, domElement, mathConfig.engine, display, false );
return domElement;
} );

5
src/mathui.js
View File

@ -106,8 +106,9 @@ export default class MathUI extends Plugin {
// Show preview element
const elId = 'math-preview';
let prewviewEl = document.getElementById( elId ); // eslint-disable-line
if ( prewviewEl ) {
prewviewEl.style.display = 'block';
if ( prewviewEl && this._form.previewEnabled ) {
// Force refresh preview
this._form.mathView.updateMath();
}
this._form.equation = mathCommand.value || '';

7
src/ui/mathview.js
View File

@ -12,7 +12,9 @@ export default class MathView extends View {
this.set( 'display', false );
this.on( 'change', () => {
if ( this.isRendered ) {
this.updateMath();
}
} );
this.setTemplate( {
@ -27,10 +29,7 @@ export default class MathView extends View {
}
updateMath() {
const el = this.element;
if ( el ) {
renderEquation( this.value, el, this.engine, this.display, true );
}
renderEquation( this.value, this.element, this.engine, this.display, true );
}
render() {

30
src/utils.js
View File

@ -21,6 +21,7 @@ export function renderEquation( equation, element, engine = 'katex', display = f
selectRenderMode( element, preview, el => {
renderMathJax3( equation, el, display, () => {
if ( preview ) {
el.style.display = 'block';
moveAndScaleElement( element, el );
}
} );
@ -36,6 +37,7 @@ export function renderEquation( equation, element, engine = 'katex', display = f
if ( preview ) {
// eslint-disable-next-line
MathJax.Hub.Queue( () => {
el.style.display = 'block';
moveAndScaleElement( element, el );
} );
}
@ -49,6 +51,7 @@ export function renderEquation( equation, element, engine = 'katex', display = f
displayMode: display
} );
if ( preview ) {
el.style.display = 'block';
moveAndScaleElement( element, el );
}
} );
@ -72,7 +75,6 @@ function selectRenderMode( element, preview, cb ) {
}
function renderMathJax3( equation, element, display, after ) {
const options = MathJax.getMetricsFor( element, display );
let promiseFunction = undefined;
if ( typeof MathJax.tex2chtmlPromise !== 'undefined' ) {
promiseFunction = MathJax.tex2chtmlPromise;
@ -81,12 +83,11 @@ function renderMathJax3( equation, element, display, after ) {
}
if ( typeof promiseFunction !== 'undefined' ) {
promiseFunction( equation, options ).then( node => {
promiseFunction( equation, { display } ).then( node => {
if ( element.firstChild ) {
element.firstChild.replaceWith( node );
} else {
element.appendChild( node );
element.removeChild( element.firstChild );
}
element.appendChild( node );
after();
} );
}
@ -135,24 +136,25 @@ export function getPreviewElement( element ) {
return prewviewEl;
}
function moveAndScaleElement( parent, element ) {
moveElement( parent, element );
function moveAndScaleElement( parent, child ) {
// Move to right place
moveElement( parent, child );
// Scale parent element same as preview
const domRect = element.getBoundingClientRect();
const domRect = child.getBoundingClientRect();
parent.style.width = domRect.width + 'px';
parent.style.height = domRect.height + 'px';
}
function moveElement( parent, element ) {
function moveElement( parent, child ) {
const domRect = parent.getBoundingClientRect();
const left = window.scrollX + domRect.left; // eslint-disable-line
const top = window.scrollY + domRect.top; // eslint-disable-line
element.style.position = 'absolute';
element.style.left = left + 'px';
element.style.top = top + 'px';
element.style.zIndex = 'var(--ck-z-modal)';
element.style.pointerEvents = 'none';
child.style.position = 'absolute';
child.style.left = left + 'px';
child.style.top = top + 'px';
child.style.zIndex = 'var(--ck-z-modal)';
child.style.pointerEvents = 'none';
}
// Simple MathJax 3 version check