Mathjax v3 fix (#423)

* feat: added mathjax v3 support in platform

* fix: overwriting of comments and responses fixed

src/components/HTMLLoader.jsx

@@ -1,31 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import DOMPurify from 'dompurify';
 
-const baseConfig = {
-  showMathMenu: true,
-  tex2jax: {
-    inlineMath: [
-      ['$', '$'],
-      ['\\\\(', '\\\\)'],
-      ['\\(', '\\)'],
-      ['[mathjaxinline]', '[/mathjaxinline]'],
-      ['\\begin{math}', '\\end{math}'],
-    ],
-    displayMath: [
-      ['[mathjax]', '[/mathjax]'],
-      ['$$', '$$'],
-      ['\\\\[', '\\\\]'],
-      ['\\[', '\\]'],
-      ['\\begin{displaymath}', '\\end{displaymath}'],
-      ['\\begin{equation}', '\\end{equation}'],
-    ],
-    processEscapes: true,
-    processEnvironments: true,
-  },
-  skipStartupTypeset: false,
-};
+import { logError } from '@edx/frontend-platform/logging';
 
 const defaultSanitizeOptions = {
   USE_PROFILES: { html: true },
@@ -33,50 +11,25 @@ const defaultSanitizeOptions = {
 };
 
 function HTMLLoader({ htmlNode, componentId, cssClassName }) {
-  const [loadingState, setLoadingState] = useState(window.MathJax ? 'loaded' : 'loading');
   const sanitizedMath = DOMPurify.sanitize(htmlNode, { ...defaultSanitizeOptions });
-  const mathjaxScript = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_SVG';
+  const previewRef = useRef();
 
   useEffect(() => {
-    let mathjaxScriptTag = document.querySelector(`script[src="${mathjaxScript}"]`);
-    if (!mathjaxScriptTag) {
-      mathjaxScriptTag = document.createElement('script');
-      mathjaxScriptTag.async = true;
-      mathjaxScriptTag.src = mathjaxScript;
-
-      const node = document.head || document.getElementsByTagName('head')[0];
-      node.appendChild(mathjaxScriptTag);
+    let promise = Promise.resolve(); // Used to hold chain of typesetting calls
+    function typeset(code) {
+      promise = promise.then(() => window.MathJax.typesetPromise(code()))
+        .catch((err) => logError(`Typeset failed: ${err.message}`));
+      return promise;
     }
-    const onloadHandler = () => {
-      setLoadingState('loaded');
-      window.MathJax.Hub.Config({ ...baseConfig });
-    };
-    const onerrorHandler = () => {
-      setLoadingState('failed');
-    };
 
-    return () => {
-      mathjaxScriptTag.removeEventListener('load', onloadHandler);
-      mathjaxScriptTag.removeEventListener('error', onerrorHandler);
-    };
-  }, [setLoadingState, baseConfig]);
-
-  useEffect(() => {
-    if (loadingState !== 'loaded') {
-      return;
-    }
-    window.MathJax.Hub.Queue([
-      'Typeset',
-      window.MathJax.Hub,
-      'mathjax-code',
-    ]);
-  }, [sanitizedMath, loadingState]);
+    typeset(() => {
+      previewRef.current.innerHTML = sanitizedMath;
+    });
+  }, [sanitizedMath]);
 
   return (
-    <div id="mathjax-code">
-      {/* eslint-disable-next-line react/no-danger */}
-      <div className={cssClassName} id={componentId} dangerouslySetInnerHTML={{ __html: sanitizedMath }} />
-    </div>
+    <div ref={previewRef} className={cssClassName} id={componentId} />
+
   );
 }
 

src/components/PostPreviewPane.jsx

@@ -29,7 +29,7 @@ function PostPreviewPane({
             className="float-right p-3"
             iconClassNames="icon-size"
           />
-          <HTMLLoader htmlNode={htmlNode} cssClassName="text-primary" />
+          <HTMLLoader htmlNode={htmlNode} cssClassName="text-primary" componentId="post-preview" />
         </div>
       )}
       <div className="d-flex justify-content-end">