The Grammarly Text Editor SDK Has Graduated to Version 2.0!

The Grammarly Text Editor SDK is all grown up and has graduated to v2.0. 🎓 We’re pretty excited about this new version. In this post, I’ll give you the highlights of the API changes we introduced in v2.0.

API cleanup

As part of this major version release, we took the opportunity to do a little fall cleaning. 🧹 We removed all deprecated API items. We hope this will make it easier to find the API item you’re looking for. If you’re moving from an earlier version of the SDK, we recommend that you first upgrade to version 1.11 and replace any API calls that result in deprecation warnings. Then you’re ready to upgrade to version 2.0.

See the migration guide for more details. 

Event listeners

In early versions of 1.x, you could be notified about SDK events by setting callback functions for three properties: onPluginDisable, onPluginError, and onTextStats. We’ve moved to a more modern approach of using event listeners. Check out GrammarlyEditorPluginElement’s events for a complete list of events you can listen for in your app. 

For example, you could listen for document-stats events:

const editor =
document.querySelector("grammarly-editor-plugin");
editor.addEventListener("document-stats", yourFunction);

You can see a complete, interactive example on CodeSandbox.

Note that callbacks are the idiomatic way to work with events in React, so callback props can be passed in React: GrammarlyEditorPluginCallbacks.

Web component configuration for vanilla JavaScript

In v1.x, we provided you with three ways to add the Grammarly Text Editor Plugin to JavaScript apps: 

• Adding the data-grammarly attribute to your text editor
• Calling addPlugin() (previously named withElement())
• Wrapping the editor with the <grammarly-editor-plugin> web component

After working with developers in our beta program and continuing to develop the JavaScript plugin’s API, we now recommend adding the plugin to your text editors by wrapping them with the <grammarly-editor-plugin> web component whenever possible. 

To make working with the web component even easier, in v1.8.3 we added the ability for you to customize the plugin by setting the web component’s attributes. Here is an example of configuring the plugin to use a Canadian dialect and autocomplete:

<grammarly-editor-plugin config.documentDialect="canadian"
config.autocomplete="on">
<textarea></textarea>
</grammarly-editor-plugin>

You can see a complete, interactive example on CodeSandbox. 

Vue version

We’ve changed the default export in @grammarly/editor-sdk-vue to the Vue 3 package (previously, the default export was the Vue 2 package). 

If you’re using Vue 2, you’ll need to update your import paths from @grammarly/editor-sdk-vue to @grammarly/editor-sdk-vue/v2. 

If you’re using Vue 3, you can continue to use @grammarly/editor-sdk-vue/v3, or you can shorten the path to @grammarly/editor-sdk-vue. 

You’ll also notice our code examples in the docs will feature Vue 3’s Composition API.

Activation property

Brand new for v2.0 is the activation property, which allows you to set whether the plugin is activated when a user focuses on a text editor (the default behavior) or immediately. You may want to set activation to immediate if you want your users to begin seeing suggestions or stats like word count as soon as they load the page. 

Here is an example of how to set activation to immediate:

<grammarly-editor-plugin config.activation="immediate">
<textarea></textarea>
</grammarly-editor-plugin>

You can see a complete example on CodeSandbox. 

New docs navigation

Our docs now allow you to switch between Version 1.0 and Version 2.0, so you can view the docs for your preferred version. You can change the version by selecting the version number in the sub-navigation bar.

We are no longer making updates to the 1.0 version of the docs, so be sure to switch to the 2.0 version for the latest information.

Summary

In this post, I highlighted the significant API changes we made as we upgraded our SDK to v2.0. 

If you’re currently on a 1.x version of the SDK, check out the migration guide for details on how to move to the shiny, new v2.0 release. Either way, be sure to regularly check the changelog, so you can stay up to date with the latest and greatest features as we release them. 

I couldn’t cover all of the amazing things our team has been working on over the past few months in this post. We also added features like tone detector, autocomplete, user feedback, and trusted authentication. Additionally, we made it easier for you to work with the SDK by adding a usage dashboard and the ability for you to add collaborators to your app. 

If you have any questions about the SDK or suggestions for how we can improve it, let us know in the Grammarly for Developers community on GitHub.