react-md-editor
react-md-editor copied to clipboard
Add a fix for jumping cursor
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 I am not quite sure what the problem is with you.
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.
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.
I confirm the issue too
did anyone find a fix for this? Facing the same issue
@raivatshah @paul-izum Can you give me a reproducible example via https://codesandbox.io
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