Spreed: Chat messages do not work with Firefox AddOn "Grammar and Spell Checker"

[enaut]

Steps to reproduce

1. In the web interface go to talk and into one conversation
2. type a message and hit enter or click the send button
3. only the first character is sent.
4. hit enter or click send again the message is sent (including the first character)
5. The message does not get removed from the box where you are supposed to enter messages after sending.
6. Changing the message and sending again always sends the message that was entered in 2. and sent in 4.

replying to a text only uses the text in from 4 and sending of an image works but afterwards sending a text is still the same text as before.

to send a different text I have to change to another app and then back. Then I can start the process again. (changing conversations does not do the trick).

The Javascript log is attached

The network requests show POST requests containing the data that is displayed so somewhere in the app before sending things go wrong.

Expected behaviour

Well it should work like a chat app

Browser

Microphone available: no (yes but not used)
Camera available: no
Operating system: Fedora 31
Browser name: Firefox/
Browser version: 72.0.1

Browser log

JQMIGRATE: Migrate is installed, version 1.4.1 main.js:566:531
Diese Seite verwendet die nicht standardisierte Eigenschaft "zoom". Stattdessen sollte calc() in den entsprechenden Eigenschaftswerten oder "transform" zusammen mit "transform-origin: 0 0" verwendet werden. main.js:230:11228
Proxying an event bus of version 1.1.2 with 0.2.1 notifications.js:21:13435
Handlebars is deprecated: please ship your own, this will be removed in Nextcloud 20 main.js:1082:57
Proxying an event bus of version 1.1.2 with 0.2.1 talk.js:1546:13509
Setting current user talk.js:1575:18360
Current participant found talk.js:951:121648
The request has been canceled 
Object { message: "canceled" }
talk.js:665:3292
The request has been canceled 
Object { message: "canceled" }
talk.js:665:3292
The request has been canceled 
Object { message: "canceled" }
talk.js:665:3786
The request has been canceled 
Object { message: "canceled" }
talk.js:665:3786
Joined 
Object { ocs: {…} }
talk.js:76:3304
Current participant found 2 talk.js:951:121648
Source-Map-Fehler: Error: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Ressourcen-Adresse: https://nc.de/apps/notifications/js/notifications.js?v=28243ac8-47
Source-Map-Adresse: notifications.js.map
Source-Map-Fehler: Error: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Ressourcen-Adresse: https://nc.de/apps/spreed/js/talk.js?v=28243ac8-47
Source-Map-Adresse: talk.js.map
Source-Map-Fehler: Error: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Ressourcen-Adresse: https://nc.de/core/js/dist/main.js?v=28243ac8-47
Source-Map-Adresse: main.js.map
Source-Map-Fehler: Error: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Ressourcen-Adresse: https://ncde/apps/spreed/js/talk.js?v=28243ac8-47
Source-Map-Adresse: talk.js.map
Source-Map-Fehler: Error: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Ressourcen-Adresse: https://nc.de/core/js/dist/main.js?v=28243ac8-47
Source-Map-Adresse: main.js.map
Current participant found talk.js:951:121648
Current participant found talk.js:951:121648
Current participant found talk.js:951:121648
Current participant found talk.js:951:121648
The humanFileSize library is deprecated! It will be removed in nextcloud 19. 64 main.js:1082:57
Current participant found talk.js:951:121648
path /Coast.jpg selected for sharing talk.js:665:12055
Current participant found talk.js:951:121648
Current participant found talk.js:951:121648
Current participant found talk.js:951:121648
Current participant found talk.js:951:121648
Current participant found talk.js:951:121648
Current participant found talk.js:951:121648
Current participant found talk.js:951:121648

Talk app

Talk app version: 8.0.0

Custom TURN server configured: yes

Custom STUN server configured: yes

Operating system: Fedora

Web server: Nginx

Database: Maria

Nextcloud Version: 18

[enaut]

I have found what causes this:
I have an extension installed that checks for grammar and other typing mistakes: https://addons.mozilla.org/de/firefox/addon/languagetool/
When this addon is activated chat is broken.

• Maybe chat could be more robust vs such tools? - it does have 70.000 users! So this problem will probably come up more often.

[nickvergessen]

We should disable it for the time being using
https://github.com/languagetool-org/languagetool-browser-addon/issues/246#issuecomment-551932278 until they properly support editablecontent divs

[tiff]

We (LanguageTool) would love to support the Nextcloud chat. Is there a demo system that has "Talk" installed, where we can reproduce this?

[nickvergessen]

@tiff thanks for reaching out.
You can use our public dev conversation at https://cloud.nextcloud.com/call/c7fz9qpr

But it will mostlikely be fixed by the data-attribute workaround on tuesday

[tiff]

@nickvergessen if I click on that link and start typing the CPU of my computer goes crazily up (with no add-ons, happens with Chrome and Firefox, Mac).

[nickvergessen]

Right, reported it as a new issue here: https://github.com/nextcloud/spreed/issues/3020

[tiff]

@nickvergessen thank you! Anyway, I will try to reproduce the issue later today. Don't be surprised if you see a few test messages appearing.

[boppy]

@nickvergessen thank you! Anyway, I will try to reproduce the issue later today. Don't be surprised if you see a few test messages appearing.

If it didn't work out, here's a container with talk installed. It'll keep the current state ;)
https://issue-2847.boppy.eu/call/gfo94d4k - I'll delete the container if I ever get the urge...

[tiff]

Thanks @boppy
We were able to fix the issue on our side. It will be part of our next release that should be rolled out to all users within the next 2 weeks.

[nickvergessen]

Thanks a lot!

[tiff]

No, thank you and sorry for the trouble. We will eventually switch to a version that uses shadow DOM in order to better prevent such conflicts.