Need to disable rules code completion on Android Chrome

[TD-er]

With the latest code, the rules editor works well on the desktop, but editing on Chrome on Android is not workable as the cursor jumps back continuously.

So there needs to be a simple checkbox on the rules page to disable code completion. It doesn't need to be a permanent setting IMHO, but it should be possible to disable it on the rules page when quickly editing some rules on your mobile.

N.B. also having a permanent disable feature can also be a nice to have, but it would be sad to loose all of these features only because 1 browser is acting up.

Animation I made about this previously: https://github.com/letscontrolit/ESPEasy/pull/4088#issuecomment-1231547883

No completion:

[chromoxdor]

I use the latest version of chrome in android and have no jumping cursor. (Which version do you use) But trough all chrome versions on android there will no autocomplete-hints while typing because chrome doesn't seem to send useful key events... A workaround could be to use firefox on android since there the editor seems to work fine.

Edit:

I use the latest version of chrome in android and have no jumping cursor.

That’s not right. I just figured out, that i use a different keyboard i guess. I have a Samsung tablet with a Samsung Keyboard, When i switch to gboard i experience the same issue...also on firefox

[chromoxdor]

this keyboard could also be a workaround: https://play.google.com/store/apps/details?id=org.pocketworkstation.pckeyboard&hl=de&gl=US

edit: with that you can use at least ctrl+shift for completion

[chromoxdor]

I integrated a userplatform check and a confirmation box. Can you upload this to the local FS and try if it works for you... espeasy.min.js.zip

[TD-er]

Having a different keyboard installed to make it work is a bit lacking the "Easy" part in "ESPEasy".

I will now check yourpatched JS to see if that will give a better UX.

[chromoxdor]

Having a different keyboard installed to make it work is a bit lacking the "Easy" part in "ESPEasy".

I will now check yourpatched JS to see if that will give a better UX.

don’t expect to much … its just for disabling the colorcode if you are using android

[TD-er]

Hmm, it does prompt me for yes/no on "Do you want to use colored rules" But I do like the color highlighting, only the code completion is bugging me. So better have a choice like this:

• Color highlight + completion
• Color highlight
• None of the above

And then of course in the most user friendly possible way and not such long strings :)

[TD-er]

And I don't mind to have those as a selection on the page, where some JavaScript is looking at the state of this switch/selection to turn it live on/off.

[chromoxdor]

ok… i‘ll look at it on monday. but even with deactivated completion you’ll get the strange cursor behavior. i already have a workaround for that in mind… but the other issue is, at least with gboard, that pressing and hold backspace for deleting text is also a very strange experience 😳

[TD-er]

I will have a look at the linked keyboard app. But I am always quite reluctant to install some different keyboard app, since that's the one possible attack vector which may have access to anything.... well apart from those apps to turn on your flash light which literally need access to everything that can be selected.

[chromoxdor]

I totally understand… especially when the keyboard is called „hackers keyboard“ 😁 it unconsciously raises suspicion

[TD-er]

I can also configure the webserver in ESPEasy to collect the user agent as header. This way we might be able to detect a mobile browser and offer 2 settings for enabling/disabling the colorcode JS based on the used browser. (and maybe more settings can be based on this detection)

[chromoxdor]

Jep… there are plenty of possibilities. For now you should enjoy colorcode with firefox and the hackers keyboard… 🙂

[TD-er]

Not sure if I dare to leave the Hackers Keyboard enabled. Point is that this keyboard cannot be started until I unlocked after a reboot. And the fingerprint scanner isn't always working well.

[chromoxdor]

I did a bit of research. I guess i have to upgrade codmirror to version 6. Since there are lots of changes from version 5 to 6, i will need to invest a bit of time for migration... For now we maybe need just a simple switch for turning on and of codemirror to circumvent android/chrome related issues because i will not spend any time on workarounds and rather start the migration The implementation will be different so i guess we have to do another kind of switching with version 6. But a switch should be mandatory anyway...

Here a demo of the new editor at the bottom of the page. It seems to work fine on mobile devices.

[TD-er]

Totally makes sense. So what should I do now for a new build? Try to detect a mobile device, or use your latest test file to allow to turn it off when loading the page?

[chromoxdor]

What i can offer: we could have the prompt (but then i maybe add an explantory sentece to it) or we also could just disable in generell for android devices without a promt. But if you have another way in mind that´s also totally fine with me. I don´t usually use an andrid device when editing/accessing the rules (on an iphone it works fine) so for now you should decide.

[TD-er]

I think we can add a setting and then I can include this boolean flag somewhere when serving the HTML. (e.g. call another function)

[chromoxdor]

I think we can add a setting

like in the advanced menu? that would be great because we will need it anyway. I could pass it then into the initialization function.

[TD-er]

Yep, so I will then add 2 boolean flags:

• Enable rules coloring on desktop browser
• Enable rules coloring on mobile browser

Well, it will have a shorter label of course...

[tonhuisman]

The code-completion and syntax highlighting can be disabled in the Tools/Advanced settings page, so this issue can be closed.

[chromoxdor]

Hi, i am a bit late but we still could implement this:

I integrated a userplatform check and a confirmation box. Can you upload this to the local FS and try if it works for you... espeasy.min.js.zip

It would save some lines in ESPEasy. I also will look in the next days if updates in CodeMirror 5 maybe addressed this issue. I know that in CodeMirror 6 it works but this is (at least for me) a really big transition because a lot has changed.

[chromoxdor]

I updated CodeMirror 5 but nothing regarding the issue has changed. I will do a PR anyway. Question is: Do you want me also to integrate the dialog for disabling the feature for android and we revert this PR? It would have the advantage of not always changing the setting in Tools/Advanced.

You can test it if you want here: https://raw.githack.com/chromoxdor/EasyColorCode/main/colorcode.html