@mdxeditor/editor 2.5.0 → 2.6.0

package/README.md

@@ -10,6 +10,7 @@ The component supports the core markdown syntax and certain extensions, includin
 
 ```jsx
 import {MDXEditor, headingsPlugin} from '@mdxeditor/editor';
+import '@mdxeditor/editor/style.css';
 
 export default function App() {
   return <MDXEditor markdown={'# Hello World'} plugins={[headingsPlugin()]} />;
@@ -21,7 +22,11 @@ The best place to get started using the component is the [documentation](https:/
 
 ## Help and support
 
-Should you encounter any issues, please [create an issue](https://github.com/mdx-editor/editor/issues), but check if there's something similar already open first.
+If you find a bug, check if something similar is not reported already in the [issues](https://github.com/mdx-editor/editor/issues). If not, [create a new issue](https://github.com/mdx-editor/editor/issues/new?assignees=&labels=bug&projects=&template=1.bug.md&title=%5BBUG%5D).
+
+If you're integrating the component in your commercial project and need dedicated assistance with your issues in exchange of sponsorship, [contact me over email](mailto:petyo@mdxeditor.dev).
+
+If you want to discuss ideas [join the Discord server](https://discord.gg/4q7U2Hc) or start a discussion in the [Discussions](https://github.com/mdx-editor/editor/discussions) section.
 
 ## License
 

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

@@ -476,10 +476,6 @@ export declare interface CodeBlockEditorProps {
      * Note: you don't need to unsubscribe, the emiter has a single subscription model.
      */
     focusEmitter: VoidEmitter;
-    /**
-     * The theme CodeMirrorEditor used.
-     */
-    theme: SandpackThemeProp;
 }
 
 /**
@@ -537,13 +533,9 @@ export declare const codeBlockPlugin: (params?: {
      * The default language to use when creating a new code block if no language is passed.
      */
     defaultCodeBlockLanguage?: string | undefined;
-    /**
-     * The theme of CodeMirrorEditor
-     */
-    theme?: SandpackThemeProp | undefined;
 } | undefined) => RealmPlugin;
 
-export declare const CodeMirrorEditor: ({ language, nodeKey, code, focusEmitter, theme }: CodeBlockEditorProps) => React_2.JSX.Element;
+export declare const CodeMirrorEditor: ({ language, nodeKey, code, focusEmitter }: CodeBlockEditorProps) => React_2.JSX.Element;
 
 /**
  * A plugin that adds lets users edit code blocks with CodeMirror.
@@ -551,8 +543,21 @@ export declare const CodeMirrorEditor: ({ language, nodeKey, code, focusEmitter,
  */
 export declare const codeMirrorPlugin: (params?: {
     codeBlockLanguages: Record<string, string>;
+    /**
+     * The theme of CodeMirrorEditor
+     */
+    theme?: SandpackThemeProp | undefined;
 } | undefined) => RealmPlugin;
 
+/**
+ * The theme CodeMirrorEditor used.
+ * It can be "light" | "dark" | "auto",
+ * or the theme in "@codesandbox/sandpack-themes" package,
+ * or you can also custom one,
+ * learn more https://sandpack.codesandbox.io/docs/getting-started/themes#custom-theme
+ */
+export declare const codeMirrorTheme$: NodeRef<SandpackThemeProp>;
+
 /**
  * A toolbar component that lets the user toggle code formatting.
  * Use for inline `code` elements (like variables, methods, etc).
@@ -1756,6 +1761,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
@@ -2506,15 +2522,6 @@ export declare function tap<T>(arg: T, proc: (arg: T) => unknown): T;
  */
 export declare const thematicBreakPlugin: (params?: unknown) => RealmPlugin;
 
-/**
- * The theme CodeMirrorEditor used.
- * It can be "light" | "dark" | "auto",
- * or the theme in "@codesandbox/sandpack-themes" package,
- * or you can also custom one,
- * learn more https://sandpack.codesandbox.io/docs/getting-started/themes#custom-theme
- */
-export declare const theme$: NodeRef<SandpackThemeProp>;
-
 /**
  * Takes a value and applies a function to it.
  * @group Utils

package/dist/index.js

@@ -12,12 +12,13 @@ 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";
-import { codeBlockLanguages$, codeMirrorPlugin, insertCodeMirror$ } from "./plugins/codemirror/index.js";
+import { codeBlockLanguages$, codeMirrorPlugin, codeMirrorTheme$, insertCodeMirror$ } from "./plugins/codemirror/index.js";
 import { CodeMirrorEditor } from "./plugins/codemirror/CodeMirrorEditor.js";
-import { appendCodeBlockEditorDescriptor$, codeBlockPlugin, defaultCodeBlockLanguage$, insertCodeBlock$, theme$ } from "./plugins/codeblock/index.js";
+import { appendCodeBlockEditorDescriptor$, codeBlockPlugin, defaultCodeBlockLanguage$, insertCodeBlock$ } from "./plugins/codeblock/index.js";
 import { directivesPlugin, insertDirective$ } from "./plugins/directives/index.js";
 import { ADMONITION_TYPES, AdmonitionDirectiveDescriptor } from "./directive-editors/AdmonitionDirectiveDescriptor.js";
 import { GenericDirectiveEditor } from "./directive-editors/GenericDirectiveEditor.js";
@@ -164,6 +165,7 @@ export {
   codeBlockLanguages$,
   codeBlockPlugin,
   codeMirrorPlugin,
+  codeMirrorTheme$,
   compose,
   composerChildren$,
   contentEditableClassName$,
@@ -242,6 +244,7 @@ export {
   markdownProcessingError$,
   markdownShortcutPlugin,
   markdownSourceEditorValue$,
+  maxLengthPlugin,
   mdastExtensions$,
   nestedEditorChildren$,
   noop,
@@ -269,7 +272,6 @@ export {
   tablePlugin,
   tap,
   thematicBreakPlugin,
-  theme$,
   thrush,
   toMarkdownExtensions$,
   toMarkdownOptions$,

package/dist/plugins/codeblock/CodeBlockNode.js

@@ -7,7 +7,6 @@ var __publicField = (obj, key, value) => {
 import { useCellValue } from "@mdxeditor/gurx";
 import { DecoratorNode } from "lexical";
 import React__default from "react";
-import { theme$ } from "./index.js";
 import { voidEmitter } from "../../utils/voidEmitter.js";
 import { codeBlockEditorDescriptors$, NESTED_EDITOR_UPDATED_COMMAND } from "../core/index.js";
 class CodeBlockNode extends DecoratorNode {
@@ -88,8 +87,7 @@ class CodeBlockNode extends DecoratorNode {
         language: this.getLanguage(),
         codeBlockNode: this,
         nodeKey: this.getKey(),
-        focusEmitter: this.__focusEmitter,
-        theme: "auto"
+        focusEmitter: this.__focusEmitter
       }
     );
   }
@@ -142,7 +140,6 @@ const CodeBlockEditorContainer = (props) => {
   }
   const Editor = descriptor.Editor;
   const { codeBlockNode: _, parentEditor: __, ...restProps } = props;
-  restProps.theme = useCellValue(theme$);
   return /* @__PURE__ */ React__default.createElement(CodeBlockEditorContextProvider, { parentEditor: props.parentEditor, lexicalNode: props.codeBlockNode }, /* @__PURE__ */ React__default.createElement(Editor, { ...restProps }));
 };
 function $createCodeBlockNode(options) {

package/dist/plugins/codeblock/index.js

@@ -6,7 +6,6 @@ import { $isCodeBlockNode, useCodeBlockEditorContext } from "./CodeBlockNode.js"
 import { Cell, Signal, withLatestFrom, map } from "@mdxeditor/gurx";
 import { realmPlugin } from "../../RealmWithPlugins.js";
 const defaultCodeBlockLanguage$ = Cell("");
-const theme$ = Cell("auto");
 const insertCodeBlock$ = Signal((r) => {
   r.link(
     r.pipe(
@@ -23,7 +22,6 @@ const appendCodeBlockEditorDescriptor$ = Appender(codeBlockEditorDescriptors$);
 const codeBlockPlugin = realmPlugin({
   update(realm, params) {
     realm.pub(defaultCodeBlockLanguage$, (params == null ? void 0 : params.defaultCodeBlockLanguage) || "");
-    realm.pub(theme$, (params == null ? void 0 : params.theme) || "auto");
   },
   init(realm, params) {
     realm.pubIn({
@@ -43,6 +41,5 @@ export {
   codeBlockPlugin,
   defaultCodeBlockLanguage$,
   insertCodeBlock$,
-  theme$,
   useCodeBlockEditorContext
 };

package/dist/plugins/codemirror/CodeMirrorEditor.js

@@ -4,10 +4,11 @@ import styles from "../../styles/ui.module.css.js";
 import { useCodeBlockEditorContext } from "../codeblock/CodeBlockNode.js";
 import { readOnly$ } from "../core/index.js";
 import { useCodeMirrorRef } from "../sandpack/useCodeMirrorRef.js";
-import { useCellValue } from "@mdxeditor/gurx";
-const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter, theme }) => {
+import { useCellValues } from "@mdxeditor/gurx";
+import { codeMirrorTheme$ } from "./index.js";
+const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
   const codeMirrorRef = useCodeMirrorRef(nodeKey, "codeblock", "jsx", focusEmitter);
-  const readOnly = useCellValue(readOnly$);
+  const [readOnly, theme] = useCellValues(readOnly$, codeMirrorTheme$);
   const { setCode } = useCodeBlockEditorContext();
   React__default.useEffect(() => {
     var _a, _b;

package/dist/plugins/codemirror/index.js

@@ -24,13 +24,18 @@ const insertCodeMirror$ = Signal((r) => {
     insertCodeBlock$
   );
 });
+const codeMirrorTheme$ = Cell("auto");
 const codeMirrorPlugin = realmPlugin({
   update(r, params) {
-    r.pub(codeBlockLanguages$, params == null ? void 0 : params.codeBlockLanguages);
+    r.pubIn({
+      [codeBlockLanguages$]: params == null ? void 0 : params.codeBlockLanguages,
+      [codeMirrorTheme$]: (params == null ? void 0 : params.theme) || "auto"
+    });
   },
   init(r, params) {
     r.pubIn({
       [codeBlockLanguages$]: params == null ? void 0 : params.codeBlockLanguages,
+      [codeMirrorTheme$]: (params == null ? void 0 : params.theme) || "auto",
       [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor((params == null ? void 0 : params.codeBlockLanguages) || {})
     });
   }
@@ -47,5 +52,6 @@ function buildCodeBlockDescriptor(codeBlockLanguages) {
 export {
   codeBlockLanguages$,
   codeMirrorPlugin,
+  codeMirrorTheme$,
   insertCodeMirror$
 };

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/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.0",
+  "version": "2.6.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",