Component CKEditor

import { config } from '@/configs';
import { postData, postFile } from '@/utils/fetch';
import { Editor } from '@ckeditor/ckeditor5-core';
import { regexDescription } from '@/utils/regex-message';
import { FileLoader, UploadAdapter } from '@ckeditor/ckeditor5-upload/src/filerepository';
import { useEffect, useRef, useState } from 'react';
import {Image, ImageResizeButtons, ImageResizeEditing, ImageResizeHandles} from '@ckeditor/ckeditor5-image'

const CKEditorComp = ({ name, formDesc, setFormDesc, register, error }: any) => {
    const [editorLoaded, setEditorLoaded] = useState(false);
    const [errorMsg, setErrorMsg] = useState('')
    const [isValid, setIsValid] = useState<boolean>(false)

    useEffect(() => {
        setEditorLoaded(true);
    }, []);
    const editorRef: any = useRef();
    const { CKEditor, ClassicEditor } = editorRef.current || {};

    function uploadAdapter(loader: FileLoader): UploadAdapter {
        return {
            upload: () => {
                return new Promise(async (resolve, reject) => {
                    try {
                        const file: any = await loader.file;
                        const { data } = await postFile(`?folder_path=images/blog&save_to=AWS&max_size=${config.MAX_FILE}`, { images: file });

                        resolve({
                            default: `${data.files[0].path}`,
                        });
                    } catch (error) {
                        // reject('Hello');
                        console.log(error)
                    }
                });
            },
            abort: () => {},
        };
    }
    function uploadPlugin(editor: Editor) {
        /* @ts-ignore */
        editor.plugins.get('FileRepository').createUploadAdapter = (loader: any) => {
            return uploadAdapter(loader);
        };
    }

    useEffect(() => {
        editorRef.current = {
            CKEditor: require('@ckeditor/ckeditor5-react').CKEditor,
            ClassicEditor: require('@ckeditor/ckeditor5-build-classic'),
        };
        // console.log(ClassicEditor.builtinPlugins.map((plugin: any) => plugin.pluginName))
    }, []);

    // ClassicEditor.builtinPlugins = [uploadPlugin, Heading];
    const removeHtmlTags = (input: string) => {
        return input.replace(/<\/?(?!br|ul|li|ol)[^>]+>/g, "");
    }

    const handleChange = (value: any) => {
        // const textOnly = removeHtmlTags(value)
        const check = regexDescription.regex.test(value)
        if(check){
            setIsValid(true)
            return setErrorMsg('Jangan menggunakan tag html atau semacamnya')
        }else{
            setIsValid(false)
            setErrorMsg('')
        }

        setFormDesc(value)
    };

    return editorLoaded ? (
        <div className="rich-text-editor cursor-bold">
            <CKEditor
                config={{
                    extraPlugins: [uploadPlugin],
                    removePlugins: ['MediaEmbed'],
                    heading: {
                        options: [
                            {
                                model: 'paragraph',
                                title: 'Paragraph',
                                class: 'ck-heading_paragraph',
                            },
                            {
                                model: 'heading1',
                                view: 'h1',
                                title: 'Heading 1',
                                class: 'ck-heading_heading1',
                            },
                            {
                                model: 'heading2',
                                view: 'h2',
                                title: 'Heading 2',
                                class: 'ck-heading_heading2',
                            },
                            {
                                model: 'heading3',
                                view: 'h3',
                                title: 'Heading 3',
                                class: 'ck-heading_heading3',
                            },
                            {
                                model: 'heading4',
                                view: 'h4',
                                title: 'Heading 4',
                                class: 'ck-heading_heading4',
                            },
                            {
                                model: 'heading5',
                                view: 'h5',
                                title: 'Heading 5',
                                class: 'ck-heading_heading5',
                            },
                            {
                                model: 'heading6',
                                view: 'h6',
                                title: 'Heading 6',
                                class: 'ck-heading_heading6',
                            },
                        ],
                    },
                    link: {
                        addTargetToExternalLinks: true,
                    }
                }}
                editor={ClassicEditor}
                data={formDesc}
                onChange={(event: any, editor: any) => {
                    handleChange(editor.getData());
                }}
            />

        {isValid && errorMsg && (<p className="text-sm text-red-500">{errorMsg}</p>)}
        </div>
    ) : null;

};

export default CKEditorComp;