@mdxeditor/editor 1.4.4 → 1.6.0

package/README.md

@@ -9,7 +9,7 @@ MDXEditor is an open-source React component that allows users to author markdown
 The component supports the core markdown syntax and certain extensions, including tables, images, code blocks, etc. It also allows users to edit JSX components with a built-in JSX editor or a custom one.
 
 ```jsx
-import {MDXEditor, headingsPlugin()} from '@mdxeditor/editor';
+import {MDXEditor, headingsPlugin} from '@mdxeditor/editor';
 
 export default function App() {
   return <MDXEditor markdown={'# Hello World'} plugins={[headingsPlugin()]} />;

package/dist/gurx/realm.d.ts

@@ -81,7 +81,6 @@ export declare function realm(): {
         <T1_14, T2_13, T3_12, T4_11, T5_10, T6_9, T7_8, T8_7, T9_6, T10_5, T11_4, T12_3, T13_3, T14_2, T15_1, T16>(nodes_0: RN<T1_14>, nodes_1: RN<T2_13>, nodes_2: RN<T3_12>, nodes_3: RN<T4_11>, nodes_4: RN<T5_10>, nodes_5: RN<T6_9>, nodes_6: RN<T7_8>, nodes_7: RN<T8_7>, nodes_8: RN<T9_6>, nodes_9: RN<T10_5>, nodes_10: RN<T11_4>, nodes_11: RN<T12_3>, nodes_12: RN<T13_3>, nodes_13: RN<T14_2>, nodes_14: RN<T15_1>, nodes_15: RN<T16>): RN<[T1_14, T2_13, T3_12, T4_11, T5_10, T6_9, T7_8, T8_7, T9_6, T10_5, T11_4, T12_3, T13_3, T14_2, T15_1, T16]>;
     };
     connect: <T extends unknown[] = unknown[]>({ sources, pulls, map, sink: { key: sink } }: RealmProjectionSpec<T>) => void;
-    debug: () => void;
     derive: <T_1>(source: RealmNode<T_1>, initial: T_1) => RealmNode<T_1>;
     getKeyValue: (key: string) => unknown;
     getValue: <T_2>(node: RN<T_2>) => T_2;

package/dist/gurx/realm.js

@@ -218,11 +218,6 @@ function realm() {
     });
     executionMaps.clear();
   }
-  function debug() {
-    Object.entries(labels).forEach(([name, value]) => {
-      state.get(value.key);
-    });
-  }
   function pub(...args) {
     const map2 = {};
     for (let index = 0; index < args.length; index += 2) {
@@ -452,7 +447,6 @@ function realm() {
   return {
     combine,
     connect,
-    debug,
     derive,
     getKeyValue,
     getValue,

package/dist/plugins/codemirror/CodeMirrorEditor.js

@@ -13,7 +13,7 @@ const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
     (_b = (_a = codeMirrorRef.current) == null ? void 0 : _a.getCodemirror()) == null ? void 0 : _b.dom.addEventListener("paste", (e) => {
       e.stopPropagation();
     });
-  }, [codeMirrorRef]);
+  }, [codeMirrorRef, language]);
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {

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

@@ -13,6 +13,7 @@ const DiffViewer = () => {
 };
 const CmMergeView = ({ oldMarkdown, newMarkdown, onUpdate }) => {
   const cmMergeViewRef = React__default.useRef(null);
+  const [cmExtensions] = diffSourcePluginHooks.useEmitterValues("cmExtensions");
   const ref = React__default.useCallback(
     (el) => {
       var _a;
@@ -30,11 +31,12 @@ const CmMergeView = ({ oldMarkdown, newMarkdown, onUpdate }) => {
           gutter: true,
           a: {
             doc: oldMarkdown,
-            extensions: [...COMMON_STATE_CONFIG_EXTENSIONS, EditorState.readOnly.of(true)]
+            extensions: [...cmExtensions, ...COMMON_STATE_CONFIG_EXTENSIONS, EditorState.readOnly.of(true)]
           },
           b: {
             doc: newMarkdown,
             extensions: [
+              ...cmExtensions,
               ...COMMON_STATE_CONFIG_EXTENSIONS,
               EditorView.updateListener.of(({ state }) => {
                 const md = state.doc.toString();
@@ -48,7 +50,7 @@ const CmMergeView = ({ oldMarkdown, newMarkdown, onUpdate }) => {
         cmMergeViewRef.current = null;
       }
     },
-    [newMarkdown, oldMarkdown, onUpdate]
+    [newMarkdown, oldMarkdown, onUpdate, cmExtensions]
   );
   return /* @__PURE__ */ React__default.createElement("div", { ref });
 };

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

@@ -9,6 +9,7 @@ import { corePluginHooks } from "../core/index.js";
 const COMMON_STATE_CONFIG_EXTENSIONS = [basicSetup, basicLight, markdown(), lineNumbers()];
 const SourceEditor = () => {
   const [markdown2, readOnly] = corePluginHooks.useEmitterValues("markdown", "readOnly");
+  const [cmExtensions] = diffSourcePluginHooks.useEmitterValues("cmExtensions");
   const updateMarkdown = diffSourcePluginHooks.usePublisher("markdownSourceEditorValue");
   const editorViewRef = React__default.useRef(null);
   const ref = React__default.useCallback(
@@ -16,6 +17,8 @@ const SourceEditor = () => {
       var _a;
       if (el !== null) {
         const extensions = [
+          // custom extensions should come first so that you can override the default extensions
+          ...cmExtensions,
           ...COMMON_STATE_CONFIG_EXTENSIONS,
           EditorView.updateListener.of(({ state }) => {
             updateMarkdown(state.doc.toString());
@@ -34,7 +37,7 @@ const SourceEditor = () => {
         editorViewRef.current = null;
       }
     },
-    [markdown2, readOnly, updateMarkdown]
+    [markdown2, readOnly, updateMarkdown, cmExtensions]
   );
   return /* @__PURE__ */ React__default.createElement("div", { ref, className: "cm-sourceView" });
 };

package/dist/plugins/diff-source/index.d.ts

@@ -11,6 +11,7 @@ import type { HistoryState } from '@lexical/history';
 import type { LexicalEditor, RangeSelection, Klass, LexicalNode, TextFormatType, ElementNode, DecoratorNode } from 'lexical';
 import type { SystemSpec, Realm, RealmNode, PluginConstructor, TypedRealm, ValueForKey, SystemKeys, ValuesForKeys, SystemDict } from '../../gurx';
 /// <reference types="react" />
+import { Extension } from '@codemirror/state';
 /** @internal */
 export type ViewMode = 'rich-text' | 'source' | 'diff';
 /** @internal */
@@ -128,7 +129,13 @@ export declare const diffSourceSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
     viewMode: RealmNode<ViewMode>;
     diffMarkdown: RealmNode<string>;
     markdownSourceEditorValue: RealmNode<string>;
+    cmExtensions: RealmNode<Extension[]>;
 }>;
+export interface DiffSourcePluginParams {
+    viewMode?: ViewMode;
+    diffMarkdown?: string;
+    codeMirrorExtensions?: Extension[];
+}
 export declare const 
 /** @internal */
 diffSourcePlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
@@ -245,16 +252,15 @@ diffSourcePlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     viewMode: RealmNode<ViewMode>;
     diffMarkdown: RealmNode<string>;
     markdownSourceEditorValue: RealmNode<string>;
-}>, {
-    viewMode?: ViewMode | undefined;
-    diffMarkdown?: string | undefined;
-}>, 
+    cmExtensions: RealmNode<Extension[]>;
+}>, DiffSourcePluginParams>, 
 /** @internal */
 diffSourcePluginHooks: {
     useRealmContext: () => TypedRealm<{
         viewMode: RealmNode<ViewMode>;
         diffMarkdown: RealmNode<string>;
         markdownSourceEditorValue: RealmNode<string>;
+        cmExtensions: RealmNode<Extension[]>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
@@ -311,10 +317,11 @@ diffSourcePluginHooks: {
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
     }>;
-    useEmitter: <K extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "markdownSourceEditorValue" | "viewMode" | "diffMarkdown">(key: K, callback: (value: ValueForKey<{
+    useEmitter: <K extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "markdownSourceEditorValue" | "viewMode" | "diffMarkdown" | "cmExtensions">(key: K, callback: (value: ValueForKey<{
         viewMode: RealmNode<ViewMode>;
         diffMarkdown: RealmNode<string>;
         markdownSourceEditorValue: RealmNode<string>;
+        cmExtensions: RealmNode<Extension[]>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
@@ -375,6 +382,7 @@ diffSourcePluginHooks: {
         viewMode: RealmNode<ViewMode>;
         diffMarkdown: RealmNode<string>;
         markdownSourceEditorValue: RealmNode<string>;
+        cmExtensions: RealmNode<Extension[]>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
@@ -434,6 +442,7 @@ diffSourcePluginHooks: {
         viewMode: RealmNode<ViewMode>;
         diffMarkdown: RealmNode<string>;
         markdownSourceEditorValue: RealmNode<string>;
+        cmExtensions: RealmNode<Extension[]>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
@@ -494,6 +503,7 @@ diffSourcePluginHooks: {
         viewMode: RealmNode<ViewMode>;
         diffMarkdown: RealmNode<string>;
         markdownSourceEditorValue: RealmNode<string>;
+        cmExtensions: RealmNode<Extension[]>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
@@ -550,10 +560,11 @@ diffSourcePluginHooks: {
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
     }>) => void;
-    usePublisher: <K_2 extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "markdownSourceEditorValue" | "viewMode" | "diffMarkdown">(key: K_2) => (value: ValueForKey<{
+    usePublisher: <K_2 extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "markdownSourceEditorValue" | "viewMode" | "diffMarkdown" | "cmExtensions">(key: K_2) => (value: ValueForKey<{
         viewMode: RealmNode<ViewMode>;
         diffMarkdown: RealmNode<string>;
         markdownSourceEditorValue: RealmNode<string>;
+        cmExtensions: RealmNode<Extension[]>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;

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

@@ -6,6 +6,7 @@ const diffSourceSystem = system(
   (r, [{ markdown, setMarkdown }]) => {
     const diffMarkdown = r.node("");
     const markdownSourceEditorValue = r.node("");
+    const cmExtensions = r.node([]);
     r.link(markdown, markdownSourceEditorValue);
     const viewMode = r.node("rich-text");
     r.sub(
@@ -28,7 +29,7 @@ const diffSourceSystem = system(
         }
       }
     );
-    return { viewMode, diffMarkdown, markdownSourceEditorValue };
+    return { viewMode, diffMarkdown, markdownSourceEditorValue, cmExtensions };
   },
   [coreSystem]
 );
@@ -45,6 +46,7 @@ const [
   },
   init(r, params) {
     r.pubKey("diffMarkdown", (params == null ? void 0 : params.diffMarkdown) || "");
+    r.pubKey("cmExtensions", (params == null ? void 0 : params.codeMirrorExtensions) || []);
     r.pubKey("addEditorWrapper", DiffSourceWrapper);
   }
 });

package/dist/plugins/jsx/index.d.ts

@@ -73,11 +73,19 @@ export interface JsxEditorProps {
     mdastNode: MdastJsx;
     descriptor: JsxComponentDescriptor;
 }
-interface InsertJsxPayload {
+type JsxTextPayload = {
+    kind: 'text';
     name: string;
-    kind: 'flow' | 'text';
     props: Record<string, string>;
-}
+    children?: MdxJsxTextElement['children'];
+};
+type JsxFlowPayload = {
+    kind: 'flow';
+    name: string;
+    props: Record<string, string>;
+    children?: MdxJsxFlowElement['children'];
+};
+type InsertJsxPayload = JsxTextPayload | JsxFlowPayload;
 /** @internal */
 export declare const jsxSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     activeEditor: RealmNode<LexicalEditor | null>;

package/dist/plugins/jsx/index.js

@@ -7,19 +7,38 @@ import { MdastMdxJsEsmVisitor } from "./MdastMdxJsEsmVisitor.js";
 import { MdastMdxJsxElementVisitor } from "./MdastMdxJsxElementVisitor.js";
 import { system } from "../../gurx/realmFactory.js";
 import { realmPlugin } from "../../gurx/react.js";
+function toMdastJsxAttributes(attributes) {
+  return Object.entries(attributes).map(([name, value]) => ({
+    type: "mdxJsxAttribute",
+    name,
+    value
+  }));
+}
 const jsxSystem = system(
   (r, [{ insertDecoratorNode }]) => {
     const insertJsx = r.node();
     r.link(
       r.pipe(
         insertJsx,
-        r.o.map(({ name, kind, props }) => {
-          return () => $createLexicalJsxNode({
-            name,
-            type: kind === "flow" ? "mdxJsxFlowElement" : "mdxJsxTextElement",
-            attributes: Object.entries(props).map(([name2, value]) => ({ type: "mdxJsxAttribute", name: name2, value })),
-            children: []
-          });
+        r.o.map(({ kind, name, children, props }) => {
+          return () => {
+            const attributes = toMdastJsxAttributes(props);
+            if (kind === "flow") {
+              return $createLexicalJsxNode({
+                type: "mdxJsxFlowElement",
+                name,
+                children: children ?? [],
+                attributes
+              });
+            } else {
+              return $createLexicalJsxNode({
+                type: "mdxJsxTextElement",
+                name,
+                children: children ?? [],
+                attributes
+              });
+            }
+          };
         })
       ),
       insertDecoratorNode

package/package.json

@@ -9,7 +9,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "1.4.4",
+  "version": "1.6.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -110,6 +110,7 @@
     "@typescript-eslint/parser": "^6.7.2",
     "@vitejs/plugin-react": "^4.0.0",
     "autoprefixer": "^10.4.14",
+    "cm6-theme-basic-dark": "^0.2.0",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-standard-with-typescript": "^39.1.0",