在DraftJS中将实体添加到其自己的块中

Question

因此，我正在尝试为我的项目创建一个相当简单的所见即所得BBCode编辑器，以此作为围绕DraftJS的一个机会。我一直在学习一些教程，并以react-rte为例(因为它有我需要的99%的功能，而且看起来相对简单易懂)。

我遇到的问题是react-rte内联插入图像实体(它在当前选择中添加一个空格，然后将一个条目绑定到该空格)：

const addEntity = (editorState, type, mutability = 'MUTABLE', data = {}) => {
    let currentContent = editorState.getCurrentContent();
    let selection = editorState.getSelection();
    currentContent = currentContent.createEntity(type, mutability, data);
    let entityKey = currentContent.getLastCreatedEntityKey();
    return Modifier.insertText(currentContent, selection, ' ', null, entityKey);
}

我希望每个图像(和视频一样)是在它自己的单独的块，使它没有其他东西可以被写入到该块。我已经在megadraft中找到了我想要的行为的一个例子，但是我无法通过它的代码找到正确的实现。

Answer 1

经过几个小时的试验和错误(以及大量的手册)，找到了解决方案。

const addAtomic = (editorState, type, mutability = 'MUTABLE', data = {}) => {
    let currentContent = editorState.getCurrentContent();
    let selection = editorState.getSelection();
    currentContent = currentContent.createEntity(type, mutability, data);
    let entityKey = currentContent.getLastCreatedEntityKey();
    const newState = EditorState.set(editorState, { currentContent: currentContent })
    return AtomicBlockUtils.insertAtomicBlock(newState, entityKey, ' ')
}