feat: mathjax for formules formatting

openedx · Jun 13, 2024 · 3612fe9 · 3612fe9
1 parent 64b57df
commit 3612fe9
Show file tree

Hide file tree

Showing 7 changed files with 1,954 additions and 1,038 deletions.
diff --git a/.eslintrc.js b/.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'],
     },
   },
 };

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,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",

diff --git a/src/App.jsx b/src/App.jsx
@@ -12,6 +12,7 @@ import DemoWarning from 'containers/DemoWarning';
 import CTA from 'containers/CTA';
 import NotificationsBanner from 'containers/NotificationsBanner';
 import ListView from 'containers/ListView';
+import { MathJaxContext } from 'better-react-mathjax';
 
 import './App.scss';
 import Head from './components/Head';
@@ -30,7 +31,9 @@ export const App = ({ courseMetadata, isEnabled }) => (
       <CTA />
       <NotificationsBanner />
       <main data-testid="main">
-        <ListView />
+        <MathJaxContext>
+          <ListView />
+        </MathJaxContext>
       </main>
       <FooterSlot />
     </div>

diff --git a/src/__snapshots__/App.test.jsx.snap b/src/__snapshots__/App.test.jsx.snap
@@ -1,46 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`App router component snapshot: disabled (show demo warning) 1`] = `
-<BrowserRouter>
-  <div>
-    <Head />
-    <Header
-      courseNumber="course-number"
-      courseOrg="course-org"
-      courseTitle="course-title"
-      data-testid="header"
-    />
-    <DemoWarning />
-    <CTA />
-    <NotificationsBanner />
-    <main
-      data-testid="main"
-    >
-      <ListView />
-    </main>
-    <FooterSlot />
-  </div>
-</BrowserRouter>
+<MathJaxContext>
+  <BrowserRouter>
+    <div>
+      <Head />
+      <Header
+        courseNumber="course-number"
+        courseOrg="course-org"
+        courseTitle="course-title"
+        data-testid="header"
+      />
+      <DemoWarning />
+      <CTA />
+      <NotificationsBanner />
+      <main
+        data-testid="main"
+      >
+        <ListView />
+      </main>
+      <FooterSlot />
+    </div>
+  </BrowserRouter>
+</MathJaxContext>
 `;
 
 exports[`App router component snapshot: enabled 1`] = `
-<BrowserRouter>
-  <div>
-    <Head />
-    <Header
-      courseNumber="course-number"
-      courseOrg="course-org"
-      courseTitle="course-title"
-      data-testid="header"
-    />
-    <CTA />
-    <NotificationsBanner />
-    <main
-      data-testid="main"
-    >
-      <ListView />
-    </main>
-    <FooterSlot />
-  </div>
-</BrowserRouter>
+<MathJaxContext>
+  <BrowserRouter>
+    <div>
+      <Head />
+      <Header
+        courseNumber="course-number"
+        courseOrg="course-org"
+        courseTitle="course-title"
+        data-testid="header"
+      />
+      <CTA />
+      <NotificationsBanner />
+      <main
+        data-testid="main"
+      >
+        <ListView />
+      </main>
+      <FooterSlot />
+    </div>
+  </BrowserRouter>
+</MathJaxContext>
 `;
diff --git a/src/containers/ResponseDisplay/__snapshots__/index.test.jsx.snap b/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>
 `;
 

diff --git a/src/containers/ResponseDisplay/index.jsx b/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>