Community
GrammarlyEditorPluginElement
<grammarly-editor-plugin> is a web component that adds Grammarly suggestions to the HTML element it wraps.
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: HTMLInputElement | HTMLTextAreaElement | HTMLElement, 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
Current editor configuration
Example:
<grammarly-editor-plugin>
<textarea></textarea>
</grammarly-editor-plugin>
const editor = document.querySelector("grammarly-editor-plugin");
editor.config = { autocomplete: "on", documentDialect: "british" };
Attributes
Which English dialect should be assumed?
Suggests alternatives to words that occur frequently in the same paragraph.
Suggests alternatives to bland and overused words such as "good" and "nice".
Suggests ways to sound more natural and fluent.
Suggests adding the Oxford comma after the second-to-last item in a list of things.
Flags unnecessary use of ellipses (...).
Suggests placing punctuation before closing quotation marks.
Suggests completing all incomplete sentences, including stylistic sentence fragments that may be intentional.
Flags use of personal pronouns such as "I" and "you" in academic writing.
Flags use of conjunctions such as "but" and "and" at the beginning of sentences.
Flags use of prepositions such as "with" and "in" at the end of sentences.
Suggests rewriting split infinitives so that an adverb doesn't come between "to" and the verb.
Suggests adding missing spacing after a numeral when writing times.
Flags use of passive voice.
Flags long, complicated sentences that could potentially confuse your reader.
Suggests splitting long, complicated sentences that could potentially confuse your reader.
Suggests using person-first language to refer respectfully to an individual with a disability.
Suggests alternatives to potentially gender-biased and non-inclusive phrasing.
Flags LGBTQIA+-related terms that may be seen as biased, outdated, or disrespectful in some contexts.
Suggests alternatives to language that may be considered politically incorrect.
Suggests alternatives to potentially biased language related to race and ethnicity.
Suggests alternatives to potentially biased language related to older adults.
Suggests alternatives to potentially ableist language.
Suggests alternatives to potentially biased language related to parenting and family systems.
Quinn hoped to meet their { real father => birth father } one day.
Suggests spelling out numbers zero through ten.
Suggests spelling out numbers at the beginning of sentences.
Flags a series of nouns that modify a final noun.
The {store manager policy handbook update meeting } is tomorrow.
Flags series of sentences that follow the same pattern.
I read an interesting book recently. It was about computers. I usually read novels.
Suggests removing extra spaces surrounding a slash.
I just wanted to send a { reminder / follow-up => reminder/follow-up }.
Suggests alternatives to language related to human slavery.
My professor wrote a book about { slaves => enslaved people } in America.
Suggests alternatives to terms with origins in the institution of slavery.
The apartment’s { master => main|primary } bedroom has a view of the sea.
Collect user feedback after the user takes action on 5 suggestions.
We will not request feedback more than once in a 30 day period.
User feedback is required for the Free plan. Learn more about our plans.
Text shown to introduce first-time users to Grammarly.
This introductory text shows in the footer of suggestion cards until the user first accepts or dismisses a suggestion.
Show the tone detector interface (beside the Grammarly button).
Note that tone detection requires a text of at least 150 characters.
Tone detector is available only on the Plus plan. Learn more about our plans.
Offer to complete phrases for your users as they type. Learn more
Autocomplete is not currently supported for <input> fields.
If you have a Content Security Policy (CSP), you will need to update it as described here.
Autocomplete is available only on the Plus plan. Learn more about our plans.
URI to redirect to after successful account connection.
OAuth assertion to verify ownership of the clientId.
Show suggestion cards when a user hovers over a suggestion underline.
Show underlines for suggestions.
Activation strategy used by the Editor Plugin
focus: Plugin activates once the text field is focused
immediate: Plugin activates immediately
Events
Triggered when a suggestion card is opened.
const editor = document.querySelector("grammarly-editor-plugin");
editor.addEventListener("suggestion-card-open", (event) => {
console.log("Suggestion card shown to user");
});
Triggered when a suggestion card is closed.
const editor = document.querySelector("grammarly-editor-plugin");
editor.addEventListener("suggestion-card-close", (event) => {
console.log("Suggestion card closed");
});
Triggered when the user turns off Grammarly.
const editor = document.querySelector("grammarly-editor-plugin");
editor.addEventListener("plugin-turned-off", (event) => {
console.log("Grammarly Editor SDK turned off");
});
Triggered on fatal error with the plugin.
const editor = document.querySelector("grammarly-editor-plugin");
editor.addEventListener("plugin-error", (event) => {
console.log("Grammarly Editor SDK has thrown an error:", event.detail);
});
Triggered when new text information is available. This event can be used to track features of text as it is being written.
document-stats is available only on the Plus plan. Learn more about our plans.
<div>
Words: <span data-field="wordsCount"></span> — Reading time: <span data-field="readingTime"></span> —
Speaking time: <span data-field="speakingTime"></span> — 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");
});
Triggered when new session information is available. This event can be used to track information about the writing session.
session-stats is available only on the Plus plan. Learn more about our plans.
<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");
});
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: HTMLInputElement | HTMLTextAreaElement | HTMLElement, viewport?: HTMLElement): void;Examples
See editor-sdk-tinymce-imperativeopen in new window
Parameters
| Name | Type | Description |
|---|---|---|
| editor | HTMLInputElement | HTMLTextAreaElement | HTMLElement | 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 |