Grammarly doesn't display

[RihanArfan]

Describe the bug Grammarly, the browser extension which adds massively to the default autocorrect behaviour in the browser does not work inside EasyMDE.

To Reproduce Steps to reproduce the behaviour:

1. Install Grammarly
2. Go to an EasyMDE editor
3. Incorrect spell

Expected behaviour Grammarly icon shows in the corner of the text field, and it underlines miss spelt words or incorrect grammar. It does this on every other text field, even other markdown and WYSIWYG editors.

Version information

• OS: Windows 10
• Browser: Microsoft Edge BETA Version 79.0.309.25 (Official Build) beta (64-bit)
• EasyMDE version: 2.8.0

Additional context https://github.com/sparksuite/simplemde-markdown-editor/issues/586

[Elmervc]

Probably for the same reason browser spell check doesn't work. See https://github.com/Ionaru/easy-markdown-editor/issues/22

[paulkmoore]

I note from the fix to #143 that native browser spell check is supported; however, I'm still struggling to get Grammarly to work properly.

From my investigations, with Grammarly disabled, when using inputStyle: 'contenteditable' and nativeSpellcheck: true the CodeMirror-code div is correctly annotated with contenteditable="true" and spellcheck="true" attributes, as follows:

<div class="CodeMirror-code" role="presentation" autocorrect="off" autocapitalize="off" spellcheck="true" contenteditable="true" tabindex="0" style="">

When Grammarly is enabled, the extension disables the browser spell check by setting spellcheck="false". I'm no expert but I think this is typical of "external" spell checking solutions.

However, Grammarly does not spell check the content correctly (spelling errors not highlighted).

I suspect that this is to do with CodeMirror effectively mirroring the actual content line by line:

e.g. <pre class=" CodeMirror-line " role="presentation">...

rather than there being an actual input field for Grammarly to intercept / decorate.

[Ionaru]

I think you are correct. I would suggest checking one of the demos on https://codemirror.net/ to see if the spellcheck is working there. Maybe this is something they can improve in Codemirror 6.

[Uzay-G]

Did anyone manage to get this working?

[userofit123]

Facing this issue as well, has anyone made nay progress on this? Also, the regular browser spell check doesn't really work, it just highlights the word in red, but doesn't have the default function (right click to see corrections).

[wvdongen]

Currently, the Grammarly browser plugins ignores text within HTML pre tags (preformatted text). As CodeMirror 5 uses pre tags for every line Grammarly will not work in EasyMDE. The use of the pre tag is hardcoded into CodeMirror 5 in several places and can't be easily changed.

Grammarly does seem to work in CodeMirror 6 as div tags are used for lines and not pre tags.

If you want to play around with this in CodeMirror 5/EasyMDE and get Grammarly to at least recognize the text, do the following:

• In EasyMDE set inputStyle to contenteditable.
• Change "pre" to "div" here: https://github.com/codemirror/CodeMirror/blob/bd1b7d2976d768ae4e3b8cf209ec59ad73c0305a/src/line/line_data.js#L68

I think Grammarly should actually process pre tags as block-level elements such as a div. Perhaps Grammarly engineers have chosen to ignore the pre tags, because it often contains code samples. However, this would be wrong looking at the purpose of the HTML element.

[wvdongen]

After some testing, Grammarly does seem to work with EasyMDE. However, only using the Grammarly Windows desktop app (https://www.grammarly.com/desktop/windows) in combination with Chrome or Edge. Firefox does not work. To be clear you have to install the Windows desktop app, not the browser plugins.

Also in EasyMDE set inputStyle to contenteditable.

[joaomelo]

After some testing, Grammarly does seem to work with EasyMDE. However, only using the Grammarly Windows desktop app (https://www.grammarly.com/desktop/windows) in combination with Chrome or Edge. Firefox does not work. To be clear you have to install the Windows desktop app, not the browser plugins.

Also in EasyMDE set inputStyle to contenteditable.

I've tried with chrome v100 and grammarly desktop and/or chrome extension (both together and alone) and could not make it work. I ignited the editor like this:

new EasyMDE({
  element,
  inputStyle: "contenteditable",
});

Any clues?