From fe431c30a7cda7f6d77f0d1a0fceea89097266c2 Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Sat, 13 Jun 2020 05:58:53 +0200
Subject: [PATCH] SimpleMDE: Add character-count display and standardize look
 with basic editor's.

---
 ui/component/common/form-components/form-field.jsx | 10 ++++++++++
 ui/scss/component/_comments.scss                   | 10 +++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/ui/component/common/form-components/form-field.jsx b/ui/component/common/form-components/form-field.jsx
index 24b3d5b18..67ef22bd1 100644
--- a/ui/component/common/form-components/form-field.jsx
+++ b/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>
         );
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index ab844d25e..b0c296344 100644
--- a/ui/scss/component/_comments.scss
+++ b/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 {