From 5b11cd7c65e6b1c0239a72d06c8b066a2eecff56 Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Thu, 21 May 2020 16:53:21 +0800
Subject: [PATCH] Comments: add ability to toggle between simple and markdown
 editor.

---
 ui/component/comment/view.jsx       | 13 +++++++++++--
 ui/component/commentCreate/view.jsx | 11 +++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx
index e8c6153c6..268a3dbf1 100644
--- a/ui/component/comment/view.jsx
+++ b/ui/component/comment/view.jsx
@@ -12,6 +12,7 @@ import * as ICONS from 'constants/icons';
 import { FormField, Form } from 'component/common/form';
 import CommentCreate from 'component/commentCreate';
 import classnames from 'classnames';
+import usePersistedState from 'effects/use-persisted-state';
 
 type Props = {
   uri: string,
@@ -64,6 +65,8 @@ function Comment(props: Props) {
   // used for controlling visibility of reply comment component
   const [isReplying, setReplying] = useState(false);
 
+  const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false);
+
   // to debounce subsequent requests
   const shouldFetch =
     channel === undefined ||
@@ -99,7 +102,7 @@ function Comment(props: Props) {
   }
 
   function handleEditMessageChanged(event) {
-    setCommentValue(event.target.value);
+    setCommentValue(advancedEditor ? event : event.target.value);
   }
 
   function handleSubmit() {
@@ -124,6 +127,10 @@ function Comment(props: Props) {
     setMouseHover(false);
   }
 
+  function toggleEditorMode() {
+    setAdvancedEditor(!advancedEditor);
+  }
+
   return (
     <li
       className={classnames('comment', { comment__reply: parentId !== null })}
@@ -182,11 +189,13 @@ function Comment(props: Props) {
           {isEditing ? (
             <Form onSubmit={handleSubmit}>
               <FormField
-                type="textarea"
+                type={advancedEditor ? 'markdown' : 'textarea'}
                 name="editing_comment"
                 value={editedMessage}
                 charCount={charCount}
                 onChange={handleEditMessageChanged}
+                quickActionLabel={advancedEditor ? __('Simple Editor') : __('Advanced Editor')}
+                quickActionHandler={toggleEditorMode}
               />
               <div className="section__actions">
                 <Button
diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx
index 53cfc6aaa..9cb236553 100644
--- a/ui/component/commentCreate/view.jsx
+++ b/ui/component/commentCreate/view.jsx
@@ -38,6 +38,7 @@ export function CommentCreate(props: Props) {
   const [commentAck, setCommentAck] = usePersistedState('comment-acknowledge', false);
   const [channel, setChannel] = usePersistedState('comment-channel', '');
   const [charCount, setCharCount] = useState(commentValue.length);
+  const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false);
 
   const topChannel =
     channels &&
@@ -55,7 +56,7 @@ export function CommentCreate(props: Props) {
   }, [channel, topChannel]);
 
   function handleCommentChange(event) {
-    setCommentValue(event.target.value);
+    setCommentValue(advancedEditor ? event : event.target.value);
   }
 
   function handleChannelChange(channel) {
@@ -82,6 +83,10 @@ export function CommentCreate(props: Props) {
     }
   }
 
+  function toggleEditorMode() {
+    setAdvancedEditor(!advancedEditor);
+  }
+
   useEffect(() => setCharCount(commentValue.length), [commentValue]);
 
   if (!commentingEnabled) {
@@ -97,9 +102,11 @@ export function CommentCreate(props: Props) {
       {!isReply && <ChannelSelection channel={channel} hideAnon onChannelChange={handleChannelChange} />}
       <FormField
         disabled={channel === CHANNEL_NEW}
-        type="textarea"
+        type={advancedEditor ? 'markdown' : 'textarea'}
         name="content_description"
         label={isReply ? __('Replying as %reply_channel%', { reply_channel: channel }) : __('Comment')}
+        quickActionLabel={advancedEditor ? __('Simple Editor') : __('Advanced Editor')}
+        quickActionHandler={toggleEditorMode}
         onFocus={onTextareaFocus}
         placeholder={__('Say something about this...')}
         value={commentValue}