fix: remove editor text persistence (#311)

* fix: remove editor text persistence

* fix: remove text persistence from comment/response editor

* fix: stop comment/response validation on editor cancel button

src/components/TinyMCEEditor.jsx

@@ -92,7 +92,7 @@ export default function TinyMCEEditor(props) {
         browser_spellcheck: true,
         a11y_advanced_options: true,
         autosave_interval: '1s',
-        autosave_restore_when_empty: true,
+        autosave_restore_when_empty: false,
         plugins: 'autosave codesample link lists image imagetools code emoticons charmap',
         toolbar: 'undo redo'
           + ' | formatselect | bold italic underline'

src/discussions/comments/comment/CommentEditor.jsx

@@ -54,7 +54,12 @@ function CommentEditor({
     editReasonCode: comment?.lastEdit?.reasonCode || '',
   };
 
-  const saveUpdatedComment = async (values) => {
+  const handleCloseEditor = (resetForm) => {
+    resetForm({ values: initialValues });
+    onCloseEditor();
+  };
+
+  const saveUpdatedComment = async (values, { resetForm }) => {
     if (comment.id) {
       const payload = {
         ...values,
@@ -68,7 +73,7 @@ function CommentEditor({
     if (editorRef.current) {
       editorRef.current.plugins.autosave.removeDraft();
     }
-    onCloseEditor();
+    handleCloseEditor(resetForm);
   };
   // The editorId is used to autosave contents to localstorage. This format means that the autosave is scoped to
   // the current comment id, or the current comment parent or the curren thread.
@@ -87,6 +92,7 @@ function CommentEditor({
         handleSubmit,
         handleBlur,
         handleChange,
+        resetForm,
       }) => (
         <Form onSubmit={handleSubmit}>
           {canDisplayEditReason && (
@@ -142,7 +148,7 @@ function CommentEditor({
           <div className="d-flex py-2 justify-content-end">
             <Button
               variant="outline-primary"
-              onClick={onCloseEditor}
+              onClick={() => handleCloseEditor(resetForm)}
             >
               {intl.formatMessage(messages.cancel)}
             </Button>

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

@@ -125,7 +125,21 @@ function PostEditor({
     const isCohorting = settings.alwaysDivideInlineDiscussions || settings.dividedInlineDiscussions.includes(tId);
     return isCohorting;
   };
-  const hideEditor = () => {
+
+  const initialValues = {
+    postType: post?.type || 'discussion',
+    topic: post?.topicId || topicId || nonCoursewareTopics?.[0]?.id,
+    title: post?.title || '',
+    comment: post?.rawBody || '',
+    follow: isEmpty(post?.following) ? true : post?.following,
+    anonymous: allowAnonymous ? false : undefined,
+    anonymousToPeers: allowAnonymousToPeers ? false : undefined,
+    editReasonCode: post?.lastEdit?.reasonCode || '',
+    cohort: post?.cohort || 'default',
+  };
+
+  const hideEditor = (resetForm) => {
+    resetForm({ values: initialValues });
     if (editExisting) {
       const newLocation = discussionsPath(commentsPagePath, {
         courseId,
@@ -139,8 +153,7 @@ function PostEditor({
   };
   // null stands for no cohort restriction ("All learners" option)
   const selectedCohort = (cohort) => (cohort === 'default' ? null : cohort);
-
-  const submitForm = async (values) => {
+  const submitForm = async (values, { resetForm }) => {
     if (editExisting) {
       await dispatchSubmit(updateExistingThread(postId, {
         topicId: values.topic,
@@ -168,7 +181,7 @@ function PostEditor({
     if (editorRef.current) {
       editorRef.current.plugins.autosave.removeDraft();
     }
-    hideEditor();
+    hideEditor(resetForm);
   };
 
   useEffect(() => {
@@ -188,18 +201,6 @@ function PostEditor({
     );
   }
 
-  const initialValues = {
-    postType: post?.type || 'discussion',
-    topic: post?.topicId || topicId || nonCoursewareTopics?.[0]?.id,
-    title: post?.title || '',
-    comment: post?.rawBody || '',
-    follow: isEmpty(post?.following) ? true : post?.following,
-    anonymous: allowAnonymous ? false : undefined,
-    anonymousToPeers: allowAnonymousToPeers ? false : undefined,
-    editReasonCode: post?.lastEdit?.reasonCode || '',
-    cohort: post?.cohort || 'default',
-  };
-
   const validationSchema = Yup.object().shape({
     postType: Yup.mixed()
       .oneOf(['discussion', 'question']),
@@ -239,6 +240,7 @@ function PostEditor({
         handleSubmit,
         handleBlur,
         handleChange,
+        resetForm,
       }) => (
         <Form className="m-4 card p-4 post-form" onSubmit={handleSubmit}>
           <h3 className="mb-3">
@@ -296,23 +298,23 @@ function PostEditor({
               </Form.Control>
             </Form.Group>
             {canSelectCohort(values.topic) && (
-            <Form.Group className="w-100 ml-3 mb-0">
-              <Form.Control
-                className="m-0"
-                name="cohort"
-                as="select"
-                value={values.cohort}
-                onChange={handleChange}
-                onBlur={handleBlur}
-                aria-describedby="cohortAreaInput"
-                floatingLabel={intl.formatMessage(messages.cohortVisibility)}
-              >
-                <option value="default">{intl.formatMessage(messages.cohortVisibilityAllLearners)}</option>
-                {cohorts.map(cohort => (
-                  <option key={cohort.id} value={cohort.id}>{cohort.name}</option>
-                ))}
-              </Form.Control>
-            </Form.Group>
+              <Form.Group className="w-100 ml-3 mb-0">
+                <Form.Control
+                  className="m-0"
+                  name="cohort"
+                  as="select"
+                  value={values.cohort}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                  aria-describedby="cohortAreaInput"
+                  floatingLabel={intl.formatMessage(messages.cohortVisibility)}
+                >
+                  <option value="default">{intl.formatMessage(messages.cohortVisibilityAllLearners)}</option>
+                  {cohorts.map(cohort => (
+                    <option key={cohort.id} value={cohort.id}>{cohort.name}</option>
+                  ))}
+                </Form.Control>
+              </Form.Group>
             )}
           </div>
           <div className="border-bottom border-light-400" />
@@ -396,16 +398,16 @@ function PostEditor({
                   </Form.Checkbox>
                 </Form.Group>
                 {allowAnonymousToPeers && (
-                  <Form.Group>
-                    <Form.Checkbox
-                      name="anonymousToPeers"
-                      checked={values.anonymousToPeers}
-                      onChange={handleChange}
-                      onBlur={handleBlur}
-                    >
-                      {intl.formatMessage(messages.anonymousToPeersPost)}
-                    </Form.Checkbox>
-                  </Form.Group>
+                <Form.Group>
+                  <Form.Checkbox
+                    name="anonymousToPeers"
+                    checked={values.anonymousToPeers}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                  >
+                    {intl.formatMessage(messages.anonymousToPeersPost)}
+                  </Form.Checkbox>
+                </Form.Group>
                 )}
               </>
             )}
@@ -414,7 +416,7 @@ function PostEditor({
           <div className="d-flex justify-content-end mt-2.5">
             <Button
               variant="outline-primary"
-              onClick={hideEditor}
+              onClick={() => hideEditor(resetForm)}
             >
               {intl.formatMessage(messages.cancel)}
             </Button>

src/index.scss

@@ -227,7 +227,7 @@ header {
 
 .header-action-bar {
   background-color: #fff;
-  z-index: 1;
+  z-index: 2;
   box-shadow: 0px 2px 4px rgb(0 0 0 / 15%), 0px 2px 8px rgb(0 0 0 / 15%);
   position: sticky;
   top: 0;