feat: added preview option for tinyMCE content (#164)

src/discussions/posts/post-editor/PostEditor.jsx

@@ -1,4 +1,6 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, {
+  useContext, useEffect, useRef, useState,
+} from 'react';
 import PropTypes from 'prop-types';
 
 import { Formik } from 'formik';
@@ -12,10 +14,11 @@ import { AppContext } from '@edx/frontend-platform/react';
 import {
   Button, Card, Form, Spinner, StatefulButton,
 } from '@edx/paragon';
-import { Help, Post } from '@edx/paragon/icons';
+import { Cancel, Help, Post } from '@edx/paragon/icons';
 
 import { TinyMCEEditor } from '../../../components';
 import FormikErrorFeedback from '../../../components/FormikErrorFeedback';
+import HTMLLoader from '../../../components/HTMLLoader';
 import { useDispatchWithState } from '../../../data/hooks';
 import { selectCourseCohorts } from '../../cohorts/data/selectors';
 import { fetchCourseCohorts } from '../../cohorts/data/thunks';
@@ -75,6 +78,7 @@ function PostEditor({
   const history = useHistory();
   const location = useLocation();
   const commentsPagePath = useCommentsPagePath();
+  const [showPreview, setShowPreview] = useState(false);
   const {
     courseId,
     topicId,
@@ -359,7 +363,14 @@ function PostEditor({
             />
             <FormikErrorFeedback name="comment" />
           </div>
-
+          {!showPreview
+            ? <Button onClick={() => setShowPreview(true)} size="sm">{intl.formatMessage(messages.showPreviewButton)}</Button>
+            : (
+              <div className="p-2 bg-gray-100">
+                <Cancel onClick={() => setShowPreview(false)} className="float-right" />
+                <HTMLLoader htmlNode={values.comment} />
+              </div>
+            )}
           {!editExisting
             && (
               <div className="d-flex flex-row mt-3">

src/discussions/posts/post-editor/messages.js

@@ -111,6 +111,11 @@ const messages = defineMessages({
     defaultMessage: 'Select reason for editing',
     description: 'Error message visible to moderators when they submit the post/response/comment without select reason for editing',
   },
+  showPreviewButton: {
+    id: 'discussions.editor.posts.showPreview.button',
+    defaultMessage: 'Show Preview',
+    description: 'show preview button text to allow user to see their post content.',
+  },
 });
 
 export default messages;