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,