Caret position not working as expected

[TeutaK]

Hi there,

I am using the react-live editor, but I have a bad experience while typing code.
When I enter a new line after writing some code, the caret position backs to one line up. It is a bad UX for the end user.
Here is a demo of my issue:

Screen.Recording.2023-03-28.at.10.55.07.AM.mov

Any help would be very appreciated!
Thanks in advance!

[mo-sharif]

I am having the same issue above😢

[mryechkin]

This is a duplicate of #308.

This issue has been around for awhile now. For what its worth, I've been using react-live-runner instead and it has been working well. Carriage return works as expected there.

[mo-sharif]

thanks! react-live-runner looks like a great alternative 👍

[carloskelly13]

Thanks for the bug report here, we'll look at getting this fixed up. I can also recreate this bad UX with the carriage return.

[carloskelly13]

This should be fixed in 4.1.1.

[mryechkin]

This should be fixed in 4.1.1.

Still happening for me unfortunately :(

[elchininet]

@carloskelly13,
This issue is not solved, as well as this one.
Just take two minutes of your time and try to code in one of the windows of the demo, you will quickly notice the bad experience.
Regards

[carloskelly13]

Hi 👋 We saw another bug and got it patched up in 4.1.2, please see the video below, if there are continued issues, please open another one with some recreation steps. Thanks!

240251832-0f081ce0-d19e-4187-8d01-c26e3ef156c5.mov

[elchininet]

@carloskelly13,

It is easy to reproduce, just follow these steps:

• Go to the demo
• Go to the second example and place your caret between the first and second parenthesis
• Hit enter
• Hit backspace

buggy.carriage.return.mp4

As I mentioned before, this could be easily fixed if use-editable is replaced in favour of react-simple-code-editor again, the bug is coming from there. I was using a patched version of the library that reverted that change without issues.

Maybe someone else want to open another issue, this has taken more than one year for me so I migrated to react-live-runner.

Regards

[carloskelly13]

That demo is legacy and not actively maintained. Please test the library and demo/docs site linked on GitHub. Thanks!

[elchininet]

Copied and pasted the code there

buggy.carriage.return.mp4

Just an advice, you should consider using react-simple-code-editor which is solid meanwhile you fix use-editable which has a lot of bugs related to carriage return.

[mryechkin]

4.1.2 looks to have fixed the carriage return issue with new line, but I now get an issue with it going back one character on the same line:

react-live-issue.mov

I'm going to echo @elchininet's sentiment about use-editable - these issues started happening ever since it was added.