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, Select as AntdSelect } 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 ButtonLinkExtension from './extensions/ButtonLink'
// 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, Extension } from "@tiptap/core";
import Upload from "rc-upload";
import { NodeSelection, TextSelection } from 'prosemirror-state'

// 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;

// Word-by-word navigation (Word-like: Ctrl+Arrow)
function _wordFwd(text, pos) {
    let i = pos
    while (i < text.length && /\s/.test(text[i])) i++
    while (i < text.length && /\S/.test(text[i])) i++
    return i
}
function _wordBwd(text, pos) {
    let i = pos
    while (i > 0 && /\s/.test(text[i - 1])) i--
    while (i > 0 && /\S/.test(text[i - 1])) i--
    return i
}
function _moveByWord(editor, forward, extend) {
    const { state } = editor
    const { selection, doc } = state
    const { $anchor, $head } = selection

    const $cursor = extend ? $head : (forward ? selection.$to : selection.$from)
    const pos = $cursor.pos
    const blockStart = $cursor.start()
    const blockEnd = $cursor.end()
    const blockText = doc.textBetween(blockStart, blockEnd, '', '')
    const relPos = pos - blockStart

    let newPos
    if (forward) {
        const nr = _wordFwd(blockText, relPos)
        if (nr === relPos && blockEnd + 1 <= doc.content.size) {
            // no movement possible in this block — jump into next block
            try {
                const $next = doc.resolve(blockEnd + 1)
                newPos = $next.start()
            } catch { newPos = blockEnd }
        } else {
            newPos = blockStart + nr
        }
    } else {
        const nr = _wordBwd(blockText, relPos)
        if (nr === relPos && blockStart - 1 > 0) {
            // no movement possible in this block — jump to end of previous block
            try {
                const $prev = doc.resolve(blockStart - 1)
                newPos = $prev.end()
            } catch { newPos = Math.max(0, blockStart - 1) }
        } else {
            newPos = blockStart + nr
        }
    }

    newPos = Math.max(0, Math.min(newPos, doc.content.size))
    const anchorPos = extend ? $anchor.pos : newPos
    try {
        const sel = TextSelection.create(doc, anchorPos, newPos)
        editor.view.dispatch(state.tr.setSelection(sel).scrollIntoView())
    } catch { /* invalid position */ }
    return true
}
const WordNavigation = Extension.create({
    name: 'wordNavigation',
    addKeyboardShortcuts() {
        return {
            'Ctrl-ArrowRight':       () => _moveByWord(this.editor, true,  false),
            'Ctrl-ArrowLeft':        () => _moveByWord(this.editor, false, false),
            'Ctrl-Shift-ArrowRight': () => _moveByWord(this.editor, true,  true),
            'Ctrl-Shift-ArrowLeft':  () => _moveByWord(this.editor, false, true),
        }
    }
})

const ImageWrapEnter = Extension.create({
    name: 'imageWrapEnter',
    addKeyboardShortcuts() {
        return {
            'Enter': ({ editor }) => {
                const { state } = editor
                const { $from } = state.selection
                const parent = $from.parent
                const cursorOffset = $from.parentOffset
                let lastWrappedEnd = null
                parent.forEach((child, offset) => {
                    if (child.type.name === 'image' && child.attrs.wrap && offset >= cursorOffset) {
                        lastWrappedEnd = $from.start() + offset + child.nodeSize
                    }
                })
                if (lastWrappedEnd === null) return false
                return editor.chain()
                    .setTextSelection(lastWrappedEnd)
                    .splitBlock()
                    .run()
            }
        }
    }
})

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

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

    const defaultButtonLinkData = {
        text: 'Перейти',
        href: '',
        fontSize: '16px',
        textColor: '#ffffff',
        backgroundColor: '#1790FF'
    }

    const getSelectedButtonLinkData = () => {
        if (!editor || !(editor.state.selection instanceof NodeSelection)) {
            return null
        }

        const selectedNode = editor.state.selection.node

        if (!selectedNode || selectedNode.type.name !== 'buttonLink') {
            return null
        }

        return {
            text: selectedNode.attrs.text || defaultButtonLinkData.text,
            href: selectedNode.attrs.href || '',
            fontSize: selectedNode.attrs.fontSize || defaultButtonLinkData.fontSize,
            textColor: selectedNode.attrs.textColor || defaultButtonLinkData.textColor,
            backgroundColor: selectedNode.attrs.backgroundColor || defaultButtonLinkData.backgroundColor
        }
    }

    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})
    const [buttonLinkData, setButtonLinkData] = useState(defaultButtonLinkData)
    const [suggestedFiles, setSuggestedFiles] = useState([])
    const [suggestedLoading, setSuggestedLoading] = useState(false)
    const [suggestPage, setSuggestPage] = useState(1)
    const [suggestTotal, setSuggestTotal] = useState(0)
    const SUGGEST_LIMIT = innerModalType === 'video' ? 8 : 20
    const [playingAudio, setPlayingAudio] = useState(null)
    const audioRefs = useRef({})

    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 SUGGEST_TYPES = ['image', 'interactiveImage', 'video', 'audio', 'file', 'iframe_pdf', 'iframe_pptx']
    const SUGGEST_TYPE_MAP = {
        image: 'image',
        interactiveImage: 'image',
        video: 'video',
        audio: 'audio',
        file: 'file',
        iframe_pdf: 'pdf',
        iframe_pptx: 'pptx'
    }

    useEffect(() => {
        setSuggestPage(1)
        setSuggestTotal(0)
        setSuggestedFiles([])
        setPlayingAudio(null)
        Object.values(audioRefs.current).forEach(el => { if (el) el.pause() })
        audioRefs.current = {}
    }, [innerModalType])

    useEffect(() => {
        if (!modalIsOpen || !uploadOptions.suggestUrl || !SUGGEST_TYPES.includes(innerModalType)) {
            setSuggestedFiles([])
            setSuggestTotal(0)
            return
        }
        let cancelled = false
        setSuggestedLoading(true)
        axios.get(uploadOptions.suggestUrl, {
            params: {
                type: SUGGEST_TYPE_MAP[innerModalType],
                page: suggestPage,
                limit: SUGGEST_LIMIT
            }
        })
            .then(response => {
                if (!cancelled && response.data.state === 'success' && Array.isArray(response.data.files)) {
                    setSuggestedFiles(response.data.files)
                    setSuggestTotal(response.data.total || response.data.files.length)
                }
            })
            .catch(() => {})
            .finally(() => { if (!cancelled) setSuggestedLoading(false) })
        return () => { cancelled = true }
    }, [modalIsOpen, innerModalType, suggestPage])

    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) => {
        if (type === 'buttonLink') {
            const selectedButtonLinkData = getSelectedButtonLinkData()

            setButtonLinkData(selectedButtonLinkData || defaultButtonLinkData)
        }
        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 = ['12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px']

    const validateLinkHref = (href) => {
        if (!href || typeof href !== 'string') {
            return false
        }

        try {
            const normalizedHref = /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(href)
                ? href
                : `https://${href}`
            const parsedUrl = new URL(normalizedHref)

            return ['http:', 'https:'].includes(parsedUrl.protocol)
        } catch (error) {
            return false
        }
    }

    const normalizeLinkHref = (href) => {
        if (!href || typeof href !== 'string') {
            return ''
        }

        return /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(href) ? href : `https://${href}`
    }

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

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

                // empty
                if (url === '') {
                    editor.chain().focus().setTextSelection({ from: selection.from, to: selection.to }).extendMarkRange('link').unsetLink().run()
                    return
                }

                const normalizedUrl = normalizeLinkHref(url)

                if (!validateLinkHref(normalizedUrl)) {
                    window.alert('Некорректный URL')
                    return
                }

                if (selection.empty) {
                    editor.chain().focus().setTextSelection(selection.from).insertContent({
                        type: 'text',
                        text: url,
                        marks: [
                            {
                                type: 'link',
                                attrs: {
                                    href: normalizedUrl,
                                    target: '_blank'
                                }
                            }
                        ]
                    }).run()
                    return
                }

                editor.chain().focus().setTextSelection({ from: selection.from, to: selection.to }).extendMarkRange('link').setLink({href: normalizedUrl, target: '_blank'}).run()
            }
        },
        buttonLink: {
            title: 'Кнопка-ссылка',
            onClick: () => modalOpener('buttonLink', 'Добавить кнопку')
        },
        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: () => {
                const { empty, from, to } = editor.state.selection
                if (!empty) {
                    // Есть выделение — применяем только к нему
                    editor.chain().focus().toggleCode().run()
                } else {
                    // Нет выделения — выделяем весь текущий блок
                    const { $anchor } = editor.state.selection
                    const blockStart = $anchor.start()
                    const blockEnd = $anchor.end()
                    editor
                        .chain()
                        .focus()
                        .setTextSelection({ from: blockStart, to: blockEnd })
                        .toggleCode()
                        .setTextSelection(from) // возвращаем курсор на место
                        .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: () => {
                const { state, view } = editor
                const { $from } = state.selection

                // Всегда вставляем после текущего блока верхнего уровня,
                // а не в позицию курсора — иначе insertContent может «съесть»
                // пустой параграф, разделяющий два раскрывающихся списка.
                const insertPos = $from.after(Math.min($from.depth, 1))

                const schema = state.schema
                const toggleNode = schema.nodes.toggleBlock.create(
                    { title: 'Заголовок', open: true },
                    schema.nodes.paragraph.create(
                        null,
                        schema.text('Введите подробности...')
                    )
                )
                const paraNode = schema.nodes.paragraph.create()

                view.dispatch(state.tr.insert(insertPos, [toggleNode, paraNode]))
            },
        },

        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: validateLinkHref,
            }),
            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,
            ButtonLinkExtension,
            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,
            WordNavigation,
            ImageWrapEnter,
            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 = '*', processingMessage = null, ...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}
                processingMessage={processingMessage}
                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 getSuggestionsSection = () => {
        if (!uploadOptions.suggestUrl || !SUGGEST_TYPES.includes(innerModalType)) {
            return null
        }
        if (suggestedLoading && suggestedFiles.length === 0) {
            return <div className='atma-editor-suggest-loading'>Загрузка файлов...</div>
        }
        if (!suggestedLoading && suggestedFiles.length === 0) {
            return null
        }
        const isVideo = innerModalType === 'video'
        const isAudio = innerModalType === 'audio'
        const isFileType = innerModalType === 'file' || innerModalType === 'iframe_pdf' || innerModalType === 'iframe_pptx'
        const totalPages = Math.ceil(suggestTotal / SUGGEST_LIMIT)

        const toggleSelect = (file, uid) => {
            const isSelected = uploadedPaths.some(p => p.uid === uid)
            if (isSelected) {
                setUploadedPaths(uploadedPaths.filter(p => p.uid !== uid))
            } else {
                setUploadedPaths([...uploadedPaths, {
                    path: file.path,
                    uid,
                    name: file.name,
                    size: file.size
                }])
            }
        }

        return (
            <div className='atma-editor-suggest'>
                <div className='atma-editor-suggest-title'>Ранее загруженные файлы</div>
                <div className={'atma-editor-suggest-list' + (isVideo ? ' is-video' : '')}>
                    {suggestedFiles.map((file, i) => {
                        const uid = 'suggest_' + file.path
                        const isSelected = uploadedPaths.some(p => p.uid === uid)

                        if (isVideo) {
                            return (
                                <div
                                    key={'suggest' + i}
                                    className={'atma-editor-suggest-item is-video' + (isSelected ? ' selected' : '')}
                                >
                                    <video
                                        src={file.path}
                                        controls
                                        className='atma-editor-suggest-video'
                                        title={file.name}
                                    />
                                    <button
                                        type='button'
                                        className='atma-editor-suggest-select-btn'
                                        title={isSelected ? 'Снять выбор' : 'Выбрать'}
                                        onClick={() => toggleSelect(file, uid)}
                                    />
                                </div>
                            )
                        }

                        if (isAudio) {
                            const isPlaying = playingAudio === uid
                            return (
                                <div
                                    key={'suggest' + i}
                                    className={'atma-editor-suggest-item is-audio' + (isSelected ? ' selected' : '')}
                                >
                                    <audio
                                        ref={el => { audioRefs.current[uid] = el }}
                                        src={file.path}
                                        onEnded={() => setPlayingAudio(null)}
                                        onPause={() => {
                                            if (playingAudio === uid) setPlayingAudio(null)
                                        }}
                                    />
                                    <button
                                        type='button'
                                        className={'atma-editor-suggest-audio-btn' + (isPlaying ? ' playing' : '')}
                                        title={isPlaying ? 'Пауза' : 'Воспроизвести'}
                                        onClick={(e) => {
                                            e.stopPropagation()
                                            const el = audioRefs.current[uid]
                                            if (!el) return
                                            if (isPlaying) {
                                                el.pause()
                                            } else {
                                                Object.entries(audioRefs.current).forEach(([key, ref]) => {
                                                    if (key !== uid && ref) ref.pause()
                                                })
                                                el.play()
                                                setPlayingAudio(uid)
                                            }
                                        }}
                                    />
                                    <span
                                        className='atma-editor-suggest-item-name'
                                        onClick={() => toggleSelect(file, uid)}
                                    >{file.name}</span>
                                    <button
                                        type='button'
                                        className={'atma-editor-suggest-select-btn' + (isSelected ? ' selected-mark' : '')}
                                        title={isSelected ? 'Снять выбор' : 'Выбрать'}
                                        onClick={() => toggleSelect(file, uid)}
                                    />
                                </div>
                            )
                        }

                        const thumbnail = !isFileType ? file.path : null
                        return (
                            <div
                                key={'suggest' + i}
                                className={
                                    'atma-editor-suggest-item' +
                                    (isSelected ? ' selected' : '') +
                                    (isFileType ? ' is-file' : '')
                                }
                                style={thumbnail ? { backgroundImage: `url(${thumbnail})` } : {}}
                                title={file.name}
                                onClick={() => toggleSelect(file, uid)}
                            >
                                <span className='atma-editor-suggest-item-name'>{file.name}</span>
                            </div>
                        )
                    })}
                </div>
                {totalPages > 1 && (
                    <div className='atma-editor-suggest-pagination'>
                        <button
                            type='button'
                            className='atma-editor-suggest-page-btn'
                            disabled={suggestPage <= 1 || suggestedLoading}
                            onClick={() => setSuggestPage(p => p - 1)}
                        >&#8592;</button>
                        <span className='atma-editor-suggest-page-info'>
                            {suggestedLoading ? '...' : `${suggestPage} / ${totalPages}`}
                        </span>
                        <button
                            type='button'
                            className='atma-editor-suggest-page-btn'
                            disabled={suggestPage >= totalPages || suggestedLoading}
                            onClick={() => setSuggestPage(p => p + 1)}
                        >&#8594;</button>
                    </div>
                )}
            </div>
        )
    }

    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>
                        {getSuggestionsSection()}
                        {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'})}
                        {getSuggestionsSection()}
                    </Fragment>
                )
            case 'iframe_pdf':
                return (
                    <Fragment>
                        {getSuggestionsSection()}
                        {getUploader({
                            accept: 'application/pdf',
                            afterParams: ['no_convert=1']
                        })}
                    </Fragment>
                )
            case 'pdf':
                return (
                    <Fragment>
                        {getUploader({
                            accept: 'application/pdf',
                            afterParams: ['no_convert=1'],
                            processingMessage: 'Распознаём текст PDF, подождите...'
                        }, '/ru/pdf-to-text/')}
                    </Fragment>
                )
            case 'video':
                return (
                    <Fragment>
                        {getUploader({accept: 'video/mp4,.mp4'})}
                        {getSuggestionsSection()}
                    </Fragment>
                )
            case 'image':
                return (
                    <Fragment>
                        {getUploader({accept: 'image/*'})}
                        {getSuggestionsSection()}
                    </Fragment>
                )
            case 'interactiveImage':
                return (
                    <Fragment>
                        {getUploader({accept: 'image/*', multiple: false})}
                        {getSuggestionsSection()}
                    </Fragment>
                )
            case 'file':
                return (
                    <Fragment>
                        {getUploader({accept: '*', afterParams: ['no_convert=1']})}
                        {getSuggestionsSection()}
                    </Fragment>
                )
            case 'buttonLink':
                return (
                    <div className='atma-editor-button-link-form'>
                        <label className='atma-editor-field'>
                            <span>Текст кнопки</span>
                            <Input
                                value={buttonLinkData.text}
                                placeholder='Перейти'
                                onChange={(event) => {
                                    setButtonLinkData({
                                        ...buttonLinkData,
                                        text: event.target.value
                                    })
                                }}
                            />
                        </label>
                        <label className='atma-editor-field'>
                            <span>Ссылка</span>
                            <Input
                                value={buttonLinkData.href}
                                placeholder='https://example.com'
                                onChange={(event) => {
                                    setButtonLinkData({
                                        ...buttonLinkData,
                                        href: event.target.value
                                    })
                                }}
                            />
                        </label>
                        <div className='atma-editor-button-link-grid'>
                            <label className='atma-editor-field atma-editor-field-select'>
                                <span>Размер шрифта</span>
                                <AntdSelect
                                    value={buttonLinkData.fontSize}
                                    options={fontSizes.map((fontSize) => ({
                                        value: fontSize,
                                        label: fontSize
                                    }))}
                                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
                                    dropdownStyle={{ zIndex: 100003 }}
                                    onChange={(value) => {
                                        setButtonLinkData({
                                            ...buttonLinkData,
                                            fontSize: value
                                        })
                                    }}
                                />
                            </label>
                            <label className='atma-editor-field atma-editor-field-color'>
                                <span>Цвет текста</span>
                                <input
                                    type='color'
                                    value={buttonLinkData.textColor}
                                    className='atma-editor-color-input'
                                    onChange={(event) => {
                                        setButtonLinkData({
                                            ...buttonLinkData,
                                            textColor: event.target.value
                                        })
                                    }}
                                />
                            </label>
                            <label className='atma-editor-field atma-editor-field-color'>
                                <span>Цвет кнопки</span>
                                <input
                                    type='color'
                                    value={buttonLinkData.backgroundColor}
                                    className='atma-editor-color-input'
                                    onChange={(event) => {
                                        setButtonLinkData({
                                            ...buttonLinkData,
                                            backgroundColor: event.target.value
                                        })
                                    }}
                                />
                            </label>
                        </div>
                        <div className='atma-editor-button-link-preview-wrap'>
                            <span>Предпросмотр</span>
                            <a
                                href='/'
                                onClick={(event) => event.preventDefault()}
                                className='atma-editor-button-link-preview'
                                style={{
                                    color: buttonLinkData.textColor,
                                    backgroundColor: buttonLinkData.backgroundColor,
                                    fontSize: buttonLinkData.fontSize || '16px'
                                }}
                            >
                                {buttonLinkData.text || 'Кнопка'}
                            </a>
                        </div>
                    </div>
                )
            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':
            case 'iframe_pdf':
            case 'iframe_pptx':
                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
            case 'buttonLink':
                isDisabled = !buttonLinkData.text.trim() || !validateLinkHref(buttonLinkData.href)
                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([])
                        setButtonLinkData(defaultButtonLinkData)
                        setModalIsOpen(false)
                    }
                },
                {
                    title: 'Удалить',
                    className: ' atma-editor-complete',
                    onClick: () => {
                        stopRecording()
                        unMuteAudio()
                        clearBlobUrl()
                        setUploaderUid(`uid${new Date()}`)
                        setUploadedPaths([])
                        setButtonLinkData(defaultButtonLinkData)
                        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)}`
                                                })
                                                .command(({ tr, state }) => {
                                                    // После setImage курсор — NodeSelection на картинке.
                                                    // На десктопе: TextSelection сразу после картинки (inline).
                                                    // На мобильном: курсор в следующий параграф — иначе он
                                                    // растягивается на всю высоту картинки.
                                                    const { $to } = state.selection
                                                    if (isMobile) {
                                                        const afterPara = $to.after(Math.min($to.depth, 1))
                                                        const target = afterPara < tr.doc.nodeSize - 1
                                                            ? afterPara + 1
                                                            : afterPara
                                                        try {
                                                            tr.setSelection(TextSelection.create(tr.doc, target))
                                                        } catch {
                                                            tr.setSelection(TextSelection.create(tr.doc, $to.pos))
                                                        }
                                                    } else {
                                                        tr.setSelection(TextSelection.create(tr.doc, $to.pos))
                                                    }
                                                    return true
                                                })
                                                .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 domWidth = editor.view.dom.clientWidth
                                                const maxWidth = domWidth > 0 ? domWidth - 32 : img.naturalWidth
                                                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
                                    case 'buttonLink':
                                        {
                                            const buttonLinkAttrs = {
                                                text: buttonLinkData.text.trim(),
                                                href: normalizeLinkHref(buttonLinkData.href),
                                                fontSize: buttonLinkData.fontSize.trim() || '16px',
                                                textColor: buttonLinkData.textColor,
                                                backgroundColor: buttonLinkData.backgroundColor
                                            }

                                            if (editor.state.selection instanceof NodeSelection
                                                && editor.state.selection.node
                                                && editor.state.selection.node.type.name === 'buttonLink'
                                            ) {
                                                editor.chain().focus().updateAttributes('buttonLink', buttonLinkAttrs).run()
                                            } else {
                                                editor.chain().focus().setButtonLink(buttonLinkAttrs).insertContent(' ').run()
                                            }
                                        }
                                        break
                                }
                                setModalIsOpen(false)
                                clearBlobUrl()
                                setUploaderUid(`uid${new Date()}`)
                                setEmbedContent('')
                                setUploadedPaths([])
                                setModalTitle('')
                                setButtonLinkData(defaultButtonLinkData)
                            } catch (err) {
                                console.log(err)
                                setModalIsOpen(false)
                                clearBlobUrl()
                                setUploaderUid(`uid${new Date()}`)
                                setEmbedContent('')
                                setUploadedPaths([])
                                setModalTitle('')
                                setButtonLinkData(defaultButtonLinkData)
                            }
                        }
                    },
                    disabled: isDisabledAction()
                }
            ]


    return (
        <div className='atma-editor-wrap' style={style}>
            <div className='atma-editor'>
                <ToolBar editor={editor} {...{toolsOptions}} {...{toolsLib}} onInfo={onInfo} />
                <BubbleMenu
                    typpyOptions={{followCursor: true}}
                    editor={editor}
                    shouldShow={({...o}) => {
                        if (o.state.selection instanceof NodeSelection) {
                            const selectedNode = o.state.selection.node

                            if (selectedNode && selectedNode.type && selectedNode.type.name === 'buttonLink') {
                                return false
                            }
                        }

                        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