Skip to content

Commit 3612fe9

Browse files
vladislavkeblyshvladislavkeblysh
committed
feat: mathjax for formules formatting
1 parent 64b57df commit 3612fe9

File tree

7 files changed

+1954
-1038
lines changed

7 files changed

+1954
-1038
lines changed

‎.eslintrc.js

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

1919
config.settings = {
20-
"import/resolver": {
20+
'import/resolver': {
2121
node: {
22-
paths: ["src", "node_modules"],
23-
extensions: [".js", ".jsx"],
22+
paths: ['src', 'node_modules'],
23+
extensions: ['.js', '.jsx'],
2424
},
2525
},
2626
};

‎package-lock.json

+1,871-972
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"@testing-library/user-event": "^14.0.0",
4040
"@zip.js/zip.js": "^2.4.6",
4141
"axios": "^0.28.0",
42+
"better-react-mathjax": "^2.0.3",
4243
"classnames": "^2.3.1",
4344
"core-js": "3.35.1",
4445
"dompurify": "^2.3.1",

‎src/App.jsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import DemoWarning from 'containers/DemoWarning';
1212
import CTA from 'containers/CTA';
1313
import NotificationsBanner from 'containers/NotificationsBanner';
1414
import ListView from 'containers/ListView';
15+
import { MathJaxContext } from 'better-react-mathjax';
1516

1617
import './App.scss';
1718
import Head from './components/Head';
@@ -30,7 +31,9 @@ export const App = ({ courseMetadata, isEnabled }) => (
3031
<CTA />
3132
<NotificationsBanner />
3233
<main data-testid="main">
33-
<ListView />
34+
<MathJaxContext>
35+
<ListView />
36+
</MathJaxContext>
3437
</main>
3538
<FooterSlot />
3639
</div>

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

+43-39
Original file line numberDiff line numberDiff line change
@@ -1,46 +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-
data-testid="header"
12-
/>
13-
<DemoWarning />
14-
<CTA />
15-
<NotificationsBanner />
16-
<main
17-
data-testid="main"
18-
>
19-
<ListView />
20-
</main>
21-
<FooterSlot />
22-
</div>
23-
</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>
2426
`;
2527

2628
exports[`App router component snapshot: enabled 1`] = `
27-
<BrowserRouter>
28-
<div>
29-
<Head />
30-
<Header
31-
courseNumber="course-number"
32-
courseOrg="course-org"
33-
courseTitle="course-title"
34-
data-testid="header"
35-
/>
36-
<CTA />
37-
<NotificationsBanner />
38-
<main
39-
data-testid="main"
40-
>
41-
<ListView />
42-
</main>
43-
<FooterSlot />
44-
</div>
45-
</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>
4650
`;

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

+22-18
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,18 @@ exports[`ResponseDisplay component snapshot file upload disable with valid respo
44
<div
55
className="response-display"
66
>
7-
<Card
8-
key="0"
9-
>
10-
<Card.Section
11-
className="response-display-text-content"
12-
data-testid="response-display-text-content"
7+
<MathJax>
8+
<Card
9+
key="0"
1310
>
14-
parsed html (sanitized (some text response here))
15-
</Card.Section>
16-
</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>
1719
</div>
1820
`;
1921

@@ -70,16 +72,18 @@ exports[`ResponseDisplay component snapshot file upload enable with valid respon
7072
]
7173
}
7274
/>
73-
<Card
74-
key="0"
75-
>
76-
<Card.Section
77-
className="response-display-text-content"
78-
data-testid="response-display-text-content"
75+
<MathJax>
76+
<Card
77+
key="0"
7978
>
80-
parsed html (sanitized (some text response here))
81-
</Card.Section>
82-
</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>
8387
</div>
8488
`;
8589

‎src/containers/ResponseDisplay/index.jsx

+8-3
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 '@openedx/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" data-testid="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)