Сделать редактор DraftJS управляемым Formik: строковое значение плохо конвертируется в EditorState

Question

Я использую редактор Reaction-draft-wysiwyg, состояние которого должно контролироваться Formik. Идея заключается в том, что значение Formik является строкой, поэтому состояние редактора преобразуется в HTML с помощью stateToHTML и устанавливается в качестве значения, а при получении из Formik оно преобразуется из HTML в EditorState. Значение, которое передается взад и вперед и не контролируется самим Редактором, имеет важное значение из-за возможности сброса формы с помощью методов Formik. Кроме того, значение необходимо отправить из формы в виде строки, серверная часть не должна знать, какой тип редактора используется в веб-интерфейсе.

Проблема в том, что, хотя строка с html хорошо передается в Formik и из нее, данные обновления идут неправильно. После обновления строки курсор возвращается в самое начало окна редактора (ввод?) И добавляет вновь напечатанную строку перед строкой. Похоже, я печатал справа налево. Однако клавиши Backspace и Delete работают так, как задумано.

Formik использует это как здесь

<Field name='wysiwyg' label='Wysiwyg' component={Editor} />

Так настроен редактор

const setEditorState = (html) => {
  const blocksFromHTML = convertFromHTML(html || '')
  if (blocksFromHTML.contentBlocks !== null) {
    const state = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks,
      blocksFromHTML.entityMap
    )
    return EditorState.createWithContent(state)
  }
  return EditorState.createEmpty()
}

class XXX extends react.Component {
onEditorStateChange = (editorState) => {
    const contentState = editorState.getCurrentContent()
    this.props.form.setFieldValue(this.props.field.name, stateToHTML(contentState)) //stateToHTML imported from draft-js-export-html 
  }


render () {
   return (
      <Editor
        editorState={setEditorState(this.props.field.value)}
        onEditorStateChange={this.onEditorStateChange}
        ...
      />
    )
  }
}

Answer 1

На всякий случай кто-то все еще ищет решение для интеграции DraftJS с Formik. Я нашел этот очень полезный проект codeandbox, который делает это.