QEditor.jsx

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 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'
import DragAndDrop from "./extensions/DragAndDrop";
import Webcamera from "./extensions/Webcamera";
//import Formula from './extensions/Formula'
import { useReactMediaRecorder } from "react-media-recorder";
import axios from "axios";

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

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

    const [innerModalType, setInnerModalType] = useState(null);
    const [embedContent, setEmbedContent] = useState('');
    const [uploaderUid, setUploaderUid] = useState('uid' + new Date());
    const [uploadedPaths, setUploadedPaths] = useState([]);
    const [modalIsOpen, setModalIsOpen] = useState(false);
    const [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 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({ screen: true });
    const [isRecord, setIsRecord] = useState(false);

    const videoRef = useRef(null);

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

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

    useEffect(() => {
        if (status === "recording" || status === "acquiring_media") {
            setIsRecord(true)
        } else if (status === "stopped"){
            setIsRecord(false)
        }
    }, [status])

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

    const 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', 'Загрузить видео')
        },
        webcamera: {
            title: 'Записать экран',
            onClick: () => modalOpener('webcamera', 'Записать экран')
        },
        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');
                editor.chain().focus();
            }
        },
        alignCenter: {
            title: 'По центру',
            onClick: () => {
                editor.commands.setTextAlign('center')
                editor.chain().focus();
            }
        },
        alignRight: {
            title: 'По правому краю',
            onClick: () => {
                editor.commands.setTextAlign('right');
                editor.chain().focus();
            }
        },
        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();
            }
        },
        highlight: {
            title: 'Цвет фона',
            onClick: () => setColorsSelected('highlight')
        },
        // 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,
            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"
            }),
            DragAndDrop.configure({
                linkUpload: uploadOptions.url
            }),
            Webcamera
        ],
        content: value,
        onUpdate: ({editor}) => onChange(editor.getHTML()),
        onFocus: ({editor})=>{
            let wrap = editor.options.element.closest('.atma-editor-wrap');

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

        }
    })

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

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

    const getUploader = ({ accept = '*', ...o }) => {
        let url = uploadOptions.url;

        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('&');
            }
        }

        return <Uploader
            key={uploaderUid}
            accept={ accept }
            action={ 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}
            modalType={ innerModalType }
        />
    }

    const saveScreenCust = async (fileBlob) => {
        console.log(fileBlob);
        setIsUploading(true)
        let blobData = await fetch(fileBlob).then((res) => res.blob());

        const data = new FormData();
        let file = new File([blobData], "name.mp4");
        data.append("file", file);
        console.log(blobData);

        const headers = {'Content-Type': 'multipart/form-data'};
        await axios.post(uploadOptions.url, data, {headers: headers} ).then(response => {
            if (response.data.state === "success"){
                console.log(response.data);
                setUploadedPaths(response.data)
            }
            setIsUploading(false)
        });
    };

    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: '*', afterParams: ['no_convert=1'] }) }</Fragment>
                )
            case 'webcamera':
                return (
                    <>
                    <Fragment>
                        <div className={"webwrap"}>
                            {
                                mediaBlobUrl ?
                                <video id={"id-video"} width={window.innerWidth / 2} height={window.innerHeight / 2} src={mediaBlobUrl} autoPlay controls /> : status === "recording" &&
                                    <video ref={videoRef} width={window.innerWidth / 2} height={window.innerHeight / 2} src={previewStream} autoPlay controls={false} />
                            }
                            <div className={"btn-video-wrap"}>
                                {
                                    isRecord ?
                                    <button className={"btn-video btn-video-stop"} onClick={stopRecording}>Остановить запись</button> : mediaBlobUrl ?
                                        (<>
                                            <button className={"btn-video btn-video-stop"} onClick={clearBlobUrl}>Перезаписать</button>
                                            <button className={"btn-video btn-video-record "} style={{ backgroundColor: isUploading && "#AAB2BD" }} disabled={isUploading} onClick={() => saveScreenCust(mediaBlobUrl)}>{isUploading ? "Загрузка..." : "Сохранить запись"}</button>
                                        </>) :
                                        <button className={"btn-video btn-video-record"} onClick={startRecording}>Начать запись</button>
                                }
                                {
                                    isRecord &&
                                    <button className={"btn-video btn-video-mute"} onClick={isAudioMuted ? unMuteAudio : muteAudio}>{isAudioMuted ? "Вернуть звук" : "Убрать звук"}</button>
                                }
                            </div>
                        </div>
                    </Fragment>
                </>
            )
            default:
                return <div>Пусто</div>
        }
    }

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

        switch(innerModalType){
            case 'video':
            case 'image':
                if(uploadOptions.url === null || uploadedPaths.length === 0){
                    isDisabled = true;
                }
                break;
            case '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}
        >
            <div className="atma-editor">
                <ToolBar
                    editor={editor}
                    {...{toolsOptions}}
                    {...{toolsLib}}

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

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

                    if(editor.isActive('image') === true){
                        items = ['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 ?
                                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{
                                        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 'webcamera':
                                            editor.chain().focus().setVideo({ src: uploadedPaths.file_path }).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':

                                            console.log(uploadedPaths, 'ejkwnferiugnuierwnguirne');

                                            uploadedPaths.map((file, i) => {
                                                console.log(file);

                                                editor
                                                    .chain().focus()
                                                    // .extendMarkRange('link').setLink({
                                                    //     href: file.path,
                                                    //     target: '_blank',
                                                    //     download: true,
                                                    //     'data-size': file.size
                                                    // })
                                                    .insertContent(`<a href="${file.path}" target="_blank" download="true" data-size="${file.size}">${file.name}</a>`)
                                                    .run();
                                            });
                                            break
                                    }

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

export default QEditor;