Skip to content

Commit 6476702

Browse files
vladislavkeblyshihor-romaniuk
vladislavkeblysh
authored and
ihor-romaniuk
committed
feat: mathjax for formules formatting
1 parent 549250c commit 6476702

File tree

7 files changed

+6991
-3462
lines changed

7 files changed

+6991
-3462
lines changed

‎.eslintrc.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,20 @@ const config = createConfig('eslint', {
66
'import/no-named-as-default-member': 'off',
77
'import/no-import-module-exports': 'off',
88
'import/no-self-import': 'off',
9-
'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
9+
'spaced-comment': ['error', 'always', { block: { exceptions: ['*'] } }],
1010
'react-hooks/rules-of-hooks': 'off',
11-
"react/forbid-prop-types": ["error", { "forbid": ["any", "array"] }], // arguable object proptype is use when I do not care about the shape of the object
11+
'react/forbid-prop-types': ['error', { forbid: ['any', 'array'] }], // arguable object proptype is use when I do not care about the shape of the object
1212
'no-import-assign': 'off',
1313
'no-promise-executor-return': 'off',
1414
'import/no-cycle': 'off',
1515
},
1616
});
1717

1818
config.settings = {
19-
"import/resolver": {
19+
'import/resolver': {
2020
node: {
21-
paths: ["src", "node_modules"],
22-
extensions: [".js", ".jsx"],
21+
paths: ['src', 'node_modules'],
22+
extensions: ['.js', '.jsx'],
2323
},
2424
},
2525
};

‎package-lock.json‎

Lines changed: 6902 additions & 3406 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"@testing-library/user-event": "^14.0.0",
3939
"@zip.js/zip.js": "^2.4.6",
4040
"axios": "^0.27.0",
41+
"better-react-mathjax": "^2.0.3",
4142
"classnames": "^2.3.1",
4243
"core-js": "3.32.1",
4344
"dompurify": "^2.3.1",

‎src/App.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { selectors } from 'data/redux';
1111
import DemoWarning from 'containers/DemoWarning';
1212
import CTA from 'containers/CTA';
1313
import ListView from 'containers/ListView';
14+
import { MathJaxContext } from 'better-react-mathjax';
1415

1516
import './App.scss';
1617
import Head from './components/Head';
@@ -27,7 +28,9 @@ export const App = ({ courseMetadata, isEnabled }) => (
2728
{!isEnabled && <DemoWarning />}
2829
<CTA />
2930
<main>
30-
<ListView />
31+
<MathJaxContext>
32+
<ListView />
33+
</MathJaxContext>
3134
</main>
3235
<Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
3336
</div>

‎src/__snapshots__/App.test.jsx.snap‎

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,50 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`App router component snapshot: disabled (show demo warning) 1`] = `
4-
<BrowserRouter>
5-
<div>
6-
<Head />
7-
<Header
8-
courseNumber="course-number"
9-
courseOrg="course-org"
10-
courseTitle="course-title"
11-
/>
12-
<DemoWarning />
13-
<CTA />
14-
<main>
15-
<ListView />
16-
</main>
17-
<Footer
18-
logo="https://edx-cdn.org/v3/stage/open-edx-tag.svg"
19-
/>
20-
</div>
21-
</BrowserRouter>
4+
<MathJaxContext>
5+
<BrowserRouter>
6+
<div>
7+
<Head />
8+
<Header
9+
courseNumber="course-number"
10+
courseOrg="course-org"
11+
courseTitle="course-title"
12+
data-testid="header"
13+
/>
14+
<DemoWarning />
15+
<CTA />
16+
<NotificationsBanner />
17+
<main
18+
data-testid="main"
19+
>
20+
<ListView />
21+
</main>
22+
<FooterSlot />
23+
</div>
24+
</BrowserRouter>
25+
</MathJaxContext>
2226
`;
2327

2428
exports[`App router component snapshot: enabled 1`] = `
25-
<BrowserRouter>
26-
<div>
27-
<Head />
28-
<Header
29-
courseNumber="course-number"
30-
courseOrg="course-org"
31-
courseTitle="course-title"
32-
/>
33-
<CTA />
34-
<main>
35-
<ListView />
36-
</main>
37-
<Footer
38-
logo="https://edx-cdn.org/v3/stage/open-edx-tag.svg"
39-
/>
40-
</div>
41-
</BrowserRouter>
29+
<MathJaxContext>
30+
<BrowserRouter>
31+
<div>
32+
<Head />
33+
<Header
34+
courseNumber="course-number"
35+
courseOrg="course-org"
36+
courseTitle="course-title"
37+
data-testid="header"
38+
/>
39+
<CTA />
40+
<NotificationsBanner />
41+
<main
42+
data-testid="main"
43+
>
44+
<ListView />
45+
</main>
46+
<FooterSlot />
47+
</div>
48+
</BrowserRouter>
49+
</MathJaxContext>
4250
`;

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

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,18 @@ exports[`ResponseDisplay component snapshot file upload disable with valid respo
44
<div
55
className="response-display"
66
>
7-
<Card>
8-
<Card.Section
9-
className="response-display-text-content"
7+
<MathJax>
8+
<Card
9+
key="0"
1010
>
11-
parsed html (sanitized (some text response here))
12-
</Card.Section>
13-
</Card>
11+
<Card.Section
12+
className="response-display-text-content"
13+
data-testid="response-display-text-content"
14+
>
15+
parsed html (sanitized (some text response here))
16+
</Card.Section>
17+
</Card>
18+
</MathJax>
1419
</div>
1520
`;
1621

@@ -19,9 +24,11 @@ exports[`ResponseDisplay component snapshot file upload disabled without respons
1924
className="response-display"
2025
>
2126
<SubmissionFiles
27+
data-testid="submission-files"
2228
files={Array []}
2329
/>
2430
<PreviewDisplay
31+
data-testid="allow-file-upload"
2532
files={Array []}
2633
/>
2734
</div>
@@ -32,6 +39,7 @@ exports[`ResponseDisplay component snapshot file upload enable with valid respon
3239
className="response-display"
3340
>
3441
<SubmissionFiles
42+
data-testid="submission-files"
3543
files={
3644
Array [
3745
Object {
@@ -48,6 +56,7 @@ exports[`ResponseDisplay component snapshot file upload enable with valid respon
4856
}
4957
/>
5058
<PreviewDisplay
59+
data-testid="allow-file-upload"
5160
files={
5261
Array [
5362
Object {
@@ -63,13 +72,18 @@ exports[`ResponseDisplay component snapshot file upload enable with valid respon
6372
]
6473
}
6574
/>
66-
<Card>
67-
<Card.Section
68-
className="response-display-text-content"
75+
<MathJax>
76+
<Card
77+
key="0"
6978
>
70-
parsed html (sanitized (some text response here))
71-
</Card.Section>
72-
</Card>
79+
<Card.Section
80+
className="response-display-text-content"
81+
data-testid="response-display-text-content"
82+
>
83+
parsed html (sanitized (some text response here))
84+
</Card.Section>
85+
</Card>
86+
</MathJax>
7387
</div>
7488
`;
7589

@@ -78,9 +92,11 @@ exports[`ResponseDisplay component snapshot file upload enable without response
7892
className="response-display"
7993
>
8094
<SubmissionFiles
95+
data-testid="submission-files"
8196
files={Array []}
8297
/>
8398
<PreviewDisplay
99+
data-testid="allow-file-upload"
84100
files={Array []}
85101
/>
86102
</div>

‎src/containers/ResponseDisplay/index.jsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import { connect } from 'react-redux';
4+
import { MathJax } from 'better-react-mathjax';
45

56
import { Card } from '@edx/paragon';
67

@@ -47,9 +48,13 @@ export class ResponseDisplay extends React.Component {
4748
{
4849
/* eslint-disable react/no-array-index-key */
4950
this.textContents.map((textContent, index) => (
50-
<Card key={index}>
51-
<Card.Section className="response-display-text-content">{textContent}</Card.Section>
52-
</Card>
51+
<MathJax>
52+
<Card key={index}>
53+
<Card.Section className="response-display-text-content" data-testid="response-display-text-content">
54+
{textContent}
55+
</Card.Section>
56+
</Card>
57+
</MathJax>
5358
))
5459
}
5560
</div>

0 commit comments

Comments
 (0)