A problem about Draft when remove images by Backspace key

Finally I decide to report it after all my try. I do not know whether it’s a bug when you use backspace key to remove a image that created by AtomicBlockUtils. Draftjs just remove the atomic block in contentState but the image’s entity still in the EntityMap:

this is my code to insert a image:

hdl_addImage2EditerState(ediorState) {
    const contentState = ediorState.getCurrentContent();

    const contentStateWithEntity = contentState.createEntity(
      "IMAGE",
      "IMMUTABLE",
      { src: "https://avatars2.githubusercontent.com/u/9550456?v=4&s=460" }
    );
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
    const editorStateWithEntity = EditorState.set(ediorState, {
      currentContent: contentStateWithEntity
    });

    const newEditorState = AtomicBlockUtils.insertAtomicBlock(
      editorStateWithEntity,
      entityKey,
      ' '//can't remove this character because the cursor jumps before it....
    );
    return EditorState.forceSelection(
      newEditorState,
      newEditorState.getCurrentContent().getSelectionAfter()
    );
  }

and when I replace the ' ' with the image’s url:

const newEditorState = AtomicBlockUtils.insertAtomicBlock(
      editorStateWithEntity,
      entityKey,
      "https://avatars2.githubusercontent.com/u/9550456?v=4&s=460"
    );

you will see:

the browser is Chrome 62 the OS is win7 the vision of Draft is 0.10.4

and it’s similar happened in draft-js-plugin’s example…

[TeemoWan]

hi，希望能解决你的问题

1. remove entities of current atomic block

    const contentState = editorState.getCurrentContent();
    const withoutAtomicEntity = Modifier.removeRange(
      contentState,
      new SelectionState({
        anchorKey: atomicBlock.getKey(),
        anchorOffset: 0,
        focusKey: atomicBlock.getKey(),
        focusOffset: atomicBlock.getLength(),
      }),
      'backward',
    );

1. remove atomic block

      const blockMap = withoutAtomicEntity.getBlockMap().delete(atomicBlock.getKey());
      var withoutAtomic = withoutAtomicEntity.merge({
        blockMap,
        selectionAfter: selection,
      });

3.set EditorState

        return EditorState.push(
          editorState,
          withoutAtomic,
          'remove-range',
        );

[thibaudcolas]

I believe this is the same issue as #1354, #915, #483, (https://github.com/facebook/draft-js/issues/1681#issuecomment-371087387).

The solution is to use RichUtils.handleKeyCommand in the handleKeyCommand handler, so it can properly handle backspace on atomic blocks. Further details: https://github.com/facebook/draft-js/issues/1681#issuecomment-371143376.