react-md-editor icon indicating copy to clipboard operation
react-md-editor copied to clipboard

Add a fix for jumping cursor

Open dylanesque opened this issue 2 years ago • 7 comments

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.

dylanesque avatar Aug 18 '21 01:08 dylanesque

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

jaywcjlove avatar Aug 18 '21 05:08 jaywcjlove

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.

dylanesque avatar Aug 18 '21 14:08 dylanesque

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.

Vladislaff avatar May 04 '22 13:05 Vladislaff

I confirm the issue too

paul-izum avatar May 06 '22 06:05 paul-izum

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

raivatshah avatar Aug 01 '23 15:08 raivatshah

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

jaywcjlove avatar Aug 02 '23 04:08 jaywcjlove

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

McFixitMan avatar Jan 22 '24 20:01 McFixitMan