Lovelace Editor inserts chars backwards? How to use external Editor for RAW Code?


I have a very strange problem which applies very often. When i type new text in a code window of a card (subcard of a grid card) the text apprears backwards:

I type
background-color: gray

i get
yarg :roloc-dnuorgkcab

No, i’am not kidding.

After trying to position the cursor elseway this behavior disappears. But it reappears randomly.

Is it possible to use for the backand for the code under “Raw configuartion Editor” to use an external Editor? In which file can i find the code?

I do not want to give up the visual editor. But from time to time i would like to be able to use an Editor.


If you can somehow consistently reproduce the issue, please open a frontend bug ticket

The Lovelace config is stored as JSON in ./storage/lovelace. Use at your risk of course :slight_smile: .

1 Like

If i can figure that out i will do that

Is it possible to have e. g. a custom-card template (all templates belonging to lovelace / frontend) in a separate file? How can this be archieved without losing to have the visual editor in the front-end in place?

I’m seeing this behavior too.

1 Like

I’m also having this behavior

1 Like

Same. Just started for me today after adding a horizontal stack card. At first it seemed like it only affected the second entity in the horizontal stack, but now it’s more random. Once it’s triggered, it happens only at the beginning of new lines and in the middle of existing lines; not at the end of existing lines.

Also seeing this. Seems to ‘randomly’ start happening and does not seem to affect all cards, but doesn’t seem to be type specific. Then seems to ‘randomly’ go back to normal

1 Like

Yep, I have this problem all the time. If you click out of the text box, then back in, it starts typing normally again. Super annoying.

Same behaviour in the script and automation editor

I have had the same problem for a few weeks as well, anything new on any of yours end?

It is a known issue (only for iOS/macOS). Some weird issues in Safari that the codemirror library we use for the HA editor now somehow has to work around since Apple never fixed them.

I also experience(d) this, but today I can’t reproduce it. I don’t say it’s gone, just that I can’ reproduce it editing the same card (custom:button-card) I saw the problem before.

What I did since the last time I saw this:

  • Installed latest Windows patches
  • Upgraded Firefox to latest version ("88.0 64-bit")

I’m using Firefox on Windows 10.
HA Versions as follows:

  • Core: core-2021.3.4
  • Supervisor: supervisor-2021.04.0
1 Like

Just noting that I am on Firefox on Windows and experience this problem.

1 Like

Then perhaps check if it is one of the open or already solved issues in this linked list, otherwise create a new issue if you have a reproducible scenario:

Got this problem too.
When configure something with code editor for a while, you will got this.

Super annoying.

Same answer as above. We need a small reproducible example raised as an issue in the frontend repo to have a look. Otherwise, nothing will change here I’m afraid.

I have exactly the same issue on Firefox 88 on Linux. What info do you need to make it “reproducible”? It appears time-to-time in probably 1 to 10 edits on my machine.

Ideally something that happens every time or at least a detailed explanation of the concrete steps to reliably reproduce it (fewest amount of actions / clicks possible so we can quickly run it).

Same problem here …
Windows 10, Firefox developer edition 90.0b12 64bits
It happen almost everytime i take more than between 3 or 5 mins to make my modification …
This is very annoying