Fix preview flickering effect

This commit is contained in:
Sauli Anto 2019-10-09 10:50:12 +03:00
parent 69a0264f84
commit 70fefa84f5
2 changed files with 11 additions and 4 deletions

View File

@ -43,6 +43,12 @@ export default class MathUI extends Plugin {
super.destroy(); super.destroy();
this._form.destroy(); this._form.destroy();
// Destroy preview element
let prewviewEl = document.getElementById( this._previewUid ); // eslint-disable-line
if ( prewviewEl ) {
prewviewEl.parentNode.removeChild( prewviewEl );
}
} }
_showUI() { _showUI() {
@ -151,7 +157,7 @@ export default class MathUI extends Plugin {
// Hide preview element // Hide preview element
let prewviewEl = document.getElementById( this._previewUid );// eslint-disable-line let prewviewEl = document.getElementById( this._previewUid );// eslint-disable-line
if ( prewviewEl ) { if ( prewviewEl ) {
prewviewEl.style.display = 'none'; prewviewEl.style.visibility = 'hidden';
} }
this.editor.editing.view.focus(); this.editor.editing.view.focus();

View File

@ -48,8 +48,8 @@ export function renderEquation( equation, element, engine = 'katex', display = f
selectRenderMode( element, preview, previewUid, el => { selectRenderMode( element, preview, previewUid, el => {
renderMathJax3( equation, el, display, () => { renderMathJax3( equation, el, display, () => {
if ( preview ) { if ( preview ) {
el.style.display = 'block';
moveAndScaleElement( element, el ); moveAndScaleElement( element, el );
el.style.visibility = 'visible';
} }
} ); } );
} ); } );
@ -64,8 +64,8 @@ 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 );
el.style.visibility = 'visible';
} ); } );
} }
} ); } );
@ -78,8 +78,8 @@ 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 );
el.style.visibility = 'visible';
} }
} ); } );
} else if ( typeof engine === 'function' ) { } else if ( typeof engine === 'function' ) {
@ -140,6 +140,7 @@ function getPreviewElement( element, previewUid ) {
if ( !prewviewEl ) { if ( !prewviewEl ) {
prewviewEl = document.createElement( 'div' ); // eslint-disable-line prewviewEl = document.createElement( 'div' ); // eslint-disable-line
prewviewEl.setAttribute( 'id', previewUid ); prewviewEl.setAttribute( 'id', previewUid );
prewviewEl.style.visibility = 'hidden';
document.body.appendChild( prewviewEl ); // eslint-disable-line document.body.appendChild( prewviewEl ); // eslint-disable-line
let ticking = false; let ticking = false;