Andal.LND/frontend-app-discussions
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mathjax syntax support extended

Browse Source
This commit is contained in:
Mehak Nasir
2022-05-26 19:14:57 +05:00
committed by Mehak Nasir
parent f6a65f91f5
commit 2355c2fc37
14 changed files with 18772 additions and 9337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27907
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -41,6 +41,7 @@
"@reduxjs/toolkit": "1.8.0",
"@tinymce/tinymce-react": "3.13.1",
"babel-polyfill": "6.26.0",
"better-react-mathjax": "2.0.1",
"classnames": "2.3.1",
"core-js": "3.21.1",
"formik": "2.2.9",
@@ -49,7 +50,6 @@
"raw-loader": "4.0.2",
"react": "16.14.0",
"react-dom": "16.14.0",
"react-mathjax-preview": "2.2.6",
"react-redux": "7.2.6",
"react-router": "5.2.1",
"react-router-dom": "5.3.0",

11
src/components/HTMLLoader.jsx
View File

@@ -1,15 +1,14 @@
// eslint-disable react/no-danger
import React from 'react';
import PropTypes from 'prop-types';
import MathJax from 'react-mathjax-preview';
import { MathJax } from 'better-react-mathjax';
function HTMLLoader({ htmlNode, componentId, cssClassName }) {
const isLatex = htmlNode.match(/(\${1,2})((?:\\.|.)*)\1/);
return (
isLatex ? <MathJax math={htmlNode} id={componentId} className={cssClassName} />
// eslint-disable-next-line react/no-danger
: <div className={cssClassName} id={componentId} dangerouslySetInnerHTML={{ __html: htmlNode }} />
<MathJax>
<div className={cssClassName} id={componentId} dangerouslySetInnerHTML={{ __html: htmlNode }} />
</MathJax>
);
}

27
src/discussions/comments/CommentsView.test.jsx
View File

@@ -2,6 +2,7 @@ import {
act, fireEvent, render, screen, waitFor, within,
} from '@testing-library/react';
import MockAdapter from 'axios-mock-adapter';
import { MathJaxContext } from 'better-react-mathjax';
import { IntlProvider } from 'react-intl';
import { MemoryRouter, Route } from 'react-router';
import { Factory } from 'rosie';
@@ -80,18 +81,20 @@ function mockAxiosReturnPagedCommentsResponses() {
function renderComponent(postId) {
render(
<IntlProvider locale="en">
<AppProvider store={store}>
<MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
<DiscussionContent />
<Route
path="*"
render={({ location }) => {
testLocation = location;
return null;
}}
/>
</MemoryRouter>
</AppProvider>
<MathJaxContext>
<AppProvider store={store}>
<MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
<DiscussionContent />
<Route
path="*"
render={({ location }) => {
testLocation = location;
return null;
}}
/>
</MemoryRouter>
</AppProvider>
</MathJaxContext>
</IntlProvider>,
);
}

9
src/discussions/comments/comment/CommentHeader.test.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import { MathJaxContext } from 'better-react-mathjax';
import { IntlProvider } from 'react-intl';
import { initializeMockApp } from '@edx/frontend-platform';
@@ -14,9 +15,11 @@ let store;
function renderComponent(comment, postType, actionHandlers) {
return render(
<IntlProvider locale="en">
<AppProvider store={store}>
<CommentHeader comment={comment} postType={postType} actionHandlers={actionHandlers} />
</AppProvider>
<MathJaxContext>
<AppProvider store={store}>
<CommentHeader comment={comment} postType={postType} actionHandlers={actionHandlers} />
</AppProvider>
</MathJaxContext>
</IntlProvider>,
);
}

13
src/discussions/discussions-home/DiscussionSidebar.test.jsx
View File

@@ -1,5 +1,6 @@
import { render, screen } from '@testing-library/react';
import MockAdapter from 'axios-mock-adapter';
import { MathJaxContext } from 'better-react-mathjax';
import { act } from 'react-dom/test-utils';
import { IntlProvider } from 'react-intl';
import { Context as ResponsiveContext } from 'react-responsive';
@@ -25,11 +26,13 @@ function renderComponent(displaySidebar = true, location = `/${courseId}/`) {
const wrapper = render(
<IntlProvider locale="en">
<ResponsiveContext.Provider value={{ width: 1280 }}>
<AppProvider store={store}>
<MemoryRouter initialEntries={[location]}>
<DiscussionSidebar displaySidebar={displaySidebar} />
</MemoryRouter>
</AppProvider>
<MathJaxContext>
<AppProvider store={store}>
<MemoryRouter initialEntries={[location]}>
<DiscussionSidebar displaySidebar={displaySidebar} />
</MemoryRouter>
</AppProvider>
</MathJaxContext>
</ResponsiveContext.Provider>
</IntlProvider>,
);

13
src/discussions/discussions-home/DiscussionsHome.test.jsx
View File

@@ -1,6 +1,7 @@
import {
fireEvent, render, screen, waitFor,
} from '@testing-library/react';
import { MathJaxContext } from 'better-react-mathjax';
import { act } from 'react-dom/test-utils';
import { IntlProvider } from 'react-intl';
import { Context as ResponsiveContext } from 'react-responsive';
@@ -20,11 +21,13 @@ function renderComponent(location = `/${courseId}/`) {
render(
<IntlProvider locale="en">
<ResponsiveContext.Provider value={{ width: 1280 }}>
<AppProvider store={store}>
<MemoryRouter initialEntries={[location]}>
<DiscussionsHome />
</MemoryRouter>
</AppProvider>
<MathJaxContext>
<AppProvider store={store}>
<MemoryRouter initialEntries={[location]}>
<DiscussionsHome />
</MemoryRouter>
</AppProvider>
</MathJaxContext>
</ResponsiveContext.Provider>
</IntlProvider>,
);

21
src/discussions/learners/LearnersContentView.test.jsx
View File

@@ -4,6 +4,7 @@ import {
fireEvent, render, screen, waitFor,
} from '@testing-library/react';
import MockAdapter from 'axios-mock-adapter';
import { MathJaxContext } from 'better-react-mathjax';
import { act } from 'react-dom/test-utils';
import { IntlProvider } from 'react-intl';
import { MemoryRouter, Route } from 'react-router';
@@ -35,15 +36,17 @@ const testUsername = 'leaner-1';
function renderComponent(username = testUsername) {
return render(
<IntlProvider locale="en">
<AppProvider store={store}>
<DiscussionContext.Provider value={{ learnerUsername: username, courseId }}>
<MemoryRouter initialEntries={[`/${courseId}/learners/${username}/${LearnerTabs.POSTS}`]}>
<Route path="/:courseId/learners/:learnerUsername">
<DiscussionContent />
</Route>
</MemoryRouter>
</DiscussionContext.Provider>
</AppProvider>
<MathJaxContext>
<AppProvider store={store}>
<DiscussionContext.Provider value={{ learnerUsername: username, courseId }}>
<MemoryRouter initialEntries={[`/${courseId}/learners/${username}/${LearnerTabs.POSTS}`]}>
<Route path="/:courseId/learners/:learnerUsername">
<DiscussionContent />
</Route>
</MemoryRouter>
</DiscussionContext.Provider>
</AppProvider>
</MathJaxContext>
</IntlProvider>,
);
}

47
src/discussions/posts/PostsView.test.jsx
View File

@@ -2,6 +2,7 @@ import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import MockAdapter from 'axios-mock-adapter';
import { MathJaxContext } from 'better-react-mathjax';
import { act } from 'react-dom/test-utils';
import { IntlProvider } from 'react-intl';
import {
@@ -45,28 +46,30 @@ async function renderComponent({
}
await render(
<IntlProvider locale="en">
<AppProvider store={store}>
<MemoryRouter initialEntries={[path]}>
<DiscussionContext.Provider value={{
courseId,
postId,
topicId,
category,
page,
}}
>
<Switch>
<Route path={Routes.POSTS.MY_POSTS}>
<PostsView />
</Route>
<Route
path={[Routes.POSTS.PATH, Routes.POSTS.ALL_POSTS, Routes.TOPICS.CATEGORY]}
component={PostsView}
/>
</Switch>
</DiscussionContext.Provider>
</MemoryRouter>
</AppProvider>
<MathJaxContext>
<AppProvider store={store}>
<MemoryRouter initialEntries={[path]}>
<DiscussionContext.Provider value={{
courseId,
postId,
topicId,
category,
page,
}}
>
<Switch>
<Route path={Routes.POSTS.MY_POSTS}>
<PostsView />
</Route>
<Route
path={[Routes.POSTS.PATH, Routes.POSTS.ALL_POSTS, Routes.TOPICS.CATEGORY]}
component={PostsView}
/>
</Switch>
</DiscussionContext.Provider>
</MemoryRouter>
</AppProvider>
</MathJaxContext>
</IntlProvider>,
);
}

17
src/discussions/posts/post-editor/PostEditor.test.jsx
View File

@@ -3,6 +3,7 @@ import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MockAdapter from 'axios-mock-adapter';
import { MathJaxContext } from 'better-react-mathjax';
import { act } from 'react-dom/test-utils';
import { IntlProvider } from 'react-intl';
import { MemoryRouter, Route } from 'react-router';
@@ -35,13 +36,15 @@ async function renderComponent(editExisting = false, location = `/${courseId}/po
const path = editExisting ? Routes.POSTS.EDIT_POST : Routes.POSTS.NEW_POSTS;
await render(
<IntlProvider locale="en">
<AppProvider store={store}>
<MemoryRouter initialEntries={[location]}>
<Route path={path}>
<PostEditor editExisting={editExisting} />
</Route>
</MemoryRouter>
</AppProvider>
<MathJaxContext>
<AppProvider store={store}>
<MemoryRouter initialEntries={[location]}>
<Route path={path}>
<PostEditor editExisting={editExisting} />
</Route>
</MemoryRouter>
</AppProvider>
</MathJaxContext>
</IntlProvider>,
);
}

2
src/discussions/posts/post/PostLink.jsx
View File

@@ -82,7 +82,7 @@ function PostLink({
/>
</div>
</div>
<div className="text-truncate text-primary-500 font-weight-normal font-size-14 font-style-normal font-family-inter" style={{ 'max-height': '1.6em' }}>
<div className="text-truncate text-primary-500 font-weight-normal font-size-14 font-style-normal font-family-inter" style={{ maxHeight: '1.8em' }}>
<HTMLLoader htmlNode={post.renderedBody || post.rawBody} />
</div>
<PostFooter post={post} preview intl={intl} />

9
src/discussions/posts/post/PostLink.test.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import { MathJaxContext } from 'better-react-mathjax';
import { IntlProvider } from 'react-intl';
import { initializeMockApp } from '@edx/frontend-platform';
@@ -14,9 +15,11 @@ let store;
function renderComponent(post) {
return render(
<IntlProvider locale="en">
<AppProvider store={store}>
<PostLink post={post} key={post.id} />
</AppProvider>
<MathJaxContext>
<AppProvider store={store}>
<PostLink post={post} key={post.id} />
</AppProvider>
</MathJaxContext>
</IntlProvider>,
);
}

11
src/index.jsx
View File

@@ -4,6 +4,8 @@ import 'regenerator-runtime/runtime';
import React from 'react';
import ReactDOM from 'react-dom';
import { MathJaxContext } from 'better-react-mathjax';
import {
APP_INIT_ERROR, APP_READY, initialize, subscribe,
} from '@edx/frontend-platform';
@@ -11,6 +13,7 @@ import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
import { DiscussionsHome } from './discussions';
import appMessages from './i18n';
import config from './mathjax-config';
import store from './store';
import './assets/favicon.ico';
@@ -18,9 +21,11 @@ import './index.scss';
subscribe(APP_READY, () => {
ReactDOM.render(
<AppProvider store={store}>
<DiscussionsHome />
</AppProvider>,
<MathJaxContext version={3} config={config}>
<AppProvider store={store}>
<DiscussionsHome />
</AppProvider>
</MathJaxContext>,
document.getElementById('root'),
);
});

20
src/mathjax-config.js Normal file
View File

@@ -0,0 +1,20 @@
const config = {
loader: { load: ['[tex]/html'] },
tex: {
packages: { '[+]': ['html'] },
inlineMath: [
['$', '$'],
['\\(', '\\)'],
['[mathjaxinline]', '[/mathjaxinline]'],
],
displayMath: [
['$$', '$$'],
['\\[', '\\]'],
['[mathjax]', '[/mathjax]'],
],
},
startup: {
typeset: false,
},
};
export default config;