Draftjs 试图删除一个原子块

Question

我正在尝试使用 Modifier.removeRange 从 draftjs 编辑器中删除原子块。据我所知，我正在传递所有正确的参数，但用于删除的 SelectionState 永远不会被删除。这是我的代码。这也添加了一个新的原子块。那部分工作正常，它是 returns 我传入的相同 contentState 的删除方面。

upload_block_selection_state 是要移除的 SelectionState 对象。该对象在渲染时从 editorState.getSelection() 获得。看起来像这样。

upload_block_selection_state = {
 anchorKey: "c1kpk",
 anchorOffset: 0,
 focusKey: "c1kpk",
 focusOffset: 0,
 isBackward: false
}

这里是应该删除上传块然后添加新块的函数。添加作品，删除什么都不做。

function addAndRemoveMediaBlock(
    entityURL,
    entityType,
    editorState,
    setEditorState,
    upload_block_selection_state
){
    const contentBeforeAtomicBlock      = editorState.getCurrentContent();
    const contentAfterSelectionRemoval  = Modifier.removeRange(
        contentBeforeAtomicBlock,
        upload_block_selection_state,
        'forward'
    );


    const contentStateWithEntity        = contentAfterSelectionRemoval.createEntity(entityType, 'IMMUTABLE', { src: entityURL });
    const entityKey                     = contentStateWithEntity.getLastCreatedEntityKey();
    const editorStateAfterAtomicBlock   = AtomicBlockUtils.insertAtomicBlock(
        editorState,
        entityKey,
        entityKey
    );

    /* 
        below here relevant only to removing the empty block.  
        */    
    const selectionStateBeforeAtomicBlock = editorState.getSelection();
    const anchorKeyBeforeAtomicBlock      = selectionStateBeforeAtomicBlock.getAnchorKey();
    const contentAfterAtomicBlock         = editorStateAfterAtomicBlock.getCurrentContent();
    const blockSelectedBefore             = contentAfterAtomicBlock.getBlockForKey(anchorKeyBeforeAtomicBlock);

    const finalEditorState = (() => {
        if(blockSelectedBefore.getLength() === 0){
            const keyBefore                    = blockSelectedBefore.getKey();
            const newBlockMap                  = contentAfterAtomicBlock.blockMap.delete(keyBefore);
            const contentWithoutEmptyBlock     = contentAfterAtomicBlock.set('blockMap', newBlockMap);
            const editorStateWithoutEmptyBlock = EditorState.push(editorStateAfterAtomicBlock, contentWithoutEmptyBlock, 'remove-block');
            return EditorState.forceSelection(editorStateWithoutEmptyBlock, contentWithoutEmptyBlock.getSelectionAfter());
        }else{
            return editorStateAfterAtomicBlock;
        }
    })();
    setEditorState({
        editorState: finalEditorState,
    });
};

Answer 1

如果任何其他参数都可以，将 focusOffset 设置为 1 应该可以。

Answer 2

我明白了。

const contentAfterSelectionRemoval  = contentBeforeAtomicBlock.blockMap.delete(blockToRemoveKey);

这似乎是不可变状态下的反模式，所以我最终从另一个角度解决了这个问题，并没有真正使用这个可行的解决方案。

Draftjs 试图删除一个原子块

Draftjs trying to remove an atomic block

javascript

reactjs

draftjs