From be8af0ba3ddefe3fb67c37ce04cbd267f3ee401c Mon Sep 17 00:00:00 2001
From: Adeodonne <bbozhik284@gmail.com>
Date: Tue, 19 Sep 2023 03:22:31 +0300
Subject: [PATCH] add changing element with useRef

---
 .../TextForm/Editors/TextEditor.component.tsx | 68 ++++++++++++++++++-
 1 file changed, 66 insertions(+), 2 deletions(-)

diff --git a/src/features/AdminPage/NewStreetcode/TextBlock/TextForm/Editors/TextEditor.component.tsx b/src/features/AdminPage/NewStreetcode/TextBlock/TextForm/Editors/TextEditor.component.tsx
index d09d0de20..8161a72bf 100644
--- a/src/features/AdminPage/NewStreetcode/TextBlock/TextForm/Editors/TextEditor.component.tsx
+++ b/src/features/AdminPage/NewStreetcode/TextBlock/TextForm/Editors/TextEditor.component.tsx
@@ -91,8 +91,72 @@ const TextEditor = ({
     const maxLength = character_limit || 15000;
 
     useEffect(() => {
-        console.log(inputInfo);
-    }, [inputInfo]);
+        editorRef.current = (<TinyMCEEditor
+            ref={editorRef}
+            value={editorContent}
+            onChange={(e, editor) => {
+                setInputInfo({ ...inputInfo, textContent: editor.getContent() });
+                onChange('textContent', editor.getContent());
+            }}
+            onEditorChange={(e, editor) => {
+                setEditorContent(editor.getContent());
+                setInputInfo({ ...inputInfo, textContent: editor.getContent() });
+                onChange('textContent', editor.getContent());
+            }}
+            init={{
+                max_chars: 1000,
+                height: 300,
+                menubar: false,
+                init_instance_callback(editor) {
+                    setEditorContent(text ?? '');
+                    editor.setContent(text ?? '');
+                },
+                plugins: [
+                    'autolink',
+                    'lists', 'preview', 'anchor', 'searchreplace', 'visualblocks',
+                    'insertdatetime', 'wordcount', 'link', 'lists', 'formatselect ',
+                ],
+                toolbar: 'undo redo | bold italic | '
+                    + 'removeformat',
+                toolbar_mode: 'sliding',
+                language: 'uk',
+                entity_encoding: 'raw',
+                content_style: 'body { font-family:Roboto,Helvetica Neue,sans-serif; font-size:14px }',
+            }}
+            onPaste={(e, editor) => {
+                const previousContent = editor.getContent({ format: 'text' });
+                const clipboardContent = e.clipboardData?.getData('text') || '';
+                const resultContent = previousContent + clipboardContent;
+                const isSelectionEnd = editor.selection.getSel()?.anchorOffset == previousContent.length;
+
+                if (selected.length >= clipboardContent.length) {
+                    return;
+                }
+                if (resultContent.length >= maxLength && isSelectionEnd) {
+                    // eslint-disable-next-line max-len
+                    editor.setContent(previousContent + clipboardContent.substring(0, maxLength - previousContent.length));
+                    e.preventDefault();
+                }
+                if (resultContent.length <= maxLength && !isSelectionEnd) {
+                    return;
+                }
+                if (resultContent.length >= maxLength && !isSelectionEnd) {
+                    e.preventDefault();
+                }
+            }}
+            onKeyDown={(e, editor) => {
+                if (editor.getContent({ format: 'text' }).length >= maxLength
+                    && !setOfKeys.has(e.key)
+                    && editor.selection.getContent({ format: 'text' }).length === 0) {
+                    e.preventDefault();
+                }
+            }}
+            onSelectionChange={(e, editor) => {
+                setSelected(editor.selection.getContent());
+            }}
+        />);
+        console.log(editorRef);
+    }, [text, inputInfo, setInputInfo, onChange]);
 
     return (
         <FormItem