Custom Events

The Grammarly Text Editor Plugin exposes several custom events that you can listen for and handle. Some of these events are displayed in your app’s dashboard.

List of events

The full list of custom events emitted by the Grammarly Text Editor Plugin.

• Events for plugin errors and deactivation:
  • plugin-error
  • plugin-turned-off
• Events that occur when suggestion cards are opened, closed, and when suggestions are accepted, dismissed, and closed:
  • suggestion-card-open
  • suggestion-card-close
  • suggestion-card-action
• Events that provide statistics about the text:
  • session-stats (Plus plan)
  • document-stats (Plus plan)

plugin-error

A plugin-error event is emitted by the Text Editor Plugin on a fatal error. It returns an Erroropen in new window object.

• API reference link
• Available on both the Lifetime Free and Plus plans

plugin-turned-off

A plugin-turned-off event is emitted by the Text Editor Plugin when the user turns the plugin off.

• API reference link
• Available on both the Lifetime Free and Plus plans

suggestion-card-open

A suggestion-card-open event is emitted by the Text Editor Plugin when a suggestion card is opened.

• API reference link
• Available on both the Lifetime Free and Plus plans

suggestion-card-close

A suggestion-card-close event is emitted by the Text Editor Plugin when a suggestion card is closed.

• API reference link
• Available on both the Lifetime Free and Plus plans

suggestion-card-action

A suggestion-card-action event is emitted by the Text Editor Plugin when an open suggestion card is acted upon by the user. It returns a JSON object with the action key containing one of three values:

"accept": Signals that the suggestion card was accepted by the user

"dismiss": Signals that the suggestion card was dismissed by the user

"close": Signals that the suggestion card was closed by the user with the close button

• API reference link
• Available on both the Lifetime Free and Plus plans

session-stats

session-stats is an event emitted by the Text Editor Plugin that returns a SessionStats object. This object contains statistics about the Grammarly session.

• API reference link
• Available on the Plus plan

document-stats

document-stats is an event emitted by the Text Editor Plugin that returns a DocumentStats object. This object contains statistics about the user-entered text.

• API reference link
• Available on the Plus plan

Handling events

The way to handle and listen for plugin events in your code depends on your integration.

JavaScript

For JavaScript integrations, you can register an event handleropen in new window (listener) that runs when an event fires.

The following example demonstrates how to add an event listener that listens for the plugin-error event and handles the event in a custom function named handleEvent().

const editor = document.querySelector("grammarly-editor-plugin");
editor.addEventListener("plugin-error", handleEvent);

function handleEvent(event) {
  console.log("Grammarly Text Editor SDK has thrown an error: ", event.detail);
}

Check out the full example on GitHubopen in new window.

React

For React integrations, use callbacks to handle events. For example, you can use the onPluginError callback to handle the plugin-error event.

The following example demonstrates how to use callbacks that listen for the document-stats and session-stats events and handle those events in custom functions named handleDocStats() and handleSessionStats().

<GrammarlyEditorPlugin
  onDocumentStats={(evt) => handleDocStats(evt.detail)}
  onSessionStats={(evt) => handleSessionStats(evt.detail)}
>

// prints DocumentStats object to console (charsCount, readabilityScore, etc.)
function handleDocStats(stats) {
  console.log(stats);
}

// prints SessionStats object to console (duration, suggestionsAccepted, etc.)
function handleSessionStats(stats) {
  console.log(stats);
}

Check out the full example on GitHubopen in new window.

Vue

For Vue integrations and event handling, you can use the v-on directive (i.e., the @ symbol). Check out the Vue documentationopen in new window for more information.

The following example demonstrates how to export a method named handleEvent that is invoked when a suggestion card is opened (suggestion-card-open).

<script>
  export default {
    components: { Grammarly, GrammarlyEditorPlugin },
    methods: {
      handleEvent: function (event) {
        console.log("event handled!");
      },
    },
  };
</script>

<template>
  <Grammarly clientId="YOUR_CLIENT_ID">
    <GrammarlyEditorPlugin v-on:suggestion-card-open="handleEvent">
      <textarea></textarea>
    </GrammarlyEditorPlugin>
  <Grammarly>
</template>