QEditor.jsx

import React, { Fragment } from 'react'
import ReactQuill, { Quill } from 'react-quill';
import './index.scss';
import 'react-quill/dist/quill.snow.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 "katex/dist/katex.min.css";
import ImageResize from "quill-image-resize-module-react";
import BlotFormatter from 'quill-blot-formatter';
import katex from "katex";


Quill.register('modules/blotFormatter', BlotFormatter);



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: ''
        }

        Quill.register('formats/video', VideoBlot)
        Quill.register('formats/videoLocal', VideoLocalBlot)
        // Quill.register('modules/imageResize', ImageResize)
        Quill.register('formats/image', ImageBlot)

    }

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

    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) => {
                    this.setState(
                        {
                            innerModalType: 'video'
                        },
                        () => this.editorModal.show({title: 'Видео по ссылке'})
                    )
                },
                videoLocal: () => {
                    this.setState({
                        innerModalType: 'videoLocal'
                    }, () => this.editorModal.show({title: 'Загрузить видео'}));
                },
                image: (a) => {

                    console.log(a);

                    this.setState({
                        innerModalType: 'image'
                    }, () => this.editorModal.show({title: 'Загрузить изображение'}));
                }
            }
        },
        // imageResize: {
        //     parchment: Quill.import("parchment"),
        //     modules: ["Resize", "DisplaySize"]
        // },
        blotFormatter: {}
        /* clipboard: {
            matchers: [
                ['IMG', (node, delta)=>{

                    console.log(delta)



                    return delta.compose(new Delta().retain(delta.length(), { width: 100, title: 'ekwgon' }));
                }]
            ]
        } */
    }

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

        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);
                    quill.blur();
                });
                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: ''
        }, () => this.editorModal.hide());
    }

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

        window.katex = katex;

        if ( !this.state.init) {
            return null;
        }
        return (
            <Fragment>
                <div className="atma-editor-wrap" style={{maxWidth}}>
                    <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());
                            }}
                        />
                    </div>
                    <EditorModal
                        isOpen={modalIsOpen}
                        ref={ref => this.editorModal = ref}
                    >
                        {this.getInnerModal()}
                        {this.buildActionsModal([
                            {
                                title: 'Отмена',
                                className: ' atma-editor-cancel',
                                onClick: () => {
                                    this.setState(
                                        {
                                            uploaderUid: `uid${new Date()}`
                                        },
                                        () => this.editorModal.hide()
                                    )
                                }
                            },
                            {
                                title: 'Вставить',
                                className: ' atma-editor-complete',
                                onClick: () => this.quillInsert(),
                                disabled: (this.props.uploadOptions.url === null && (innerModalType === 'videoLocal' || innerModalType === 'image'))
                            }
                        ])
                        }
                    </EditorModal>
                </div>
            </Fragment>
        )
    }
}

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