Add char count and max char info near textarea of comments area

src/ui/component/commentCreate/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import { CHANNEL_NEW } from 'constants/claim';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
 import ChannelSection from 'component/selectChannel';
@@ -19,6 +19,7 @@ export function CommentCreate(props: Props) {
   const [commentValue, setCommentValue] = usePersistedState(`comment-${claimId}`, '');
   const [commentAck, setCommentAck] = usePersistedState('comment-acknowledge', false);
   const [channel, setChannel] = usePersistedState('comment-channel', 'anonymous');
+  const [charCount, setCharCount] = useState(commentValue.length);
 
   function handleCommentChange(event) {
     setCommentValue(event.target.value);
@@ -37,6 +38,8 @@ export function CommentCreate(props: Props) {
     setCommentValue('');
   }
 
+  useEffect(() => setCharCount(commentValue.length), [commentValue]);
+
   return (
     <section>
       <UnsupportedOnWeb type="feature" />
@@ -77,6 +80,7 @@ export function CommentCreate(props: Props) {
             label={__('Comment')}
             placeholder={__('Your comment')}
             value={commentValue}
+            charCount={charCount}
             onChange={handleCommentChange}
           />
           <div className="card__actions">

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

@@ -5,6 +5,7 @@ import ReactDOMServer from 'react-dom/server';
 import SimpleMDE from 'react-simplemde-editor';
 import MarkdownPreview from 'component/common/markdown-preview-internal';
 import { openEditorMenu, stopContextMenu } from 'util/context-menu';
+import { MAX_CHARACTERS_IN_COMMENT as defaultTextAreaLimit } from 'constants/comments';
 import 'easymde/dist/easymde.min.css';
 
 type Props = {
@@ -30,6 +31,8 @@ type Props = {
   },
   inputButton?: React$Node,
   blockWrap: boolean,
+  charCount?: number,
+  textAreaMaxLength?: number,
 };
 
 export class FormField extends React.PureComponent<Props> {
@@ -71,6 +74,8 @@ export class FormField extends React.PureComponent<Props> {
       inputButton,
       labelOnLeft,
       blockWrap,
+      charCount,
+      textAreaMaxLength = defaultTextAreaLimit,
       ...inputProps
     } = this.props;
     const errorMessage = typeof error === 'object' ? error.message : error;
@@ -141,10 +146,15 @@ export class FormField extends React.PureComponent<Props> {
           </div>
         );
       } else if (type === 'textarea') {
+        const hasCharCount = charCount !== undefined && charCount >= 0;
+        const countInfo = hasCharCount && (
+          <span className="comment__char-count">{`${charCount || '0'}/${textAreaMaxLength}`}</span>
+        );
         input = (
           <fieldset-section>
             <label htmlFor={name}>{label}</label>
-            <textarea type={type} id={name} {...inputProps} />
+            <textarea type={type} id={name} maxLength={textAreaMaxLength} {...inputProps} />
+            {countInfo}
           </fieldset-section>
         );
       } else {

src/ui/constants/comments.js

@@ -0,0 +1 @@
+export const MAX_CHARACTERS_IN_COMMENT = 2000;

src/ui/scss/component/_comments.scss

@@ -45,3 +45,8 @@
   flex-basis: 200px;
   text-align: right;
 }
+
+.comment__char-count {
+  align-self: flex-end;
+  font-size: var(--font-label);
+}