feat: add MathJax support for formula rendering in ORA responses

- Add better-react-mathjax dependency
- Wrap ResponseDisplay content with MathJax component
- Add MathJaxContext to App with MathJax v3 config
- Support inline (\(...\), $...$, [mathjaxinline]) and display
  (\\[...\\], $$...$$, [mathjax]) math delimiters
- Update tests

Author: vladislavkeblysh

package-lock.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",

package.json

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

src/App.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';
 
@@ -62,12 +63,14 @@ export class ResponseDisplay extends React.Component {
         {
           /*  eslint-disable react/no-array-index-key */
           this.textContents.map((textContent, index) => (
-            <>
+            <MathJax key={index}>
               { multiPrompt && <PromptDisplay prompt={prompts[index]} /> }
-              <Card className="response-display-card" key={index}>
-                <Card.Section className="response-display-text-content" data-testid="response-display-text-content">{textContent}</Card.Section>
+              <Card className="response-display-card">
+                <Card.Section className="response-display-text-content" data-testid="response-display-text-content">
+                  {textContent}
+                </Card.Section>
               </Card>
-            </>
+            </MathJax>
           ))
         }
       </div>

src/containers/ResponseDisplay/index.jsx

@@ -1,8 +1,14 @@
+import { MathJaxContext } from 'better-react-mathjax';
 import { render, screen } from '@testing-library/react';
 import { fileUploadResponseOptions } from 'data/services/lms/constants';
 import { selectors } from 'data/redux';
 import { ResponseDisplay, mapStateToProps } from '.';
 
+jest.mock('better-react-mathjax', () => ({
+  MathJax: ({ children }) => <div data-testid="mathjax">{children}</div>,
+  MathJaxContext: ({ children }) => <div>{children}</div>,
+}));
+
 jest.mock('data/redux', () => ({
   selectors: {
     grading: {
@@ -68,41 +74,65 @@ describe('ResponseDisplay', () => {
 
   describe('behavior', () => {
     it('renders response display container', () => {
-      const { container } = render(<ResponseDisplay {...defaultProps} />);
+      const { container } = render(
+        <MathJaxContext>
+          <ResponseDisplay {...defaultProps} />
+        </MathJaxContext>,
+      );
       const responseDisplay = container.querySelector('.response-display');
       expect(responseDisplay).toBeInTheDocument();
     });
 
     it('displays text content in cards', () => {
-      const { container } = render(<ResponseDisplay {...defaultProps} />);
+      const { container } = render(
+        <MathJaxContext>
+          <ResponseDisplay {...defaultProps} />
+        </MathJaxContext>,
+      );
       const textContents = container.querySelectorAll('.response-display-text-content');
       expect(textContents).toHaveLength(defaultProps.response.text.length);
       expect(textContents[0]).toHaveTextContent('some text response here');
       expect(textContents[1]).toHaveTextContent('another text response');
     });
 
     it('displays submission files when file upload is allowed', () => {
-      render(<ResponseDisplay {...defaultProps} />);
+      render(
+        <MathJaxContext>
+          <ResponseDisplay {...defaultProps} />
+        </MathJaxContext>,
+      );
       const submissionFiles = screen.getByTestId('submission-files');
       expect(submissionFiles).toBeInTheDocument();
       expect(submissionFiles).toHaveTextContent('Files: 2');
     });
 
     it('displays preview display when file upload is allowed', () => {
-      render(<ResponseDisplay {...defaultProps} />);
+      render(
+        <MathJaxContext>
+          <ResponseDisplay {...defaultProps} />
+        </MathJaxContext>,
+      );
       const previewDisplay = screen.getByTestId('preview-display');
       expect(previewDisplay).toBeInTheDocument();
       expect(previewDisplay).toHaveTextContent('Preview: 2');
     });
 
     it('does not display file components when file upload is disabled', () => {
-      render(<ResponseDisplay {...defaultProps} fileUploadResponseConfig={fileUploadResponseOptions.none} />);
+      render(
+        <MathJaxContext>
+          <ResponseDisplay {...defaultProps} fileUploadResponseConfig={fileUploadResponseOptions.none} />
+        </MathJaxContext>,
+      );
       expect(screen.queryByTestId('submission-files')).not.toBeInTheDocument();
       expect(screen.queryByTestId('preview-display')).not.toBeInTheDocument();
     });
 
     it('renders empty content when no text response provided', () => {
-      const { container } = render(<ResponseDisplay {...defaultProps} response={{ text: [], files: [] }} />);
+      const { container } = render(
+        <MathJaxContext>
+          <ResponseDisplay {...defaultProps} response={{ text: [], files: [] }} />
+        </MathJaxContext>,
+      );
       const textContents = container.querySelectorAll('.response-display-text-content');
       expect(textContents).toHaveLength(0);
     });

src/containers/ResponseDisplay/index.test.jsx

@@ -1,2 +1,3 @@
 export { default as StrictDict } from './StrictDict';
 export { default as keyStore } from './keyStore';
+export { default as mathJaxConfig } from './mathJaxConfig';

src/utils/index.js

@@ -0,0 +1,26 @@
+const mathJaxConfig = {
+  tex: {
+    inlineMath: [
+      ['$', '$'],
+      ['\\(', '\\)'],
+      ['[mathjaxinline]', '[/mathjaxinline]'],
+    ],
+    displayMath: [
+      ['$$', '$$'],
+      ['\\[', '\\]'],
+      ['[mathjax]', '[/mathjax]'],
+    ],
+    processEscapes: true,
+  },
+  options: {
+    enableMenu: false,
+  },
+  chtml: {
+    linebreaks: { automatic: true },
+  },
+  svg: {
+    linebreaks: { automatic: true },
+  },
+};
+
+export default mathJaxConfig;