Comments: add ability to toggle between simple and markdown editor.

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

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}