Improve condition for text limit in good practice

idmc-labs · Feb 2, 2024 · 5acd404 · 5acd404
1 parent 573b29c
commit 5acd404
Showing 1 changed file with 8 additions and 13 deletions.
diff --git a/app/components/TinyMceEditorInput/index.tsx b/app/components/TinyMceEditorInput/index.tsx
@@ -1,15 +1,11 @@
 import React, { useState, useCallback } from 'react';
-import { _cs } from '@togglecorp/fujs';
+import { isDefined, isNotDefined, _cs } from '@togglecorp/fujs';
 import { InputContainer } from '@togglecorp/toggle-ui';
 import { Editor } from '@tinymce/tinymce-react';
 
 import useTranslation from '#hooks/useTranslation';
-import {
-    goodPracticesDashboard,
-} from '#base/configs/lang';
-import {
-    TINY_MCE_KEY,
-} from '#base/configs/tinyMceEditor';
+import { goodPracticesDashboard } from '#base/configs/lang';
+import { TINY_MCE_KEY } from '#base/configs/tinyMceEditor';
 
 import styles from './styles.css';
 
@@ -32,18 +28,16 @@ function TinyMceEditorInput<N extends string>(props: Props<N>) {
         value,
         name,
         onChange,
-        textLimit = 0,
+        textLimit,
         labelContainerClassName,
     } = props;
 
     const strings = useTranslation(goodPracticesDashboard);
-
     const [length, setLength] = useState(0);
-    const lengthExceeded = length >= textLimit;
 
     const handleChange = useCallback((newText: string | undefined, editor) => {
         const textLength = editor.getContent({ format: 'text' }).length;
-        if (textLength <= textLimit) {
+        if (isNotDefined(textLimit) || textLength <= textLimit) {
             onChange(newText, name);
             setLength(textLength);
         }
@@ -71,9 +65,10 @@ function TinyMceEditorInput<N extends string>(props: Props<N>) {
                         init={{ menubar: 'edit insert format' }}
                         toolbar="undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link"
                     />
-                    {value && (
+                    {isDefined(value) && isDefined(textLimit) && (
                         <div className={styles.textLengthSection}>
-                            {lengthExceeded && (
+                            { /* Note: only run when existed form exceed the text limit */ }
+                            {length > textLimit && (
                                 <span className={styles.textLimit}>
                                     {strings.textLimitExceeded}
                                 </span>