4000 char limit on comments

Author: mattwoberts

app/actions/post.go

@@ -221,6 +221,8 @@ func (action *AddNewComment) Validate(ctx context.Context, user *entity.User) *v
 
 	if action.Content == "" {
 		result.AddFieldFailure("content", propertyIsRequired(ctx, "comment"))
+	} else if len(action.Content) > 4000 {
+		result.AddFieldFailure("content", propertyMaxStringLen(ctx, "comment", 4000))
 	}
 
 	messages, err := validate.MultiImageUpload(ctx, nil, action.Attachments, validate.MultiImageUploadOpts{
@@ -346,6 +348,8 @@ func (action *EditComment) Validate(ctx context.Context, user *entity.User) *val
 
 	if action.Content == "" {
 		result.AddFieldFailure("content", propertyIsRequired(ctx, "comment"))
+	} else if len(action.Content) > 2000 {
+		result.AddFieldFailure("content", propertyMaxStringLen(ctx, "comment", 2000))
 	}
 
 	if len(action.Attachments) > 0 {

app/actions/post_test.go

@@ -2,6 +2,7 @@ package actions_test
 
 import (
 	"context"
+	"strings"
 	"testing"
 
 	"github.com/getfider/fider/app"
@@ -133,3 +134,27 @@ func TestDeleteComment(t *testing.T) {
 	authorized = action.IsAuthorized(context.Background(), administrator)
 	Expect(authorized).IsTrue()
 }
+
+func TestAddNewComment_TooLongContent(t *testing.T) {
+	RegisterT(t)
+
+	action := &actions.AddNewComment{Content: strings.Repeat("a", 4001)}
+	result := action.Validate(context.Background(), nil)
+	ExpectFailed(result, "content")
+}
+
+func TestAddNewComment_AtMaxLength(t *testing.T) {
+	RegisterT(t)
+
+	action := &actions.AddNewComment{Content: strings.Repeat("a", 4000)}
+	result := action.Validate(context.Background(), nil)
+	ExpectSuccess(result)
+}
+
+func TestEditComment_TooLongContent(t *testing.T) {
+	RegisterT(t)
+
+	action := &actions.EditComment{Content: strings.Repeat("a", 4001)}
+	result := action.Validate(context.Background(), nil)
+	ExpectFailed(result, "content")
+}

public/components/common/form/CommentEditor.scss

@@ -24,6 +24,18 @@
   width: 100%;
 }
 
+.c-comment-editor-counter {
+  font-size: 0.75rem;
+  color: var(--colors-gray-500);
+  text-align: right;
+  margin-top: spacing(1);
+
+  &--over {
+    color: var(--colors-red-600);
+    font-weight: 600;
+  }
+}
+
 .c-editor-button-group {
   display: flex;
   flex-wrap: wrap;

public/components/common/form/CommentEditor.tsx

@@ -237,14 +237,19 @@ interface CommentEditorProps {
   onGetImageSrc?: (bkey: string) => string
   maxAttachments?: number
   maxImageSizeKB?: number
+  maxLength?: number
 }
 
+const DEFAULT_MAX_LENGTH = 4000
+
 const Tiptap: React.FunctionComponent<CommentEditorProps> = (props) => {
+  const maxLength = props.maxLength ?? DEFAULT_MAX_LENGTH
   const [isRawMarkdownMode, setIsRawMarkdownMode] = useState(false)
   const [imageUploads, setImageUploads] = useState<ImageUpload[]>([])
   const [isLinkModalOpen, setIsLinkModalOpen] = useState(false)
   const [selectedText, setSelectedText] = useState("")
   const [markdownText, setMarkdownText] = useState(props.initialValue ?? "")
+  const [contentLength, setContentLength] = useState((props.initialValue ?? "").length)
   const allowedProtocols = useAllowedProtocols()
 
   // Use a ref instead of state for tracking document images
@@ -326,6 +331,8 @@ const Tiptap: React.FunctionComponent<CommentEditorProps> = (props) => {
     // Get the current markdown content
     const markdown = isRawMarkdownMode ? editor.getText() : editor.storage.markdown.getMarkdown()
 
+    setContentLength(markdown.length)
+
     // Pass markdown to parent (plain text will be generated in ShareFeedback if needed)
     props.onChange && props.onChange(markdown)
 
@@ -604,6 +611,7 @@ const Tiptap: React.FunctionComponent<CommentEditorProps> = (props) => {
   const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const newValue = e.target.value
     setMarkdownText(newValue)
+    setContentLength(newValue.length)
 
     // Notify parent component
     if (props.onChange) {
@@ -639,13 +647,25 @@ const Tiptap: React.FunctionComponent<CommentEditorProps> = (props) => {
                 onChange={handleTextareaChange}
                 onFocus={props.onFocus}
                 disabled={props.disabled}
+                maxLength={maxLength}
                 placeholder={props.placeholder ?? "Write your comment here..."}
                 data-testid="markdown-textarea"
               />
             ) : (
               <EditorContent editor={editor} data-testid="tiptap-editor" />
             )}
           </div>
+          {contentLength >= maxLength * 0.8 && (
+            <div
+              className={classSet({
+                "c-comment-editor-counter": true,
+                "c-comment-editor-counter--over": contentLength > maxLength,
+              })}
+              data-testid="comment-editor-counter"
+            >
+              {contentLength} / {maxLength}
+            </div>
+          )}
           <DisplayError fields={[props.field]} error={ctx.error} />
           <LinkInsertModal isOpen={isLinkModalOpen} onClose={() => setIsLinkModalOpen(false)} onInsertLink={handleInsertLink} selectedText={selectedText} />
         </div>

public/pages/ShowPost/components/CommentInput.tsx

@@ -27,10 +27,13 @@ export const CommentInput = (props: CommentInputProps) => {
     return cache.session.get(getCacheKey(CACHE_TITLE_KEY))
   }
 
+  const COMMENT_MAX_LENGTH = 4000
+
   const fider = useFider()
   const [isSignInModalOpen, setIsSignInModalOpen] = useState(false)
   const [error, setError] = useState<Failure | undefined>(undefined)
   const [isClient, setIsClient] = useState(false)
+  const [contentLength, setContentLength] = useState((cache.session.get(`${CACHE_TITLE_KEY}${props.post.id}`) ?? "").length)
 
   // Use the attachments hook
   const { attachments, handleImageUploaded, getImageSrc, clearAttachments } = useAttachments({
@@ -74,8 +77,11 @@ export const CommentInput = (props: CommentInputProps) => {
 
   const commentChanged = useCallback((value: string): void => {
     cache.session.set(getCacheKey(CACHE_TITLE_KEY), value)
+    setContentLength(value.length)
   }, [])
 
+  const isOverLimit = contentLength > COMMENT_MAX_LENGTH
+
   return (
     <>
       <SignInModal isOpen={isSignInModalOpen} onClose={hideModal} />
@@ -94,13 +100,14 @@ export const CommentInput = (props: CommentInputProps) => {
                   placeholder={i18n._({ id: "showpost.commentinput.placeholder", message: "Leave a comment" })}
                   maxAttachments={2}
                   maxImageSizeKB={5 * 1024}
+                  maxLength={COMMENT_MAX_LENGTH}
                   onGetImageSrc={getImageSrc}
                   onImageUploaded={handleImageUploaded}
                 />
 
                 {hasContent && (
                   <>
-                    <Button disabled={!fider.session.isAuthenticated} variant="primary" onClick={submit} className="mt-4">
+                    <Button disabled={!fider.session.isAuthenticated || isOverLimit} variant="primary" onClick={submit} className="mt-4">
                       <Trans id="action.postcomment">Post</Trans>
                     </Button>
                   </>

public/pages/ShowPost/components/ShowComment.tsx

@@ -227,11 +227,12 @@ export const ShowComment = (props: ShowCommentProps) => {
                   placeholder={comment.content}
                   maxAttachments={2}
                   maxImageSizeKB={5 * 1024}
+                  maxLength={4000}
                   onGetImageSrc={getImageSrc}
                   onImageUploaded={handleImageUploaded}
                 />
                 <div className="mt-2">
-                  <Button size="small" onClick={saveEdit} variant="primary">
+                  <Button size="small" onClick={saveEdit} variant="primary" disabled={newContent.length > 2000}>
                     <Trans id="action.save">Save</Trans>
                   </Button>
                   <Button variant="tertiary" size="small" onClick={cancelEdit}>