import React from 'react'
import MarkdownIt from 'markdown-it'
import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
import MdEditor from 'react-markdown-editor-lite'
import 'react-markdown-editor-lite/lib/index.css'

const mdParser = new MarkdownIt()

const RighEditor = ({ value, onChange }) => {
  const [cValue, setValue] = useState(value)
  // 完成！
  function handleEditorChange({ text, html }) {
    setValue(text)
    onChange(JSON.stringify(html))
  }
  return (
    <ModalDragForm>
      <MdEditor
        style={{ height: '300px' }}
        value={cValue}
        renderHTML={text => mdParser.render(text)}
        onChange={handleEditorChange}
      />
    </ModalDragForm>
  )
}

export default RighEditor