🐛 Fix allow a comment length of 750 chars and show error text if exceeded (#5810)

backend/src/app/rpc/commands/comments.clj

@@ -38,6 +38,8 @@
 (def r-mentions-split #"@\[[^\]]*\]\([^\)]*\)")
 (def r-mentions #"@\[([^\]]*)\]\(([^\)]*)\)")
 
+(def comment-max-length 750)
+
 (defn- format-comment
   [{:keys [content]}]
   (->> (d/interleave-all
@@ -442,7 +444,7 @@
   [:map {:title "create-comment-thread"}
    [:file-id ::sm/uuid]
    [:position ::gpt/point]
-   [:content [:string {:max 750}]]
+   [:content [:string {:max comment-max-length}]]
    [:page-id ::sm/uuid]
    [:frame-id ::sm/uuid]
    [:share-id {:optional true} [:maybe ::sm/uuid]]
@@ -585,7 +587,7 @@
   schema:create-comment
   [:map {:title "create-comment"}
    [:thread-id ::sm/uuid]
-   [:content [:string {:max 250}]]
+   [:content [:string {:max comment-max-length}]]
    [:share-id {:optional true} [:maybe ::sm/uuid]]
    [:mentions {:optional true} [::sm/set ::sm/uuid]]])
 
@@ -655,7 +657,7 @@
   schema:update-comment
   [:map {:title "update-comment"}
    [:id ::sm/uuid]
-   [:content [:string {:max 250}]]
+   [:content [:string {:max comment-max-length}]]
    [:share-id {:optional true} [:maybe ::sm/uuid]]
    [:mentions {:optional true} [::sm/set ::sm/uuid]]])
 

frontend/src/app/main/ui/comments.cljs

@@ -146,7 +146,7 @@
 ;; Input text for comments with mentions
 (mf/defc comment-input*
   {::mf/private true}
-  [{:keys [value placeholder max-length autofocus on-focus on-blur on-change on-esc on-ctrl-enter]}]
+  [{:keys [value placeholder autofocus on-focus on-blur on-change on-esc on-ctrl-enter]}]
 
   (let [value          (d/nilv value "")
         prev-value     (h/use-previous value)
@@ -196,7 +196,7 @@
                (dom/append-child! node (create-text-node)))
 
              (let [new-input (parse-nodes node)]
-               (when (and on-change (<= (count new-input) max-length))
+               (when on-change
                  (on-change new-input))))))
 
         handle-select
@@ -637,6 +637,10 @@
                   :disabled is-disabled}
       (tr "labels.post")]]))
 
+(defn- exceeds-length?
+  [content]
+  (> (count content) 750))
+
 (mf/defc comment-reply-form*
   {::mf/props :obj
    ::mf/private true}
@@ -644,7 +648,8 @@
   (let [show-buttons? (mf/use-state false)
         content       (mf/use-state "")
 
-        disabled? (blank-content? @content)
+        disabled? (or (blank-content? @content)
+                      (exceeds-length? @content))
 
         on-focus
         (mf/use-fn
@@ -678,8 +683,10 @@
        :on-blur on-blur
        :on-focus on-focus
        :on-ctrl-enter on-submit*
-       :on-change on-change
-       :max-length 750}]
+       :on-change on-change}]
+     (when (exceeds-length? @content)
+       [:div {:class (stl/css :error-text)}
+        (tr "errors.character-limit-exceeded")])
      (when (or @show-buttons? (seq @content))
        [:> comment-form-buttons* {:on-submit on-submit*
                                   :on-cancel on-cancel
@@ -690,7 +697,8 @@
   [{:keys [content on-submit on-cancel]}]
   (let [content   (mf/use-state content)
 
-        disabled? (blank-content? @content)
+        disabled? (or (blank-content? @content)
+                      (exceeds-length? @content))
 
         on-change
         (mf/use-fn
@@ -706,8 +714,10 @@
       {:value @content
        :autofocus true
        :on-ctrl-enter on-submit*
-       :on-change on-change
-       :max-length 750}]
+       :on-change on-change}]
+     (when (exceeds-length? @content)
+       [:div {:class (stl/css :error-text)}
+        (tr "errors.character-limit-exceeded")])
      [:> comment-form-buttons* {:on-submit on-submit*
                                 :on-cancel on-cancel
                                 :is-disabled disabled?}]]))
@@ -726,7 +736,8 @@
         pos-x     (* (:x position) zoom)
         pos-y     (* (:y position) zoom)
 
-        disabled? (blank-content? content)
+        disabled? (or (blank-content? content)
+                      (exceeds-length? content))
 
         on-esc
         (mf/use-fn
@@ -769,8 +780,10 @@
          :autofocus true
          :on-esc on-esc
          :on-change on-change
-         :on-ctrl-enter on-submit*
-         :max-length 750}]
+         :on-ctrl-enter on-submit*}]
+       (when (exceeds-length? content)
+         [:div {:class (stl/css :error-text)}
+          (tr "errors.character-limit-exceeded")])
        [:> comment-form-buttons* {:on-submit on-submit*
                                   :on-cancel on-esc
                                   :is-disabled disabled?}]]

frontend/src/app/main/ui/comments.scss

@@ -22,6 +22,11 @@
   color: var(--comment-subtitle-color);
 }
 
+.error-text {
+  @include bodySmallTypography;
+  color: var(--color-foreground-error);
+}
+
 .location {
   color: var(--comment-subtitle-color);
   display: flex;
@@ -246,6 +251,7 @@
   grid-template-columns: 1fr auto auto;
   justify-content: flex-end;
   gap: $s-8;
+  margin-top: $s-8;
 }
 
 .open-mentions-button {
@@ -321,7 +327,6 @@
   border: $s-1 solid var(--input-border-color);
   color: var(--input-foreground-color);
   height: $s-36;
-  margin-bottom: $s-8;
   max-width: $s-260;
   overflow-y: auto;
   padding: $s-8;

frontend/translations/en.po

@@ -1152,6 +1152,10 @@ msgstr "The fonts %s could not be loaded"
 msgid "errors.cannot-upload"
 msgstr "Cannot upload the media file."
 
+#: src/app/main/ui/comments.cljs:689
+msgid "errors.character-limit-exceeded"
+msgstr "Character limit exceeded"
+
 #: src/app/main/data/workspace.cljs:1463, src/app/main/data/workspace.cljs:1660
 msgid "errors.clipboard-not-implemented"
 msgstr "Your browser cannot do this operation"

frontend/translations/es.po

@@ -1160,6 +1160,10 @@ msgstr "No se han podido cargar las fuentes %s"
 msgid "errors.cannot-upload"
 msgstr "No se puede cargar el archivo multimedia."
 
+#: src/app/main/ui/comments.cljs:689
+msgid "errors.character-limit-exceeded"
+msgstr "Se ha superado el límite de caracteres"
+
 #: src/app/main/data/workspace.cljs:1463, src/app/main/data/workspace.cljs:1660
 msgid "errors.clipboard-not-implemented"
 msgstr "Tu navegador no puede realizar esta operación"