[INF154, 203]: tinyplugins support for mathjax and preview issues (#156)

* feat: mathjax support issues

fix: preview package removed

* fix: preview issue fixed with npm pac

* fix: unused plugin removed

* fix: package-lock fix

* fix: import fix

* test: increased timeout limit for testcases

* style: fix sidebar summary card heigh issue

* fix: fixed npm package version

* fix: fixed npm package version

package.json

@@ -40,6 +40,7 @@
     "@edx/paragon": "19.10.1",
     "@reduxjs/toolkit": "1.8.0",
     "@tinymce/tinymce-react": "3.13.1",
+    "@wiris/mathtype-tinymce5": "7.28.0",
     "babel-polyfill": "6.26.0",
     "classnames": "2.3.1",
     "core-js": "3.21.1",
@@ -49,6 +50,7 @@
     "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",

src/components/TinyMCEEditor.jsx

@@ -23,6 +23,9 @@ import 'tinymce/plugins/image';
 import 'tinymce/plugins/imagetools';
 import 'tinymce/plugins/link';
 import 'tinymce/plugins/lists';
+import 'tinymce/plugins/emoticons';
+import 'tinymce/plugins/emoticons/js/emojis';
+import '@wiris/mathtype-tinymce5';
 /* eslint import/no-webpack-loader-syntax: off */
 // eslint-disable-next-line import/no-unresolved
 import edxBrandCss from '!!raw-loader!sass-loader!../index.scss';
@@ -82,13 +85,20 @@ 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',
+        external_plugins: {
+          tiny_mce_wiris: 'node_modules/@wiris/mathtype-tinymce5/plugin.min.js',
+        },
+        plugins: 'autosave codesample link lists image imagetools code spellchecker emoticons',
         toolbar: 'formatselect | bold italic underline'
           + ' | link blockquote openedx_code image'
           + ' | bullist numlist outdent indent'
           + ' | removeformat'
           + ' | openedx_html'
-          + ' | undo redo',
+          + ' | undo redo'
+          + ' | emoticons'
+          + ' | tiny_mce_wiris_formulaEditor | tiny_mce_wiris_formulaEditorChemistry',
+        spellchecker_active: true,
+        spellchecker_dialog: true,
         content_css: false,
         content_style: contentStyle,
         body_class: 'm-2',

src/discussions/posts/post/Post.jsx

@@ -1,6 +1,7 @@
 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';
 
@@ -74,8 +75,7 @@ function Post({
       </div>
       <PostHeader post={post} actionHandlers={actionHandlers} />
       <div className="d-flex my-2 text-break">
-        {/* eslint-disable-next-line react/no-danger */}
-        <div id="post" dangerouslySetInnerHTML={{ __html: post.renderedBody }} />
+        <MathJax math={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,6 +1,7 @@
 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';
@@ -81,8 +82,9 @@ function PostLink({
               />
             </div>
           </div>
-          {/* eslint-disable-next-line react/no-danger */}
-          <div className="text-truncate" dangerouslySetInnerHTML={{ __html: post.previewBody }} />
+          <div className="text-truncate" style={{ 'max-height': '1.6em' }}>
+            <MathJax math={post.rawBody} />
+          </div>
           <PostFooter post={post} preview intl={intl} />
         </div>
       </div>

src/setupTest.js

@@ -57,3 +57,5 @@ global.ResizeObserver = jest.fn().mockImplementation(() => ({
   unobserve: jest.fn(),
   disconnect: jest.fn(),
 }));
+
+jest.setTimeout(30000);