feat: mathjax for formules formatting

Author: vladislavkeblysh

.eslintrc.js

@@ -7,20 +7,20 @@ const config = createConfig('eslint', {
     'import/no-named-as-default-member': 'off',
     'import/no-import-module-exports': 'off',
     'import/no-self-import': 'off',
-    'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
+    'spaced-comment': ['error', 'always', { block: { exceptions: ['*'] } }],
     'react-hooks/rules-of-hooks': 'off',
-    "react/forbid-prop-types": ["error", { "forbid": ["any", "array"] }], // arguable object proptype is use when I do not care about the shape of the object
+    'react/forbid-prop-types': ['error', { forbid: ['any', 'array'] }], // arguable object proptype is use when I do not care about the shape of the object
     'no-import-assign': 'off',
     'no-promise-executor-return': 'off',
     'import/no-cycle': 'off',
   },
 });
 
 config.settings = {
-  "import/resolver": {
+  'import/resolver': {
     node: {
-      paths: ["src", "node_modules"],
-      extensions: [".js", ".jsx"],
+      paths: ['src', 'node_modules'],
+      extensions: ['.js', '.jsx'],
     },
   },
 };

package.json

@@ -43,6 +43,7 @@
     "@testing-library/user-event": "^14.0.0",
     "@zip.js/zip.js": "^2.4.6",
     "axios": "^0.28.0",
+    "better-react-mathjax": "^2.0.3",
     "classnames": "^2.3.1",
     "core-js": "3.35.1",
     "dompurify": "^2.3.1",

src/App.jsx

@@ -11,6 +11,7 @@ import { selectors } from 'data/redux';
 import DemoWarning from 'containers/DemoWarning';
 import NotificationsBanner from 'containers/NotificationsBanner';
 import ListView from 'containers/ListView';
+import { MathJaxContext } from 'better-react-mathjax';
 
 import './App.scss';
 import Head from './components/Head';
@@ -28,7 +29,9 @@ export const App = ({ courseMetadata, isEnabled }) => (
       {!isEnabled && <DemoWarning />}
       <NotificationsBanner />
       <main data-testid="main">
-        <ListView />
+        <MathJaxContext>
+          <ListView />
+        </MathJaxContext>
       </main>
       <FooterSlot />
     </div>

src/containers/ResponseDisplay/__snapshots__/index.test.jsx.snap

@@ -4,16 +4,18 @@ exports[`ResponseDisplay component snapshot file upload disable with valid respo
 <div
   className="response-display"
 >
-  <Card
-    key="0"
-  >
-    <Card.Section
-      className="response-display-text-content"
-      data-testid="response-display-text-content"
+  <MathJax>
+    <Card
+      key="0"
     >
-      parsed html (sanitized (some text response here))
-    </Card.Section>
-  </Card>
+      <Card.Section
+        className="response-display-text-content"
+        data-testid="response-display-text-content"
+      >
+        parsed html (sanitized (some text response here))
+      </Card.Section>
+    </Card>
+  </MathJax>
 </div>
 `;
 
@@ -70,16 +72,18 @@ exports[`ResponseDisplay component snapshot file upload enable with valid respon
       ]
     }
   />
-  <Card
-    key="0"
-  >
-    <Card.Section
-      className="response-display-text-content"
-      data-testid="response-display-text-content"
+  <MathJax>
+    <Card
+      key="0"
     >
-      parsed html (sanitized (some text response here))
-    </Card.Section>
-  </Card>
+      <Card.Section
+        className="response-display-text-content"
+        data-testid="response-display-text-content"
+      >
+        parsed html (sanitized (some text response here))
+      </Card.Section>
+    </Card>
+  </MathJax>
 </div>
 `;
 

src/containers/ResponseDisplay/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { MathJax } from 'better-react-mathjax';
 
 import { Card } from '@openedx/paragon';
 
@@ -47,9 +48,13 @@ export class ResponseDisplay extends React.Component {
         {
           /*  eslint-disable react/no-array-index-key */
           this.textContents.map((textContent, index) => (
-            <Card key={index}>
-              <Card.Section className="response-display-text-content" data-testid="response-display-text-content">{textContent}</Card.Section>
-            </Card>
+            <MathJax>
+              <Card key={index}>
+                <Card.Section className="response-display-text-content" data-testid="response-display-text-content">
+                  {textContent}
+                </Card.Section>
+              </Card>
+            </MathJax>
           ))
         }
       </div>