Draft-js: A problem about Draft when remove images by Backspace key

[Char-Ten]

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...

[Char-Ten]

and please forgive me for my poor English....

[edmondnyaigoti]

Same issue, here any solution @Char-Ten

[evansque]

same issue here too!

[Char-Ten]

@edmondnyaigoti no....

[evansque]

well the problem is that the entity is not removed after the block is removed on backspace

[Char-Ten]

@evansque the atomic block is removed but the text we set to atomic isn't removed. so the image data still consist in entity map....

[Char-Ten]

@edmondnyaigoti And maybe you can insert text like '![img](img-src)'.Then use Decorators to render the text as a component like

<i style={{
    display:'block',
    height:'300px',
    width:'400px',
    backgroundImage:`url(${imgSrc})`,
    backgroundSize:'100% 100%',
    color:'transparent'
}}>img<i>

And you set 'IMMUTABLE' for the text so that you can remove this text quickly on backspace.
I use this way to insert emoji.
but it's bad when you need to insert an unknow size image

[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',
        );

[squirmsound]

@TeemoWan can you show this in working practice? I'm assuming this is your fix?

[Azleal]

encountered the same issue... is there a fix?

[Char-Ten]

I....I gave out draft-js.

[claudiopro]

Hi @Char-Ten, I'm sorry that it took us so long to reply to your issue, and you decided to give up on Draft.js. I'll reopen and investigate.

[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.

[carmon]

Thanks @thibaudcolas, that solved it ;)

[RoddyGlitchh]

I believe this is the same issue as #1354, #915, (#1681 (comment)).

The solution is to use RichUtils.handleKeyCommand in the handleKeyCommand handler, so it can properly handle backspace on atomic blocks. Further details: #1681 (comment).

This solved the issue. Thanks @thibaudcolas