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 · 19 comments

Comments

Projects
None yet
10 participants
@johnzupancic

johnzupancic commented Feb 2, 2016

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

This comment has been minimized.

Show comment
Hide comment
@jhchen

jhchen Feb 8, 2016

Member

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.

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 Feb 8, 2016

@johnzupancic

This comment has been minimized.

Show comment
Hide comment
@johnzupancic

johnzupancic Feb 8, 2016

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.

johnzupancic commented Feb 8, 2016

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

This comment has been minimized.

Show comment
Hide comment
@doroncy

doroncy 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

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

This comment has been minimized.

Show comment
Hide comment
@johnzupancic

johnzupancic Nov 18, 2016

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
.

johnzupancic commented Nov 18, 2016

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

This comment has been minimized.

Show comment
Hide comment
@evansolomon

evansolomon Nov 21, 2016

Contributor

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})

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

This comment has been minimized.

Show comment
Hide comment
@difelice

difelice 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.

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

This comment has been minimized.

Show comment
Hide comment
@BrockReece

BrockReece Mar 16, 2017

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.

BrockReece commented Mar 16, 2017

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

This comment has been minimized.

Show comment
Hide comment
@nickbaum

nickbaum 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.

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

This comment has been minimized.

Show comment
Hide comment
@jhchen

jhchen Jun 5, 2017

Member

What is the pragmatic middle ground you are proposing?

Member

jhchen commented Jun 5, 2017

What is the pragmatic middle ground you are proposing?

@nickbaum

This comment has been minimized.

Show comment
Hide comment
@nickbaum

nickbaum Jun 5, 2017

nickbaum commented Jun 5, 2017

@jhchen

This comment has been minimized.

Show comment
Hide comment
@jhchen

jhchen Jun 5, 2017

Member

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.

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

This comment has been minimized.

Show comment
Hide comment
@nickbaum

nickbaum 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.

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

This comment has been minimized.

Show comment
Hide comment
@jhchen

jhchen Jun 5, 2017

Member

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.

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.

@alexkrolick alexkrolick referenced this issue Jun 13, 2017

Closed

Grammarly doesn't work with ReactQuill #210

0 of 8 tasks complete
@sferoze

This comment has been minimized.

Show comment
Hide comment
@sferoze

sferoze Sep 3, 2017

Contributor

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

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

This comment has been minimized.

Show comment
Hide comment
@pedrosanta

pedrosanta 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.

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

This comment has been minimized.

Show comment
Hide comment
@sferoze

sferoze Oct 11, 2017

Contributor

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.

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

This comment has been minimized.

Show comment
Hide comment
@mikewagz

mikewagz Dec 26, 2017

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.

mikewagz commented Dec 26, 2017

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

This comment has been minimized.

Show comment
Hide comment
@pedrosanta

pedrosanta 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.

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

This comment has been minimized.

Show comment
Hide comment
@sferoze

sferoze Dec 28, 2017

Contributor

@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.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment