From 42fa6a62c64bbfb80d50305996a915304ff04836 Mon Sep 17 00:00:00 2001
From: Mehak Nasir <67791278+mehaknasir@users.noreply.github.com>
Date: Wed, 25 Jan 2023 17:24:23 +0500
Subject: [PATCH] fix: changed ref to id for mathjax rendering div (#418)

fix: changed ref to id for mathjax rendering div

fix: fix lint error of unused element
---
 src/components/HTMLLoader.jsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/HTMLLoader.jsx b/src/components/HTMLLoader.jsx
index 2cb64734..584917ab 100644
--- a/src/components/HTMLLoader.jsx
+++ b/src/components/HTMLLoader.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import DOMPurify from 'dompurify';
@@ -21,10 +21,10 @@ const baseConfig = {
       ['\\begin{displaymath}', '\\end{displaymath}'],
       ['\\begin{equation}', '\\end{equation}'],
     ],
+    processEscapes: true,
     processEnvironments: true,
   },
-
-  skipStartupTypeset: true,
+  skipStartupTypeset: false,
 };
 
 const defaultSanitizeOptions = {
@@ -35,7 +35,6 @@ const defaultSanitizeOptions = {
 function HTMLLoader({ htmlNode, componentId, cssClassName }) {
   const [loadingState, setLoadingState] = useState(window.MathJax ? 'loaded' : 'loading');
   const sanitizedMath = DOMPurify.sanitize(htmlNode, { ...defaultSanitizeOptions });
-  const previewRef = useRef();
   const mathjaxScript = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_SVG';
 
   useEffect(() => {
@@ -66,18 +65,17 @@ function HTMLLoader({ htmlNode, componentId, cssClassName }) {
     if (loadingState !== 'loaded') {
       return;
     }
-    previewRef.current.innerHTML = sanitizedMath;
     window.MathJax.Hub.Queue([
       'Typeset',
       window.MathJax.Hub,
-      previewRef.current,
+      'mathjax-code',
     ]);
-  }, [sanitizedMath, loadingState, previewRef]);
+  }, [sanitizedMath, loadingState]);
 
   return (
-    <div ref={previewRef}>
+    <div id="mathjax-code">
       {/* eslint-disable-next-line react/no-danger */}
-      <div className={cssClassName} id={componentId} dangerouslySetInnerHTML={{ __html: htmlNode }} />
+      <div className={cssClassName} id={componentId} dangerouslySetInnerHTML={{ __html: sanitizedMath }} />
     </div>
   );
 }