From 2984df0a9a18b14cbcc2cb7b7e9f1db2dd554da7 Mon Sep 17 00:00:00 2001
From: Sauli Anto <sauli.anto@gmail.com>
Date: Thu, 3 Oct 2019 12:43:58 +0300
Subject: [PATCH] Fix preview rendering

---
 README.md    |  4 ++--
 src/utils.js | 19 ++++++++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 7d1d08192..6e411ade1 100644
--- a/README.md
+++ b/README.md
@@ -74,7 +74,7 @@ It's possible to implement with engine config. For example, this feature can be
 InlineEditor.defaultConfig = {
 	// ...
 	math: {
-		engine: (equation, element, display, previewHack) => {
+		engine: (equation, element, display, preview) => {
 			// ...
 		}
 	}
@@ -83,7 +83,7 @@ InlineEditor.defaultConfig = {
 - __equation__ is equation in TeX format without delimiters.
 - __element__ is DOM element reserved for rendering.
 - __display__ is boolean. Typesetting should be inline when false.
-- __previewHack__ is boolean. Enable preview hack when true. It adds equation element to end of the body and use absolute position.
+- __preview__ is boolean. Preview Rendering when true.
 
 
 ### Supported input and output formats
diff --git a/src/utils.js b/src/utils.js
index 84372a696..a750c1c1e 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -15,30 +15,36 @@ export function getSelectedMathModelWidget( selection ) {
 	return null;
 }
 
-export function renderEquation( equation, element, engine = 'katex', display = false, previewHack = false ) {
+export function renderEquation( equation, element, engine = 'katex', display = false, preview = false ) {
 	if ( engine === 'mathjax' && typeof MathJax !== 'undefined' ) {
 		if ( isMathJaxVersion3( MathJax.version ) ) {
-			selectRenderMode( element, previewHack, el => {
+			selectRenderMode( element, preview, el => {
 				renderMathJax3( equation, el, display, () => {
-					if ( previewHack ) {
+					if ( preview ) {
 						moveAndScaleElement( element, el );
 					}
 				} );
 			} );
 		} else {
-			selectRenderMode( element, previewHack, el => {
+			selectRenderMode( element, preview, el => {
 				renderMathJax2( equation, el, display );
+				if ( preview ) {
+					moveAndScaleElement( element, el );
+				}
 			} );
 		}
 	} else if ( engine === 'katex' && typeof katex !== 'undefined' ) {
-		selectRenderMode( element, previewHack, el => {
+		selectRenderMode( element, preview, el => {
 			katex.render( equation, el, {
 				throwOnError: false,
 				displayMode: display
 			} );
+			if ( preview ) {
+				moveAndScaleElement( element, el );
+			}
 		} );
 	} else if ( typeof engine === 'function' ) {
-		engine( equation, element, display, previewHack );
+		engine( equation, element, display,  );
 	} else {
 		element.innerHTML = equation;
 		// eslint-disable-next-line
@@ -95,7 +101,6 @@ function renderMathJax2( equation, element, display ) {
 function createPreviewElement( element, render ) {
 	const prewviewEl = getPreviewElement( element );
 	render( prewviewEl );
-	moveAndScaleElement( element, prewviewEl );
 }
 
 export function getPreviewElement( element ) {