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

clientIdClientId | undefined

configEditorConfig
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

NameTypeDescription
typeK
listener(this: HTMLElement, ev: GrammarlyEditorPluginElementEventMap[K]) => any
optionsboolean | 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

NameTypeDescription
editorEditorElementthe editable element
viewportHTMLElementscrollable 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

NameTypeDescription
typeK
listener(this: HTMLElement, ev: GrammarlyEditorPluginElementEventMap[K]) => any
optionsboolean | EventListenerOptions | undefined
Last Updated: 4/12/2023, 3:24:55 PM