search

Ionaru / easy-markdown-editor

EasyMDE: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
https://stackblitz.com/edit/easymde
MIT License
2.45k stars 319 forks source link

Cursor jumps around when editing text on Mobile #77

Closed Hawkers closed 2 years ago

Hawkers commented 5 years ago

Describe the bug The cursor does not always remain where the user intends.

To Reproduce Steps to reproduce the behavior:

  1. Open Chrome mobile
  2. Type something at the end of the document
  3. Tap after a word higher in the document and press space
  4. Cursor will jump back to end of document

Expected behavior The cursor should remain

Version information

chrisvel commented 5 years ago

This is a serious issue. Same happens to me where cursor always jumps to the end of the document no matter what. Android also.

Does anyone have a workaround to suggest?

Ionaru commented 5 years ago

Was not able to reproduce

Do you guys have the same problem in the editors on https://easy-markdown-editor.tk? What keyboard are you using?

chrisvel commented 5 years ago

Strange thing is that I just installed Firefox on the same phone and it works fine, no issues. So it must be Chrome related only. It's very odd because on each click, cursor just jumps around the text.

ericek111 commented 5 years ago

Same here, EasyMDE 2.8.0

It looks like some kind of optimization. Perhaps the input text is rendered before it's actually inserted into the HTML element? Cursor jumps erratically and it's a pain to use.

EDIT: Same on Android 9 (Lineage OS), Gboard v8.7.10

daleharvey commented 4 years ago

I see the same issue in Firefox, there seems to be a few issues editing on mobile and cant figure out how to trigger them reliably or how to seperate them but the 2 main things I see happen are my edits are constantly undone, and on pressing return the cursor goes to the start of the line

Ge-lx commented 4 years ago

I am also experiencing this bug and it makes for a very bad user experience. From my testing it seems that the editor is not correctly setting the internal cursor position when the user taps somewhere in the document. It works fine, when using the cursor key (via remote debugging) or a mouse to interact with the document. While debugging this I saw, that CodeMirror is listening for touchend events to update the cursor position in response to user input on mobile.

The problem is, that sometimes the touchend event is not fired. You should be able to see for yourself by registering event listeners like:

window.addEventListener('touchend', () => console.log('touchend'))
window.addEventListener('touchstart', () => console.log('touchstart'))

Some googling led me to this unfixed Chromium bug, which could be causing this issue: When the target element of a touchstart is removed from the DOM while the touch is in progress, no touchend will be fired.

After some more digging around it seems, that this bug is not caused by EasyMDE but rather by CodeMirror. See the corresponding issue

paxter commented 2 years ago

This is still a huge problem on mobile devices and should be addressed as soon as possible.

Ionaru commented 2 years ago

Like @Ge-lx said, this is a CodeMirror issue, there's not really anything that can be done at this end. Upvote https://github.com/codemirror/CodeMirror/issues/5844 if you want to see it fixed.

OnGe333 commented 2 years ago

There is word that CodeMirror 6 should have more robust mobile support (see: https://github.com/codemirror/CodeMirror/issues/5844 ). Maybe updating to CodeMirror 6 would fix this issue.