Controlled component

Since v1.3.0, the editor can now be used as a controlled component with its editorState and onChange props, like a vanilla Draft.js editor. For example, with the useState hook:

import React, { useState } from "react"
import { EditorState } from "draft-js"
import { DraftailEditor, BLOCK_TYPE } from "draftail"

const MyEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty())

  return (
    <DraftailEditor
      editorState={editorState}
      onChange={setEditorState}
      blockTypes={[
        { type: BLOCK_TYPE.HEADER_THREE },
        { type: BLOCK_TYPE.UNORDERED_LIST_ITEM },
      ]}
    />
  )
}

The editorState prop must be set to a Draft.js EditorState instance, and onChange will be called instantaneously whenever needed by Draft.js to update the saved state.

Here is a small example of this in action: