SimpleMDE: Add character-count display and standardize look with basic editor's.

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

@@ -154,6 +154,15 @@ export class FormField extends React.PureComponent<Props> {
           });
         };
 
+        // Ideally, the character count should (and can) be appended to the
+        // SimpleMDE's "options::status" bar. However, I couldn't figure out how
+        // to pass the current value to it's callback, nor query the current
+        // text length from the callback. So, we'll use our own widget.
+        const hasCharCount = charCount !== undefined && charCount >= 0;
+        const countInfo = hasCharCount && (
+          <span className="comment__char-count-mde">{`${charCount || '0'}/${textAreaMaxLength}`}</span>
+        );
+
         input = (
           <div className="form-field--SimpleMDE" onContextMenu={stopContextMenu}>
             <fieldset-section>
@@ -178,6 +187,7 @@ export class FormField extends React.PureComponent<Props> {
                   },
                 }}
               />
+              {countInfo}
             </fieldset-section>
           </div>
         );

ui/scss/component/_comments.scss

@@ -78,7 +78,15 @@
 
 .comment__char-count {
   align-self: flex-end;
-  font-size: var(--font-small);
+  font-size: var(--font-xsmall);
+  padding-top: var(--spacing-xs);
+}
+
+.comment__char-count-mde {
+  align-self: flex-end;
+  font-size: var(--font-xsmall);
+  padding-right: var(--spacing-xs); // Align with SimpleMDE's status bar
+  padding-bottom: 0;
 }
 
 .comment__menu-option {