@mdxeditor/editor 2.3.9 → 2.4.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(RenderRecurisveWrappers, { 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) }, /* @__PURE__ */ React__default.createElement(
     RichTextPlugin,
     {
       contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, { className: classNames(styles.contentEditable, contentEditableClassName) }),
@@ -56,7 +56,7 @@ const IconFallback = () => {
 const defaultIconComponentFor = (name) => {
   return /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: /* @__PURE__ */ React__default.createElement(IconFallback, null) }, /* @__PURE__ */ React__default.createElement(DefaultIcon, { name }));
 };
-const RenderRecurisveWrappers = ({
+const RenderRecursiveWrappers = ({
   wrappers,
   children
 }) => {
@@ -64,7 +64,7 @@ const RenderRecurisveWrappers = ({
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
   }
   const Wrapper = wrappers[0];
-  return /* @__PURE__ */ React__default.createElement(Wrapper, null, /* @__PURE__ */ React__default.createElement(RenderRecurisveWrappers, { wrappers: wrappers.slice(1) }, children));
+  return /* @__PURE__ */ React__default.createElement(Wrapper, null, /* @__PURE__ */ React__default.createElement(RenderRecursiveWrappers, { wrappers: wrappers.slice(1) }, children));
 };
 const EditorRootElement = ({ children, className }) => {
   const editorRootElementRef = React__default.useRef(null);

package/dist/index.d.ts

@@ -67,6 +67,7 @@ import { ReactNode } from 'react';
 import { Realm } from '@mdxeditor/gurx';
 import { RootNode } from 'lexical';
 import { SandpackProvider } from '@codesandbox/sandpack-react';
+import { SandpackThemeProp } from '@codesandbox/sandpack-react/types';
 import { SerializedElementNode } from 'lexical';
 import { SerializedLexicalNode } from 'lexical';
 import { Spread } from 'lexical';
@@ -473,6 +474,10 @@ 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;
 }
 
 /**
@@ -530,9 +535,13 @@ 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;
 
-/* Excluded from this release type: CodeMirrorEditor */
+export declare const CodeMirrorEditor: ({ language, nodeKey, code, focusEmitter, theme }: CodeBlockEditorProps) => React_2.JSX.Element;
 
 /**
  * A plugin that adds lets users edit code blocks with CodeMirror.
@@ -2483,6 +2492,15 @@ 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

@@ -17,7 +17,7 @@ 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 { CodeMirrorEditor } from "./plugins/codemirror/CodeMirrorEditor.js";
-import { appendCodeBlockEditorDescriptor$, codeBlockPlugin, defaultCodeBlockLanguage$, insertCodeBlock$ } from "./plugins/codeblock/index.js";
+import { appendCodeBlockEditorDescriptor$, codeBlockPlugin, defaultCodeBlockLanguage$, insertCodeBlock$, theme$ } 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";
@@ -268,6 +268,7 @@ export {
   tablePlugin,
   tap,
   thematicBreakPlugin,
+  theme$,
   thrush,
   toMarkdownExtensions$,
   toMarkdownOptions$,

package/dist/plugins/codeblock/CodeBlockNode.js

@@ -7,6 +7,7 @@ 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 {
@@ -87,7 +88,8 @@ class CodeBlockNode extends DecoratorNode {
         language: this.getLanguage(),
         codeBlockNode: this,
         nodeKey: this.getKey(),
-        focusEmitter: this.__focusEmitter
+        focusEmitter: this.__focusEmitter,
+        theme: "auto"
       }
     );
   }
@@ -140,6 +142,7 @@ 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,6 +6,7 @@ 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(
@@ -22,6 +23,7 @@ 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({
@@ -41,5 +43,6 @@ export {
   codeBlockPlugin,
   defaultCodeBlockLanguage$,
   insertCodeBlock$,
+  theme$,
   useCodeBlockEditorContext
 };

package/dist/plugins/codemirror/CodeMirrorEditor.js

@@ -5,7 +5,7 @@ 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 }) => {
+const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter, theme }) => {
   const codeMirrorRef = useCodeMirrorRef(nodeKey, "codeblock", "jsx", focusEmitter);
   const readOnly = useCellValue(readOnly$);
   const { setCode } = useCodeBlockEditorContext();
@@ -23,7 +23,7 @@ const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
         e.stopPropagation();
       }
     },
-    /* @__PURE__ */ React__default.createElement(SandpackProvider, null, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement(SandpackProvider, { theme }, /* @__PURE__ */ React__default.createElement(
       CodeEditor,
       {
         readOnly,

package/package.json

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