ianstormtaylor
commented
6 years ago Hey @AlexeiAndreev, this is actually working normally, although I can see how that is frustrating. But to give you the background...
When you add those two contenteditable={false} elements, they are basically outside of Slate's concern, so the editing takes place as if they weren't there. And when they're not there, you'll end up with editing behaviors exactly as the GIF shows, because there's no way to distinguish between the last position in an inline, and the first position in a text node, so Slate chooses the text node. (It has to choose the text node for browser consistency if I remember correctly.)
Take a look at: https://jsfiddle.net/2su6djxu/
The code is basically the Links example, but I added spans (with contentEditable={false}) around the content of the link node. (Let me know if this is not supported.)
Inconsistency: If you put the cursor after the first $, then you can insert text into the inline node just fine. But if you put the cursor right before the last $, text is inserted outside the node. Furthermore, while moving text cursor to the right, it'll skip the position right before $, while when moving the text cursor to the left, it'll visit that position.
Some background info on what I'm trying to do:
I want an inline node where you can easily add text at the beginning and at the end.
Mac OS X, Chrome, SlateJS v0.27.2