Repository navigation
Issue with the LiveEditor and carriage returns #308
Description
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:
- Go to the
Or just some JSX code!section - Place the caret at the end of the code (after the last
>of theh3) - Try to create a new line hitting on Return
- A new line is created
- Try to remove that change with
backspacekey - The carriage goes back but the new line is not deleted
- Try to delete the new line using the
deletekey - The new line is deleted but also the parentheses is moved
- Try to reverse this change hitting return
- The parentheses goes to the new line but indented
- Try to remove the indentation with
backspace - 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.
Reacted by Dan Tello, Lukáš and Mykhaylo Ryechkin
Activity
elchininet commentedon Mar 24, 2022
I did a quick test and reverting the introduction of use-editable in the Editor file solves this issue.
mryechkin commentedon May 24, 2022
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 commentedon Jun 3, 2022
As I've isolated this issue to
use-editable, this issue there seems to be related:FormidableLabs/use-editable#17
greypants commentedon Sep 27, 2022
I noticed this as well. Here's a gif showing the bug:
stefcameron commentedon Mar 6, 2023
I'm seeing similar behavior. It's very annoying. Didn't used to be like this. Debouncing the update to the
LiveProvider'scodeprop 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).