Update editorState with two operations at once

Question

I am trying to split a word into two words when I enter the space bar. Every word in my text is an entity, so when I split a word in two, I need to update the text and create a new entity.

I am using the Modifier module for both updates.

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})

I am trying to update the editor state with two operations at once. They both work if the other one is not present. When the two are present, it only updates the last one.

Is there any way to update the text (split the word) and add the new entity to the entityMap?

score 3 · Accepted Answer · answered Apr 14 '17 at 13:27

As defined in the docs https://draftjs.org/docs/api-reference-editor-state.html#push, push is asking for 3 params: editorState, contentState and command.

I was doing it ok in editorStateAfterEntity passing the updated editorState parameter with editorStateAfterText, but I was ignoring the updated contentState.

So here is how it finally worked:

  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});

Update editorState with two operations at once

1 Answers1