Slate: Integration with Grammarly

[oyeanuj]

Hey @ianstormtaylor! Playing with Grammarly plugin alongside Slate, I am seeing issues where Grammarly extension is unable to update text in the editor. It is easily reproducible on the examples.

I haven't had the chance to investigate much further yet, but I wanted to create an issue incase anyone else here already knew what was going on..

[ianstormtaylor]

I _think_ Grammarly tries to manually edit the DOM state? That's probably going to cause issues with React if so, but I haven't investigated it at all personally. But we can see if others have experience and can chime in!

[oyeanuj]

Yep, seems like it. Did a little bit of digging around and found that Draft also has issues with Grammarly: https://github.com/facebook/draft-js/issues/616 cc: @kigorw (Grammarly dev)

[kigorw]

Thanks, we are thinking how to fit this issues into our roadmap.

[oyeanuj]

Thanks for the update @kigorw!

In the meantime, I'll try to get to integrate @Soreine & @SamyPesse's Rousseau library with Slate as an alternative.

@Soreine @SamyPesse, if you have already done it or plan to, do drop a note here since you both know those libraries the best!

[ianstormtaylor]

Going to close since there's nothing actionable here for now for Slate, but feel free to keep discussing grammar checkers!

[isubasti]

https://github.com/facebook/draft-js/issues/616, hopefully grammarly release a version that use document.execCommand pretty soon. then we can start improving onInput that still seems to be a problem especially for IME. on the other note, I notice that tools such as https://languagetool.org/ and https://www.scribens.com/# breaks slate as well and no obvious way on how to turn this off all together programmatically

[oyeanuj]

@kigorw @blacktaxi Any updates on using Grammarly playing well with Slate?

[blacktaxi]

Hi @oyeanuj,

Slate is definitely on our radar, but is not in our immediate plans to support. Nevertheless, I've just ran a quick test of the new Grammarly, and while underlining works fine, the text modification through document.execCommand doesn't. It looks like the Slate editor might be misinterpreting input from execCommand, as the changes made by this call are reverted back once you type something with your keyboard.

[linonetwo]

Grammarly will cause CPU 100% on https://new-japanese-concise-tutorial-interactive-oezqwptftx.now.sh/ and not responding, on firefox and chrome.
Turn off Grammarly then page works fine.

The source code of that site is https://github.com/linonetwo/new-japanese-concise-tutorial-interactive

[nadeemshaik]

I am not sure about the CPU usage issue but I tried enabling Grammarly on my local build (slate-react #733) and with the latest version Grammarly changes are triggering the change event and things seem to be working fine. Am I missing something here?

Also, @ianstormtaylor will it be possible to update the code in order to let users override the data-gramm flag if necessary. Under the current implementation, there is no way one can enable Grammarly at all.

[rikkit]

@nadeemshaik I've done a bit of testing - basically the "inline mode" works, but the "overlay mode" breaks Slate. I'm not sure why one works and the other doesn't since Grammarly is modifying the DOM directly in both cases. Possibly something to do with a difference in updating a text node vs the whole editor?

Repros

Inline mode - works as expected

1. Add data-gramm="true" to the editor
2. Paste in this text:
   > Twelve billion miles from Earth, there is an elusive boundary that marks the edge of the sun’s realm and the start of interstellar space. Voyager 2, the longest running space mission, has finally beamed back a faint signal from the other side of that frontier, 42 years after its launch.
3. Grammarly should underline "longest running":
   
4. Click "longest-running" in the tooltip
5. The text should change as expected.
6. The editor continues to be editable.

Overlay mode - broken

1. Hover over the bottom right menu
2. Click on the "open in fullscreen" button
3. Make any changes you want to make, then close.

E: Text is updated and continues to be editable.
A: Text appears to be updated, but cannot be modified. Slate appears to be "frozen"