draftjs - 一次使用两个操作更新 editorState

Question

当我进入space酒吧时，我试图将一个单词分成两个单词。我的文本中的每个单词都是一个实体，所以当我将一个单词一分为二时，我需要更新文本并创建一个新实体。

我正在使用该Modifier模块进行两个更新。

const editorStateAfterText = 
  EditorState.push(
    editorState,
    Modifier.insertText(
      contentState,
      selectionState,
      ' ',
    ),
    command,
  );
const editorStateAfterEntity =
  EditorState.push(
    editorStateAfterText,
    Modifier.applyEntity(
      contentState,
      newSelectionState,
      newEntityKey
    ),
    command,
  );
this.setState({editorState: editorStateAfterEntity})

我正在尝试一次使用两个操作更新编辑器状态。如果另一个不存在，它们都可以工作。当这两个存在时，它只更新最后一个。

有没有办法更新文本（拆分单词）并将新实体添加到entityMap？

Answer 1

如文档https://draftjs.org/docs/api-reference-editor-state.html#push中所定义，push要求 3 个参数editorState：contentState和command.

我在editorStateAfterEntity传递更新的editorState参数时做得很好editorStateAfterText，但我忽略了更新的contentState.

所以这就是它最终的工作方式：

  const contentAfterText = Modifier.insertText(
    contentState,
    selectionState,
    ' ',
  );
  const editorStateAfterText = EditorState.push(
    editorState,
    contentAfterText,
    command,
  );
  const contentStateAfterTextAndEntity = Modifier.applyEntity(
    contentAfterText,
    newSelectionState,
    newEntityKey
  );
  const editorStateAfterTextAndEntity = EditorState.push(
    editorStateAfterText,
    contentStateAfterTextAndEntity,
    command,
  );
  this.setState({editorState: editorStateAfterTextAndEntity});