Troubleshooting

The Grammarly Text Editor SDK has been designed to work as seamlessly as possible in most apps, but integration issues occasionally arise. Below we cover a few common situations and how to address them.

We track uptime for core features of the SDK, like writing suggestions, on Grammarly's status pageopen in new window.

Support

You can ask a question and read answers from other members of our community in the Grammarly for Developers discussion boardopen in new window. This is your place to ask questions, discuss best practices, and connect with other like-minded developers.

Bug reports

To file bug reports, please create an issueopen in new window in the Grammarly for Developers repository with details and reproducible steps.

Urgent support

If you need urgent support or have a question specific to your account or application that you want to raise with us one-on-one, please open a support ticketopen in new window.

General debugging

As a general rule, please always check the console in your browser's developer toolsopen in new window for warnings and error messages.

To debug issues with the Text Editor SDK, first, try these steps:

  1. Upgrade to the latest version of the SDK and check if the error still occurs.
  2. Check your console for warnings and error messages. As of version 1.7.5 and above, some error codes may direct you to the Error Explainer page to view the complete message.
  3. Check the Network tab in your browser's developer tools and filter by “grammarly” to see if any requests are being blocked.
  4. Run Grammarly.debug() from the console and look for potential problems.
  5. Run Grammarly.printLogs(true) from the console and look for potential problems.

The Grammarly button is not appearing

If the Grammarly button is not appearing in your editor(s), follow these steps:

  1. If you're not using the activation EditorConfig property, make sure that you've focused (e.g., clicked into) the editor.
  2. If you have the Grammarly browser extension, make sure it’s turned off.
  3. Double-check that your clientId is provided and is correct.
  4. Double-check that your clientId is configured with the allowed origin.
  5. Ensure Grammarly has been added to your Content Security Policy (CSP).

Reviewing configurations for writing suggestions

If Grammarly is not surfacing certain writing suggestions, or not surfacing suggestions of an intended dialect or domain, try these steps:

  1. Confirm that the specified dialect is correct. Note that users can always override the dialect via the Grammarly button menu.
  2. Confirm that the specified domain is correct. Note that you may want to try specifying a different domain—for example, the "casual" domain expects less formal text.
  3. Review suggestion categories to surface or hide (i.e., mute) writing suggestions.
  4. Review the Grammarly-specific attributes on your HTML elements.
    1. If Grammarly is not surfacing suggestions on an element, check to see if the element contains the data-grammarly-skip attribute. Any text from elements using this attribute won't be analyzed by Grammarly.
    2. Review elements that contain the data-grammarly-is attribute. This attribute lets Grammarly know what an element represents semantically. For example, if text intended to be italicized is wrapped in a <div>, we recommend setting the element that contains this attribute to data-grammarly-is="em".

Finally, please note that if a user has connected their Grammarly account to your application, the full set of customized suggestions from their user profile will always take precedence.

The Grammarly button is covered or positioned wrong

To control the position or z-index of the Grammarly button use the --grammarly-button-position-{DIRECTION} and --grammarly-button-z-index CSS properties.

For more information, see the instructions within Customization.

Underlines are not syncing with text

If you encounter syncing issues—for example, underlines not staying in sync while scrolling—try manually setting your viewport.

Here is an example of how to sync underlines with text for TinyMCE rich text editors:

// Initialize Grammarly
const grammarly = await Grammarly.init();

// Add Grammarly suggestions to the element
const grammarlyPluginElement = grammarly.addPlugin(
  document.querySelector("YOUR_ELEMENT_ID"),
  {
    documentDialect: "british",
    autocomplete: "on"
  }
);

// Initialize TinyMCE
const tinyEditors = await tinymce.init({
  selector: "YOUR_ELEMENT_ID"
});
const tinyEditor = tinyEditors[0];

// Set the editor and viewport to the newly created TinyMCE elements
const editor = tinyEditor.getBody(); // <body contenteditable=true>
const viewport = tinyEditor.iframeElement; // <iframe> that contains the body
grammarlyPluginElement.connect(editor, viewport);

Underlines are "left over" after text value changes

We don't currently catch programmatic changes to <input> or <textarea>.

If you explicitly assign myTextarea.value = "something", Grammarly will not notice until the next time the input is changed. To make sure Grammarly picks up these programmatic changes, you can dispatch a change event in your app's code. For example, if you're trying to clear out an input to make room for a new entry, you could use the following code:

function addTodo() {
  const newTodoText = input.value;
  todos.push(newTodoText);
  input.value = ""; // clear out the input to make room for a new entry
  input.dispatchEvent(new Event("change")); // trigger change listeners, including Grammarly
}

If you need to temporarily turn off underlines, you can do so with the underlines EditorConfig property.

Suggestion cards are covered or positioned wrong

If suggestion cards are appearing in the wrong positions, or occluded by other elements, check the element for position: absolute; or position: fixed; style rules, and/or check if the element includes a transform. For these fixed positioning rules, we recommend moving these rules to a parent element—a parent element of both the Grammarly Text Editor Plugin and editor of your text editor framework.

If you need to temporarily turn off suggestion cards, you can do so with the suggestionCards EditorConfig property.

A feature is not working

If a feature is not working as expected, please check that the feature is available in your subscription planopen in new window.

You can also check your console: The SDK shows a warning when using a feature that is unavailable in your current plan or when using a configuration name that is not spelled correctly.

Last Updated: 11/22/2022, 9:58:49 PM