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/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>