Merge pull request #939 from ita-social-projects/news-text-limit-add

added limit for news text
ita-social-projects · Oct 30, 2023 · 13a8024 · 13a8024
2 parents c38dc45 + c4335d0
commit 13a8024
Showing 1 changed file with 31 additions and 4 deletions.
diff --git a/src/features/AdminPage/NewsPage/NewsModal/NewsModal.component.tsx b/src/features/AdminPage/NewsPage/NewsModal/NewsModal.component.tsx
@@ -37,7 +37,9 @@ const NewsModal: React.FC<{
   open: boolean;
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   afterSubmit?: (news: News) => void;
-}> = observer(({ newsItem, open, setIsModalOpen, afterSubmit }) => {
+  initialValue: any;
+  limit: any;
+}> = observer(({ newsItem, open, setIsModalOpen, afterSubmit, initialValue, limit }) => {
     const [form] = Form.useForm();
     const { newsStore } = useMobx();
     const [previewOpen, setPreviewOpen] = useState(false);
@@ -46,6 +48,9 @@ const NewsModal: React.FC<{
     const [textIsChanged, setTextIsChanged] = useState<boolean>(false);
     const imageId = useRef<number | undefined>(0);
     const editorRef = useRef<TinyMCEEditor>();
+    const sizeLimit = limit ?? 15000;
+    const [data, setData] = React.useState(initialValue ?? "");
+    const [count, setCount] = React.useState(0);
 
     const handlePreview = async (file: UploadFile) => {
         setFilePreview(file);
@@ -204,6 +209,25 @@ const NewsModal: React.FC<{
         }
     };
 
+    const handleInit = (value: any, editor: any) => {
+        setCount(editor.getContent({ format: "text" }).length);
+    };
+
+    const handleUpdate = (value: any, editor: any) => {
+        const cCount = editor.getContent({ format: "text" }).length;
+        if (cCount <= sizeLimit) {
+            setData(value);
+            setCount(cCount);
+        }
+    };
+
+    const handleBeforeAddUndo = (evt: any, editor: any) => {
+        const cCount = editor.getContent({ format: "text" }).length;
+        if (cCount > sizeLimit) {
+            evt.preventDefault();
+        }
+    };
+
     return (
         <div>
             <ConfigProvider locale={ukUA}>
@@ -262,8 +286,7 @@ const NewsModal: React.FC<{
                                             }
                                             return Promise.reject(new Error('Посилання вже існує'));
                                         },
-                                    },
-                                ]}
+                                    },                                ]}
                             >
                                 <Input maxLength={200} showCount />
                             </Form.Item>
@@ -273,9 +296,12 @@ const NewsModal: React.FC<{
                                 <span>Текст:</span>
                             </div>
                             <Editor
-                                onEditorChange={handleTextChange}
+                                onEditorChange={handleUpdate}
+                                value={data}
+                                onBeforeAddUndo={handleBeforeAddUndo}
                                 onInit={(evt, editor) => {
                                     editorRef.current = editor;
+                                    handleInit;
                                 }}
                                 initialValue={newsItem ? newsItem.text : ''}
                                 init={{
@@ -297,6 +323,7 @@ const NewsModal: React.FC<{
                     'body { font-family:Roboto,Helvetica Neue,sans-serif; font-size:14px }',
                                 }}
                             />
+                            <p>Remaining: {sizeLimit - count}</p>
                             {!textIsPresent && textIsChanged && (
                                 <p className="form-text">Введіть текст</p>
                             )}