Issue with the LiveEditor and carriage returns

[elchininet]

I installed the new version 3.0.0 and there is an issue with LiveEditor. To reproduce the issue, it is easier if you go directly to the demo and follow these steps:

1. Go to the Or just some JSX code! section
2. Place the caret at the end of the code (after the last > of the h3)
3. Try to create a new line hitting on Return
4. A new line is created
5. Try to remove that change with backspace key
6. The carriage goes back but the new line is not deleted
7. Try to delete the new line using the delete key
8. The new line is deleted but also the parentheses is moved
9. Try to reverse this change hitting return
10. The parentheses goes to the new line but indented
11. Try to remove the indentation with backspace
12. The carriage returns to the above line

It is very hard to write code with this behaviour. Just try to code for some time in a LiveEditor of the current demo and you will notice the really bad experience.

[elchininet]

I did a quick test and reverting the introduction of use-editable in the Editor file solves this issue.

[mryechkin]

Seeing this issue as well, and it's incredibly annoying for an end-user. Doesn't make for a nice experience while trying to type in some code

[elchininet]

As I've isolated this issue to use-editable, this issue there seems to be related:

FormidableLabs/use-editable#17

[greypants]

I noticed this as well. Here's a gif showing the bug:

[stefcameron]

I'm seeing similar behavior. It's very annoying. Didn't used to be like this. Debouncing the update to the LiveProvider's code prop helps a bit, but it doesn't solve the issue. Whenever the update finally gets applied to state, the cursor can sometimes (but frequently enough) get bumped a character or two, especially if the user had stopped typing is now moving the cursor around with the arrow keys (so the debounced function executes, code state updates, LiveEditor updates and problems ensue).