@mdxeditor/editor 3.17.4 → 3.19.0

package/dist/MDXEditor.js

@@ -1,7 +1,7 @@
-import { useCellValue, useCellValues, usePublisher, useRealm } from "@mdxeditor/gurx";
+import { useCellValue, usePublisher, useCellValues, useRealm } from "@mdxeditor/gurx";
 import React__default from "react";
 import { RealmWithPlugins } from "./RealmWithPlugins.js";
-import { corePlugin, rootEditor$, useTranslation, contentEditableClassName$, composerChildren$, topAreaChildren$, editorWrappers$, placeholder$, editorRootElementRef$, viewMode$, markdownSourceEditorValue$, markdown$, setMarkdown$, insertMarkdown$ } from "./plugins/core/index.js";
+import { corePlugin, rootEditor$, useTranslation, contentEditableRef$, contentEditableClassName$, spellCheck$, composerChildren$, topAreaChildren$, editorWrappers$, placeholder$, editorRootElementRef$, viewMode$, markdownSourceEditorValue$, markdown$, setMarkdown$, insertMarkdown$ } from "./plugins/core/index.js";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable.js";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary.js";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin.js";
@@ -20,8 +20,13 @@ const LexicalProvider = ({ children }) => {
 };
 const RichTextEditor = () => {
   const t = useTranslation();
-  const [contentEditableClassName, composerChildren, topAreaChildren, editorWrappers, placeholder] = useCellValues(
+  const setContentEditableRef = usePublisher(contentEditableRef$);
+  const onRef = (_contentEditableRef) => {
+    setContentEditableRef({ current: _contentEditableRef });
+  };
+  const [contentEditableClassName, spellCheck, composerChildren, topAreaChildren, editorWrappers, placeholder] = useCellValues(
     contentEditableClassName$,
+    spellCheck$,
     composerChildren$,
     topAreaChildren$,
     editorWrappers$,
@@ -30,13 +35,14 @@ const RichTextEditor = () => {
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, topAreaChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })), /* @__PURE__ */ React__default.createElement(RenderRecursiveWrappers, { wrappers: editorWrappers }, /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.rootContentEditableWrapper, "mdxeditor-root-contenteditable") }, /* @__PURE__ */ React__default.createElement(
     RichTextPlugin,
     {
-      contentEditable: /* @__PURE__ */ React__default.createElement(
+      contentEditable: /* @__PURE__ */ React__default.createElement("div", { ref: onRef }, /* @__PURE__ */ React__default.createElement(
         ContentEditable,
         {
           className: classNames(styles.contentEditable, contentEditableClassName),
-          ariaLabel: t("contentArea.editableMarkdown", "editable markdown")
+          ariaLabel: t("contentArea.editableMarkdown", "editable markdown"),
+          spellCheck
         }
-      ),
+      )),
       placeholder: /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.contentEditable, styles.placeholder, contentEditableClassName) }, /* @__PURE__ */ React__default.createElement("p", null, placeholder)),
       ErrorBoundary: LexicalErrorBoundary
     }
@@ -117,6 +123,7 @@ const MDXEditor = React__default.forwardRef((props, ref) => {
       plugins: [
         corePlugin({
           contentEditableClassName: props.contentEditableClassName ?? "",
+          spellCheck: props.spellCheck ?? true,
           initialMarkdown: props.markdown,
           onChange: props.onChange ?? noop,
           onBlur: props.onBlur ?? noop,

package/dist/index.d.ts

@@ -632,6 +632,12 @@ export declare interface ConditionalContentsOption {
  */
 export declare const contentEditableClassName$: NodeRef<string>;
 
+/**
+ * A reference to the content editable element.
+ * @group Core
+ */
+export declare const contentEditableRef$: NodeRef<default_2.RefObject<HTMLDivElement> | null>;
+
 /**
  * Returns true if the user is pressing the control key on Windows or the meta key on Mac.
  * @group Utils
@@ -2057,6 +2063,11 @@ export declare 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.
@@ -2607,6 +2618,12 @@ export declare const SingleChoiceToggleGroup: <T extends string>({ value, onChan
 
 /* Excluded from this release type: SingleToggleGroup */
 
+/**
+ * Holds the spellcheck value of the content editable element.
+ * @group Core
+ */
+export declare const spellCheck$: NodeRef<boolean>;
+
 /**
  * @group Image
  */

package/dist/index.js

@@ -4,7 +4,7 @@ import { MDXEditor } from "./MDXEditor.js";
 import { defaultSvgIcons } from "./defaultSvgIcons.js";
 import { MarkdownParseError, UnrecognizedMarkdownConstructError, importMarkdownToLexical, importMdastTreeToLexical } from "./importMarkdownToLexical.js";
 import { exportLexicalTreeToMdast, exportMarkdownFromLexical } from "./exportMarkdownFromLexical.js";
-import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, directiveDescriptors$, editorInFocus$, editorRootElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, lexicalTheme$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, syntaxExtensions$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, translation$, useTranslation, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
+import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, contentEditableRef$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, directiveDescriptors$, editorInFocus$, editorRootElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, lexicalTheme$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, spellCheck$, syntaxExtensions$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, translation$, useTranslation, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
 import { ALL_HEADING_LEVELS, allowedHeadingLevels$, headingsPlugin } from "./plugins/headings/index.js";
 import { insertThematicBreak$, thematicBreakPlugin } from "./plugins/thematic-break/index.js";
 import { applyListType$, currentListType$, listsPlugin } from "./plugins/lists/index.js";
@@ -189,6 +189,7 @@ export {
   compose,
   composerChildren$,
   contentEditableClassName$,
+  contentEditableRef$,
   controlOrMeta,
   convertSelectionToNode$,
   corePlugin,
@@ -292,6 +293,7 @@ export {
   sandpackPlugin,
   saveImage$,
   setMarkdown$,
+  spellCheck$,
   switchFromPreviewToLinkEdit$,
   syntaxExtensions$,
   tablePlugin,

package/dist/plugins/core/index.js

@@ -33,6 +33,7 @@ const NESTED_EDITOR_UPDATED_COMMAND = createCommand("NESTED_EDITOR_UPDATED_COMMA
 const rootEditor$ = Cell(null);
 const activeEditor$ = Cell(null);
 const contentEditableClassName$ = Cell("");
+const spellCheck$ = Cell(true);
 const readOnly$ = Cell(false, (r) => {
   r.sub(r.pipe(readOnly$, withLatestFrom(rootEditor$)), ([readOnly, rootEditor]) => {
     rootEditor == null ? void 0 : rootEditor.setEditable(!readOnly);
@@ -107,6 +108,7 @@ const jsxComponentDescriptors$ = Cell([]);
 const directiveDescriptors$ = Cell([]);
 const codeBlockEditorDescriptors$ = Cell([]);
 const editorRootElementRef$ = Cell(null);
+const contentEditableRef$ = Cell(null);
 const addLexicalNode$ = Appender(usedLexicalNodes$);
 const addImportVisitor$ = Appender(importVisitors$);
 const addSyntaxExtension$ = Appender(syntaxExtensions$);
@@ -494,6 +496,7 @@ const corePlugin = realmPlugin({
       ],
       [addComposerChild$]: SharedHistoryPlugin,
       [contentEditableClassName$]: params == null ? void 0 : params.contentEditableClassName,
+      [spellCheck$]: params == null ? void 0 : params.spellCheck,
       [toMarkdownOptions$]: params == null ? void 0 : params.toMarkdownOptions,
       [autoFocus$]: params == null ? void 0 : params.autoFocus,
       [placeholder$]: params == null ? void 0 : params.placeholder,
@@ -549,6 +552,7 @@ const corePlugin = realmPlugin({
   update(realm, params) {
     realm.pubIn({
       [contentEditableClassName$]: params == null ? void 0 : params.contentEditableClassName,
+      [spellCheck$]: params == null ? void 0 : params.spellCheck,
       [toMarkdownOptions$]: params == null ? void 0 : params.toMarkdownOptions,
       [autoFocus$]: params == null ? void 0 : params.autoFocus,
       [placeholder$]: params == null ? void 0 : params.placeholder,
@@ -589,6 +593,7 @@ export {
   codeBlockEditorDescriptors$,
   composerChildren$,
   contentEditableClassName$,
+  contentEditableRef$,
   convertSelectionToNode$,
   corePlugin,
   createActiveEditorSubscription$,
@@ -624,6 +629,7 @@ export {
   rootEditor$,
   rootEditorSubscriptions$,
   setMarkdown$,
+  spellCheck$,
   syntaxExtensions$,
   toMarkdownExtensions$,
   toMarkdownOptions$,

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "3.17.4",
+  "version": "3.19.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",