diff --git a/backend/src/app/rpc/commands/comments.clj b/backend/src/app/rpc/commands/comments.clj index a11677e4aa..60ff1fe5ba 100644 --- a/backend/src/app/rpc/commands/comments.clj +++ b/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]]]) diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index ff93524e43..c41e4273ff 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/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?}]] diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss index 019120b39e..70fd5b7930 100644 --- a/frontend/src/app/main/ui/comments.scss +++ b/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; diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 4ef2b5f51a..79f68639e9 100644 --- a/frontend/translations/en.po +++ b/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" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 1919848200..8b199afa9d 100644 --- a/frontend/translations/es.po +++ b/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"