import '@wangeditor/editor/dist/css/style.css' // 引入 css

import React, {
    useState, useEffect, forwardRef,
    useImperativeHandle,
} from 'react'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'


// 当前菜单排序和分组

function MyEditor(props, ref) {
    // editor 实例
    const [editor, setEditor] = useState(null)


    // 编辑器内容
    const [html, setHtml] = useState('<p></p>')


    // 工具栏配置
    const toolbarConfig = {
        excludeKeys: [
            'group-image', 'group-video'
        ]
    }

    // 编辑器配置
    const editorConfig = {
        placeholder: '请输入内容...',
    }


    const changeValue = (html) => {
        setHtml(html)
        props.onChange(html)
    }

    const onClear = () => setHtml('')
    // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
    useImperativeHandle(ref, () => ({
        // onCallback 就是暴露给父组件的方法
        onClear
    }));

    // 及时销毁 editor ，重要！
    useEffect(() => {
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        }
    }, [editor])

    return (
        <>
            <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
                <Toolbar
                    editor={editor}
                    defaultConfig={toolbarConfig}
                    mode="default"
                    style={{ borderBottom: '1px solid #ccc' }}
                />
                <Editor
                    defaultConfig={editorConfig}
                    value={html}
                    onCreated={setEditor}
                    onChange={editor => changeValue(editor.getHtml())}
                    mode="default"
                    style={{ height: '300px', overflowY: 'scroll' }}
                />
            </div>
        </>
    )
}

export default forwardRef(MyEditor)