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 Focus from '@tiptap/extension-focus'
// 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 ToolBar from "./components/ToolBar"
import EditorModal from "./components/EditorModal"
import Uploader from "./components/Uploader"
import Video from './extensions/Video'
import Iframe from './extensions/Iframe'
import CustomLink from './extensions/CustomLink'

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

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 [colorsTabsActive, setColorsTabsActive] = useState('color'); //highlight || color
    const [colorsSelected, setColorsSelected] = useState(null);
    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 modalOpener = (type, title) => {
        setModalTitle(title);
        setInnerModalType(type);
        setModalIsOpen(true);
    }
    const colors = [
        '#9B9B9B',
        '#CCCCCC',
        '#9ee191',
        '#43e7bf',
        '#4fb7ff',
        '#6d9ef5',
        '#cd92e8',
        '#f597bc',
        '#fa9084',
        '#ef9558',
        '#dea75b',
        '#ffe672'
    ];

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

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

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

                    return
                }

                // update link
                editor.chain().focus().extendMarkRange('link').setLink({ href: url, target: '_blank' })
                .run();
            }
        },
        file: {
            title: 'Прикрепить файл',
            onClick: () => modalOpener('file', 'Прикрепить файл')
        },
        video: {
            title: 'Загрузить видео',
            onClick: () => modalOpener('video', 'Загрузить видео')
        },
        iframe: {
            title: 'Видео по ссылке',
            onClick: () => modalOpener('iframe', 'Видео по ссылке')
        },
        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()
        },
        colorText: {
            title: 'Цвет текста',
            onClick: () => setColorsSelected('color')
        },

        highlight: {
            title: 'Цвет фона',
            onClick: () => setColorsSelected('highlight')
        },

    }

    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,
                allowTableNodeSelection: true
            }),
            TableRow,
            TableHeader,
            TableCell,
            BubbleMenu,
            TextAlign.configure({
                defaultAlignment: 'left',
                types: ['heading', 'paragraph'],
                alignments: ['left', 'center', 'right', 'justify'],
            }),
            TextStyle,
            Color.configure({
                types: ['textStyle'],
            }),
            Highlight.configure({
                multicolor: true
            }),
            CustomLink.configure({
                linkOnPaste: false,
                openOnClick: false
            }),
            Focus.configure({
                className: 'atma-editor-focused',
                mode: "all"
            })
        ],
        content: value,
        onUpdate: ({editor}) => onChange(editor.getHTML()),
        onFocus: ({editor})=>{
            let wrap = editor.options.element.closest('.atma-editor-wrap');

            wrap.querySelector('.atma-editor-toolbar-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 = '*' }) => {
        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>
                )
            case 'file':
                return (
                    <Fragment>{ getUploader({ accept: '*' }) }</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}
        >
            {
                colors.map((itemColor, i) => {
                    return ( <div className={'qcolors'} style={{ background: itemColor}} onMouseDown={()=>{
                        colorsSelected === 'color' ?
                            editor.chain().focus().setColor(itemColor).run() : editor.chain().focus().toggleHighlight({ color: itemColor }).run();
                        setColorsSelected(null);
                    }} /> )
                })
            }
            <div className="atma-editor">

                <ToolBar
                    editor={editor}
                    {...{toolsLib}}
                />
                <BubbleMenu typpyOptions={{followCursor: true,}} editor={editor} shouldShow={({...o}) => {
                    let items = [];

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

                    if(editor.isActive('image') === true){
                        items = ['alignLeft', 'alignCenter', 'alignRight'];
                    }
                    setColorsSelected(null);
                    if(items.length > 0){
                        setBubbleItems(items);
                        return true;
                    }
                }}  tippyOptions={{ duration: 100 }}>
                    <div className={"atma-editor-bubble"} onClick={e => e.stopPropagation()}>
                        {
                            colorsSelected !== null ?
                                colors.map((itemColor, i) => {
                                    return ( <div className={'qcolors'} style={{ background: itemColor}} onClick={()=>{
                                        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 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 'color':
                                        //     if(colorsTabsActive === 'highlight'){
                                        //         editor.chain().focus().toggleHighlight({ color: colorsSelected }).run();
                                        //     }else{
                                        //         editor.chain().focus().unsetHighlight({ color: colorsSelected }).run();
                                        //         editor.commands.setColor(colorsSelected);
                                        //     }
                                        //     setColorsTabsActive('color');
                                        //     setColorsSelected('');
                                        //     setModalTitle('');
                                        //     setModalIsOpen(false);
                                        //     return;
                                        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();

                                            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 'file':
                                            uploadedPaths.map((file, i) => {
                                                editor
                                                    .chain().focus()
                                                    .extendMarkRange('link').setLink({
                                                        href: file.path,
                                                        target: '_blank',
                                                        download: true,
                                                        'data-size': '100 кб'
                                                    })
                                                    .insertContent('Example Text')
                                                    .run();
                                            });

                                            break
                                    }

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

export default QEditor;