@grammarly/editor-sdk
Overview
See the Text Editor SDK guide for installation options.
The Text Editor SDK can be configured according to your app's needs. Specify configuration with HTML attributes on the <grammarly-editor-plugin>
web component.
<grammarly-editor-plugin
config.documentDialect="british"
config.suggestionCategories.oxfordComma="on"
>
<textarea></textarea>
</grammarly-editor-plugin>
This allows your app to:
- specify information about the end user's input to improve Grammarly's suggestions
- influence Grammarly suggestion types (SuggestionCategories)
Configuration options can also be specified in javascript.
const pluginElement = document.querySelector("grammarly-editor-plugin");
pluginElement.config = {
documentDialect: "canadian",
suggestionCategories: {
passiveVoice: "on",
},
};
Refer to EditorConfig for full details.
Theming
CSS variables that allow you to theme your app are detailed in Customization.
Reference
Name | Description |
---|---|
init() | Initialize Grammarly. The ClientId must be passed another way. |
init(clientId, config, win) | Initialize Grammarly and start using EditorSDK to connect editors. |
ClientId | Identifier used to authenticate with Grammarly. |
Config | Configuration to customize the Grammarly integration. Used by init() and the <Grammarly> component in React and Vue integrations. |
Dialect | Specific variety of English being written. |
DocumentStats | Statistics about the user-entered text. Try it nowopen in new window. |
Domain | The style or type of writing to be analyzed. |
Editor | An instance of Editor represents an HTML editor from your app enhanced with Grammarly. See EditorConfig to customize per editor instance. |
EditorConfig | Configuration to customize the Grammarly integration per Editor instance. |
EditorSDK | Overall API for the Editor SDK which can be used to create an Editor, which represents an HTML editor enhanced with Grammarly. |
GrammarlyButtonElement | <grammarly-button> is a web component that allows you to place the Grammarly button in a custom position in your app. The Grammarly button can only display once per page. Its location is set and displayed according to the earliest inclusion of <grammarly-button> . |
GrammarlyEditorPluginCallbacks | Callback functions for custom eventsopen in new window emitted by the Grammarly Text Editor Plugin. |
GrammarlyEditorPluginElement | <grammarly-editor-plugin> is a web component that adds Grammarly suggestions to the HTML element it wraps. |
GrammarlyEditorPluginElementEventMap | Custom events emitted by GrammarlyEditorPluginElement. Try it nowopen in new window. |
MenuPosition | Position of the Grammarly button menu relative to the Grammarly button. |
SessionStats | Statistics about the Grammarly session. |
SessionSuggestionBreakdown | Suggestion total along with counts by type. Try it nowopen in new window. |
SuggestionCategories | Categories of suggestions that can be muted. |
Time | Time in hours, minutes, and seconds. |
TonePosition | Position of the tone detectoropen in new window (if present) relative to the Grammarly button. |