import React from 'react';
import { CKEditor as ReactCKEditor } from '@ckeditor/ckeditor5-react';
// @ts-ignore
const ClassicEditorInstance = () => import('../../dist/ckeditor');
export default class CKEditor extends React.Component {
    constructor(props) {
        super(props);
        this.state = { editor: null };
        this.editor = React.createRef();
        this.ignoreChange = false;
    }
    async componentDidMount() {
        this.setState({
            editor: await ClassicEditorInstance()
        });
    }
    shouldComponentUpdate(nextProps) {
        if (this.editor.current) {
            if (nextProps.value !== this.props.value) {
                const data = this.editor.current.editor.getData();
                if (data !== nextProps.value) {
                    this.ignoreChange = true;
                    try {
                        this.editor.current.editor.setData(nextProps.value);
                    }
                    finally {
                        this.ignoreChange = false;
                    }
                }
            }
            return false;
        }
        return true;
    }
    render() {
        const ClassicEditor = this.state.editor;
        if (!ClassicEditor)
            return null;
        return React.createElement(ReactCKEditor, { ref: this.editor, editor: ClassicEditor.default, config: this.props.config, data: this.props.value || '', onChange: (event, editor) => {
                if (this.ignoreChange)
                    return;
                const data = editor.getData();
                if ((data || '') !== (this.props.value || '')) {
                    this.props.onChange(data);
                }
            } });
    }
}
