FormField: add an optional quick-action button for 'markdown' and 'textarea'.

Technically, the other modes can have a quick-action button as well, but for now it's not implemented since it's unlikely to be used.

The first usage will be to house the "toggle markdown editor" button, but it can be used for anything. The caller will handle the action.

It will be located at the upper-right, which is a better place for such a button. Putting the "toggle markdown editor" button on the bottom seems too far away and seems to make the 'Done|Cancel' area too busy/cluttered.

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,6 +81,8 @@ export class FormField extends React.PureComponent<Props> {
       blockWrap,
       charCount,
       textAreaMaxLength = defaultTextAreaLimit,
+      quickActionLabel,
+      quickActionHandler,
       ...inputProps
     } = this.props;
     const errorMessage = typeof error === 'object' ? error.message : error;
@@ -85,6 +90,13 @@ export class FormField extends React.PureComponent<Props> {
       ? ({ 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/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) {