Our engineering team is all about continuous improvement, and I’ve been so impressed with the features and fixes they’ve been cranking out since we moved from our beta program to general availability last fall. I’m excited to share my favorite updates with you in this post!
- Keyboard shortcuts ⌨️
- Personal dictionary 📖
- Indian English dialect 🇮🇳
- Grammarly button menu position ↔️
- Fix for leftover underlines ⚙️
- The Configurator 🤖
- Diagnosing issues guide 🔍
- Glossary 📑
Video overview
I got together with the engineering team for a live stream on February 2. The engineers demoed the features and fixes I discuss in this blog post and shared the stories behind their work. Check out the recording below.
Keyboard shortcuts ⌨️
The ability to navigate the Grammarly Text Editor Plugin using keyboard shortcuts is one of the most common feature requests we’ve heard from you. I’m thrilled to share that we added keyboard shortcuts in version 2.3.0 of the Grammarly Text Editor SDK. These shortcuts improve the plugin’s accessibility and make it easier for a power user to quickly navigate through suggestions without switching between their keyboard and mouse.
When a suggestion card is open, your users can press the A key to accept a suggestion, the D key to dismiss a suggestion, and the left or right arrow key to navigate between suggestions. Users who want to learn the keyboard shortcuts or open suggestion cards using just their keyboards can enter keyboard mode by pressing Cmd+Ctrl+G on Mac or Ctrl+Alt+G on Windows. Visit the documentation on keyboard shortcuts for the full list of shortcuts.
You can try keyboard shortcuts for yourself in our online demo.
Indian English dialect 🇮🇳
English dialects vary around the world, and we are excited to offer an Indian English dialect option in the SDK beginning in version 2.3.8. Our dialect list now includes American English, Australian English, British English, Canadian English, and Indian English.
You can choose to configure the Grammarly Text Editor Plugin so it uses a particular dialect (e.g. "indian"), the dialect your user has set in their browser settings ("auto-browser"), or the dialect detected in your user’s text ("auto-text"). Note that your users can override the plugin’s dialect configuration by selecting a dialect in the Grammarly button menu.
You can explore the dialect options in this CodeSandbox.
Personal dictionary 📖
We’ve found that users love being able to customize their Grammarly experience. One of the ways we allow them to do so throughout our product offerings is by adding words to their own personal dictionaries. Beginning in SDK version 2.3.2, your users can add words to their personal dictionaries using the plugin.
In order for your users to take advantage of this new feature, you’ll first need to turn on connected accounts in your app. Then, when a user who has connected their Grammarly account to your app hovers over a word that Grammarly doesn’t recognize, they’ll have the option of adding the word to their personal dictionary. Users can manage their personal dictionaries at account.grammarly.com/customize.
You can try adding a word to your personal dictionary using our online demo. Don’t forget to sign in to your account first. 😊
Grammarly button menu position ↔️
We heard from one of our community members that they wanted to specify whether the Grammarly button menu opened to the left or right of the button. So we made it happen! Beginning in version 2.1.0, you can specify the menu-position as left or right.
Check out this CodeSandbox where you can explore the menu-position option.
Fix for leftover underlines ⚙️
While we were building our own web app using the Grammarly Text Editor Plugin, we discovered a bug: Grammarly’s suggestion underlines were remaining in the text editor after the text was programmatically removed when a user took an action like clicking a button.
When a user clicks the Post Inspiration button, the web app programmatically removes the text in the text editor but the underlines remain.
Beginning in SDK version 2.1.0, suggestion underlines will update whenever a blur event occurs. You can learn more about how we arrived at this solution in Brian Schiller’s blog post “Behind the Scenes: How We Fixed Leftover Underlines in the Grammarly Text Editor Plugin.” Brian also shares how to fire a change event if our fix isn’t working for your use case.
The Configurator 🤖
Software engineer Jason Sperske and developer educator Andrew DiMola got together during a company-wide hack week to create something that would make building and sharing configurations of the plugin super simple, and the Configurator was born.
The Configurator allows you to try various configurations of the plugin. You can switch between the Plus plan and the Free plan to preview the additional suggestions that come with the Plus plan. You can also try turning various features like the tone detector and autocomplete on and off. My favorite part is customizing the visual theme of the plugin: switching between light and dark mode, selecting the interactive color, picking a font family, and even customizing the border radius of buttons and cards.
What makes the Configurator so fast and easy to use is that you don’t have to write any code—you simply select the options you want to try in the left pane, and a preview appears on the right.
Once you have a configuration you like, you can copy the code snippet(s) on the right and paste them into your app.
For example, I created a custom configuration inspired by Taylor Swift’s Folklore. Here are the code snippets the Configurator generated for me:
JavaScript:
const pluginElement = document.querySelector(
"grammarly-editor-plugin");
pluginElement.config = {
activation: "immediate",
autocomplete: "on",
underlines: "on",
toneDetector: "on"
};
CSS:
grammarly-editor-plugin {
--grammarly-default-font-family: Hoefler Text;
--grammarly-interactive-color: #e1e1e1;
--grammarly-default-border-radius: 10px;
--grammarly-card-border-radius: 10px;
color-scheme: dark;
}
grammarly-button {
color-scheme: dark;
}If you want to share your custom configuration with someone else or keep a copy for yourself, click the Share button. The URL for your custom configuration will be copied to your clipboard.
Check out the custom config for my Taylor Swift-inspired theme in the Configurator.
Diagnosing issues guide 🔍
I hate when things break and I’m not sure where to start looking for clues about the source of the problem. I know many of you feel the same way. That’s why our docs team recently created a comprehensive diagnosing issues guide. The guide explains where to look for debugging and logging information and how to solve common problems. It also provides options for getting further support when needed.
Glossary 📑
Another big improvement to our docs is our brand-new Grammarly for Developers glossary. Check it out if you aren’t sure about the meaning of a term we use, or if you’re searching for the correct word to use when writing about Grammarly for Developers. (If you write about us, please let us know by creating a new discussion in the Grammarly for Developers GitHub repo, so we can check it out!)
Wrapping Up
The Grammarly for Developers engineering team has been working hard to release features and fixes over the last few months. I shared some of my favorites in this post:
- Your users can now navigate Grammarly suggestions in your app using keyboard shortcuts.
- The SDK now includes an Indian English dialect option.
- Users who connect their Grammarly accounts to your app can now use the plugin to add words to their personal dictionaries.
- You can now use the menu-position attribute to set whether the Grammarly button menu opens to the left or right of the button.
- The plugin now listens for blur events so that underlines are updated whenever you programmatically update the text in a text editor.
- With the Configurator, you can easily configure the plugin without writing any code and then share that config with others.
- You can use the new diagnosing issues guide to diagnose and resolve issues in the SDK.
- The new Grammarly for Developers glossary allows you to quickly look up key terms.
We’d love to get your input on what we should build next! We’ve started a poll in our GitHub repository so we can learn what’s most important to you. Please vote! You can also share your ideas for new features by creating a discussion in the Ideas category in our GitHub repo.
