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

mathjax syntax support (#175)

Browse Source 
* fix: mathjax syntax support extended

* fix: adding mathjax support
This commit is contained in:
Mehak Nasir
2022-05-30 17:02:11 +05:00
committed by GitHub
parent 8dd19de8a2
commit 8fd3ac7bd9
14 changed files with 18792 additions and 9357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27947
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.0",
"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;