‹ Back to reference

GrammarlyEditorPluginElement

<grammarly-editor-plugin> is a web component that adds Grammarly suggestions to the HTML element it wraps.

Emits custom events: GrammarlyEditorPluginElementEventMap

declare class GrammarlyEditorPluginElement extends HTMLElement {
  addEventListener<K extends keyof GrammarlyEditorPluginElementEventMap>(type: K, listener: (this: HTMLElement, ev: GrammarlyEditorPluginElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
  get clientId(): ClientId | undefined;
  get config(): EditorConfig;
  connect(editor: EditorElement, viewport?: HTMLElement): void;
  disconnect(): void;
  removeEventListener<K extends keyof GrammarlyEditorPluginElementEventMap>(type: K, listener: (this: HTMLElement, ev: GrammarlyEditorPluginElementEventMap[K]) => any, options?: boolean | EventListenerOptions | undefined): void;
}

Properties

clientId — ClientId | undefined

config — EditorConfig
Current editor configuration
Example:

<grammarly-editor-plugin>
  <textarea></textarea>
</grammarly-editor-plugin>

<script>
const editor = document.querySelector("grammarly-editor-plugin")
editor.config = { autocomplete: "on", documentDialect: "british" };
</script>

Attributes

"client-id" — ClientId

"config.documentDialect" — Dialect

"config.documentDomain" — Domain

"config.suggestionCategories.variety" — "on" | "off"

"config.suggestionCategories.vocabulary" — "on" | "off"

"config.suggestionCategories.fluency" — "on" | "off"

"config.suggestionCategories.oxfordComma" — "on" | "off"

"config.suggestionCategories.unnecessaryEllipses" — "on" | "off"

"config.suggestionCategories.punctuationWithQuotation" — "on" | "off"

"config.suggestionCategories.stylisticFragments" — "on" | "off"

"config.suggestionCategories.informalPronounsAcademic" — "on" | "off"

"config.suggestionCategories.conjunctionAtStartOfSentence" — "on" | "off"

"config.suggestionCategories.prepositionAtTheEndOfSentence" — "on" | "off"

"config.suggestionCategories.splitInfinitive" — "on" | "off"

"config.suggestionCategories.missingSpaces" — "on" | "off"

"config.suggestionCategories.passiveVoice" — "on" | "off"

"config.suggestionCategories.readabilityFillerWords" — "on" | "off"

"config.suggestionCategories.readabilityTransforms" — "on" | "off"

"config.suggestionCategories.personFirstLanguage" — "on" | "off"

"config.suggestionCategories.possiblyBiasedLanguageGenderRelated" — "on" | "off"

"config.suggestionCategories.possiblyBiasedLanguageLGBTQIARelated" — "on" | "off"

"config.suggestionCategories.possiblyPoliticallyIncorrectLanguage" — "on" | "off"

"config.suggestionCategories.possiblyBiasedLanguageRaceEthnicityRelated" — "on" | "off"

"config.suggestionCategories.possiblyBiasedLanguageAgeRelated" — "on" | "off"

"config.suggestionCategories.possiblyBiasedLanguageDisabilityRelated" — "on" | "off"

"config.suggestionCategories.possiblyBiasedLanguageFamilyRelated" — "on" | "off"

"config.suggestionCategories.numbersZeroThroughTen" — "on" | "off"

"config.suggestionCategories.numbersBeginningSentences" — "on" | "off"

"config.suggestionCategories.nounStrings" — "on" | "off"

"config.suggestionCategories.sentenceVariety" — "on" | "off"

"config.suggestionCategories.spacesSurroundingSlash" — "on" | "off"

"config.suggestionCategories.possiblyBiasedLanguageHumanRights" — "on" | "off"

"config.suggestionCategories.possiblyBiasedLanguageHumanRightsRelated" — "on" | "off"

"config.userFeedback" — "on" | "off"

"config.introText" — string

"config.toneDetector" — "on" | "off"

"config.autocomplete" — "on" | "off"

"config.oauthRedirectUri" — string

"config.oauthAssertionProvider" — string | (() => Promise<{ assertion: string; }>)

"config.suggestionCards" — "on" | "off"

"config.underlines" — "on" | "off"

Events

"suggestion-card-open" — CustomEvent

Triggered when a suggestion card is opened

"suggestion-card-close" — CustomEvent

Triggered when a suggestion card is closed

"plugin-turned-off" — CustomEvent

Triggered when the user turns off Grammarly.

"plugin-error" — CustomEvent<Error>

Triggered on fatal error with the plugin

"document-stats" — CustomEvent<DocumentStats>

Triggered when new text information is available.

"session-stats" — CustomEvent<SessionStats>

Triggered when new session information is available.

Methods

addEventListener()

addEventListener<K extends keyof GrammarlyEditorPluginElementEventMap>(type: K, listener: (this: HTMLElement, ev: GrammarlyEditorPluginElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;

Parameters

Name	Type	Description
type	K
listener	(this: HTMLElement, ev: GrammarlyEditorPluginElementEventMap[K]) => any
options	boolean | AddEventListenerOptions | undefined

connect()

When inserted into the DOM, the GrammarlyEditorPlugin will automatically detect and connect to an editable child element (editor) and its scrollable container (viewport).

In rare cases, you may need to override what was automatically detected. This function provides a way to do that by specifying a different editor and viewport.

connect(editor: EditorElement, viewport?: HTMLElement): void;

Examples

See editor-sdk-tinymce-imperativeopen in new window

Parameters

Name	Type	Description
editor	EditorElement	the editable element
viewport	HTMLElement	scrollable outer element of the editable element

disconnect()

Remove plugin from the editor.

disconnect(): void;

removeEventListener()

removeEventListener<K extends keyof GrammarlyEditorPluginElementEventMap>(type: K, listener: (this: HTMLElement, ev: GrammarlyEditorPluginElementEventMap[K]) => any, options?: boolean | EventListenerOptions | undefined): void;

Parameters

Name	Type	Description
type	K
listener	(this: HTMLElement, ev: GrammarlyEditorPluginElementEventMap[K]) => any
options	boolean | EventListenerOptions | undefined