From 11e9ebcfd0eab98e4bfbe24f65136fd1fd365bbb Mon Sep 17 00:00:00 2001 From: Awais Ansari <79941147+awais-ansari@users.noreply.github.com> Date: Tue, 4 Oct 2022 18:58:50 +0500 Subject: [PATCH] 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 | 2 +- .../comments/comment/CommentEditor.jsx | 12 ++- .../posts/post-editor/PostEditor.jsx | 90 ++++++++++--------- src/index.scss | 2 +- 4 files changed, 57 insertions(+), 49 deletions(-) diff --git a/src/components/TinyMCEEditor.jsx b/src/components/TinyMCEEditor.jsx index 75ca1fcb..793bdd8e 100644 --- a/src/components/TinyMCEEditor.jsx +++ b/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' diff --git a/src/discussions/comments/comment/CommentEditor.jsx b/src/discussions/comments/comment/CommentEditor.jsx index 0fec7c8a..60b965d4 100644 --- a/src/discussions/comments/comment/CommentEditor.jsx +++ b/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, }) => (
{canDisplayEditReason && ( @@ -142,7 +148,7 @@ function CommentEditor({
diff --git a/src/discussions/posts/post-editor/PostEditor.jsx b/src/discussions/posts/post-editor/PostEditor.jsx index 8ec5a0b0..60158a0f 100644 --- a/src/discussions/posts/post-editor/PostEditor.jsx +++ b/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, }) => (

@@ -296,23 +298,23 @@ function PostEditor({ {canSelectCohort(values.topic) && ( - - - - {cohorts.map(cohort => ( - - ))} - - + + + + {cohorts.map(cohort => ( + + ))} + + )}

@@ -396,16 +398,16 @@ function PostEditor({ {allowAnonymousToPeers && ( - - - {intl.formatMessage(messages.anonymousToPeersPost)} - - + + + {intl.formatMessage(messages.anonymousToPeersPost)} + + )} )} @@ -414,7 +416,7 @@ function PostEditor({
diff --git a/src/index.scss b/src/index.scss index 58767980..96b76237 100755 --- a/src/index.scss +++ b/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;