From a6577bffcffbf07ec9f18ed9e5ac1de77e3d6eb8 Mon Sep 17 00:00:00 2001
From: Mehak Nasir <67791278+mehaknasir@users.noreply.github.com>
Date: Tue, 24 May 2022 11:43:11 +0500
Subject: [PATCH] feat: added preview option for tinyMCE content (#164)

---
 .../posts/post-editor/PostEditor.jsx            | 17 ++++++++++++++---
 src/discussions/posts/post-editor/messages.js   |  5 +++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/discussions/posts/post-editor/PostEditor.jsx b/src/discussions/posts/post-editor/PostEditor.jsx
index dd334733..8606cba8 100644
--- a/src/discussions/posts/post-editor/PostEditor.jsx
+++ b/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">
diff --git a/src/discussions/posts/post-editor/messages.js b/src/discussions/posts/post-editor/messages.js
index 670146f3..7cffb7c2 100644
--- a/src/discussions/posts/post-editor/messages.js
+++ b/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;