#3081 adv editor for comments

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"
-        name="content_description"
+        type={advancedEditor ? 'markdown' : 'textarea'}
+        name={isReply ? 'content_reply' : '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}

ui/component/common/form-components/form-field.jsx

@@ -7,6 +7,7 @@ import MarkdownPreview from 'component/common/markdown-preview';
 import { openEditorMenu, stopContextMenu } from 'util/context-menu';
 import { MAX_CHARACTERS_IN_COMMENT as defaultTextAreaLimit } from 'constants/comments';
 import 'easymde/dist/easymde.min.css';
+import Button from 'component/button';
 
 type Props = {
   name: string,
@@ -35,6 +36,8 @@ type Props = {
   range?: number,
   min?: number,
   max?: number,
+  quickActionLabel?: string,
+  quickActionHandler?: any => any,
 };
 
 export class FormField extends React.PureComponent<Props> {
@@ -78,13 +81,22 @@ export class FormField extends React.PureComponent<Props> {
       blockWrap,
       charCount,
       textAreaMaxLength = defaultTextAreaLimit,
+      quickActionLabel,
+      quickActionHandler,
       ...inputProps
     } = this.props;
     const errorMessage = typeof error === 'object' ? error.message : error;
     const Wrapper = blockWrap
       ? ({ children: innerChildren }) => <fieldset-section class="radio">{innerChildren}</fieldset-section>
       : ({ children: innerChildren }) => <span className="radio">{innerChildren}</span>;
 
+    const quickAction =
+      quickActionLabel && quickActionHandler ? (
+        <div className="form-field__quick-action">
+          <Button button="link" onClick={quickActionHandler} label={quickActionLabel} />
+        </div>
+      ) : null;
+
     let input;
     if (type) {
       if (type === 'radio') {
@@ -127,7 +139,12 @@ export class FormField extends React.PureComponent<Props> {
         input = (
           <div className="form-field--SimpleMDE" onContextMenu={stopContextMenu}>
             <fieldset-section>
-              <label htmlFor={name}>{label}</label>
+              <div className="form-field__two-column">
+                <div>
+                  <label htmlFor={name}>{label}</label>
+                </div>
+                {quickAction}
+              </div>
               <SimpleMDE
                 {...inputProps}
                 id={name}
@@ -152,7 +169,12 @@ export class FormField extends React.PureComponent<Props> {
         );
         input = (
           <fieldset-section>
-            <label htmlFor={name}>{label}</label>
+            <div className="form-field__two-column">
+              <div>
+                <label htmlFor={name}>{label}</label>
+              </div>
+              {quickAction}
+            </div>
             <textarea type={type} id={name} maxLength={textAreaMaxLength} ref={this.input} {...inputProps} />
             {countInfo}
           </fieldset-section>

ui/component/publishText/view.jsx

@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 import { FormField } from 'component/common/form';
-import Button from 'component/button';
 import usePersistedState from 'effects/use-persisted-state';
 import Card from 'component/common/card';
 
@@ -41,14 +40,9 @@ function PublishText(props: Props) {
             value={description}
             disabled={disabled}
             onChange={value => updatePublishForm({ description: advancedEditor ? value : value.target.value })}
+            quickActionLabel={advancedEditor ? __('Simple Editor') : __('Advanced Editor')}
+            quickActionHandler={toggleMarkdown}
           />
-          <div className="card__actions">
-            <Button
-              button="link"
-              onClick={toggleMarkdown}
-              label={advancedEditor ? __('Simple Editor') : __('Advanced Editor')}
-            />
-          </div>
         </React.Fragment>
       }
     />

ui/scss/component/_form-field.scss

@@ -135,6 +135,16 @@ fieldset-group {
   padding-top: 1rem;
 }
 
+.form-field__two-column {
+  column-count: 2;
+}
+
+.form-field__quick-action {
+  float: right;
+  font-size: var(--font-xsmall);
+  margin-top: 2.5%;
+}
+
 fieldset-section {
   .form-field__internal-option {
     margin-top: var(--spacing-small);

ui/scss/component/_markdown-editor.scss

@@ -54,12 +54,12 @@
 
 .form-field--SimpleMDE {
   margin-top: var(--spacing-large);
-  
+
   // Override hyperlink styles
   .cm-s-easymde .cm-link {
     color: inherit;
   }
-    
+
   // Overriding the lbry/components form styling
   .editor-toolbar {
     button:not(.button) {