Image delete keep entity into state

When deleting an image, the entity remains binded to the block above into the entityRanges and the entity is not removed from the entityMap. https://codesandbox.io/s/4ql8746pl7 Step to reproduce:

• delete the image
• log the state in console with the proper button

state before:

{
  "entityMap": {
    "0": {
      "type": "image",
      "mutability": "IMMUTABLE",
      "data": {
        "src": "https://www.draft-js-plugins.com/images/canada-landscape-small.jpg"
      }
    }
  },
  "blocks": [
    {
      "key": "9gm3s",
      "text": "You can have images in your text field. This is a very rudimentary example, but you can enhance the image plugin with resizing, focus or alignment plugins.",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "ov7r",
      "text": " ",
      "type": "atomic",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [
        {
          "offset": 0,
          "length": 1,
          "key": 0
        }
      ],
      "data": {}
    },
    {
      "key": "e23a8",
      "text": "See advanced examples further down …",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    }
  ]
}

state after:

{
  "entityMap": {
    "0": {
      "type": "image",
      "mutability": "IMMUTABLE",
      "data": {
        "src": "https://www.draft-js-plugins.com/images/canada-landscape-small.jpg"
      }
    }
  },
  "blocks": [
    {
      "key": "9gm3s",
      "text": "You can have images in your text field. This is a very rudimentary example, but you can enhance the image plugin with resizing, focus or alignment plugins. See advanced examples further down …",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [
        {
          "offset": 155,
          "length": 1,
          "key": 0
        }
      ],
      "data": {}
    }
  ]
}

i noticed that in the draft-js media example this didn’t happen, but for now I’ve not been able to solve the problem

[khsily]

It’s not a real bug-fix but i fixed it like this as a tricky hack.

 onChange(editorState) {
        let newEditorState = editorState;

        const content = editorState.getCurrentContent();
        const key = editorState.getSelection().getFocusKey();
        const type = content.getBlockForKey(key).getType();

        if (type === 'atomic') {
            const keyAfter = content.getKeyAfter(key);
            const newSelection = SelectionState.createEmpty(keyAfter);
            newEditorState = EditorState.forceSelection(editorState, newSelection);
        }

        this.setState({ editorState: newEditorState });
};

handleKeyCommand(command, editorState) {
        const newContent = RichUtils.handleKeyCommand(editorState, command);
        if (newContent) {
            this.onChange(newContent);
            return 'handled';
        } else {
            return 'not-handled';
        }
}

I just tried to move cursor after the atomic block when it is focused so that I could delete images without the bug.

[kalimantos]

I found a solution but it doesn’t solve the problem at all. Adding

handleKeyCommand: (command, _, { getEditorState, setEditorState }) => {
  const newState = RichUtils.handleKeyCommand(getEditorState(), command);
  if (newState) {
    setEditorState(newState);
    return 'handled';
  }
  return 'not-handled';
},

to the returned object of image plugin it solves the problem. But i think this happens with all the atomic blocks, so putting this code in image-plugin could not be the better solution. The same problem also happen when using the focus plugin and deleting the image when is focused and this “quick fix” doesn’t solve that.

Anyone have some idea where is the best place to fix them? And how fix the problem also for the focus plugin without having some conflicts between the 2 fix?