QEditor.jsx

import React, { Fragment, useEffect, useState, useRef } from 'react'
import './index.scss'
// import "katex/dist/katex.min.css"
// 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 Table from '@tiptap/extension-table'
import TableCell from '@tiptap/extension-table-cell'
import TableRow from '@tiptap/extension-table-row'
import TableHeader from '@tiptap/extension-table-header'
import Link from '@tiptap/extension-link'
import Image from '@tiptap/extension-image'
import TextAlign from '@tiptap/extension-text-align';

import ToolBar from "./components/ToolBar"
import EditorModal from "./components/EditorModal"
import Uploader from "./components/Uploader"
import Video from './extensions/Video'
import Iframe from './extensions/Iframe'

const initialBubbleItems = ['bold', 'italic', 'underline', 'strike'];

const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
    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 [modalTitle, setModalTitle] = useState('');
    const [bubbleItems, setBubbleItems] = useState(initialBubbleItems);

    const modalOpener = (type, title) => {
        setModalTitle(title);
        setInnerModalType(type);
        setModalIsOpen(true);
    }

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

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

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

                    return
                }

                // update link
                editor.chain().focus().extendMarkRange('link').setLink({ href: url, target: '_blank' })
                .run();
            }
        },
        video: {
            title: 'Загрузить видео',
            onClick: () => modalOpener('video', 'Загрузить видео')
        },
        iframe: {
            title: 'Видео по ссылке',
            onClick: () => modalOpener('iframe', 'Видео по ссылке')
        },
        image: {
            title: 'Загрузить изображение',
            onClick: () => modalOpener('image', 'Загрузить изображение')
        },
        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()
        },
        codeBlock: {
            title: 'Код',
            onClick: () => editor.chain().focus().toggleCodeBlock().run()
        },
        clearMarks: {
            title: 'Очистить форматирование',
            onClick: () => editor.chain().focus().unsetAllMarks().run()
        },
        bulletList: {
            title: 'Маркированный список',
            onClick: () => editor.chain().focus().toggleBulletList().run()
        },
        orderedList: {
            title: 'Нумированный список',
            onClick: () => editor.chain().focus().toggleOrderedList().run()
        },
        blockquote: {
            title: 'Цитата',
            onClick: () => editor.chain().focus().toggleBlockquote().run()
        },
        hardBreak: {
            title: 'Перенос строки',
            onClick: () => editor.chain().focus().setHardBreak().run()
        },
        hr: {
            title: 'Горизонтальная линия',
            onClick: () => editor.chain().focus().setHorizontalRule().run()
        },
        undo: {
            title: 'Действие назад',
            onClick: () => editor.chain().focus().undo().run()
        },
        redo: {
            title: 'Действие вперед',
            onClick: () => editor.chain().focus().redo().run()
        },
        alignLeft: {
            title: 'По левому краю',
            onClick: () => editor.commands.setTextAlign('left')
        },
        alignCenter: {
            title: 'По центру',
            onClick: () => editor.commands.setTextAlign('center')
        },
        alignRight: {
            title: 'По правому краю',
            onClick: () => editor.commands.setTextAlign('right')
        },
        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()
        }
    }

    const editor = useEditor({
        extensions: [
            StarterKit,
            Underline,
            Image.configure({
                inline: true
            }),
            Link.configure({
                autolink: true,
                linkOnPaste: true,
                validate: (href)=> console.log(href),
            }),
            Video,
            Iframe,
            Table.configure({
                resizable: true,
            }),
            TableRow,
            TableHeader,
            TableCell,
            BubbleMenu,
            TextAlign.configure({
                defaultAlignment: 'left',
                types: ['heading', 'paragraph'],
                alignments: ['left', 'center', 'right', 'justify'],
            })
        ],
        content: value,
        onUpdate: ({editor}) => onChange(editor.getHTML())
    })

    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 = '*' }) => {
        return <Uploader
            key={uploaderUid}
            accept={ accept }
            action={ uploadOptions.url }
            errorMessage={ uploadOptions.errorMessage }
            onSuccess={(file) => {
                let _uploadedPaths = [...uploadedPaths];

                _uploadedPaths.push(file);
                setUploadedPaths(_uploadedPaths)
            }}
            onDelete={(deleteFile)=>{
                let deleteIdx = null;
                let _uploadedPaths = [...uploadedPaths];

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

    const getInnerModal = () => {
        switch (innerModalType) {
            case 'iframe':
                return (
                    <Fragment>
                        <input type="text" value={embedContent} placeholder={'https://'} onInput={(e) => setEmbedContent(e.target.value)
                        }/>
                        <ul className={'atma-editor-soc-video'}>
                            <li className={'youtube'}/>
                            <li className={'vimeo'}/>
                            {/* <li className={'vk'}/> */}
                            <li className={'ok'}/>
                            <li className={'rutube'}/>
                        </ul>
                    </Fragment>
                )
            case 'video':
                return (
                    <Fragment>{ getUploader({ accept: 'video/*' }) }</Fragment>
                )
            case 'image':
                return (
                    <Fragment>{ getUploader({ accept: 'image/*' }) }</Fragment>
                )
            default:
                return <div>Пусто</div>
        }
    }

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

        switch(innerModalType){
            case 'video':
            case 'image':
                if(uploadOptions.url === null || uploadedPaths.length === 0){
                    isDisabled = true;
                }
                break;
            case 'iframe':
                try{
                    let 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;
        }

        return isDisabled;
    }

    if (!editor) {
        return null
    }

    return (
        <div className="atma-editor-wrap" style={style} onMouseDown={(e)=>{console.log('mouseDown');e.stopPropagation();}} onMouseMove={(e)=>{console.log('mouseMove');e.stopPropagation();}} onMouseUp={(e)=>{console.log('mouseUp');e.stopPropagation();}}>
            <div className="atma-editor">
                <ToolBar
                    editor={editor}
                    {...{toolsLib}}
                />
                <BubbleMenu editor={editor} shouldShow={({...o}) => {
                    let items = [];

                    if(o.from !== o.to && editor.isActive('paragraph') && editor.isActive('image') === false){
                        items = initialBubbleItems;
                    }

                    if(editor.isActive('table')){
                        if(o.from === o.to || document.querySelectorAll('.selectedCell').length > 0){
                            if(items.length > 0){
                                items = [...items, '|']
                            }

                            if(document.querySelectorAll('.selectedCell').length > 0){
                                items = [
                                    ...items,
                                    ...['mergeOrSplit']
                                ]
                            }

                            items = [
                                ...items,
                                ...[
                                    'addRowBefore',
                                    'addRowAfter',
                                    'deleteRow',
                                    '|',
                                    'addColumnBefore',
                                    'addColumnAfter',
                                    'deleteColumn',
                                    '|',
                                    'toggleHeaderCell',
                                    '|',
                                    'deleteTable'
                                ]
                            ];
                        }
                    }

                    if(editor.isActive('image') === true){
                        items = ['alignLeft', 'alignCenter', 'alignRight'];
                    }
                    if(items.length > 0){
                        setBubbleItems(items);
                        return true;
                    }
                }}  tippyOptions={{ duration: 100 }}>
                    <div className="atma-editor-bubble">
                        {
                            bubbleItems.map((type, i) => {
                                if(type === '|'){
                                    return ( <div className={'qseparator'} /> )
                                }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([
                    {
                        title: 'Отмена',
                        className: ' atma-editor-cancel',
                        onClick: () => {
                            setUploaderUid(`uid${new Date()}`);
                            setUploadedPaths([]);
                            setModalIsOpen(false)
                        }
                    },
                    {
                        title: 'Вставить',
                        className: ' atma-editor-complete',
                        onClick: () => {
                            if(document.querySelectorAll('.atma-editor-uploader-progress').length > 0){
                                if(!confirm('Не полностью загруженные файлы будут утеряны. Вы уверены, что хотите продолжить?')){
                                    return false;
                                }
                            }
                            try {
                                switch (innerModalType) {
                                    case 'image':
                                        uploadedPaths.map((file, i) => {
                                            editor.chain().focus().setImage({ src: file.path }).run();
                                        });
                                        break
                                    case 'video':
                                        uploadedPaths.map((file, i) => {
                                            editor.chain().focus().setVideo({ src: file.path, poster: file.path + '.jpg' }).run();
                                        });
                                        break
                                    case 'iframe':

                                        let _url = embedContent;
                                        let reg = /(http|https):\/\/([\w.]+\/?)\S*/;



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

                                        console.log(url);

                                        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}`;

                                                console.log(_url);
                                                break
                                        }

                                        console.log(_url);


                                        editor.chain().focus().setIframe({ src: _url }).run();

                                        break
                                }

                                setUploaderUid(`uid${new Date()}`);
                                setEmbedContent('');
                                setUploadedPaths([]);
                                setModalTitle('');
                                setModalIsOpen(false);
                            }catch (err){
                                console.log(err)
                            }
                        },
                        disabled: isDisabledAction()
                    }
                ])
                }
            </EditorModal>
        </div>
    )
}

export default QEditor;