import { Editor } from '@draft-js-modules/editor'
import { EditorState } from 'draft-js'
import 'draft-js/dist/Draft.css'
import React, { useCallback, useRef, useState } from 'react'

const modules = []

function DraftEditor() {
  const store = useRef(null)
  const [editorState, setEditorState] = useState(EditorState.createEmpty())

  const onClick = useCallback(() => {
    store.current.getEditor().focus()
  }, [])

  const onChange = useCallback(editorState => {
    setEditorState(editorState)
  }, [])

  return (
    <div onClick={onClick}>
      <Editor
        editorState={editorState}
        onChange={onChange}
        placeholder="Editor for Draft.js Modules"
        modules={modules}
        store={store}
      />
    </div>
  )
}

export default DraftEditor