I'm trying to implement mentions within contenteditable div. I'm using external library called TributeJS (https://github.com/zurb/tribute). Mostly it is working fine, but there is an edge case if I write mentions together without space and in multiple lines and then try to delete them with backspace key, then at some point I cannot delete mentions anymore.

Mentions inside input use span with contenteditable="false" like this:

<span contenteditable="false" class="mention" data-id="user1">
  @<label class="mention-label">User 1</label>
</span>

I've recorded a video, so I can explain the problem easier: https://files.fm/f/ga5dak22b

And I've also created a Codepen to reproduce this issue: https://codepen.io/tilenhosnar/pen/powZqBw

This problem occurs for me in Chrome browser. I'm wondering if there is any way to "force" delete child HTML nodes in contenteditable div on backspace key? I've pretty much tried every solution I could find in the last few days but it is still happening.