feat: add spellCheck prop for content editable element

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 = () => {
               <ContentEditable
                 className={classNames(styles.contentEditable, contentEditableClassName)}
                 ariaLabel={t('contentArea.editableMarkdown', 'editable markdown')}
+                spellCheck={spellCheck}
               />
             }
             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<MDXEditorMethods, MDXEditorProps>((pro
       plugins={[
         corePlugin({
           contentEditableClassName: props.contentEditableClassName ?? '',
+          spellCheck: props.spellCheck ?? true,
           initialMarkdown: props.markdown,
           onChange: props.onChange ?? noop,
           onBlur: props.onBlur ?? noop,

src/plugins/core/index.ts

@@ -118,6 +118,12 @@ export const activeEditor$ = Cell<LexicalEditor | null>(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<EditorThemeClasses>(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,