我正在开发一个自定义的 draft.js 插件,该插件在其中插入一个带有 GIF 的原子块。我首先复制Draft.js 图像插件,因为它几乎相同。我的插件可以正常工作,但有一个问题我不确定如何最好地解决。
要插入 GIF,我将按照 Image Plugin 中的示例addImage Modifier进行操作。但是,这总是在当前选择之后创建一个新的原子块。如果当前块是空的,我想把 GIF 放在那里。
这是我的修饰符函数的样子:
const addGiphy = (editorState, giphyId) => {
const contentState = editorState.getCurrentContent();
// This creates the new Giphy entity
const contentStateWithEntity = contentState.createEntity("GIPHY", "IMMUTABLE", {
giphyId
});
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
// Work out where the selection is
const currentSelection = editorState.getSelection();
const currentKey = currentSelection.getStartKey();
const currentBlock = editorState.getCurrentContent().getBlockForKey(currentKey);
let newEditorState;
if (currentBlock.getType() === "unstyled" && currentBlock.getText() === "") {
// Current line is empty, we should convert to a gif atomic block
// <INSERT MAGIC HERE>
} else {
// There's stuff here, lets create a new block
newEditorState = AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, " ");
}
return EditorState.forceSelection(
newEditorState,
newEditorState.getCurrentContent().getSelectionAfter()
);
};
我不确定如何处理将当前块转换为原子块的情况。这是 Draft.js 的最佳实践吗?或者,我最好总是插入一个新块然后删除空块?
为清楚起见,Image Plugin 中也存在同样的问题,这不是我介绍的内容。