我正在构建一个类似于medium.com上使用的编辑器。对于每个unstyled
块,我渲染一个自定义组件,其中包含编辑按钮以更改该部分的块类型。
然而,当我例如将部分更改为header-one
并点击返回按钮时,新块也是header-one
块。我希望看到新块是unstyled
而不是前一个块的相同类型。
关于如何做到这一点的任何想法?
修改
经过一番搜索和尝试后,我自己找到了解决方案!看来,执行此操作的最佳方法是在split-block
keyCommand被触发时插入新块。示例代码如下:
createEmptyBlock(editorState: Draft.EditorState) {
const newBlock = new Draft.ContentBlock({
key: Draft.genKey(),
type: "unstyled",
text: "",
characterList: Immutable.List()
})
const contentState = editorState.getCurrentContent()
const newBlockMap = contentState.getBlockMap().set(newBlock.getKey(), newBlock)
return Draft.EditorState.push(
editorState,
Draft.ContentState
.createFromBlockArray(newBlockMap.toArray())
.set('selectionAfter', contentState.getSelectionAfter().merge({
anchorKey: newBlock.getKey(),
anchorOffset: 0,
focusKey: newBlock.getKey(),
focusOffset: 0,
isBackward: false,
})) as Draft.ContentState,
"split-block"
)
}