Removing directive node is hard

If you create a custom directive, ie. like YouTube directive in examples and insert it into the editor, the node is really hard to remove from the editor content.

If using generic editor with children option, node can be removed by settings the cursor in the nested editor and pressing backspace. But if using generic directive without children option, it's almost impossible to remove added node from the editor. Sometimes I managed to remove it by selecting whole area and then pressing backspace. But that won't seem to work reliably if there isn't other text before and after node.

In my opinion, most user friendly functionality would be a possibility to set cursor on row below node and then pressing backspace. Not sure if related, but if trying to move cursor up and there is an directive/image/etc node, cursor just disappears. Also, clicking directive node should make it "active", which could then be deleted from the editor using backspace.

Start with the YouTube directive in the examples and reproduce removal in the generic editor with and without the children option. Investigate cursor movement, node selection, and Backspace behavior around directive nodes. Done means a directive can be selected or reached from the row below and removed reliably without disturbing surrounding content.