I'm trying to write an editor where the user can have static contenteditable="false" elements within an contenteditable="true" div. For example to have an image or a link within flowing text. I have seen editors do this where the static elements are selectable with key arrows. If you stand to the left side of the static element and press the right arrow, then the static element gets selected, which may be indicated with a border around it. An example of this is the trix editor.
How is this achieved? The default behaviour is for the caret to jump over the static element, as shown in this jsfiddle, code also shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<div contenteditable="true">
foo
<span contenteditable=false>
block 1
</span>
bar
</div>
</body>