Work with Grammarly

[johnzupancic]

The Quill Editor does not co-operate well with Grammarly's Chrome Extension. It will jump to different when pressing Enter or Backspace. I believe this may be a problem with the way Quill gets the user's selection in getSelection().

To generate the error:

1. Install Grammarly for Chrome.
2. Go to the Quill homepage.
3. Click the Quill Editor.
4. Wait for "built in" to be underlined.
5. Click anywhere on the word.
6. Hit backspace.

I wanted to check to see if this is possible to fix. I know this isn't necessarily a bug, but it would be great to see this work with other plugins.

[jhchen]

I'm not sure of all the issues preventing coexistence but one is that Grammarly alters the editor HTML, which is not expected by Quill. Selection issues like you suggest may be another. It does not seem a fix would be quick would be quick or easy.

Specifically whitelisting behaviors to target particular products is something I'd like to stay away from. In this case there's also no guarantee the next version of Grammarly will work differently. For now this does not seem like something that should be addressed just on Quill's side.

[johnzupancic]

That makes a lot of sense - and I totally get why you would want to stay away from whitelisting particular products.

I actually managed to speak with Grammarly's support team and they are fixing it on their end.

[doroncy]

I still have problems with quill editor while grammarly chrome extension is enabled, did you manage to solve this issue, or have updated on this issue?
@johnzupancic

[johnzupancic]

Unfortunately, I was unable to solve it.

I concluded that the problem was with Grammarly's extension, as this
behaviour occurs in other text editors as well. I even contacted Grammarly
about it, they acknowledged that it was their problem, but have not fixed
it.

I was forced to switch text editors altogether and there are way fewer
issues (none?) with Grammarly's plugin in CKeditor.

*John Zupancic, BBA, BSc, MBET *
Founder, Wriber Inc.
295 Hagey Boulevard, Waterloo, Ontario N2L 6R5
Phone: (289) 244-5299

On Fri, Nov 18, 2016 at 8:34 AM, Doron Cyngiser notifications@github.com
wrote:

I still have problems with quill editor while grammarly chrome extension
is enabled, did you manage to solve this issue, or have updated on this
issue?
@johnzupancic https://github.com/johnzupancic

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#574 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/ADc-HUFmgWjUhIKSgbNZMB165cFC-Lldks5q_alRgaJpZM4HR4ml
.

[evansolomon]

We had this problem at LinkedIn, too. We solved it by pretty much just allowing grammarly to do its own thing. I'll paste the relevant code (including the comment which is more useful) below.

// Allows inline tags from the Grammarly browser extension
// https://www.grammarly.com/
//
// Grammarly is a very popular browser extension that checks spelling and
// grammar as you write. It adds those familiar red underlines to arbitrary
// text editors on the web when you make typoez.
//
// Grammarly works by modifying editable text nodes (e.g. contenteditable)
// to add various data-gram-* attributes. When text in these nodes is changed,
// Grammarly finds spelling/grammar errors and displays them by wrapping the
// text in their own <g> tags with various classes to mark the error type.
//
// By default, this causes a big problem because our editor and Grammarly get into
// an infinite loop of Grammarly adding its <g> wrappers and the editor removing
// them. This causes Quill to continuously rerender the paragraph, which
// cancels any selection by the user and makes the browser extremely laggy. All
// of this makes it look like the editor is completely broken.
//
// So instead of stripping them, we just allow them through. These tags are not
// allowed by the backend. Ordinarily that would mean the content
// inside of them would be stripped during save. But the Grammarly extension
// also modifies the editable element (the one with the data-gram-* attributes)
// with its own getter/setter for the innerHTML property. The getter strips
// the <g> tags and returns the expected "normal" HTML. So to consumers of
// the editor's contents, everything looks normal...even though it's really,
// really not.
//
// So if a Grammarly-wrapped element has a typo, you might end up with HTML
// that looks something like this:
//   <div contenteditable=true>
//     <p>This has <g>typoesz</g> there<p>
//   </div>
//
// But when you do something like div.innerHTML, you will actually get:
//   <p>This has typoesz there<p>
//
// So we can let Grammarly mangle the HTML because when we read the data it
// comes back clean.

import Inline from 'quill/blots/inline';

class GrammarlyInline extends Inline {}
GrammarlyInline.tagName = 'G';
GrammarlyInline.blotName = 'grammarly-inline';
GrammarlyInline.className = 'gr_';

export default GrammarlyInline;

Edit: we then import that blot and register it with Quill (e.g. Quill.register({'formats/grammarly-inline': GrammarlyInline})

[difelice]

I can't make Grammarly work with Quill. The icon does not appear on the editor (v1.2.2). Any suggestion? Thanks.

[BrockReece]

Thanks so much @evansolomon

Not sure if there has been an update since you posted your code or I am doing something differently but I needed to use the Quill.import instead of a standard import.

const Inline = Quill.import('blots/inline');

I hope this saves someone some time.

[nickbaum]

Updated code for Quill 2.X

let Inline = Quill.import('blots/inline');
class GrammarlyInline extends Inline {}
GrammarlyInline.tagName = 'G';
GrammarlyInline.blotName = 'grammarly-inline';
GrammarlyInline.className = 'gr_';
Quill.register(GrammarlyInline);

@jhchen I completely understand the reluctance to add product-specific tweaks, but I think there's a pragmatic middle ground. For example, if the number of Chrome users with Grammarly installed were to exceed the number of Firefox users, surely it'd be more important to fix Grammarly bugs than Firefox bugs?

Grammarly seems so widespread that any reasonably popular product will encounter these bugs. We kept getting reports that our editor was broken and the cursor jumping around erratically, but I couldn't reproduce it. Until a customer mentioned Grammarly, I just assumed there was some weird edge case between my code, Quill and some browser.

[jhchen]

What is the pragmatic middle ground you are proposing?

[nickbaum]

Oh, I had no great insight. I was simply suggesting that product specific workarounds should be evaluated based on the popularity of the product in question, the severity of the issue and the risk & maintenance cost of the fix. In the case of Grammarly, the popularity seems high (3M+ users), the issue severe (editor broken), and the fix small (?). If the fix is more hacky than I understand, this thread suggests that you can disable Grammarly by setting the 'data-gramm' attribute on the editor to 'false' facebookarchive/draft-js#616

[jhchen]

The fix will pollute your Deltas with random grammarly-inline formats so post processing either before sending to the server or before storage would be recommended. Also the fix is one that in the "seems to work" stage. There is no documentation or comment from Grammarly that describes how their extensions works or that this would be an appropriate workaround. We do know Grammarly modifies the editor contents without warning, which puts the integrity of Quill's contents and many API calls at risk. It's better for Quill to be obviously broken with Grammarly than insidiously broken.

Grammarly did seem to claim to be working on a fix on their end earlier in this thread. Seeing how they do not work with many modern editing software (Draft, Quill) and products (Dropbox Paper, Google Docs, Confluence) this is probably the best long term solution for everyone.

I will in the meantime set data-gramm to false in Quill to disable it.

[nickbaum]

Sounds like the right approach!

It's better for Quill to be obviously broken with Grammarly than insidiously broken.

Agreed, but of course the difficulty is identifying Grammarly as the culprit in the first place. We would still be puzzling over it if a customer hadn't happened to mention it. That's why I think you're doing the right thing by addressing the issue in Quill.

[jhchen]

Normally the symptom is an infinite loop of Grammarly trying to add a span and Quill removing it typing is extremely slow or not possible so it's a lot more obvious something is wrong.

One thing I ask users when they report bugs is to disable all browser extensions. Might be harder for a less technical crowd so ymmv.

[sferoze]

Quill now disables Grammarly by default in Quill's source code by adding 'data-gramm=false' attribute to .ql-editor

I was fine with this for awhile, but I find that using Grammarly would be a benefit to my users, and I want to use it along with Quill.

But I do not want to risk the data integrity of my users Quill data.

I just thought I would post to request any helpful information on getting Grammarly to work well with Quill.

I have used

let Inline = Quill.import('blots/inline');
class GrammarlyInline extends Inline {}
GrammarlyInline.tagName = 'G';
GrammarlyInline.blotName = 'grammarly-inline';
GrammarlyInline.className = 'gr_';
Quill.register(GrammarlyInline);

But as @jhchen mentioned, this has not been tested thoroughly and it pollutes Deltas with Grammarly classes.

I am in search of a good solution

[pedrosanta]

@nickbaum Yap, as @jhchen and @sferoze were saying, the fix pollutes the Deltas, and if this was to become part of Quill I would have to maintain a fork, because we absolutely can't let that happen. Tricky. 😕

Edit: Right now we keep Grammarly disabled. Users can always use Grammarly site to paste content and check, stand-alone.

[sferoze]

I wish Grammarly worked with Quill....

It costs time for users to copy out of Quill and into Grammarly... and can be a negative for your application.

Spelling and grammar check is quite important to users so I wish there was a solution to get Grammarly working with Quill reliably.

[mikewagz]

Our app creates home inspection reports. We recently switched over to Quill and now customers are up-in-arms over Grammarly not working as spelling, punctuation etc is very important for their final product.

A solution to this would be great, otherwise we'll likely have to revert back to our previous editor.

[pedrosanta]

@mikewagz I think as Grammarly extension stands presently, it will be hard to make it work without jeopardizing Quill stability.

Check the work-around pasted above that registers a format for Grammarly related manipulations to make it work, though this isn't thoroughly tested, so use at your own risk.

[sferoze]

@mikewagz

The only solution is to:

1. After Quill initialization remove the data-gramm=false attribute on Quill.

2. Then you need to add this code to client app:

let Inline = Quill.import('blots/inline');
class GrammarlyInline extends Inline {}
GrammarlyInline.tagName = 'G';
GrammarlyInline.blotName = 'grammarly-inline';
GrammarlyInline.className = 'gr_';
Quill.register(GrammarlyInline);

Grammarly will work, but we are not quite sure about the side effects. If you try it out let us know if you experience any negative side effects.

[ivanferrer]

I've managed to do this, but the problem is that Quill.getSelection() has stopped working, what can it be?

var GrammarlyInline =  Quill.import('blots/inline');
    GrammarlyInline.tagName = 'G';
    GrammarlyInline.blotName = 'grammarly-inline'; 
    GrammarlyInline.className = 'gr_';
    Quill.register('formats/grammarly-inline', GrammarlyInline)

[javascriptlove]

I know it's been some time, but it seems like it's safe to remove data-gramm now since grammarly uses external element to draw highlights. I've just tried that with React-Quill in our internal app and it works just fine

[alexbenitez]

Hi @javascriptlove . I would like to give it a try... I'm using Quill with Angular v6 as follow

                  let editor = this.container.nativeElement.
                  querySelector('#editor')
           
                  this.editor = new Quill(editor, {theme: 'snow'});
                  this.editor.root.removeAttribute('data-gramm');
              
                  let Inline = Quill.import('blots/inline');
                  class GrammarlyInline extends Inline {}
                  GrammarlyInline.tagName = 'G';
                  GrammarlyInline.blotName = 'grammarly-inline';
                  GrammarlyInline.className = 'gr_';
                  Quill.register(GrammarlyInline);

All good with Quill but I can't make it works with Grammarly. I'm pretty sure that I'm removing the data-gramm attribute (e.g. if I check before/after in the console with this.editor.root.getAttribute('data-gramm')). Is there anything that I'm missing or calling things in the wrong other? How do you instantiate/configure Quill with React? Do you mind sharing a snippet?

Thx

[sachinrekhi]

Wanted to let folks know that we tried re-enabling Grammarly by removing data-gramm="false" attribute but it turns out the new Grammarly extension is not yet 100% rolled out to all Chrome users, causing some of our users to run into issues with Grammarly while it worked perfectly fine for other users. We have since rolled back our Grammarly support.

I contacted the team at Grammarly and they confirmed that it is not 100% rolled out to Chrome users and they are also still working on Firefox support. So will have to wait a bit longer before we can fully re-enable Grammarly in Quill editors.

[sferoze]

@sachinrekhi thanks a lot for the update. I will take the same path and wait. Definitely do not want to risk giving anyone a bad experience

[freakyfriday]

I was able to remove the data-gramm attribute with:

delete editor.root.dataset.gramm

[vinayakkulkarni]

Why is this issue closed?
I still can't properly integrate grammarly in Quill

[himynameistimli]

Just read an article and I think they did a rewrite of their tool so that it wouldn't cause conflicts with text editors. Testing locally, quilljs and grammarly seem to be working fine (so far).

https://medium.com/engineering-at-grammarly/building-the-grammarly-extension-718497e3760d

[cancan101]

Any updates on how the rewritten version of the grammarly extension plays with Quill? Any issues? And I assume at this point it has been fully rolled out?

[himynameistimli]

We've enabled it on a few sections of our site, and haven't noticed any issues or customer complaints so far. Still haven't added it across all quill components, but we'll probably do that by end of year.

[yesyves]

Some of our (french-writing) users use Antidote and some Scribbens and no issue has risen from either part.

[sr523]

As of a recent update (4/6) with grammarly in chrome, quill / grammarly is now broken again. Grammarly is flat out deleting the text from the editor.

Grammarly is outputting a bunch of errors via the extension (not to the browser's console):
[DEFAULT.coreclients.dox.context]: WARN : failed to parse document context Invalid value "undefined" supplied to : { goals: Setgoal:string, domain: domain:string, audience: audience:string, style: formality:string, emotions: Settone:string, dialect: option:dialect:string }/dialect: option:dialect:string/0: "american",Invalid value "undefined" supplied to : { goals: Setgoal:string, domain: domain:string, audience: audience:string, style: formality:string, emotions: Settone:string, dialect: option:dialect:string }/dialect: option:dialect:string/1: "british",Invalid value "undefined" supplied to : { goals: Setgoal:string, domain: domain:string, audience: audience:string, style: formality:string, emotions: Settone:string, dialect: option:dialect:string }/dialect: option:dialect:string/2: "canadian",Invalid value "undefined" supplied to : { goals: Setgoal:string, domain: domain:string, audience: audience:string, style: formality:string, emotions: Settone:string, dialect: option:dialect:string }/dialect: option:dialect:string/3: "australian"

[rshubbard]

Yes, and it is no longer disabled. Looks like it is ignoring data-gramm="false".

ianstormtaylor/slate#4124

[sr523]

I submitted this to grammarly this afternoon as a ticket, and they responded that it is fixed. For my specific use case, it does appear to be resolved.

[janigorse]

Interesting! On our end our quill text input started sending empty string (because innerHtml object was empty). We advised our customers to switch off Grammarly for our web app. But yesterday, suddenly Grammarly doesn't work at all if you switch it on. Strange..

[DigitalLeaves]

We had this same problem, so a couple of days ago we reported it to Grammarly. We sent a video showing how Grammarly interfered with Quill's ability to detect new keystrokes (keyup, paste), which was indeed fatal for our UI/UX (we detect content in the text area to enable/disable the submit button).

It seems Grammarly answer to our (and other folks here) questions was disabling Grammarly altogether for Quill.

This seems to me like a Solomonic decision: "We can't make them work together, so we might as well disable it completely". Any thoughts?