Back to reference

GrammarlyEditorPluginElementEventMap

Custom events emitted by GrammarlyEditorPluginElement

Try it outopen 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-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

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 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 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

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="wordsChecked"></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("wordsChecked");
});
"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");
});
Last Updated: 11/22/2022, 9:58:49 PM