QEditor.jsx

import React, { Fragment } from 'react'
import ReactQuill, { Quill } from 'react-quill'
import './index.scss'
import 'react-quill/dist/quill.snow.css'
import "katex/dist/katex.min.css"
import ImageBlot from "./blots/ImageBlot"
import VideoBlot from "./blots/VideoBlot"
import VideoLocalBlot from "./blots/VideoLocalBlot"
import EditorModal from "./components/EditorModal"
import Uploader from "./components/Uploader"
import BlotFormatter from 'quill-blot-formatter'
import ResizeImageBlot from "./blots/ResizeImageBlot"
import katex from "katex";

export default class QEditor extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            init: false,
            modalIsOpen: false,
            innerModalType: null,
            quillRef: null,
            uploadedPaths: [],
            uploaderUid: 'uid' + new Date(),
            embedContent: '',
            focusedIndex: 0
        }

        Quill.register('formats/video', VideoBlot)
        Quill.register('formats/videoLocal', VideoLocalBlot)
        Quill.register('modules/blotFormatter', BlotFormatter)
        Quill.register('formats/image', ImageBlot)
    }

    componentDidMount () {
        this.setState({
            init: true
        });

        if(window.checkOptimizeVideo === undefined){
            window.checkOptimizeVideo = setInterval(()=>{
                const children = [...document.getElementsByTagName('video')];

                if(children.length > 0){
                    children.forEach((video, i) => {
                        if(video.duration === 2.48){
                            video.setAttribute('src', video.getAttribute('src') + `?${Date.now()/1000}`)
                        }
                    })
                }
            }, 3000);
        }
    }

    modules = {
        toolbar: {
            container: [
                [{header: [2, 3, 4, false]}],
                ['bold', 'italic', 'underline', 'strike', 'blockquote'],
                [
                    {list: 'ordered'},
                    {list: 'bullet'},
                    {indent: '-1'},
                    {indent: '+1'}
                ],
                [{align: []}, {color: []}, {background: []}],
                ['link', 'image', 'video', 'videoLocal'],
                ['formula'],
                ['clean']
            ],

            handlers: {
                video: (a) => {
                    const quill = this.quillRef.getEditor();
                    let range = quill.getSelection();
                    let index = range ? range.index : 0;

                    this.setState(
                        {
                            innerModalType: 'video',
                            focusedIndex: index
                        },
                        () => this.editorModal.show({title: 'Видео по ссылке'})
                    )
                },
                videoLocal: (a) => {
                    const quill = this.quillRef.getEditor();
                    let range = quill.getSelection();
                    let index = range ? range.index : 0;


                    this.setState({
                        innerModalType: 'videoLocal',
                        focusedIndex: index
                    }, () => this.editorModal.show({title: 'Загрузить видео'}));
                },
                image: (a) => {
                    const quill = this.quillRef.getEditor();
                    let range = quill.getSelection();
                    let index = range ? range.index : 0;

                    this.setState({
                        innerModalType: 'image',
                        focusedIndex: index
                    }, () => this.editorModal.show({title: 'Загрузить изображение'}));
                }
            }
        },
        blotFormatter: {
            specs: [ ResizeImageBlot ],
        }
    }

    formats = [
        'header',
        'bold', 'italic', 'underline', 'strike', 'blockquote',
        'list', 'bullet', 'indent',
        'align',
        'link', 'image', 'video', 'color', 'background', 'videoLocal',
        'formula',
    ]

    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>
        )
    }

    getInnerModal () {
        switch (this.state.innerModalType) {
            case 'video':
                return (
                    <Fragment>
                        <input type="text" value={this.state.embedContent} placeholder={'https://'} onInput={(e) => {
                            this.setState({
                                embedContent: 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 'videoLocal':
                return (
                    <Fragment>
                        <Uploader
                            key={this.state.uploaderUid}
                            accept={'video/*'}
                            action={ this.props.uploadOptions.url }
                            errorMessage={ this.props.uploadOptions.errorMessage }
                            onSuccess={(file) => {
                                let uploadedPaths = this.state.uploadedPaths;

                                uploadedPaths.push(file);
                                this.setState({uploadedPaths});
                            }}
                            multiple={true}
                        />
                    </Fragment>
                )
            case 'image':
                return (
                    <Fragment>
                        <Uploader
                            key={this.state.uploaderUid}
                            accept={'image/*'}
                            action={ this.props.uploadOptions.url }
                            errorMessage={ this.props.uploadOptions.errorMessage }
                            onSuccess={(file) => {
                                let uploadedPaths = this.state.uploadedPaths;

                                uploadedPaths.push(file);
                                this.setState({uploadedPaths});
                            }}
                            multiple={true}
                        />
                    </Fragment>
                )
            default:
                return <div>Пусто</div>
        }
    }

    quillInsert () {
        const quill = this.quillRef.getEditor();
        let range = quill.getSelection();
        let index = range ? range.index : 0;

        if(this.state.focusedIndex > 0){
            index = this.state.focusedIndex;
        }

        switch (this.state.innerModalType) {
            case 'image':
            case 'videoLocal':
                this.state.uploadedPaths.map((file, i) => {
                    quill.insertEmbed(index, this.state.innerModalType, file.path, Quill.sources.USER);
                    quill.setSelection(index + 1);
                });
                break
            default:
                quill.insertEmbed(index, this.state.innerModalType, this.state.embedContent, Quill.sources.USER);
                quill.setSelection(index + 1);
        }

        this.setState({
            uploaderUid: `uid${new Date()}`,
            embedContent: '',
            uplodedPaths: [],
            focusedIndex: 0
        }, () => this.editorModal.hide());
    }

    isDisabledAction(){
        let { innerModalType, uploadedPaths, embedContent } = this.state;
        let isDisabled = false;

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

    render () {
        let {init, innerModalType, modalIsOpen} = this.state;
        let { value, style } = this.props;

        window.katex = katex;

        if ( !this.state.init) {
            return null;
        }
        return (
            <Fragment>
                <div className="atma-editor-wrap" style={style}>
                    <div className={'atma-editor'} data-lang={ this.props.lang ? this.props.lang : 'ru' }>
                        <ReactQuill
                            ref={ref => this.quillRef = ref}
                            defaultValue={value}
                            theme="snow"
                            onChange={value => {
                                this.props.onChange(value)
                            }}
                            modules={this.modules}
                            formats={this.formats}
                            onChangeSelection={(range, source, editor) => {
                                // console.log(range, source, editor.getText());
                            }}
                            scrollingContainer={'html'}
                        />
                    </div>
                    <EditorModal
                        isOpen={modalIsOpen}
                        ref={ref => this.editorModal = ref}
                    >
                        {this.getInnerModal()}
                        {this.buildActionsModal([
                            {
                                title: 'Отмена',
                                className: ' atma-editor-cancel',
                                onClick: () => {
                                    const quill = this.quillRef.getEditor();
                                    let range = quill.getSelection();
                                    let index = range ? range.index : 0;

                                    this.setState(
                                        {
                                            uploaderUid: `uid${new Date()}`,
                                            uploadedPaths: []
                                        },
                                        () => this.editorModal.hide()
                                    )
                                }
                            },
                            {
                                title: 'Вставить',
                                className: ' atma-editor-complete',
                                onClick: () => this.quillInsert(),
                                disabled: this.isDisabledAction()
                            }
                        ])
                        }
                    </EditorModal>
                </div>
            </Fragment>
        )
    }
}

QEditor.defaultProps = {
    onChange: ()=>{},
    lang: 'ru',
    uploadOptions: {
        url: null,
        errorMessage: 'Загрузка временно невозможна'
    },
    style: {}
}