From 18952a1e538c30eda1b927ae755415b840d9489d Mon Sep 17 00:00:00 2001
From: Sam Arbid <samaa2@kth.se>
Date: Thu, 4 Jul 2024 17:41:57 +0200
Subject: [PATCH] editor UI: Add live character count validation to
 TimelineCommentEditor

---
 .../TimelineCommentEditor.js                  | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/TimelineCommentEditor.js b/invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/TimelineCommentEditor.js
index b505c559..6a264c45 100644
--- a/invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/TimelineCommentEditor.js
+++ b/invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/TimelineCommentEditor.js
@@ -5,7 +5,7 @@
 // under the terms of the MIT License; see LICENSE file for more details.
 
 import { RichEditor } from "react-invenio-forms";
-import React from "react";
+import React, { useState } from "react";
 import { SaveButton } from "../components/Buttons";
 import { Container, Message } from "semantic-ui-react";
 import PropTypes from "prop-types";
@@ -19,10 +19,27 @@ const TimelineCommentEditor = ({
   error,
   submitComment,
   userAvatar,
+  maxCharCount,
 }) => {
+  const [charCount, setCharCount] = useState(0);
+  const [localError, setLocalError] = useState("");
+
+  const handleInit = (editor) => {
+    editor.on('input', () => {
+      setCommentContent(editor.getContent());
+      const charCount = editor.plugins.wordcount.body.getCharacterCount();
+      setCharCount(charCount);
+      if (charCount > maxCharCount) {
+        setLocalError(i18next.t(`Character count exceeds the maximum limit of ${maxCharCount} characters.`));
+      } else {
+        setLocalError("");
+      }
+    });
+  };
+
   return (
     <div className="timeline-comment-editor-container">
-      {error && <Message negative>{error}</Message>}
+      {(error || localError) && <Message negative>{error || localError}</Message>}
       <div className="flex">
         <RequestEventAvatarContainer
           src={userAvatar}
@@ -35,6 +52,9 @@ const TimelineCommentEditor = ({
               setCommentContent(editor.getContent());
             }}
             minHeight={150}
+            editorConfig={{
+              setup: handleInit
+            }}
           />
         </Container>
       </div>
@@ -43,6 +63,7 @@ const TimelineCommentEditor = ({
           icon="send"
           size="medium"
           content={i18next.t("Comment")}
+          disabled={isLoading || charCount > maxCharCount}
           loading={isLoading}
           onClick={() => submitComment(commentContent, "html")}
         />
@@ -58,6 +79,7 @@ TimelineCommentEditor.propTypes = {
   error: PropTypes.string,
   submitComment: PropTypes.func.isRequired,
   userAvatar: PropTypes.string,
+  maxCharCount: PropTypes.number,
 };
 
 TimelineCommentEditor.defaultProps = {
@@ -65,6 +87,7 @@ TimelineCommentEditor.defaultProps = {
   isLoading: false,
   error: "",
   userAvatar: "",
+  maxCharCount: 10,
 };
 
 export default TimelineCommentEditor;