Removing a block in DraftJS

Question

I am working with draft-js and trying to roll text of a block into the previous block. I have it partially working, but I am unable figure out how to remove the second block. (CodeSandbox link at bottom)

qwerty         qwertyasdfg
asdfg    -->   zxcvb
zxcvb

I am using Modifier to insert the next block's text into the first, which is working as expected.

const text = next.getText();
const pos = block.getText().length;
const insertSelection = SelectionState.createEmpty(block.getKey()).merge({
  anchorOffset: pos,
  focusOffset: pos
});
let newContentState = Modifier.insertText(
  contentState,
  insertSelection,
  text
);

But, I can't figure out how to remove the "next" block. Looking on Google and Stack Overflow, I have seen two different suggestions, neither of which work for me.

const removeSelection = SelectionState.createEmpty(next.getKey()).merge({
  focusOffset: text.length
});

// ---- OPTION 1 ----
newContentState = Modifier.removeRange(
  newContentState,
  removeSelection,
  "forward" // "backward"
);

// ---- OPTION 2 ----
newContentState = Modifier.applyEntity(
  newContentState,
  removeSelection,
  null
);

The outcome of each approach is

OPTION 1             OPTION 2
qwertyasdfg          qwertyasdfg
                     asdfg
zxcvb                zxcvb

Are either of these close to correct? Or am I completely missing the right approach?

Here is a CodeSandbox demo

Answer 1

Turns out the SelectionState was key for Option #1. Apparently it needs to cross the block boundary. I tested it on either side and it worked, but having it go just over the end of block and beginning of next allowed me to eliminate the insert step.

const removeSelection = new SelectionState({
  anchorKey: block.getKey(),
  anchorOffset: block.getText().length,
  focusKey: next.getKey(),
  focusOffset: 0
});

let newContentState = Modifier.removeRange(
  contentState,
  removeSelection,
  "forward"
);

Solution in CodeSandbox