@mdxeditor/editor 2.5.0 → 2.5.1

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/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).
@@ -2506,15 +2511,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

@@ -15,9 +15,9 @@ import { quotePlugin } from "./plugins/quote/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 +164,7 @@ export {
   codeBlockLanguages$,
   codeBlockPlugin,
   codeMirrorPlugin,
+  codeMirrorTheme$,
   compose,
   composerChildren$,
   contentEditableClassName$,
@@ -269,7 +270,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/package.json

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