openedx · leangseu-edx · Jan 16, 2024 · Jan 10, 2024 · Jan 10, 2024 · Jan 10, 2024
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,6 +5,9 @@ const config =  createConfig('eslint', {
   rules: {
     'import/no-unresolved': 'off',
   },
+  globals: {
+    MathJax: true,
+  },
 });
 
 config.rules['react/function-component-definition'][1].unnamedComponents = 'arrow-function';

diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en-us">
   <head>
-      <title>Open Response Assessment| <%= process.env.SITE_NAME %></title>
-      <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
+    <title>Open Response Assessment| <%= process.env.SITE_NAME %></title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
     <!-- Hotjar Tracking Code for https://www.edx.org/ -->
     <script>
       const isMobile = window.navigator.userAgent.includes("org.edx.mobile");
@@ -19,7 +19,57 @@
         })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
       }
     </script>
-    </head>
+    <script type="text/x-mathjax-config">
+      MathJax.Hub.Config({
+        styles: {
+          '.MathJax_SVG>svg': { 'max-width': '100%', },
+          // This is to resolve for people who use center mathjax with tables
+          'table>tbody>tr>td>.MathJax_SVG>svg': { 'max-width': 'inherit'},
+        },
+        CommonHTML: { linebreaks: { automatic: true } },
+        SVG: { linebreaks: { automatic: true } },
+        "HTML-CSS": { linebreaks: { automatic: true } },
+        tex2jax: {inlineMath: [ ['$','$'], ["\\(","\\)"]],
+                  displayMath: [ ['$$','$$'], ["\\[","\\]"]],
+                  processEscapes: true},
+      });
+    </script>
+    <script type="text/javascript">
+      // Activating Mathjax accessibility files
+      window.MathJax = {
+        menuSettings: {
+          collapsible: true,
+          autocollapse: false,
+          explorer: true,
+        },
+      };
+      window.addEventListener('resize', MJrenderer);
+
+      let t = -1;
+      let delay = 1000;
+      let oldWidth = document.documentElement.scrollWidth;
+      function MJrenderer() {
+        // don't rerender if the window is the same size as before
+        if (t >= 0) {
+          window.clearTimeout(t);
+        }
+        if (oldWidth !== document.documentElement.scrollWidth) {
+          t = window.setTimeout(function () {
+            oldWidth = document.documentElement.scrollWidth;
+            MathJax.Hub.Queue(['Rerender', MathJax.Hub]);
+            t = -1;
+          }, delay);
+        }
+      }
+    </script>
+    <!-- This must appear after all mathjax-config blocks, so it is after the imports from the other templates.
+     It can't be run through static.url because MathJax uses crazy url introspection to do lazy loading of
+     MathJax extension libraries -->
+    <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_SVG"
+    ></script>
+  </head>
   <body>
     <div id="root"></div>
   </body>

diff --git a/src/components/Prompt/index.jsx b/src/components/Prompt/index.jsx
@@ -10,6 +10,8 @@
 import messages from './messages';
 import usePromptHooks from './hooks';
 
+import './index.scss';
+
 const Prompt = ({ prompt, defaultOpen }) => {
   const { open, toggleOpen } = usePromptHooks({ defaultOpen });
   const { formatMessage } = useIntl();
@@ -33,7 +35,7 @@
     .replaceAll(staticRegex.link, `a href="${process.env.LMS_BASE_URL}/${baseAssetUrl}$1"`);
   return (
     <Collapsible title={(<h3 className="py-3">{title}</h3>)} open={open} onToggle={toggleOpen}>
-      <div dangerouslySetInnerHTML={{ __html: promptWithStaticAssets }} />
+      <div className="prompt" dangerouslySetInnerHTML={{ __html: promptWithStaticAssets }} />
     </Collapsible>
   );
 };

diff --git a/src/components/Prompt/index.scss b/src/components/Prompt/index.scss
@@ -0,0 +1,3 @@
+.prompt > pre {
+  text-wrap: wrap;
+}
diff --git a/src/components/TextResponse/index.jsx b/src/components/TextResponse/index.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import { useSubmissionConfig } from 'hooks/app';
@@ -7,13 +7,22 @@
 
 const TextResponse = ({ response }) => {
   const { textResponseConfig } = useSubmissionConfig();
+  const textResponseRef = React.useRef(null);
+
+  const { editorType, allowLatexPreview } = textResponseConfig || {};
+
+  useEffect(() => {
+    if (allowLatexPreview) {
+      MathJax.Hub.Queue(['Typeset', MathJax.Hub, textResponseRef.current]);
+    }
+  }, [allowLatexPreview, response]);
 
   return (
-    <div className="my-2 p-2 bg-white">
-      {textResponseConfig.editorType === 'text' ? (
-        <pre className="pre-like-textarea p-1">{response}</pre>
+    <div ref={textResponseRef} className="my-2 p-2 bg-white">
+      {editorType === 'text' ? (
+        <div className="div-textarea p-1" dangerouslySetInnerHTML={{ __html: response }} />
       ) : (
         <div dangerouslySetInnerHTML={{ __html: response }} />
       )}
    </div>
  );

diff --git a/src/components/TextResponse/index.scss b/src/components/TextResponse/index.scss
@@ -1,4 +1,4 @@
-.pre-like-textarea {
+.div-textarea {
   white-space: pre-wrap;
   word-wrap: break-word;
   word-break: break-all;

diff --git a/src/data/services/lms/types/blockInfo.ts b/src/data/services/lms/types/blockInfo.ts
@@ -16,7 +16,7 @@ export interface TextResponseConfig {
   enabled: boolean,
   optional: boolean,
   editorType: 'text' | 'tinymce',
-  allowLatexPreviews: boolean,
+  allowLatexPreview: boolean,
 }
 
 export interface FileResponseConfig {

diff --git a/src/setupTest.js b/src/setupTest.js
@@ -108,3 +108,10 @@ Object.defineProperty(window, 'matchMedia', {
     dispatchEvent: jest.fn(),
   })),
 });
+
+global.MathJax = {
+  Hub: {
+    Queue: jest.fn(),
+    Config: jest.fn(),
+  },
+};
diff --git a/src/views/SubmissionView/TextResponseEditor/LaTexPreview.jsx b/src/views/SubmissionView/TextResponseEditor/LaTexPreview.jsx
@@ -0,0 +1,22 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+const LatexPreview = ({ latexValue }) => {
+  const latexPreviewEl = React.useRef(null);
+
+  useEffect(() => {
+    MathJax.Hub.Queue(['Typeset', MathJax.Hub, latexPreviewEl.current]);
+  }, [latexValue]);
+
+  return (
+    <div ref={latexPreviewEl} className="mt-2">
+      <div dangerouslySetInnerHTML={{ __html: latexValue }} />
+    </div>
+  );
+};
+
+LatexPreview.propTypes = {
+  latexValue: PropTypes.string.isRequired,
+};
+
+export default LatexPreview;
diff --git a/src/views/SubmissionView/TextResponseEditor/index.jsx b/src/views/SubmissionView/TextResponseEditor/index.jsx
@@ -1,18 +1,30 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 
+import { Button } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { useSubmissionConfig } from 'hooks/app';
 
 import TextEditor from './TextEditor';
 import RichTextEditor from './RichTextEditor';
+import LatexPreview from './LaTexPreview';
+import messages from './messages';
 
 const TextResponseEditor = ({ value, onChange }) => {
   const { textResponseConfig } = useSubmissionConfig();
   const {
     optional,
     enabled,
     editorType,
+    allowLatexPreview,
   } = textResponseConfig || {};
+  const { formatMessage } = useIntl();
+
+  const [latexValue, setLatexValue] = React.useState('');
+
+  const previewLaTex = useCallback(() => {
+    setLatexValue(value);
+  }, [value]);
 
   if (!enabled) {
     return null;
@@ -23,6 +35,14 @@ const TextResponseEditor = ({ value, onChange }) => {
   return (
     <div className="mt-2">
       <EditorComponent {...{ optional, value, onChange }} />
+      {
+        allowLatexPreview && (
+          <div>
+            <Button className="btn btn-primary btn-sm mt-2" onClick={previewLaTex}>{formatMessage(messages.previewLaTexButton)}</Button>
+            <LatexPreview latexValue={latexValue} />
+          </div>
+        )
+      }
     </div>
   );
 };

diff --git a/src/views/SubmissionView/TextResponseEditor/messages.js b/src/views/SubmissionView/TextResponseEditor/messages.js
@@ -21,6 +21,11 @@ const messages = defineMessages({
     description: 'Label for the optional indicator',
     id: 'frontend-app-ora.TextResponse.optional',
   },
+  previewLaTexButton: {
+    defaultMessage: 'Preview in LaTeX',
+    description: 'Label for the preview LaTeX button',
+    id: 'frontend-app-ora.TextResponse.previewLaTexButton',
+  },
 });
 
 export default messages;