diff --git a/src/MDXEditor.tsx b/src/MDXEditor.tsx index 88b4c2f..4b4de82 100644 --- a/src/MDXEditor.tsx +++ b/src/MDXEditor.tsx @@ -5,6 +5,7 @@ import { Translation, composerChildren$, contentEditableClassName$, + spellCheck$, corePlugin, editorRootElementRef$, editorWrappers$, @@ -44,8 +45,9 @@ const LexicalProvider: React.FC<{ const RichTextEditor: React.FC = () => { const t = useTranslation() - const [contentEditableClassName, composerChildren, topAreaChildren, editorWrappers, placeholder] = useCellValues( + const [contentEditableClassName, spellCheck, composerChildren, topAreaChildren, editorWrappers, placeholder] = useCellValues( contentEditableClassName$, + spellCheck$, composerChildren$, topAreaChildren$, editorWrappers$, @@ -63,6 +65,7 @@ const RichTextEditor: React.FC = () => { } placeholder={ @@ -222,6 +225,11 @@ export interface MDXEditorProps { * Use this to style the various content elements like lists and blockquotes. */ contentEditableClassName?: string + /** + * Controls the spellCheck value for the content editable element of the eitor. + * Defaults to true, use false to disable spell checking. + */ + spellCheck?: boolean /** * The markdown to edit. Notice that this is read only when the component is mounted. * To change the component content dynamically, use the `MDXEditorMethods.setMarkdown` method. @@ -300,6 +308,7 @@ export const MDXEditor = React.forwardRef((pro plugins={[ corePlugin({ contentEditableClassName: props.contentEditableClassName ?? '', + spellCheck: props.spellCheck ?? true, initialMarkdown: props.markdown, onChange: props.onChange ?? noop, onBlur: props.onBlur ?? noop, diff --git a/src/plugins/core/index.ts b/src/plugins/core/index.ts index d63429e..882ace2 100644 --- a/src/plugins/core/index.ts +++ b/src/plugins/core/index.ts @@ -118,6 +118,12 @@ export const activeEditor$ = Cell(null) */ export const contentEditableClassName$ = Cell('') +/** + * Holds the spellcheck value of the content editable element. + * @group Core + */ +export const spellCheck$ = Cell(true) + /** * Holds the readOnly state of the editor. * @group Core @@ -845,6 +851,7 @@ export const lexicalTheme$ = Cell(lexicalTheme) export const corePlugin = realmPlugin<{ initialMarkdown: string contentEditableClassName: string + spellCheck: boolean placeholder?: React.ReactNode autoFocus: boolean | { defaultSelection?: 'rootStart' | 'rootEnd'; preventScroll?: boolean | undefined } onChange: (markdown: string) => void @@ -879,6 +886,7 @@ export const corePlugin = realmPlugin<{ [addComposerChild$]: SharedHistoryPlugin, [contentEditableClassName$]: params?.contentEditableClassName, + [spellCheck$]: params?.spellCheck, [toMarkdownOptions$]: params?.toMarkdownOptions, [autoFocus$]: params?.autoFocus, [placeholder$]: params?.placeholder, @@ -943,6 +951,7 @@ export const corePlugin = realmPlugin<{ update(realm, params) { realm.pubIn({ [contentEditableClassName$]: params?.contentEditableClassName, + [spellCheck$]: params?.spellCheck, [toMarkdownOptions$]: params?.toMarkdownOptions, [autoFocus$]: params?.autoFocus, [placeholder$]: params?.placeholder,