QEditor.jsx

/* eslint-disable no-undef */
/* eslint-disable no-case-declarations */
import React, { Fragment, useEffect, useState, useRef } from 'react'
import './index.scss'
// import EditorModal from "./components/EditorModal"
// import Uploader from "./components/Uploader"

import { useEditor, EditorContent, BubbleMenu } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Underline from '@tiptap/extension-underline'
import TableCell from '@tiptap/extension-table-cell'
import TableRow from '@tiptap/extension-table-row'
import TableHeader from '@tiptap/extension-table-header'
import Focus from '@tiptap/extension-focus'
import { Input, Modal, Form, Button, message } from "antd";
import Link from '@tiptap/extension-link'
// import Image from '@tiptap/extension-image'
import TextAlign from '@tiptap/extension-text-align'
import { Color } from '@tiptap/extension-color'
import Highlight from '@tiptap/extension-highlight'
import TextStyle from '@tiptap/extension-text-style'
import Superscript from '@tiptap/extension-superscript'
import Subscript from '@tiptap/extension-subscript'

import ToolBar from './components/ToolBar'
import EditorModal from './components/EditorModal'
import Uploader from './components/Uploader'
import EmojiPicker from './components/EmojiPicker'
import Video from './extensions/Video'
import Iframe from './extensions/Iframe'
// import CustomLink from './extensions/CustomLink'
import { DragAndDrop } from './extensions/DragAndDrop'
import { useReactMediaRecorder } from 'react-media-recorder'
import axios from 'axios'
import ReactStopwatch from 'react-stopwatch'
import Audio from './extensions/Audio'
import TableExtension from './extensions/TableExtension'
import ToggleBlock from './extensions/ToggleBlock'
import InteractiveImage from './extensions/InteractiveImage'
import FontSize from './extensions/FontSize'
// import Image from '@tiptap/extension-image'

// import ImageResize from 'tiptap-extension-resize-image';

import ImageResize from './extensions/Image.jsx'
// import ImageResize from 'tiptap-imagresize';
// import ImageResize from 'tiptap-imagresize';

import IframeModal from './modals/IframeModal'
import IframeCustomModal from './modals/IframeCustomModal'
import { isMobile } from 'react-device-detect'
import { ExportPdf } from './extensions/ExportPdf'
import { mergeAttributes } from "@tiptap/core";
import Upload from "rc-upload";

// const CustomImage = Image.extend({
//     options: {inline: true},
//     // addNodeView() {
//     //     return ({ editor, node }) => {
//     //         const image = document.createElement('img');
//     //         image.src = node.attrs.src;
//     //         image.width = node.attrs.width;
//     //         return {
//     //             dom: image,
//     //         }
//     //     }
//     // },
// })
const {TextArea} = Input;

const initialBubbleItems = [
    'bold',
    'italic',
    'underline',
    'strike',
    'superscript',
    'subscript',
    '|',
    'fontSize',
    'colorText',
    'highlight',
    '|',
    'glossary'
]

const QEditor = ({
    value,
    onChange = () => {},
    style,
    uploadOptions = {url: '', errorMessage: ''},
    toolsOptions = {type: 'all'}
}) => {
    global.uploadUrl = uploadOptions.url

    const [innerModalType, setInnerModalType] = useState(null)
    const [embedContent, setEmbedContent] = useState('')
    const [uploaderUid, setUploaderUid] = useState('uid' + new Date())
    const [uploadedPaths, setUploadedPaths] = useState([])
    const [modalIsOpen, setModalIsOpen] = useState(false)
    const [modalGlossaryIsOpen, setModalGlossaryIsOpen] = useState(false)
    const [wordGlossary, setWordGlossary] = useState(false)
    const [modalTitle, setModalTitle] = useState('')
    const [bubbleItems, setBubbleItems] = useState(initialBubbleItems)
    const [colorsSelected, setColorsSelected] = useState(null)
    const [focusFromTo, setFocusFromTo] = useState(null)
    const [oldFocusFromTo, setOldFocusFromTo] = useState(null)
    const [isUploading, setIsUploading] = useState(false)
    const [recordType, setRecordType] = useState({video: true})

    let formRef = useRef(null);
    // eslint-disable-next-line no-unused-vars
    const getRgb = (hex) => {
        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
        return result
            ? `rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
                result[3],
                16
            )})`
            : null
    }
    const {
        status,
        startRecording,
        stopRecording,
        mediaBlobUrl,
        previewStream,
        muteAudio,
        unMuteAudio,
        isAudioMuted,
        clearBlobUrl
    } = useReactMediaRecorder(recordType)

    const videoRef = useRef(null)

    useEffect(() => {
        if (videoRef.current && previewStream) {
            videoRef.current.srcObject = previewStream
        }
    }, [previewStream])

    useEffect(() => {
        if (focusFromTo !== oldFocusFromTo) {
            setColorsSelected(null)
            setOldFocusFromTo(focusFromTo)
        }
    }, [focusFromTo])

    const editWord = (values) => {

        let _values = values;

        if(_values.word.replace(/\s/g, '') !== ''){
            axios.post('/api/admin/ru/glossary/edit/', _values, {withCredentials: true}).then((response) => {
                if (response.data.state === "success") {
                    message.success('Сохранено');
                } else if (response.data.state === "error") {
                    message.error('Ошибка');
                }
                setModalGlossaryIsOpen(false);
            }).catch((reason)=>{
                setModalGlossaryIsOpen(false);
                message.error('Что-то пошло не так');
            })
        } else {
            message.error('Термин не может состоять из одних пробелов');
        }
    }

    const modalOpener = (type, title) => {
        setModalTitle(title)
        setInnerModalType(type)
        setModalIsOpen(true)
    }
    const colors = {
        color: [
            'none',
            '#8a8a8a',
            '#afafaf',
            '#44d724',
            '#0bd9b2',
            '#4fb7ff',
            '#226aff',
            '#b153e5',
            '#f54f8e',
            '#f34c37',
            '#ee7027',
            '#d27303',
            '#ffd102'
        ],
        highlight: [
            'none',
            '#9B9B9B',
            '#CCCCCC',
            '#9ee191',
            '#43e7bf',
            '#4fb7ff',
            '#6d9ef5',
            '#cd92e8',
            '#f597bc',
            '#fa9084',
            '#ef9558',
            '#dea75b',
            '#ffe672'
        ]
    }
    const fontSizes = ['default', '12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px']

    const toolsLib = {
        link: {
            title: 'Вставить ссылку',
            onClick: () => {
                const previousUrl = editor.getAttributes('link').href
                const url = window.prompt('Введите URL', previousUrl)

                // cancelled
                if (url === null) {
                    return
                }

                // empty
                if (url === '') {
                    editor.chain().focus().extendMarkRange('link').unsetLink().run()
                    return
                }

                // update link
                editor.chain().focus().extendMarkRange('link').setLink({href: url, target: '_blank'}).run()
            }
        },
        file: {
            title: 'Прикрепить файл',
            onClick: () => modalOpener('file', 'Прикрепить файл')
        },
        video: {
            title: 'Загрузить видео',
            onClick: () => modalOpener('video', 'Загрузить видео')
        },
        iframe: {
            title: 'Видео по ссылке',
            onClick: () => modalOpener('iframe', 'Видео по ссылке')
        },
        iframe_custom: {
            title: 'Вставить iframe',
            onClick: () => modalOpener('iframe_custom', 'Вставить iframe')
        },
        iframe_pptx: {
            title: 'Вставить презентацию pptx',
            onClick: () => modalOpener('iframe_pptx', 'Вставить презентацию pptx')
        },
        iframe_pdf: {
            title: 'Вставить презентацию pdf',
            onClick: () => modalOpener('iframe_pdf', 'Вставить презентацию pdf')
        },
        pdf: {
            title: 'Вставить pdf -> text',
            onClick: () => modalOpener('pdf', 'Вставить pdf -> text')
        },
        export_pdf: {
            title: 'Экспорт в pdf',
            onClick: () => ExportPdf()
        },
        audio: {
            title: 'Вставить аудио файл',
            onClick: () => modalOpener('audio', 'Вставить аудио файл')
        },
        image: {
            title: 'Загрузить изображение',
            onClick: () => modalOpener('image', 'Загрузить изображение')
        },
        emoji: {
            title: 'Эмодзи',
            render: ({ key }) => <EmojiPicker key={key} editor={editor} />
        },
        pdfToText: {
            title: 'Загрузить pdf',
            onClick: () => modalOpener('pdf', 'Загрузить pdf')
        },
        interactiveImage: {
            title: 'Интерактивное изображение',
            onClick: () => {
                modalOpener('interactiveImage', 'Интерактивное изображение')
            },
        },
        h2: {
            title: 'Заголовок 2',
            onClick: () => editor.chain().focus().toggleHeading({level: 2}).run()
        },
        h3: {
            title: 'Заголовок 3',
            onClick: () => editor.chain().focus().toggleHeading({level: 3}).run()
        },
        h4: {
            title: 'Заголовок 4',
            onClick: () => editor.chain().focus().toggleHeading({level: 4}).run()
        },
        paragraph: {
            title: 'Обычный',
            onClick: () => editor.chain().focus().setParagraph().run()
        },
        bold: {
            title: 'Жирный',
            onClick: () => editor.chain().focus().toggleBold().run()
        },
        italic: {
            title: 'Курсив',
            onClick: () => editor.chain().focus().toggleItalic().run()
        },
        underline: {
            title: 'Подчеркнутый',
            onClick: () => editor.chain().focus().toggleUnderline().run()
        },
        strike: {
            title: 'Зачеркнутый',
            onClick: () => editor.chain().focus().toggleStrike().run()
        },
        superscript: {
            title: 'Надстрочный символ',
            onClick: () => editor.chain().focus().toggleSuperscript().run()
        },
        subscript: {
            title: 'Подстрочный символ',
            onClick: () => editor.chain().focus().toggleSubscript().run()
        },
        codeBlock: {
            title: 'Код',
            onClick: () => editor.chain().focus().toggleCodeBlock().run()
        },
        clearMarks: {
            title: 'Очистить форматирование',
            onClick: () => editor.chain().focus().unsetAllMarks().run()
        },
        bulletList: {
            title: 'Маркированный список',
            onClick: () => editor.chain().focus().toggleBulletList().run()
        },
        orderedList: {
            title: 'Нумированный список',
            onClick: () => editor.chain().focus().toggleOrderedList().run()
        },
        blockquote: {
            title: 'Цитата',
            onClick: () => editor.chain().focus().toggleBlockquote().run()
        },
        hardBreak: {
            title: 'Перенос строки',
            onClick: () => editor.chain().focus().setHardBreak().run()
        },
        hr: {
            title: 'Горизонтальная линия',
            onClick: () => editor.chain().focus().setHorizontalRule().run()
        },
        undo: {
            title: 'Действие назад',
            onClick: () => editor.chain().focus().undo().run()
        },
        redo: {
            title: 'Действие вперед',
            onClick: () => editor.chain().focus().redo().run()
        },
        alignLeft: {
            title: 'По левому краю',
            onClick: () => {
                editor.commands.setTextAlign('left');

                //так надо, даже не вникай, фикс бага в хроме при выравнивании картинки
                setTimeout(()=>{
                    // editor.commands.setTextAlign('left');
                    // editor.chain().focus().run()
                },150)
            }
        },
        alignCenter: {
            title: 'По центру',
            onClick: () => {
                editor.commands.setTextAlign('center');
                // editor.chain().focus().run();
                //так надо, даже не вникай, фикс бага в хроме при выравнивании картинки
                setTimeout(()=>{
                    // editor.commands.setTextAlign('center');
                    // editor.chain().focus().run()
                },150)
            }
        },
        alignRight: {
            title: 'По правому краю',
            onClick: () => {
                editor.commands.setTextAlign('right');

                //так надо, даже не вникай, фикс бага в хроме при выравнивании картинки
                setTimeout(()=>{
                    // editor.commands.setTextAlign('right');
                    // editor.chain().focus().run()
                },150)
            }
        },
        insertTable: {
            title: 'Вставить таблицу',
            onClick: () =>
                editor.chain().focus().insertTable({rows: 2, cols: 2}).run()
        },
        deleteTable: {
            title: 'Удалить таблицу',
            onClick: () => editor.chain().focus().deleteTable().run()
        },
        addRowBefore: {
            title: 'Вставить строку перед',
            onClick: () => editor.chain().focus().addRowBefore().run()
        },
        addRowAfter: {
            title: 'Вставить строку после',
            onClick: () => editor.chain().focus().addRowAfter().run()
        },
        deleteRow: {
            title: 'Удалить строку',
            onClick: () => editor.chain().focus().deleteRow().run()
        },
        addColumnBefore: {
            title: 'Вставить столбец перед',
            onClick: () => editor.chain().focus().addColumnBefore().run()
        },
        addColumnAfter: {
            title: 'Вставить столбец после',
            onClick: () => editor.chain().focus().addColumnAfter().run()
        },
        deleteColumn: {
            title: 'Удалить столбец',
            onClick: () => editor.chain().focus().deleteColumn().run()
        },
        mergeOrSplit: {
            title: 'Объединить/разъединить ячейки',
            onClick: () => editor.chain().focus().mergeOrSplit().run()
        },
        toggleHeaderCell: {
            title: 'Добавить/удалить заголовок',
            onClick: () => editor.chain().focus().toggleHeaderCell().run()
        },
        colorText: {
            title: 'Цвет текста',
            onClick: () => {
                setColorsSelected('color')
                editor.chain().focus()
            }
        },
        fontSize: {
            title: 'Размер текста',
            onClick: () => {
                setColorsSelected('fontSize')
                editor.chain().focus()
            }
        },
        highlight: {
            title: 'Цвет фона',
            onClick: () => setColorsSelected('highlight')
        },
        voicemessage: {
            title: 'Записать голосовое сообщение',
            onClick: () => {
                setRecordType({audio: true})
                clearBlobUrl()
                modalOpener('voicemessage', 'Записать голосовое сообщение')
            }
        },
        webcamera: {
            title: 'Записать с камеры',
            onClick: () => {
                setRecordType({video: true})
                clearBlobUrl()
                modalOpener('webcamera', 'Записать с камеры')
            }
        },
        screencust: {
            title: 'Записать экран',
            onClick: () => {
                if (isMobile) {
                    setRecordType({video: true})
                } else {
                    setRecordType({screen: true})
                }
                clearBlobUrl()
                modalOpener('screencust', 'Записать экран')
            }
        },
        insertToggleBlock: {
            title: 'Раскрывающийся список',
            onClick: () =>
                editor.commands.insertContent([
                    {
                        type: 'toggleBlock',
                        attrs: {
                            title: 'Заголовок',
                            open: true,
                        },
                        content: [
                            {
                                type: 'paragraph',
                                content: [
                                    {
                                        type: 'text',
                                        text: 'Введите подробности...',
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        type: 'paragraph',
                        content: [],
                    },
                ]),
        },

        toggleTableBorders: {
            title: 'Показать/скрыть границы таблицы',
            onClick: () => {
                const current = editor.getAttributes('table')?.bordered;
                const newValue = !current;

                editor.commands.updateAttributes('table', { bordered: newValue });
            }
        },
        // katex: {
        //     title: 'Вставить формулу',
        //     onClick: () => {
        //
        //         console.log(katex.renderToString(String.raw`c = \pm\sqrt{a^2 + b^2}`));
        //
        //         // editor.chain().focus().insertContent()
        //     }
        // }
    }

    const editor = useEditor({
        extensions: [
            StarterKit,
            Underline,
            ImageResize,
            Link.configure({
                autolink: true,
                linkOnPaste: true,
                defaultProtocol: 'https',
                protocols: ['http', 'https'],
                validate: (href)=> console.log(href),
            }),
            Video,
            Iframe,
            TableExtension,
            TableRow,
            TableHeader,
            TableCell.extend({
                renderHTML({ HTMLAttributes }) {
                    const attrs = mergeAttributes(this.options.HTMLAttributes, HTMLAttributes);

                    if (attrs.colwidth) {
                        attrs.style = `width: ${attrs.colwidth}px`;
                    }

                    return ['td', attrs, 0];
                }
            }),
            BubbleMenu,
            TextAlign.configure({
                defaultAlignment: 'left',
                types: ['heading', 'paragraph'],
                alignments: ['left', 'center', 'right', 'justify']
            }),
            TextStyle,
            FontSize,
            Color.configure({
                types: ['textStyle']
            }),
            Highlight.configure({
                multicolor: true
            }),
            // CustomLink.configure({
            //     linkOnPaste: false,
            //     openOnClick: false
            // }),
            Focus.configure({
                className: 'atma-editor-focused',
                mode: 'all'
            }),
            Audio,
            Superscript,
            Subscript,
            ToggleBlock,
            InteractiveImage,
            DragAndDrop.configure({
                uploadUrl: uploadOptions.url,
                allowedFileTypes: [
                    'image/jpeg',
                    'image/png',
                    'video/mp4'
                ],
                onUploadSuccess: (fileUrl) => {
                    console.log('File uploaded:', fileUrl);
                },
                onUploadError: (error) => {
                    console.error('Upload error:', error);
                },
                minDragDistance: 10, // Можно настроить под свои нужды
                dragPreviewOpacity: 0.3 // Настройка прозрачности
            })
        ],
        content: value,
        onUpdate: ({editor}) => onChange(editor.getHTML()),
        onFocus: ({editor}) => {
            const wrap = editor.options.element.closest('.atma-editor-wrap')

            wrap.querySelectorAll('.atma-editor-toolbar-s').forEach(function (s) {
                s.classList.remove('show')
            })
        }
    })


    const buildActionsModal = (buttons = []) => {
        if (buttons.length === 0) {
            return null
        }

        return (
            <div className='atma-editor-modal-action'>
                {buttons.map((btn, i) => (
                    <button
                        disabled={btn.disabled}
                        type='button'
                        key={'mAction' + i}
                        className={'atma-editor-btn' + btn.className}
                        onClick={btn.onClick}
                    >
                        {btn.title}
                    </button>
                ))}
            </div>
        )
    }

    const getUploader = ({accept = '*', ...o}, custom_url = '') => {
        let url = uploadOptions.url
        let multiple = true
        if (o.afterParams && o.afterParams.length > 0) {
            if (uploadOptions.url.indexOf('?') !== -1) {
                url = uploadOptions.url + '&' + o.afterParams.join('&')
            } else {
                url = uploadOptions.url + '?' + o.afterParams.join('&')
            }
        }

        if (typeof o.multiple !== 'undefined') {
            multiple = o.multiple
        }
        // console.log(o);

        return (
            <Uploader
                key={uploaderUid}
                accept={accept}
                action={custom_url.length > 0 ? custom_url : url}
                errorMessage={uploadOptions.errorMessage}
                onSuccess={(file, html) => {
                    if (typeof file !== "undefined") {
                        const _uploadedPaths = [...uploadedPaths]
                        _uploadedPaths.push(file)
                        setUploadedPaths(_uploadedPaths)
                    } else {
                        setEmbedContent(html);
                    }
                }}
                onDelete={(deleteFile) => {
                    let deleteIdx = null
                    const _uploadedPaths = [...uploadedPaths]

                    _uploadedPaths.map((f, i) => {
                        if (f.uid === deleteFile.uid) {
                            deleteIdx = i
                        }
                    })
                    _uploadedPaths.splice(deleteIdx, 1)
                    setUploadedPaths(_uploadedPaths)
                }}
                multiple={multiple}
                modalType={innerModalType}
            />
        )
    }

    const saveScreenCust = async (fileBlob) => {
        if (fileBlob) {
            setIsUploading(true)
            const blobData = await fetch(fileBlob).then((res) => res.blob())

            const data = new FormData()
            const file = new File(
                [blobData],
                'name.' + (recordType?.audio ? 'mp3' : 'webm')
            )
            data.append('file', file)

            const headers = {'Content-Type': 'multipart/form-data'}

            return new Promise(function (resolve) {
                axios.post(uploadOptions.url, data, {headers: headers}).then((response) => {
                    if (response.data.state === 'success') {
                        resolve(response.data)
                    }
                    setIsUploading(false)
                })
            })
        }
    }

    const getInnerModal = () => {
        switch (innerModalType) {
            case 'iframe':
                return (
                    <IframeModal
                        embedContent={embedContent}
                        setEmbedContent={setEmbedContent}
                    />
                )
            case 'iframe_custom':
                return (
                    <IframeCustomModal
                        embedContent={embedContent}
                        setEmbedContent={setEmbedContent}
                    />
                )
            case 'iframe_pptx':
                return (
                    <Fragment>
                        {getUploader({
                            accept:
                                'application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.slideshow, application/vnd.openxmlformats-officedocument.presentationml.presentation',
                            afterParams: ['no_convert=1']
                        })}
                    </Fragment>
                )
            case 'audio':
                return (
                    <Fragment>{getUploader({accept: '.wav, .mp3, .ogg'})}</Fragment>
                )
            case 'iframe_pdf':
                return (
                    <Fragment>
                        {getUploader({
                            accept: 'application/pdf',
                            afterParams: ['no_convert=1']
                        })}
                    </Fragment>
                )
            case 'pdf':
                return (
                    <Fragment>
                        {getUploader({
                            accept: 'application/pdf',
                            afterParams: ['no_convert=1']
                        }, '/ru/pdf-to-text/')}
                    </Fragment>
                )
            case 'video':
                return <Fragment>{getUploader({accept: 'video/mp4,.mp4'})}</Fragment>
            case 'image':
                return <Fragment>{getUploader({accept: 'image/*'})}</Fragment>
            case 'interactiveImage':
                return <Fragment>{getUploader({accept: 'image/*', multiple: false})}</Fragment>
            case 'file':
                return (
                    <Fragment>
                        {getUploader({accept: '*', afterParams: ['no_convert=1']})}
                    </Fragment>
                )
            case 'voicemessage':
                return (
                    <Fragment>
                        {isMobile && (
                            <div className='webwrap'>
                                <div>
                                    Аудиозапись с мобильного устройства недоступна, <br/>{' '}
                                    запишите стандартными функциями устройства и воспользуйтесь
                                    кнопкой «Прикрепить файл»
                                </div>
                            </div>
                        )}
                        { ! isMobile && (
                            <div className='audio-player'>
                                <div className='audio-player-start audio-player-margin'>
                                    {status === 'recording' && ! mediaBlobUrl ? (
                                        <div
                                            onClick={stopRecording}
                                            className='audio-player-center-recording'
                                        />
                                    ) : (
                                        <div
                                            onClick={startRecording}
                                            className='audio-player-center-start'
                                        />
                                    )}
                                </div>
                                <div className='audio-player-voice audio-player-margin'/>
                                {status === 'recording' && ! mediaBlobUrl ? (
                                    <ReactStopwatch
                                        seconds={0}
                                        minutes={0}
                                        hours={0}
                                        render={({formatted}) => {
                                            return (
                                                <span className='audio-player-timer audio-player-margin'>
                          {formatted}
                        </span>
                                            )
                                        }}
                                    />
                                ) : (
                                    <span className='audio-player-timer audio-player-margin'/>
                                )}
                            </div>
                        )}
                    </Fragment>
                )
            case 'screencust':
                return (
                    <>
                        <Fragment>
                            {isMobile && (
                                <div className='webwrap'>
                                    <div>
                                        Запись экрана с мобильного устройства недоступна, <br/>
                                        запишите стандартными функциями устройства и воспользуйтесь
                                        кнопкой «Загрузить видео»
                                    </div>
                                </div>
                            )}
                            { ! isMobile && (
                                <>
                                    <div className='webwrap'>
                                        <div className='webwrap-content'>
                                            {mediaBlobUrl ? (
                                                <video
                                                    className='webwrap-video'
                                                    id='id-video'
                                                    src={mediaBlobUrl}
                                                    controls
                                                />
                                            ) : (
                                                status === 'recording' && (
                                                    <video
                                                        className='webwrap-video'
                                                        ref={videoRef}
                                                        src={previewStream}
                                                        autoPlay
                                                        controls={false}
                                                    />
                                                )
                                            )}
                                            {status === 'recording' && ! mediaBlobUrl ? (
                                                <ReactStopwatch
                                                    seconds={0}
                                                    minutes={0}
                                                    hours={0}
                                                    render={({formatted}) => {
                                                        return (
                                                            <span className='webwrap-timer'>{formatted}</span>
                                                        )
                                                    }}
                                                />
                                            ) : (
                                                <span className='webwrap-timer'>00:00:00</span>
                                            )}
                                            { ! mediaBlobUrl && (
                                                <div className='webwrap-start-border'>
                                                    <button
                                                        onClick={
                                                            status === 'recording'
                                                                ? stopRecording
                                                                : startRecording
                                                        }
                                                        className={
                                                            status === 'recording'
                                                                ? 'webwrap-record-center'
                                                                : 'webwrap-start-center'
                                                        }
                                                    />
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                    <div className='web-bottom-elements'>
                                        {mediaBlobUrl && (
                                            <div onClick={clearBlobUrl} className='web-button-wrap'>
                                                <div className='web-button-rerecord'/>
                                                <span className='web-button-rerecord-text'>
                          Перезаписать
                        </span>
                                            </div>
                                        )}
                                        { ! mediaBlobUrl && <div className='web-button-spacer'/>}
                                        { ! mediaBlobUrl && (
                                            <div
                                                onClick={isAudioMuted ? unMuteAudio : muteAudio}
                                                className={
                                                    isAudioMuted ? 'web-button-unmute' : 'web-button-mute'
                                                }
                                            />
                                        )}
                                        <div className='web-button-spacer'/>
                                    </div>
                                </>
                            )}
                        </Fragment>
                    </>
                )
            case 'webcamera':
                return (
                    <>
                        <Fragment>
                            {isMobile && (
                                <div className='webwrap'>
                                    <div>
                                        Видеозапись с мобильного устройства недоступна, <br/>
                                        запишите стандартными функциями устройства и воспользуйтесь
                                        кнопкой «Загрузить видео»
                                    </div>
                                </div>
                            )}
                            { ! isMobile && (
                                <>
                                    <div className='webwrap'>
                                        <div className='webwrap-content'>
                                            {mediaBlobUrl ? (
                                                <video
                                                    className='webwrap-video'
                                                    id='id-video'
                                                    src={mediaBlobUrl}
                                                    controls
                                                />
                                            ) : (
                                                status === 'recording' && (
                                                    <video
                                                        className='webwrap-video'
                                                        ref={videoRef}
                                                        src={previewStream}
                                                        autoPlay
                                                        controls={false}
                                                    />
                                                )
                                            )}
                                            {status === 'recording' && ! mediaBlobUrl ? (
                                                <ReactStopwatch
                                                    seconds={0}
                                                    minutes={0}
                                                    hours={0}
                                                    render={({formatted}) => {
                                                        return (
                                                            <span className='webwrap-timer'>{formatted}</span>
                                                        )
                                                    }}
                                                />
                                            ) : (
                                                <span className='webwrap-timer'>00:00:00</span>
                                            )}
                                            { ! mediaBlobUrl && (
                                                <div className='webwrap-start-border'>
                                                    <button
                                                        onClick={
                                                            status === 'recording'
                                                                ? stopRecording
                                                                : startRecording
                                                        }
                                                        className={
                                                            status === 'recording'
                                                                ? 'webwrap-record-center'
                                                                : 'webwrap-start-center'
                                                        }
                                                    />
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                    <div className='web-bottom-elements'>
                                        {mediaBlobUrl && (
                                            <div onClick={clearBlobUrl} className='web-button-wrap'>
                                                <div className='web-button-rerecord'/>
                                                <span className='web-button-rerecord-text'>
                          Перезаписать
                        </span>
                                            </div>
                                        )}
                                        { ! mediaBlobUrl && <div className='web-button-spacer'/>}
                                        { ! mediaBlobUrl && (
                                            <div
                                                onClick={isAudioMuted ? unMuteAudio : muteAudio}
                                                className={
                                                    isAudioMuted ? 'web-button-unmute' : 'web-button-mute'
                                                }
                                            />
                                        )}
                                        <div className='web-button-spacer'/>
                                    </div>
                                </>
                            )}
                        </Fragment>
                    </>
                )
            default:
                return <div>Пусто</div>
        }
    }

    const isDisabledAction = () => {
        let isDisabled = false

        switch (innerModalType) {
            case 'video':
            case 'image':
                if (uploadOptions.url === null || uploadedPaths.length === 0) {
                    isDisabled = true
                }
                break
            case 'interactiveImage':
                if (uploadOptions.url === null || uploadedPaths.length === 0) {
                    isDisabled = true
                }
                break
            case 'screencust':
                if (status === 'recording' || isUploading || ! mediaBlobUrl) {
                    isDisabled = true
                }
                break
            case 'voicemessage':
                if (status === 'recording' || isUploading || ! mediaBlobUrl) {
                    isDisabled = true
                }
                break
            case 'webcamera':
                if (status === 'recording' || isUploading || ! mediaBlobUrl) {
                    isDisabled = true
                }
                break
            case 'iframe':
                try {
                    const url = new URL(embedContent)

                    switch (url.hostname) {
                        case 'rutube.ru':
                        case 'www.rutube.ru':
                        case 'vimeo.com':
                        case 'ok.ru':
                        case 'www.ok.ru':
                        case 'youtu.be':
                        case 'youtube.com':
                        case 'www.youtube.com':
                            break
                        default:
                            isDisabled = true
                    }
                } catch (error) {
                    isDisabled = true
                }
                break
            case 'iframe_custom':
                const regex = new RegExp(
                    '(?:<iframe[^>]*)(?:(?:\\/>)|(?:>.*?<\\/iframe>))'
                )
                isDisabled = ! regex.test(embedContent)
                break
        }

        return isDisabled
    }

    if ( ! editor) {
        return null
    }

    const buttons =
        innerModalType === 'remove_iframe'
            ? [
                {
                    title: 'Отмена',
                    className: ' atma-editor-cancel',
                    onClick: () => {
                        stopRecording()
                        unMuteAudio()
                        clearBlobUrl()
                        setUploaderUid(`uid${new Date()}`)
                        setUploadedPaths([])
                        setModalIsOpen(false)
                    }
                },
                {
                    title: 'Удалить',
                    className: ' atma-editor-complete',
                    onClick: () => {
                        stopRecording()
                        unMuteAudio()
                        clearBlobUrl()
                        setUploaderUid(`uid${new Date()}`)
                        setUploadedPaths([])
                        setModalIsOpen(false)
                    }
                }
            ]
            : [
                {
                    title: 'Отмена',
                    className: ' atma-editor-cancel',
                    onClick: () => {
                        stopRecording()
                        unMuteAudio()
                        clearBlobUrl()
                        setUploaderUid(`uid${new Date()}`)
                        setUploadedPaths([])
                        setModalIsOpen(false)
                    }
                },
                {
                    title:
                        mediaBlobUrl && uploadedPaths.length === 0
                            ? isUploading
                                ? 'Сохранение...'
                                : 'Вставить'
                            : 'Вставить',
                    className: ' atma-editor-complete',
                    onClick: async () => {
                        if (status === 'recording' || isUploading) {
                            return false
                        } else {
                            if (
                                document.querySelectorAll('.atma-editor-uploader-progress').length > 0
                            ) {
                                if (
                                    // eslint-disable-next-line no-undef
                                    ! confirm(
                                        'Не полностью загруженные файлы будут утеряны. Вы уверены, что хотите продолжить?'
                                    )
                                ) {
                                    return false
                                }
                            }
                            try {
                                switch (innerModalType) {
                                    case 'image':
                                        uploadedPaths.map(async (file) => {
                                            const img = new Image()
                                            img.src = file.path

                                            img.onload = () => {
                                                const maxWidth = editor.view.dom.clientWidth - 32 // учёт padding
                                                const realWidth = Math.min(img.naturalWidth, maxWidth)
                                                const realHeight = img.naturalHeight * (realWidth / img.naturalWidth)

                                                editor
                                                .chain()
                                                .focus()
                                                .setImage({
                                                    src: file.path,
                                                    width: Math.round(realWidth),
                                                    height: Math.round(realHeight),
                                                    align: 'center',
                                                    'data-node-id': `img-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`
                                                })
                                                .run()
                                            }
                                        })
                                        // uploadedPaths.map((file, i) => {
                                        //     editor.chain().focus().setImage({src: file.path}).run();
                                        // })
                                        break
                                    case 'interactiveImage':
                                        uploadedPaths.map(async (file) => {
                                            const img = new Image()
                                            img.src = file.path

                                            img.onload = () => {
                                                const maxWidth = editor.view.dom.clientWidth - 32 // учёт padding
                                                const realWidth = Math.min(img.naturalWidth, maxWidth)
                                                const realHeight = img.naturalHeight * (realWidth / img.naturalWidth)

                                                editor
                                                .chain()
                                                .focus()
                                                .insertContent({
                                                    type: 'interactiveImage',
                                                    attrs: {
                                                        src: file.path,
                                                        width: Math.round(realWidth),
                                                        height: Math.round(realHeight),
                                                        align: 'center',
                                                        points: []
                                                    },
                                                })
                                                .run()
                                            }
                                        })

                                        break
                                    case 'video':
                                        uploadedPaths.map((file, i) => {
                                            editor.chain().focus().setVideo({
                                                src: file.path,
                                                poster: file.path + '.jpg'
                                            }).run()
                                        })
                                        break
                                    case 'voicemessage':
                                        if (mediaBlobUrl && uploadedPaths.length === 0) {
                                            if ( ! isUploading) {
                                                await saveScreenCust(mediaBlobUrl).then((data) => {
                                                    if (data?.file_path) {
                                                        editor.chain().focus().addVoiceMessage({src: data.file_path}).run()
                                                    }
                                                })
                                            }
                                        }
                                        break
                                    case 'screencust':
                                        if (mediaBlobUrl && uploadedPaths.length === 0) {
                                            if ( ! isUploading) {
                                                await saveScreenCust(mediaBlobUrl).then((data) => {
                                                    if (data?.file_path) {
                                                        editor.chain().focus().setVideo({src: data.file_path}).run()
                                                    }
                                                })
                                            }
                                        }
                                        break
                                    case 'webcamera':
                                        if (mediaBlobUrl && uploadedPaths.length === 0) {
                                            if ( ! isUploading) {
                                                await saveScreenCust(mediaBlobUrl).then((data) => {
                                                    if (data?.file_path) {
                                                        editor.chain().focus().setVideo({src: data.file_path}).run()
                                                    }
                                                })
                                            }
                                        }
                                        break
                                    case 'iframe':
                                        let _url = embedContent
                                        const reg = /(http|https):\/\/([\w.]+\/?)\S*/

                                        const url = new URL(
                                            reg.test(_url) ? _url : 'https:' + _url
                                        )
                                        let urlId = url.pathname.replace(/\/$/gi, '').split('/').pop()

                                        switch (url.hostname) {
                                            case 'rutube.ru':
                                            case 'www.rutube.ru':
                                                _url = `https://rutube.ru/pl/?pl_id&pl_type&pl_video=${urlId}`
                                                break
                                            case 'vimeo.com':
                                                _url = `https://player.vimeo.com/video/${urlId}`
                                                break
                                            case 'ok.ru':
                                            case 'www.ok.ru':
                                                _url = `//ok.ru/videoembed/${urlId}`
                                                break
                                            case 'youtu.be':
                                            case 'youtube.com':
                                            case 'www.youtube.com':
                                                if (
                                                    url.hostname.indexOf('youtu.be') === -1 &&
                                                    url.search !== ''
                                                ) {
                                                    if (url.searchParams.get('v')) {
                                                        urlId = url.searchParams.get('v')
                                                    }
                                                }
                                                _url = `https://www.youtube.com/embed/${urlId}`
                                                break
                                        }
                                        editor.chain().focus().setIframe({src: _url}).run()
                                        break
                                    case 'iframe_custom':
                                        editor.chain().focus().insertContent(embedContent).run()
                                        break
                                    case 'iframe_pptx':
                                        uploadedPaths.map((file, i) => {
                                            editor.chain().focus().insertContent(
                                                `<iframe src="https://office.atmaguru.online/pptx?readOnly=1&file=${file.path}"  frameBorder="0"></iframe>`
                                            ).run()
                                            // editor.chain().focus().insertContent(
                                            //     `<iframe src="https://view.officeapps.live.com/op/embed.aspx?src=${file.path}"  frameBorder="0"></iframe>`
                                            // ).run()
                                        })
                                        break
                                    case 'audio':
                                        uploadedPaths.map((file) => {
                                            editor.chain().focus().insertContent(
                                                `<audio class="audio-player" controls="true" src="${file.path}" />`
                                            ).run()
                                        })
                                        break
                                    case 'iframe_pdf':
                                        uploadedPaths.map((file, i) => {
                                            // editor.chain().focus().insertContent(
                                            //     `<embed src="${file.path}" width="100%" height="800px" />`
                                            // ).run()
                                            // editor.chain().focus().insertContent(
                                            //     `<iframe src="https://docs.google.com/viewer?embedded=true&url=${file.path}" frameBorder="0"></iframe>`
                                            // ).run()
                                            editor.chain().focus().insertContent(
                                                `<iframe src="https://cdn.atmaguru.online/pdfjs/web/viewer.html?file=${file.path}" frameBorder="0"></iframe>`
                                            ).run()
                                        })
                                        break
                                    case 'pdf':
                                        editor.chain().focus().insertContent(embedContent).run()
                                        break
                                    case 'file':
                                        uploadedPaths.map((file, i) => {
                                            let exp = file.path.split('.')
                                            exp = exp[exp.length - 1]
                                            editor.chain().focus().insertContent(
                                                `<a href="${file.path}" target="_blank" download="${file.name}.${exp}" data-size="${file.size}">${file.name}</a>`
                                            ).run()
                                        })
                                        break
                                }
                                setModalIsOpen(false)
                                clearBlobUrl()
                                setUploaderUid(`uid${new Date()}`)
                                setEmbedContent('')
                                setUploadedPaths([])
                                setModalTitle('')
                            } catch (err) {
                                console.log(err)
                                setModalIsOpen(false)
                                clearBlobUrl()
                                setUploaderUid(`uid${new Date()}`)
                                setEmbedContent('')
                                setUploadedPaths([])
                                setModalTitle('')
                            }
                        }
                    },
                    disabled: isDisabledAction()
                }
            ]


    return (
        <div className='atma-editor-wrap' style={style}>
            <div className='atma-editor'>
                <ToolBar editor={editor} {...{toolsOptions}} {...{toolsLib}} />
                <BubbleMenu
                    typpyOptions={{followCursor: true}}
                    editor={editor}
                    shouldShow={({...o}) => {
                        let items = []
                        if (
                            o.from !== o.to &&
                            editor.isActive('paragraph') &&
                            editor.isActive('image') === false &&
                            document.querySelectorAll('.selectedCell').length === 0
                        ) {
                            items = initialBubbleItems
                        }

                        if (editor.isActive('image') === true) {
                            items = []
                            // items = ['alignLeft', 'alignCenter', 'alignRight']
                        }
                        setFocusFromTo([o.from, o.to].join(':'))

                        if (items.length > 0) {
                            setBubbleItems(items)
                            return true
                        }
                    }}
                    tippyOptions={{duration: 100}}
                >
                    <div
                        className='atma-editor-bubble'
                        onClick={(e) => e.stopPropagation()}
                    >
                        {colorsSelected !== null
                            ? (colorsSelected === 'fontSize'
                                ? fontSizes.map((fontSize, i) => {
                                    const currentFontSize = editor.getAttributes('textStyle').fontSize || 'default'

                                    return (
                                        <button
                                            key={'fontSize' + i}
                                            type='button'
                                            className={'qfont-size-option' + (currentFontSize === fontSize ? ' active' : '')}
                                            onClick={() => {
                                                if (fontSize === 'default') {
                                                    editor.chain().focus().unsetFontSize().run()
                                                } else {
                                                    editor.chain().focus().setFontSize(fontSize).run()
                                                }

                                                setColorsSelected(null)
                                            }}
                                        >
                                            {fontSize === 'default' ? 'A' : fontSize.replace('px', '')}
                                        </button>
                                    )
                                })
                                : colors[colorsSelected].map((itemColor, i) => {
                                return (
                                    <div
                                        key={'colors' + colorsSelected + i}
                                        className={
                                            'qcolors' + (itemColor === 'none' ? ' unset' : '')
                                        }
                                        style={{background: itemColor}}
                                        onClick={() => {
                                            if (itemColor === 'none') {
                                                colorsSelected === 'color'
                                                    ? editor.chain().focus().unsetHighlight().unsetColor().run()
                                                    : editor.chain().focus().unsetColor().unsetHighlight().run()
                                            } else {
                                                colorsSelected === 'color'
                                                    ? editor.chain().focus().unsetHighlight().setColor(itemColor).run()
                                                    : editor.chain().focus().unsetColor().toggleHighlight({color: itemColor}).run()
                                            }
                                            setColorsSelected(null)
                                        }}
                                    />
                                )
                                }))
                            : bubbleItems.map((type, i) => {
                                if (type === '|') {
                                    return (
                                        <div key={'bubbleSeparator' + i} className='qseparator'/>
                                    )
                                } else if (type === 'glossary') {
                                    if (window.location.pathname.includes('admin/maps')) {
                                        return (
                                            <div
                                                key={'bubbleItems-glossary'}
                                                className={
                                                    'qicon qglossary'
                                                }
                                                title={'Добавить в глоссарий'}
                                                onClick={()=>{
                                                    if (!editor.state.selection.empty) {
                                                        const selectedText = editor.state.doc.textBetween(
                                                            editor.state.selection.from,
                                                            editor.state.selection.to,
                                                            " "
                                                        );
                                                        setWordGlossary(selectedText);
                                                        setTimeout(()=>{
                                                            setModalGlossaryIsOpen(true);
                                                            setTimeout(()=>{formRef.current.resetFields();},1)
                                                        }, 100)
                                                    }
                                                    // console.log(editor.chain().focus());
                                                }}
                                            />
                                        )
                                    }
                                } else {
                                    return (
                                        <div
                                            key={'bubbleItems' + i}
                                            className={
                                                'qicon q' +
                                                type +
                                                (editor.isActive(type) ? ' active' : '')
                                            }
                                            title={toolsLib[type] ? toolsLib[type].title : ''}
                                            onClick={toolsLib[type].onClick}
                                        />
                                    )
                                }
                            })}

                    </div>
                </BubbleMenu>
                <EditorContent editor={editor} className='atma-editor-content'/>
            </div>
            <EditorModal isOpen={modalIsOpen} title={modalTitle}>
                {getInnerModal()}
                {buildActionsModal(buttons)}
            </EditorModal>
            <Modal
                width={1100}
                open={modalGlossaryIsOpen}
                title={'Добавить слово'}
                onCancel={()=>{
                    setModalGlossaryIsOpen(false);
                }}
                footer={[
                    <Button key={1}
                            size={'middle'}
                            type={'text'}
                            onClick={()=>{
                                setModalGlossaryIsOpen(false);
                            }}>Отменить</Button>,
                    <Button key={2}
                            size={'middle'}
                            type={'primary'}
                            htmlType={'submit'}
                            form={'form-glossary'}
                    >Сохранить</Button>
                ]}
            >
                <Form
                    ref={formRef}
                    name={'form-glossary'}
                    initialValues={{word : wordGlossary}}
                    labelCol={{span: 8}}
                    wrapperCol={{span: 32}}
                    layout="vertical"
                    size="middle"
                    style={{margin: '30px'}}
                    onFinish={(values) => {
                        editWord(values);
                    }}
                >
                    <Form.Item name="id" style={{'display': 'none'}}>
                        <input  type="hidden"/>
                    </Form.Item>
                    <Form.Item
                        label={'Термин'}
                        name="word"
                        rules={[
                            {
                                required: true,
                                message: 'Обязательное поле',
                                type:"string"
                            },
                            { min: 2, message: 'Минимум 2 символа' },
                            { max: 254, message: 'Максимум 254 символов' },
                        ]}
                    >
                        <Input placeholder={'Термин'}/>
                    </Form.Item>

                    <Form.Item
                        name="description"
                        label={'Краткое описание'}
                        rules={[{required: true, type: 'string', message: 'Обязательное поле' }]}
                    >
                        <TextArea showCount={true} maxLength={1000} placeholder={'Краткое описание'}/>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

export default QEditor