feat(post form): add content length check

src/components/post-form/post-form.module.css

@@ -154,4 +154,10 @@
 
 .uploadButton span {
   font-weight: normal;
+}
+
+.error {
+  font-weight: bold;
+  padding: 5px;
+  color: red;
 }

src/components/post-form/post-form.tsx

@@ -59,6 +59,19 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
   const comment = useComment({ commentCid: postCid });
   const address = comment?.author?.address;
 
+  const [lengthError, setLengthError] = useState<string | null>(null);
+
+  const checkContentLength = useRef(
+    _.debounce((content: string, t: Function) => {
+      const length = content.trim().length;
+      if (length > 2000) {
+        setLengthError(`${t('error')}: ${t('comment_field_too_long', { length })}`);
+      } else {
+        setLengthError(null);
+      }
+    }, 1000),
+  ).current;
+
   const resetFields = () => {
     if (textRef.current) {
       textRef.current.value = '';
@@ -97,6 +110,9 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
     const currentContent = textRef.current?.value.trim() || '';
     const currentUrl = urlRef.current?.value.trim() || '';
 
+    checkContentLength.cancel();
+    setLengthError(null);
+
     if (!currentTitle && !currentContent && !currentUrl) {
       alert(t('empty_comment_alert'));
       return;
@@ -106,6 +122,11 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
       return;
     }
 
+    if (currentContent.length > 2000) {
+      alert(t('error') + ': ' + t('field_too_long'));
+      return;
+    }
+
     if ((isInAllView || isInSubscriptionsView) && !publishPostOptions.subplebbitAddress) {
       alert(t('no_board_selected_warning'));
       return;
@@ -190,12 +211,16 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
   const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const formattedContent = formatMarkdown(e.target.value);
     isInPostView ? setPublishReplyOptions({ content: formattedContent }) : setPublishPostOptions({ content: formattedContent });
+    checkContentLength(formattedContent, t);
   };
 
   const onPublishReply = () => {
     const currentContent = textRef.current?.value.trim() || '';
     const currentUrl = urlRef.current?.value.trim() || '';
 
+    checkContentLength.cancel();
+    setLengthError(null);
+
     if (!currentContent && !currentUrl) {
       alert(t('empty_comment_alert'));
       return;
@@ -206,6 +231,11 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
       return;
     }
 
+    if (currentContent.length > 2000) {
+      alert(t('error') + ': ' + t('field_too_long'));
+      return;
+    }
+
     publishReply();
   };
 
@@ -316,6 +346,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
           <td>{t('comment')}</td>
           <td>
             <textarea cols={48} rows={4} wrap='soft' ref={textRef} onChange={handleContentChange} />
+            {lengthError && <div className={styles.error}>{lengthError}</div>}
           </td>
         </tr>
         <tr>