Revert "Develop"

ita-social-projects · Oct 1, 2023 · f7daba6 · f7daba6
1 parent fb5fa4a
commit f7daba6
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 27 deletions.
diff --git a/src/features/AdminPage/NewStreetcode/TextBlock/TextBlock.component.tsx b/src/features/AdminPage/NewStreetcode/TextBlock/TextBlock.component.tsx
@@ -1,12 +1,12 @@
 /* eslint-disable no-restricted-imports */
-import React, { useEffect, useState } from 'react';
-import TextsApi from '@api/streetcode/text-content/texts.api';
-import { useAsync } from '@hooks/stateful/useAsync.hook';
+import React, {useEffect, useState} from 'react';
 
 import Video from '@/models/media/video.model';
 import { Text } from '@/models/streetcode/text-contents.model';
 
 import TextForm from './TextForm/TextForm.component';
+import {useAsync} from "@hooks/stateful/useAsync.hook";
+import TextsApi from "@api/streetcode/text-content/texts.api";
 
 interface Props {
     inputInfo: Partial<Text> | undefined;
@@ -21,28 +21,11 @@ const TextBlock = React.memo(({
     inputInfo, setInputInfo, video, setVideo, onChange, parseId,
 }: Props) => {
     const [inputInfoAsync, setInputInfoAsync] = useState<Partial<Text>>();
-    const [textForm, setTextForm] = useState<Element>();
-
-    useAsync(async () => {
-        if (parseId != null) {
-            await TextsApi.getByStreetcodeId(parseId).then((result) => {
+    useAsync(() => {
+        if(parseId != null) {
+            TextsApi.getByStreetcodeId(parseId).then((result) => {
                 setInputInfoAsync(result);
-                setTextForm(<TextForm
-                    inputInfo={result ?? ''}
-                    setInputInfo={setInputInfoAsync}
-                    video={video}
-                    setVideo={setVideo}
-                    onChange={onChange}
-                />);
             });
-        } else {
-            setTextForm(<TextForm
-                inputInfo={inputInfoAsync}
-                setInputInfo={setInputInfoAsync}
-                video={video}
-                setVideo={setVideo}
-                onChange={onChange}
-            />);
         }
     }, [parseId]);
 
@@ -51,9 +34,17 @@ const TextBlock = React.memo(({
     }, [inputInfoAsync]);
 
     return (
-        <>
-            {textForm}
-        </>
+        inputInfoAsync !== null
+            ? (
+                <TextForm
+                    inputInfo={inputInfoAsync}
+                    setInputInfo={setInputInfoAsync}
+                    video={video}
+                    setVideo={setVideo}
+                    onChange={onChange}
+                />
+            )
+            : <></>
     );
 });
 

diff --git a/src/features/AdminPage/NewStreetcode/TextBlock/TextForm/Editors/TextEditor.component.tsx b/src/features/AdminPage/NewStreetcode/TextBlock/TextForm/Editors/TextEditor.component.tsx
@@ -90,6 +90,74 @@ const TextEditor = ({
     useAsync(fetchTerms, []);
     const maxLength = character_limit || 15000;
 
+    useEffect(() => {
+        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
             label="Основний текст"
@@ -136,7 +204,7 @@ const TextEditor = ({
                         return;
                     }
                     if (resultContent.length >= maxLength && isSelectionEnd) {
-                    // eslint-disable-next-line max-len
+                        // eslint-disable-next-line max-len
                         editor.setContent(previousContent + clipboardContent.substring(0, maxLength - previousContent.length));
                         e.preventDefault();
                     }