一次用两个操作更新 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 中用 editorStateAfterText 传递更新的 editorState 参数时做得很好，但我忽略了更新的 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});

一次用两个操作更新 editorState

Update editorState with two operations at once

draftjs

draft-js-plugins