Fix: for rendering latex in comments and responses and support for special symbols in TinyMCE (#160)

* fix: for for rendering latex in comments and responses

* fix: component is seperated for loading html in dom

* feat: added special characters support in tiny-mce

src/components/HTMLLoader.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import MathJax from 'react-mathjax-preview';
+
+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 }} />
+  );
+}
+
+HTMLLoader.propTypes = {
+  htmlNode: PropTypes.node.isRequired,
+  componentId: PropTypes.string,
+  cssClassName: PropTypes.string,
+};
+
+HTMLLoader.defaultProps = {
+  componentId: null,
+  cssClassName: '',
+};
+
+export default HTMLLoader;

src/components/TinyMCEEditor.jsx

@@ -25,6 +25,7 @@ import 'tinymce/plugins/link';
 import 'tinymce/plugins/lists';
 import 'tinymce/plugins/emoticons';
 import 'tinymce/plugins/emoticons/js/emojis';
+import 'tinymce/plugins/charmap';
 /* eslint import/no-webpack-loader-syntax: off */
 // eslint-disable-next-line import/no-unresolved
 import edxBrandCss from '!!raw-loader!sass-loader!../index.scss';
@@ -84,14 +85,15 @@ export default function TinyMCEEditor(props) {
         a11y_advanced_options: true,
         autosave_interval: '1s',
         autosave_restore_when_empty: true,
-        plugins: 'autosave codesample link lists image imagetools code emoticons',
+        plugins: 'autosave codesample link lists image imagetools code emoticons charmap',
         toolbar: 'formatselect | bold italic underline'
           + ' | link blockquote openedx_code image'
           + ' | bullist numlist outdent indent'
           + ' | removeformat'
           + ' | openedx_html'
           + ' | undo redo'
-          + ' | emoticons',
+          + ' | emoticons'
+          + ' | charmap',
         content_css: false,
         content_style: contentStyle,
         body_class: 'm-2',

src/discussions/comments/comment/Comment.jsx

@@ -7,6 +7,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button, useToggle } from '@edx/paragon';
 
+import HTMLLoader from '../../../components/HTMLLoader';
 import { ContentActions } from '../../../data/constants';
 import { AlertBanner, DeleteConfirmation } from '../../common';
 import { fetchThread } from '../../posts/data/thunks';
@@ -73,8 +74,7 @@ function Comment({
           ? (
             <CommentEditor comment={comment} onCloseEditor={() => setEditing(false)} />
           )
-          // eslint-disable-next-line react/no-danger
-          : <div className="comment-body px-2" id="comment" dangerouslySetInnerHTML={{ __html: comment.renderedBody }} />}
+          : <HTMLLoader cssClassName="comment-body px-2" componentId="comment" htmlNode={comment.renderedBody} />}
         <CommentIcons
           comment={comment}
           following={comment.following}

src/discussions/comments/comment/Reply.jsx

@@ -7,6 +7,7 @@ import * as timeago from 'timeago.js';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Avatar, useToggle } from '@edx/paragon';
 
+import HTMLLoader from '../../../components/HTMLLoader';
 import { AvatarBorderAndLabelColors, ContentActions } from '../../../data/constants';
 import {
   ActionsDropdown, AlertBanner, AuthorLabel, DeleteConfirmation,
@@ -77,8 +78,7 @@ function Reply({
           </div>
           {isEditing
             ? <CommentEditor comment={reply} onCloseEditor={() => setEditing(false)} />
-            // eslint-disable-next-line react/no-danger
-            : <div id="reply" dangerouslySetInnerHTML={{ __html: reply.renderedBody }} />}
+            : <HTMLLoader componentId="reply" htmlNode={reply.renderedBody} />}
         </div>
       </div>
       <div className="text-gray-500 align-self-end mt-2" title={reply.createdAt}>

src/discussions/posts/post/Post.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import MathJax from 'react-mathjax-preview';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Hyperlink, useToggle } from '@edx/paragon';
 
+import HTMLLoader from '../../../components/HTMLLoader';
 import { ContentActions } from '../../../data/constants';
 import { selectorForUnitSubsection, selectTopicContext } from '../../../data/selectors';
 import { AlertBanner, DeleteConfirmation } from '../../common';
@@ -75,7 +75,7 @@ function Post({
       </div>
       <PostHeader post={post} actionHandlers={actionHandlers} />
       <div className="d-flex my-2 text-break">
-        <MathJax math={post.rawBody} id="post" />
+        <HTMLLoader htmlNode={post.rawBody} id="post" />
       </div>
       {topicContext && topic && (
         <div className="border p-3 rounded mb-3 mt-2 align-self-start">

src/discussions/posts/post/PostLink.jsx

@@ -1,13 +1,13 @@
 import React, { useContext } from 'react';
 
 import classNames from 'classnames';
-import MathJax from 'react-mathjax-preview';
 import { Link } from 'react-router-dom';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Badge, Icon } from '@edx/paragon';
 import { Bookmark } from '@edx/paragon/icons';
 
+import HTMLLoader from '../../../components/HTMLLoader';
 import { AvatarBorderAndLabelColors, Routes, ThreadType } from '../../../data/constants';
 import AuthorLabel from '../../common/AuthorLabel';
 import { DiscussionContext } from '../../common/context';
@@ -83,7 +83,7 @@ function PostLink({
             </div>
           </div>
           <div className="text-truncate text-primary-500 font-weight-normal font-size-14" style={{ 'max-height': '1.6em' }}>
-            <MathJax math={post.rawBody} />
+            <HTMLLoader htmlNode={post.rawBody} />
           </div>
           <PostFooter post={post} preview intl={intl} />
         </div>