So you and your users love the Grammarly Text Editor SDK, but you don’t always want to display the visual elements? Perhaps you want to create a quiet mode in your app where users can draft long-form content without suggestions appearing. I’ve got you covered. In this blog post, I’ll walk you through three ways to turn off visual elements in the Text Editor Plugin.
Spoiler: If you’re looking for an interactive code example, you can jump directly to this CodeSandbox for vanilla JavaScript or this CodeSandbox for React that has examples for everything I’ll discuss below.
Turn off suggestion cards
In the default plugin experience, suggestion cards are automatically displayed when a user hovers over an underline. In some cases, you may want to programmatically turn off suggestion cards and then turn them back on. For example, you may want to turn off suggestion cards while a user is interacting with a menu or interactive element in your app and then turn them back on when the user is done.
The animation above shows radio buttons being used to programmatically turn suggestion cards on and off. It’s not intended to be a realistic UX. 😉
You can configure whether suggestion cards are displayed by setting the suggestionCards EditorConfig property to on or off:
const editor =
document.querySelector("grammarly-editor-plugin");
editor.config = {
suggestionCards: "off"
};Turn off underlines
The plugin displays underlines beneath words and phrases that can be improved. Some users may want to hide the underlines while they are focused on writing long-form content and then display the underlines when they are ready to edit what they wrote.
Your users can choose to manually turn off underlines by toggling the Show underlines option in the Grammarly button menu.
You can programmatically turn off underlines for your users by setting the underlines property to on or off:
const editor =
document.querySelector("grammarly-editor-plugin");
editor.config = {
underlines: "off"
};
The animation above shows radio buttons being used to programmatically turn underlines on and off. I’m sure your UI will look much prettier than these radio buttons. 😊
Note that turning off the underlines will also turn off the suggestion cards. The plugin will continue to check the text for suggestions, and the Grammarly button will continue to display a live count of the total number of suggestions.
Turn off the plugin
If you want the plugin’s UI elements to be completely hidden and the plugin to stop checking the text for suggestions, you can turn off the plugin.
Your users can choose to manually turn off the plugin by selecting Turn off Grammarly in the Grammarly button menu.
If you’re using vanilla JavaScript, you can programmatically turn off the plugin by calling disconnect():
const editor =
document.querySelector("grammarly-editor-plugin");
editor.disconnect();
When you’re ready to turn the plugin back on, you can call addPlugin():
Grammarly.init().then((grammarly) => {
const editor = document.querySelector("textarea");
grammarly.addPlugin(editor);
});
The animation above shows radio buttons being used to programmatically turn the plugin on and off. You could create a fancy button instead of radio buttons or skip the UI altogether and turn the plugin on and off based on other actions the user takes.
If you’re using React or Vue, you can turn the plugin on by wrapping your text editor with the GrammarlyEditorPlugin component or turn it off by not using the GrammarlyEditorPlugin component. Here is an example for React:
{
showGrammarly ? (
<GrammarlyEditorPlugin clientId={demoClientId} config={grammarlyConfig}>
<textarea defaultValue={demoText.textarea}></textarea>
</GrammarlyEditorPlugin>
) : <textarea defaultValue={demoText.textarea}></textarea>
}Bonus tip: Turn off text checking for certain text
Now that you’ve learned three ways to turn off UI elements in the plugin, you might also be wondering if it’s possible for the plugin to skip checking a particular piece of text. For example, a piece of content may include a direct quote that the writer does not want to change, even if the quote includes a grammatical error.
In this case, you can add the data-grammarly-skip attribute to the HTML element that you do not want the plugin to check.
<grammarly-editor-plugin>
<div contenteditable>
<p>This is text that should be checked.</p>
<quote data-grammarly-skip>
<p>
This is a quote, so its original phrasing should be
retained, even if there are grammar mistakes or
words are spelt (sic) wrong.
</p>
</quote>
</div>
</grammarly-editor-plugin>Summary
In this post, I shared three ways to programmatically turn off the Text Editor Plugin’s UI elements: by turning off suggestion cards, underlines, and the entire plugin. I also shared a bonus tip of how to skip checking pieces of text using the data-grammarly-skip attribute.
I included short code snippets in the sections above. Check out these CodeSandboxes for complete, interactive examples:
If you have any questions about how to configure the plugin, you can ask them in the Grammarly for Developers community on GitHub. If you have a request for other ways to configure the plugin, you can create a discussion there. I look forward to seeing you in the community!
