Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-09 17:52:32 +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 uiElement = viewWriter.createUIElement( 'div', null, function( domDocument ) {
const domElement = this.toDomElement( domDocument ); const domElement = this.toDomElement( domDocument );
renderEquation( equation, domElement, mathConfig.engine, display ); renderEquation( equation, domElement, mathConfig.engine, display, false );
return domElement; return domElement;
} ); } );

7
src/mathui.js
View File

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

9
src/ui/mathview.js
View File

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

30
src/utils.js
View File

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