删除 DraftJS 中的块

Question

我正在使用 draft-js 并尝试将一个块的文本滚动到前一个块中。我让它部分工作，但我无法弄清楚如何删除第二个块。（CodeSandbox link 在底部）

qwerty         qwertyasdfg
asdfg    -->   zxcvb
zxcvb

我正在使用 Modifier 将下一个块的文本插入到第一个块中，这按预期工作。

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

但是，我不知道如何删除“下一个”块。查看 Google 和 Stack Overflow，我看到了两个不同的建议，但都不适合我。

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

每种方法的结果是

OPTION 1             OPTION 2
qwertyasdfg          qwertyasdfg
                     asdfg
zxcvb                zxcvb

这些是否接近正确？还是我完全错过了正确的方法？

这是一个CodeSandbox demo

Answer 1

原来 SelectionState 是选项 #1 的关键。显然它需要跨越区块边界。我在两边都测试了它并且它起作用了，但是让它刚好超过 block 的末尾和 next 的开始允许我消除插入步骤。

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

删除 DraftJS 中的块

Removing a block in DraftJS

draftjs