@mdxeditor/editor 2.5.1 → 2.7.0

package/dist/MDXEditor.js

@@ -37,7 +37,7 @@ const RichTextEditor = () => {
     editorWrappers$,
     placeholder$
   );
-  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) }, /* @__PURE__ */ React__default.createElement(
+  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, { className: classNames(styles.contentEditable, contentEditableClassName) }),
@@ -71,13 +71,12 @@ const EditorRootElement = ({ children, className }) => {
   const setEditorRootElementRef = usePublisher(editorRootElementRef$);
   React__default.useEffect(() => {
     const popupContainer = document.createElement("div");
-    popupContainer.classList.add(styles.editorRoot);
-    popupContainer.classList.add(styles.popupContainer);
-    if (className) {
-      className.trim().split(" ").forEach((c) => {
-        popupContainer.classList.add(c);
-      });
-    }
+    popupContainer.classList.add(
+      "mdxeditor-popup-container",
+      styles.editorRoot,
+      styles.popupContainer,
+      ...(className ?? "").trim().split(" ").filter(Boolean)
+    );
     document.body.appendChild(popupContainer);
     editorRootElementRef.current = popupContainer;
     setEditorRootElementRef(editorRootElementRef);
@@ -85,7 +84,7 @@ const EditorRootElement = ({ children, className }) => {
       popupContainer.remove();
     };
   }, [className, editorRootElementRef, setEditorRootElementRef]);
-  return /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.editorRoot, styles.editorWrapper, className, "mdxeditor") }, children);
+  return /* @__PURE__ */ React__default.createElement("div", { className: classNames("mdxeditor", styles.editorRoot, styles.editorWrapper, className) }, children);
 };
 const Methods = ({ mdxRef }) => {
   const realm = useRealm();

package/dist/index.d.ts

@@ -836,6 +836,7 @@ export declare const diffSourcePlugin: (params?: {
  */
 export declare const DiffSourceToggleWrapper: React_2.FC<{
     children: React_2.ReactNode;
+    options?: ViewMode[];
 }>;
 
 /**
@@ -1761,6 +1762,17 @@ export declare const markdownShortcutPlugin: (params?: unknown) => RealmPlugin;
  */
 export declare const markdownSourceEditorValue$: NodeRef<string>;
 
+/**
+ * A plugin that limits the maximum length of the text content of the editor.
+ * Adapted from the Lexical plugin. https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/MaxLengthPlugin/index.tsx
+ * @example
+ * ```tsx
+ *    <MDXEditor plugins={[maxLengthPlugin(100)]} markdown={'hello world'} />
+ * ```
+ * @group Utilities
+ */
+export declare const maxLengthPlugin: (params?: number | undefined) => RealmPlugin;
+
 /**
  * A block-level HTML node.
  * @group HTML

package/dist/index.js

@@ -12,6 +12,7 @@ import { disableAutoLink$, linkPlugin } from "./plugins/link/index.js";
 import { INSERT_IMAGE_COMMAND, closeImageDialog$, disableImageResize$, imageAutocompleteSuggestions$, imageDialogState$, imagePlugin, imagePreviewHandler$, imageUploadHandler$, insertImage$, openEditImageDialog$, openNewImageDialog$, saveImage$ } from "./plugins/image/index.js";
 import { frontmatterDialogOpen$, frontmatterPlugin, hasFrontmatter$, insertFrontmatter$, removeFrontmatter$ } from "./plugins/frontmatter/index.js";
 import { quotePlugin } from "./plugins/quote/index.js";
+import { maxLengthPlugin } from "./plugins/maxlength/index.js";
 import { insertJsx$, isMdastJsxNode, jsxPlugin } from "./plugins/jsx/index.js";
 import { GenericJsxEditor } from "./jsx-editors/GenericJsxEditor.js";
 import { insertSandpack$, sandpackConfig$, sandpackPlugin } from "./plugins/sandpack/index.js";
@@ -243,6 +244,7 @@ export {
   markdownProcessingError$,
   markdownShortcutPlugin,
   markdownSourceEditorValue$,
+  maxLengthPlugin,
   mdastExtensions$,
   nestedEditorChildren$,
   noop,

package/dist/plugins/diff-source/DiffSourceWrapper.js

@@ -6,7 +6,7 @@ import styles from "../../styles/ui.module.css.js";
 import { useCellValues } from "@mdxeditor/gurx";
 const DiffSourceWrapper = ({ children }) => {
   const [error, viewMode] = useCellValues(markdownProcessingError$, viewMode$);
-  return /* @__PURE__ */ React__default.createElement("div", null, error ? /* @__PURE__ */ React__default.createElement("div", { className: styles.markdownParseError }, /* @__PURE__ */ React__default.createElement("p", null, error.error, "."), /* @__PURE__ */ React__default.createElement("p", null, "You can fix the errors in source mode and switch to rich text mode when you are ready.")) : null, /* @__PURE__ */ React__default.createElement("div", { style: { display: viewMode === "rich-text" && error == null ? "block" : "none" } }, children), viewMode === "diff" ? /* @__PURE__ */ React__default.createElement(DiffViewer, null) : null, viewMode === "source" ? /* @__PURE__ */ React__default.createElement(SourceEditor, null) : null);
+  return /* @__PURE__ */ React__default.createElement("div", { className: "mdxeditor-diff-source-wrapper" }, error ? /* @__PURE__ */ React__default.createElement("div", { className: styles.markdownParseError }, /* @__PURE__ */ React__default.createElement("p", null, error.error, "."), /* @__PURE__ */ React__default.createElement("p", null, "You can fix the errors in source mode and switch to rich text mode when you are ready.")) : null, /* @__PURE__ */ React__default.createElement("div", { className: "mdxeditor-rich-text-editor", style: { display: viewMode === "rich-text" && error == null ? "block" : "none" } }, children), viewMode === "diff" ? /* @__PURE__ */ React__default.createElement(DiffViewer, null) : null, viewMode === "source" ? /* @__PURE__ */ React__default.createElement(SourceEditor, null) : null);
 };
 export {
   DiffSourceWrapper

package/dist/plugins/diff-source/DiffViewer.js

@@ -71,7 +71,7 @@ const DiffViewer = () => {
       cmMergeViewRef.current = null;
     };
   }, [onUpdate, cmExtensions]);
-  return /* @__PURE__ */ React__default.createElement("div", { ref: elRef });
+  return /* @__PURE__ */ React__default.createElement("div", { ref: elRef, className: "mdxeditor-diff-editor" });
 };
 export {
   DiffViewer

package/dist/plugins/diff-source/SourceEditor.js

@@ -52,7 +52,7 @@ const SourceEditor = () => {
     },
     [markdown2, readOnly, updateMarkdown, cmExtensions, triggerOnBlur]
   );
-  return /* @__PURE__ */ React__default.createElement("div", { ref, className: "cm-sourceView" });
+  return /* @__PURE__ */ React__default.createElement("div", { ref, className: "cm-sourceView mdxeditor-source-editor" });
 };
 export {
   COMMON_STATE_CONFIG_EXTENSIONS,

package/dist/plugins/maxlength/index.js

@@ -0,0 +1,36 @@
+import { trimTextContentFromAnchor } from "@lexical/selection";
+import { $restoreEditorState } from "@lexical/utils";
+import { RootNode, $getSelection, $isRangeSelection } from "lexical";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { createRootEditorSubscription$ } from "../core/index.js";
+const maxLengthPlugin = realmPlugin({
+  init: (realm, maxLength = Infinity) => {
+    realm.pub(createRootEditorSubscription$, (editor) => {
+      let lastRestoredEditorState = null;
+      return editor.registerNodeTransform(RootNode, (rootNode) => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+          return;
+        }
+        const prevEditorState = editor.getEditorState();
+        const prevTextContentSize = prevEditorState.read(() => rootNode.getTextContentSize());
+        const textContentSize = rootNode.getTextContentSize();
+        if (prevTextContentSize !== textContentSize) {
+          const delCount = textContentSize - maxLength;
+          const anchor = selection.anchor;
+          if (delCount > 0) {
+            if (prevTextContentSize === maxLength && lastRestoredEditorState !== prevEditorState) {
+              lastRestoredEditorState = prevEditorState;
+              $restoreEditorState(editor, prevEditorState);
+            } else {
+              trimTextContentFromAnchor(editor, anchor, delCount);
+            }
+          }
+        }
+      });
+    });
+  }
+});
+export {
+  maxLengthPlugin
+};

package/dist/plugins/toolbar/components/DiffSourceToggleWrapper.js

@@ -3,19 +3,28 @@ import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 import React__default from "react";
 import styles from "../../../styles/ui.module.css.js";
 import { SingleChoiceToggleGroup } from "../primitives/toolbar.js";
-const DiffSourceToggleWrapper = ({ children }) => {
+const DiffSourceToggleWrapper = ({
+  children,
+  options = ["rich-text", "diff", "source"]
+}) => {
   const [viewMode, iconComponentFor] = useCellValues(viewMode$, iconComponentFor$);
   const changeViewMode = usePublisher(viewMode$);
+  const toggleGroupItems = [];
+  if (options.includes("rich-text")) {
+    toggleGroupItems.push({ title: "Rich text", contents: iconComponentFor("rich_text"), value: "rich-text" });
+  }
+  if (options.includes("diff")) {
+    toggleGroupItems.push({ title: "Diff mode", contents: iconComponentFor("difference"), value: "diff" });
+  }
+  if (options.includes("source")) {
+    toggleGroupItems.push({ title: "Source", contents: iconComponentFor("markdown"), value: "source" });
+  }
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, viewMode === "rich-text" ? children : viewMode === "diff" ? /* @__PURE__ */ React__default.createElement("span", { className: styles.toolbarTitleMode }, "Diff mode") : /* @__PURE__ */ React__default.createElement("span", { className: styles.toolbarTitleMode }, "Source mode"), /* @__PURE__ */ React__default.createElement("div", { style: { marginLeft: "auto", pointerEvents: "auto", opacity: 1 } }, /* @__PURE__ */ React__default.createElement(
     SingleChoiceToggleGroup,
     {
       className: styles.diffSourceToggle,
       value: viewMode,
-      items: [
-        { title: "Rich text", contents: iconComponentFor("rich_text"), value: "rich-text" },
-        { title: "Diff mode", contents: iconComponentFor("difference"), value: "diff" },
-        { title: "Source", contents: iconComponentFor("markdown"), value: "source" }
-      ],
+      items: toggleGroupItems,
       onChange: (value) => changeViewMode(value || "rich-text")
     }
   )));

package/dist/plugins/toolbar/primitives/select.js

@@ -29,7 +29,15 @@ const SelectContent = ({
   className = styles.selectContainer
 }) => {
   const editorRootElementRef = useCellValue(editorRootElementRef$);
-  return /* @__PURE__ */ React__default.createElement(RadixSelect.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(RadixSelect.Content, { className, onCloseAutoFocus: (e) => e.preventDefault(), position: "popper" }, /* @__PURE__ */ React__default.createElement(RadixSelect.Viewport, { "data-editor-dropdown": true }, children)));
+  return /* @__PURE__ */ React__default.createElement(RadixSelect.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(
+    RadixSelect.Content,
+    {
+      className: classNames(className, "mdxeditor-select-content"),
+      onCloseAutoFocus: (e) => e.preventDefault(),
+      position: "popper"
+    },
+    /* @__PURE__ */ React__default.createElement(RadixSelect.Viewport, { "data-editor-dropdown": true }, children)
+  ));
 };
 const SelectButtonTrigger = ({
   children,

package/dist/plugins/toolbar/primitives/toolbar.js

@@ -22,7 +22,7 @@ const Root = ({ readOnly, children }) => {
   return /* @__PURE__ */ React__default.createElement(
     RadixToolbar.Root,
     {
-      className: classNames(styles.toolbarRoot, { [styles.readOnlyToolbarRoot]: readOnly }),
+      className: classNames("mdxeditor-toolbar", styles.toolbarRoot, { [styles.readOnlyToolbarRoot]: readOnly }),
       ...readOnly ? { tabIndex: -1 } : {}
     },
     children

package/package.json

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