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"
"on" | "off"
"on" | "off"
"config.suggestionCategories.possiblyPoliticallyIncorrectLanguage" — "on" | "off"
"on" | "off"
"on" | "off"
"on" | "off"
"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"
"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 |