bug with selection around inline void node edges

[AlexeiAndreev]

Here is the JSFiddle: https://jsfiddle.net/f2t6vd6z/

Basically I'm inserting an inline node (IfStatement) that has a few Void nodes inside it. After insertion, if you just click Left to go character by character, you'll see errors. It's not clear if I'm doing something incorrectly or if this is a bug.

[Rebulus]

@AlexeiAndreev Hi. Could you check your example with the last version of Slate. You can just open your link and try to reproduce errors.
I can't reproduce it, maybe, I do something wrong.
Please, looks at screencast:

[AlexeiAndreev]

Oh apparently I didn't click the "Update button" when I forked. This should be updated: https://jsfiddle.net/f2t6vd6z/1/

[Rebulus]

@AlexeiAndreev Thank you. Currently, I see 😊

Uncaught DOMException: Failed to execute 'setStart' on 'Range': The offset -1 is larger than or equal to the node's length (1).
    at Content.updateSelection (https://npmcdn.com/[email protected]/dist/slate.js:32587:11)
    at Content.componentDidUpdate (https://npmcdn.com/[email protected]/dist/slate.js:32507:12)
    at measureLifeCyclePerf (https://npmcdn.com/[email protected]/dist/react-dom.js:4529:12)
    at https://npmcdn.com/[email protected]/dist/react-dom.js:5183:11
    at CallbackQueue.notifyAll (https://npmcdn.com/[email protected]/dist/react-dom.js:948:22)
    at ReactReconcileTransaction.close (https://npmcdn.com/[email protected]/dist/react-dom.js:11398:26)
    at ReactReconcileTransaction.closeAll (https://npmcdn.com/[email protected]/dist/react-dom.js:14790:25)
    at ReactReconcileTransaction.perform (https://npmcdn.com/[email protected]/dist/react-dom.js:14737:16)
    at ReactUpdatesFlushTransaction.perform (https://npmcdn.com/[email protected]/dist/react-dom.js:14724:20)
    at ReactUpdatesFlushTransaction.perform (https://npmcdn.com/[email protected]/dist/react-dom.js:12844:32)

[AlexeiAndreev]

Yes. And note how strangely the cursor moves. Sometimes it skips characters.

[echenley]

Wanted to cross reference a similar issue with the Medium editor. This is probably a separate issue, but apparently similar errors can be caused by certain browser extensions that automatically alter your input. I was able to reproduce this error using this plugin.

Edit:

Draft-js seems to just accept that range.setStart() will sometimes throw errors.

[crazylive]

i think you used table in html.
i get this bug as: https://gist.github.com/crazylive/911953db4ca90db3c47b3dfb6133e515

and i don't know as it works but simple solution is wrap ckeditor to table, sample:
https://gist.github.com/crazylive/040aa95f4d980230cd776a60ff00603a

[ianstormtaylor]

This issue hasn't had a response in a while, and it's unclear if it's still present in the latest versions of Slate. To keep the issues easier to manage, since there are so many being opened every day, I'm going to close this old one out.

But if you notice that the bug is still happening, please feel free to comment and it can be revisited. It might be an edge case that not many people run into, in which case the fastest way to get it fixed would probably be to write a pull request for it.

Thanks for understanding!