Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a fix for jumping cursor #222

Open
dylanesque opened this issue Aug 18, 2021 · 7 comments
Open

Add a fix for jumping cursor #222

dylanesque opened this issue Aug 18, 2021 · 7 comments

Comments

@dylanesque
Copy link

When using this library to edit text, you can't edit text earlier than the end of the current input because the cursor will jump back to the end of input as soon as keyboard input is entered. This behavior can be seen in the "Custom Toolbar" and "Custom KaTeX Preview" examples on the Markdown Editor example page. An in-library fix for this would be very helpful, since this default behavior makes it effectively impossible to make changes.

@jaywcjlove
Copy link
Member

@dylanesque I am not quite sure what the problem is with you.

@dylanesque
Copy link
Author

dylanesque commented Aug 18, 2021

The problem is that if the user wants to go back and EDIT text in a controlled component, they have to wire up custom code to keep track of the cursor position to keep it from jumping to the end of input. This is definitely not default behavior in React if state is updated properly, This renders the library unusable in controlled components without monkey-patching by developers using it.

@Vladislaff
Copy link

As I understand the DataHub project uses your editor and the issue is found there also.
The cursor jumps to the end of the text.

To reproduce - write some text in the editor, click outside of editor, put cursor in the middle of the text in the editor and try to edit (delete, backspace, new character - anything) - the cursor jumps to the end of the text.

@paul-izum
Copy link

I confirm the issue too

@raivatshah
Copy link

did anyone find a fix for this? Facing the same issue

@jaywcjlove
Copy link
Member

@raivatshah @paul-izum Can you give me a reproducible example via https://codesandbox.io

@McFixitMan
Copy link

McFixitMan commented Jan 22, 2024

I ran into this while using the markdown editor as a controlled component - my solution is to use a state value to drive the markdown editor within my component, and call the parent onChange function from my props in the onBlur handler of the editor rather than the editor's onChange directly

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants