How to delete a tag and its content with one backspace

I’m trying to delete a rich text editor for our app, but I have a special use case that I need to be sure I can achieve.

I want to be able to create a sort of hyperlink structure in documents with the following flow.

Select a word in the editor, click a button this should transform the selection into something that is effectively a single character in the document, in that the selected text has been

  • been replaced with some “single character” tag
  • the value has become a property of that tag

If subsequently you press backspace immediately after the item then everything gets deleted in one go, The delete functionality is like the mentions you see at https://www.slatejs.org/examples/mentions

Is the creation process possible? Is the deletion process possible?

Yes, this is possible—the ‘tag’ would be modeled as an inline node with an attribute holding its value, much like an inline image or the dinosaur nodes in this example.