import React, { useCallback, forwardRef, useEffect } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { makeStyles } from '@material-ui/core';
import clsx from 'clsx';
const useStyles = makeStyles((theme) => ({
    editor: {
        '& .ck-editor__main > .ck-editor__editable_inline': {
            height: (props) => (props.height ? props.height : 300)
        }
    }
}));
export const CkRichEditor = (props) => {
    const { includeToolbar = true, data, readOnly = false, handleChange, placeholder, editorRef, isUsingRef = false, classes: classProps } = props;
    const classes = useStyles(props);
    const { editor } = classProps || {};
    const toolbar = includeToolbar
        ? [
            'heading',
            '|',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'blockQuote'
        ]
        : [];
    const handleBodyChange = useCallback((event, editor) => {
        if (!readOnly) {
            const data = editor.getData();
            if (handleChange) {
                handleChange(data);
            }
        }
    }, [handleChange, readOnly]);
    useEffect(() => { }, [editorRef]);
    return (React.createElement("div", { className: clsx(classes.editor, editor) }, React.createElement(CKEditor, { editor: ClassicEditor, disabled: readOnly, data: data, config: {
            toolbar: toolbar,
            placeholder: placeholder
        }, onChange: handleBodyChange, onReady: (editor) => {
            if (isUsingRef) {
                editorRef.current = editor;
            }
        } })));
};
//# sourceMappingURL=CkRichEditor.js.map