Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Work with Grammarly #574

Closed
johnzupancic opened this issue Feb 2, 2016 · 35 comments
Closed

Work with Grammarly #574

johnzupancic opened this issue Feb 2, 2016 · 35 comments

Comments

@johnzupancic
Copy link

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
Copy link
Member

jhchen commented Feb 8, 2016

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.

@jhchen jhchen closed this as completed Feb 8, 2016
@johnzupancic
Copy link
Author

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
Copy link

doroncy commented Nov 18, 2016

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
Copy link
Author

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 [email protected]
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
Copy link
Contributor

evansolomon commented Nov 21, 2016

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
Copy link

difelice commented Mar 5, 2017

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

@BrockReece
Copy link

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
Copy link

nickbaum commented Jun 4, 2017

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
Copy link
Member

jhchen commented Jun 5, 2017

What is the pragmatic middle ground you are proposing?

@nickbaum
Copy link

nickbaum commented Jun 5, 2017 via email

@jhchen
Copy link
Member

jhchen commented Jun 5, 2017

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.

jhchen added a commit that referenced this issue Jun 5, 2017
@nickbaum
Copy link

nickbaum commented Jun 5, 2017

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
Copy link
Member

jhchen commented Jun 5, 2017

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
Copy link
Contributor

sferoze commented Sep 3, 2017

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
Copy link

pedrosanta commented Sep 28, 2017

@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
Copy link
Contributor

sferoze commented Oct 11, 2017

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
Copy link

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
Copy link

pedrosanta commented Dec 26, 2017

@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
Copy link
Contributor

sferoze commented Dec 28, 2017

@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
Copy link

ivanferrer commented Dec 14, 2018

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
Copy link

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
Copy link

alexbenitez commented Mar 17, 2019

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
Copy link
Contributor

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
Copy link
Contributor

sferoze commented Mar 31, 2019

@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
Copy link

freakyfriday commented Aug 14, 2019

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

delete editor.root.dataset.gramm

@vinayakkulkarni
Copy link

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

@himynameistimli
Copy link

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
Copy link

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
Copy link

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
Copy link

yesyves commented Oct 22, 2020

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

@sr523
Copy link

sr523 commented Apr 6, 2021

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
Copy link

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

ianstormtaylor/slate#4124

@sr523
Copy link

sr523 commented Apr 7, 2021

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
Copy link

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
Copy link

DigitalLeaves commented Apr 13, 2021

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests