Reversed Text Entry

The OS project Home Assistant uses CodeMirror for its browser-based yaml editor for its UI. I’m a user of the system, and I, along with many others, experience situations that appear as seemingly random (and so far not easily reproducible on demand) odd behavior within the editor function where the text begins to appear reversed at it is typed. It will initially work correctly upon entering the editor, but randomly change to displaying typed text in reverse.

For example, in the editor, I could be entering the following CodeMirror, but what is displayed as I am typing is rorriMedoC, with the cursor moving to the left.

Oddly, both Del and Backspace work as expected. I’ve been tracing through the Event logs in Firefox when it happens and it’s quite complex, but so far have found nothing obvious that would point to such behavior (comparing the events during which the correct text is being displayed and the reversed text is being displayed).

What is peculiar, is that as soon as I type a character, it appears, but the cursor is on it LEFT, not the right as is normally the case. I type another character, which appears to the LEFT of the previous character, and once again, the cursor is to the LEFT of the last displayed character.

As an indication of its “randomness”, I was in the middle of reviewing a session’s events where the behavior was being exhibitied, and took a break to enter this post. Upon going back to the tab where the editor was still waiting, I began typing again, and the text is now being displayed CORRECTLY.

So, this appears to be no only event-related (perhaps in how CodeMirror is being used by HA), but also somehow depending on elapsed time. Note that the direction parameter shows up repeatedly and it is always ltr. If I change it in the browser dev tools, it reverses everything, as you would expect.

I was hoping someone here who is more familiar with CodeMirror could provide some possible insight into what might be going on and/or at least where to start looking. Thanks in advance.

It would help to know which version of CodeMirror is being used and if you’ve managed to reproduce the issue with just the library, or only in the Home Assistant setup.

Hi, thanks for the response. I’m not an active developer, but I can point you to two links that may hold the answer to your first question about version.

Here you will find the package.json file for the HA frontend that lists the codemirror components used. It lists the version.

Here you will see a link to a change back in Feb '21 about CodeMirror 6 where I found mentions of rtl, which if you then look here, you will find that, beginning in March '21, folks began noticing this issue and it has continued since.

My only exposure to CodeMirror is through the HA frontend. I have not tested (nor do I have the capacity to) the CodeMirror library directly.

Thank you.

So that’s CodeMirror 6. That doesn’t do anything like this in any setup I’ve seen. The RTL stuff is very unlikely to be related.

OK. Thank you. Will try to chase down any implementation issues in HA. If anything comes to mind that you think might help, please do let us know. I was thinking it might have to do with event ordering, or events being missed, but it was too hard to trace in the Dev Tools in Firefox. Changing the direction: ltr CSS to rtl did exactly what you would think, but not the behavior we are seeing.