‹ Back to reference

GrammarlyEditorPluginElementEventMap

Custom events emitted by GrammarlyEditorPluginElement. Try it nowopen in new window.

interface GrammarlyEditorPluginElementEventMap extends HTMLElementEventMap {
  "document-stats": CustomEvent<DocumentStats>;
  "plugin-error": CustomEvent<Error>;
  "plugin-turned-off": CustomEvent;
  "session-stats": CustomEvent<SessionStats>;
  "suggestion-card-action": CustomEvent<{
        action: /** Suggestion was accepted by the user. */ "accept" | /** Suggestion was dismissed by the user. */ "dismiss" | /** Suggestion card was closed by the user using close button. (excludes when closed due to click-outside) */ "close";
    }>;
  "suggestion-card-close": CustomEvent;
  "suggestion-card-open": CustomEvent;
}

Properties

"document-stats"Type: CustomEvent<DocumentStats>

---

Triggered when new text information is available. This event can be used to track features of text as it is being written.

Since: v1.9.0

document-stats is available only on the Plus plan. Learn moreopen in new window about our plans.

Example:

<div>
  Words: <span data-field="wordsCount"></span> &mdash; Reading time: <span data-field="readingTime"></span> &mdash;
  Speaking time: <span data-field="speakingTime"></span> &mdash; Readability score:
  <span data-field="readabilityScore"></span>
</div>

const editor = document.querySelector("grammarly-editor-plugin");

editor.addEventListener("document-stats", (event) => {
  function update(field, format = (value) => value) {
    document.querySelector(`[data-field=${field}]`).innerText = format(event.detail[field]);
  }
  const formatTime = ({ h, m, s }) => `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;

  update("wordsCount");
  update("readingTime", formatTime);
  update("speakingTime", formatTime);
  update("readabilityScore");
});

"plugin-error"Type: CustomEvent<Error>

---

Triggered on fatal error with the plugin.

Since: v1.9.0

Example:

const editor = document.querySelector("grammarly-editor-plugin");
editor.addEventListener("plugin-error", (event) => {
  console.log("Grammarly Text Editor SDK has thrown an error:", event.detail);
});

"plugin-turned-off"Type: CustomEvent

---

Triggered when the user turns off Grammarly.

Since: v1.9.0

Example:

const editor = document.querySelector("grammarly-editor-plugin");
editor.addEventListener("plugin-turned-off", (event) => {
  console.log("Grammarly Text Editor SDK turned off");
});

"session-stats"Type: CustomEvent<SessionStats>

---

Triggered when new session information is available. This event can be used to track information about the writing session.

Since: v1.9.0

session-stats is available only on the Plus plan. Learn moreopen in new window about our plans.

Example:

<ul>
  <li>Duration: <span data-field="duration"></span> seconds</li>
  <li>Suggestions Accepted: <span data-field="suggestionsAccepted"></span></li>
  <li>Suggestions Sent: <span data-field="suggestionsSent"></span></li>
  <li>Words analyzed: <span data-field="wordsAnalyzed"></span></li>
</ul>

const editor = document.querySelector("grammarly-editor-plugin");

editor.addEventListener("session-stats", (event) => {
  function update(field, format = (value) => value) {
    document.querySelector(`[data-field=${field}]`).innerText = format(event.detail[field]);
  }
  const formatBreakdown = ({ total }) => total;

  update("duration");
  update("suggestionsAccepted", formatBreakdown);
  update("suggestionsSent", formatBreakdown);
  update("wordsAnalyzed");
});

"suggestion-card-action"Type: CustomEvent<{ action: "accept" | "dismiss" | "close"; }>

---

Triggered when a suggestion card is acted upon by the user (accept, dismiss, or close).

Since: v2.3.14

Example:

const editor = document.querySelector("grammarly-editor-plugin");
editor.addEventListener("suggestion-card-action", (event) => {
  console.log("Suggestion card action:", event.detail.action);
});

"suggestion-card-close"Type: CustomEvent

---

Triggered when a suggestion card is closed.

Since: v1.8.0

Example:

const editor = document.querySelector("grammarly-editor-plugin");
editor.addEventListener("suggestion-card-close", (event) => {
  console.log("Suggestion card closed");
});

"suggestion-card-open"Type: CustomEvent

---

Triggered when a suggestion card is opened.

Since: v1.8.0

Example:

const editor = document.querySelector("grammarly-editor-plugin");
editor.addEventListener("suggestion-card-open", (event) => {
  console.log("Suggestion card shown to user");
});