Ckeditor4: Grammarly CKEditor 4 incompatibility

[f1ames]

Are you reporting a feature request or a bug?

Bug: 3rd-party extension incompatibility

Check if the issue is already reported

Some users reported that grammarly adds extra content to CKEditor , also there is a known incompatibility with CKEditor 5.

Provide detailed reproduction steps (if any)

1. Grammarly inserts additional styles and scripts into editor document

However, both style and script tags are outside of body element which does not affect editor content/output:

2. Grammarly inserts additional tags into content

For example:

<h1><g class="gr_ gr_5 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="5" data-gr-id="5">Hello</g> world!</h1>

however, even with ACF (allowedContent=true) turned off, it is removed when content is fetch from the editor.

3. Grammarly adds <div class="grammarly-disable-indicator">&nbsp;</div>

Seems it happens only on Safari, div is added to the end of the content

Unfortunately, it seems ACF does not remove this additional element even when enabled. So this is the real issue which breaks editor usability.

---

To sum up, the only visible issue ATM is extra div added on Safari by Grammarly, which pollutes editor output and may break output HTML.

Other details

• Browser: Tested on Chrome, Safari, Firefox
• OS: All
• CKEditor version: 4.8.0
• Installed CKEditor plugins: full preset / minimal (plugins: 'toolbar,wysiwygarea,basicstyles')

[mlewand]

Though it's a third party issue, let's keep it open and try to reach Grammarly team on how we can cooperate to resolve this.

[kgibso01]

This is the html that it creates. This is probably not something that can be fixed by ya'all without allowing Grammarly to be turned off on select sites. But I thought I would at least share in case it helps you or someone else.

[kgibso01]

It isn't actually ckeditor it is another editor in a proprietary tool called Cirlce that is doing it. I am on Windows 10, using Chrome. See attached for a file that shows what is created when I have the Grammarly extensions enabled. Super strange may not be something you can fix and that is ok. Thanks.
test email.txt

[preeteshjain]

Though it's a third party issue, let's keep it open and try to reach Grammarly team on how we can cooperate to resolve this.

Tagging @A-gambit

[GeraldinePink]

Has this issue ever been resolved?

[kyletolle]

My team has been running into this issue as well and are curious as to whether there are any updates?

[f1ames]

Let's check if this issue is still valid.

[sculpt0r]

Currently, buttons and suggestions are placed with shadow DOM:

and

The same goes for pop up:

I just assume that this issue is no longer valid. I can't run Safari with Grammarly extension to be 100% sure.

[f1ames]

I have checked both Chrome and Safari in context of https://github.com/ckeditor/ckeditor4/issues/1350#issuecomment-849579294. Confirmed everything is inside separate element (which use shadow DOM) outside the editor so the issue is fixed.