HTML injected into contenteditable container, cannot be edited or removed

[NatalieMac]

I have a single page app built using Vue.js which uses div elements with the contenteditable attribute for a couple of fields. Recently, we had a customer file a bug saying that these fields weren't editable. Investigating, we found that the customer was using the Language Tool browser add-on for Firefox. It appears that the tool injected some HTML markup into the fields. The result was that the fields could not be edited - the cursor would not display in the field when they were clicked or received focus. And only the HTML was saved as the value of the field. The end user wasn't able to edit or change the value of the fields.

It seems like this is unexpected behavior - any markup added or used by the add-on shouldn't be saved as the value of the fields. I'm looking through the documentation looking for a way to prevent this from happening within our app.

When the fields are empty, the user can type into them without any issue. But after saving, only the injected HTML is saved as the value. The text the user typed is gone. Viewing the field with the browser inspector reveals the following saved:

<lt-div spellcheck="false" class="lt-highlighter__wrapper" style="width: 776.391px !important; height: 52px !important; margin-top: 1px !important; margin-left: 1px !important;"><canvas class="lt-highlighter__canvas" width="0" height="0" style="display: none; margin-top: 0px !important; margin-left: 0px !important;"></canvas></lt-div>

At that point, the field can no longer be edited.

Confirmed that the above HTML is saved in the database as the value of the field.

[tiff]

@NatalieMac I would like to look into this. Thanks for reporting. Do you have a demo that I can reproduce this with?

[NatalieMac]

@tiff Thanks for getting back to me. This is in a password-protected area of our app, but I'll see if I can set up a public-facing demo. My solution for now was to add spellcheck="false" on the contenteditable div, which also disables the browser default spellchecker, which is less than ideal.

[tiff]

You can also disable it via: data-lt-active="false"

[NatalieMac]

That is super helpful to know, thank you. I searched the documentation for quite some time looking for that without success.