Spellcheck On Android: Cursor Position Jumps To Corrected Letter & Inserts Space

Description

Firstly, THANK YOU SO MUCH to all those who have contributed to Android support improvements. It is finally usable for us with the most recent releases, but with a small new issue introduced:

As shown in the recording from one of our users, when applying a spellcheck correction on an Android device, the cursor position jumps to the letter that was changed and inserts a space right after it.

Recording

https://user-images.githubusercontent.com/34203886/137451687-d4590147-a46b-46ae-82b6-aeca83364581.mp4

Sandbox This should be reproducible on the Slate website: https://www.slatejs.org/examples/richtext

In case this is helpful, our Android test user reported this on our test environment (a simple sign up and go to “New Post” to find the editor) for this PR which simply updates all Slate packages to latest (currently 0.66.5 for slate)

Steps To reproduce the behavior:

1. On an Android device, type in the editor and make a spelling mistake
2. Click on the correct suggestion from to correct the spelling
3. Observe behaviour shown in the recording

Expectation See above.

Environment

• Slate Version: 0.66.5
• Operating System: Android
• Browser: Chrome

Context Until now we’ve had major IME and Android support issues where every word was doubled upon input, and deleting texts would insert more words with the cursor jumping all over the place. So this is still a HUGE improvement and finally makes the experience at least usable, albeit frustrating for Android users that are using spellcheck.

[thesunny]

@Slapbox @robin-macpherson

Generally speaking (if I’m remembering correctly as it has been a while), whenever we do a spellcheck fix in Android, we wait for the compositionend event and then we do a diff between the actual DOM text (i.e. what’s in the browser) and the text that is in Slate’s value. We then apply that change to Slate’s value and that updates the DOM.

I wonder if a recent version of Android is taking a spell check fix and executing it as (1) applying the spelling fix to the browser DOM in Android (2) moving the cursor to the end of the word (3) compositionend fires (4) hitting the space to move onto the next word. Slate may then be reacting at step 3 above and doing (3a) read the DOM and diff it (3b) updating the value (3c) updating the DOM and leaving the cursor at the position where the change was made. Now the cursor is at the spell fix location and then (4) we get the space event. Slate reads the space event from Android then inserts the space at the wrong location. The fix might be to detect when a spell check has happened and make sure the cursor is at the end of the word so that when the space event happens, the cursor is at the end of the word.

I think it’s possible, perhaps even likely, that this series of events isn’t exactly what is happening; however, it’s probably a good place to start the investigation. While checking these assumptions, I’m guessing it may reveal what’s actually happening.

Going into the future, I think it might be worthwhile to include in the source code and/or in the documentation, more details about how Android support works. Unfortunately, my hope that the community would take up more of the load for supporting Android hasn’t really panned out and I think that may be because it is hard to get up to speed on what’s happening in the code. Also looking at the source code doesn’t provide enough high level overview about why things are the way they are. With Android in particular, things happen at times that are not obvious from the source code and they also differ sometimes from version to version of Android. For example, the fact that enter and space trigger differently than other composition changes like typing, spell fixes, autocorrect, swipe gestures, etc.

[robin-macpherson]

@thesunny just FYI I’ve started looking into this. To be honest I’m still having trouble wrapping my head around how things specific to Android support work and haven’t managed to get far enough to put up a PR yet, but I’m trying and have continued trying to see if I can find someone to help me through fixing this. Fingers crossed and thanks again for the really helpful info you provided to get me started 🤞🏼