editor UI: Add live character count validation to TimelineCommentEditor

inveniosoftware · Jul 4, 2024 · 18952a1 · 18952a1
1 parent ad8cc51
commit 18952a1
Showing 1 changed file with 25 additions and 2 deletions.
diff --git a/...sts/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/TimelineCommentEditor.js b/...sts/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,13 +79,15 @@ TimelineCommentEditor.propTypes = {
   error: PropTypes.string,
   submitComment: PropTypes.func.isRequired,
   userAvatar: PropTypes.string,
+  maxCharCount: PropTypes.number,
 };
 
 TimelineCommentEditor.defaultProps = {
   commentContent: "",
   isLoading: false,
   error: "",
   userAvatar: "",
+  maxCharCount: 10,
 };
 
 export default TimelineCommentEditor;