[mobile] Colouring not picking changes until non-word characters

[mihailik]

Using JavaScript demo go in the method and type 'this'.
The text is using basic black colour and 'this' word is underlined.
Now type '.'.
The word 'this' is no longer underlined, and it's dark-purple (correct keyword colour).

This happens in:

• Chrome mobile (46.0.2490.76 on KitKat),
• Android Browser (33.0.0.0 on KitKat),
• FireFox mobile (42.0 on KitKat).

It also is dependent on the order of the edits. For example, deleting characters with backspace never causes this quirk.

Also note that when this happens in the middle of the line, the characters on the right of the line do get pushed right. Which means this typing experience is not completely virtual, it does change the DOM state somehow. But it looks like CM fails to notice the change.

Also see related:
#3653 Arrow keys hide keyboard - Chrome mobile 46
#3654 Newline/editing bugs in Android Browser

[marijnh]

Mobile platforms tend to input words using composition events. Highlighting tends to involve redrawing, and redrawing during a composition will reset that composition, which would be bad, so CodeMirror has to leave the input field alone until the composition ends (in this case, when the space was typed).

As such, I don't think this is something we can really help.

[mihailik]

Reasonable, thank you!

Might be worth mentioning in the manual, also clarifying if CodeMirror merely backs off highlighting during composition, or if it doesn't fire 'change' events either.

[marijnh]

It currently does not fire change events, but possibly will in the future (I'm planning to overhaul composition handling when I find time), so I don't want to set down any specific behavior yet.

[mihailik]

Reasonable too.

A bigger problem is completions/hints (which some IDEs pop up intelligently listening to the 'changes').

Typing this var div = document.crea| will sure have keyboard app suggestions like create created creator, but not context-aware IDE suggestions like createElement createTextNode. And on desktop it indeed works like that.

Perhaps for code composition is harmful anyway. Typing foreach you get For each instead and such other.

Can you please add a switch to ignore composition concerns, making mobile more aligned with desktop? Naturally off by default, but for code editors it would be brilliant!

Again, thanks for giving it a thought.

[marijnh]

Can you please add a switch to ignore composition concerns,

Nope. Or at least, I don't know how to disable this behavior in mobile browsers. If you do, let me know.

(Autocompletion is indeed the main reason I'm considering applying composition changes immediately, so that a meaningful completion list could be shown.)

[mihailik]

What I meant is that with that option enabled, don't do this:

so CodeMirror has to leave the input field alone until the composition ends

Polling seems to work, if other events are being suspended by browser during composition, I checked with JSBin

[marijnh]

I don't think that will do what we'd want it to do — it'd become impossible for, for example, Chinese users to type into the editor.

[mihailik]

Yes, and in case of ode editor/IDE that is a desirable tradeoff.

Perhaps I should experiment with implementing that and come with results before going any further. Thanks a lot!