Caret position not working as expected

Question

Caret position not working as expected

TeutaK opened this issue a year ago · comments

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 · Answer 1 · Mon Apr 17 2023 05:18:28 GMT+0800 (China Standard Time)

I am having the same issue above😢

Mykhaylo Ryechkin · Answer 2 · Tue Apr 25 2023 02:41:23 GMT+0800 (China Standard Time)

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 · Answer 3 · Tue Apr 25 2023 05:02:26 GMT+0800 (China Standard Time)

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

Carlos Kelly · Answer 4 · Sun May 14 2023 02:56:36 GMT+0800 (China Standard Time)

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.

Carlos Kelly · Answer 5 · Sun May 14 2023 07:23:36 GMT+0800 (China Standard Time)

This should be fixed in 4.1.1.

Mykhaylo Ryechkin · Answer 6 · Fri May 19 2023 09:34:22 GMT+0800 (China Standard Time)

This should be fixed in 4.1.1.

Still happening for me unfortunately :(

Iván Pereira · Answer 7 · Tue May 23 2023 16:30:32 GMT+0800 (China Standard Time)

@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

Carlos Kelly · Answer 8 · Wed May 24 2023 20:40:05 GMT+0800 (China Standard Time)

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

Iván Pereira · Answer 9 · Wed May 24 2023 20:59:47 GMT+0800 (China Standard Time)

@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

Carlos Kelly · Answer 10 · Wed May 24 2023 21:09:13 GMT+0800 (China Standard Time)

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

Iván Pereira · Answer 11 · Wed May 24 2023 21:15:25 GMT+0800 (China Standard Time)

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.

Mykhaylo Ryechkin · Answer 12 · Wed May 24 2023 21:50:55 GMT+0800 (China Standard Time)

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.