@mdxeditor/editor 1.5.0 → 1.7.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/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/dist/plugins/table/index.d.ts

@@ -11,6 +11,16 @@ import type { LexicalEditor, RangeSelection, Klass, LexicalNode, TextFormatType,
 import type { SystemSpec, Realm, RealmNode, PluginConstructor, TypedRealm, ValueForKey, SystemKeys, ValuesForKeys, SystemDict } from '../../gurx';
 /// <reference types="react" />
 import * as Mdast from 'mdast';
+type InsertTablePayload = {
+    /**
+     * The nunber of rows of the table.
+     */
+    rows?: number;
+    /**
+     * The nunber of columns of the table.
+     */
+    columns?: number;
+};
 /** @internal */
 export declare const tableSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     activeEditor: RealmNode<LexicalEditor | null>;
@@ -123,7 +133,7 @@ export declare const tableSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
 }]) => {
-    insertTable: RealmNode<true>;
+    insertTable: RealmNode<InsertTablePayload>;
 }>;
 export declare const 
 /** @internal */
@@ -238,12 +248,12 @@ tablePlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
 }]) => {
-    insertTable: RealmNode<true>;
+    insertTable: RealmNode<InsertTablePayload>;
 }>, object>, 
 /** @internal */
 tablePluginHooks: {
     useRealmContext: () => TypedRealm<{
-        insertTable: RealmNode<true>;
+        insertTable: RealmNode<InsertTablePayload>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
@@ -301,7 +311,7 @@ tablePluginHooks: {
         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" | "insertTable">(key: K, callback: (value: ValueForKey<{
-        insertTable: RealmNode<true>;
+        insertTable: RealmNode<InsertTablePayload>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
@@ -359,7 +369,7 @@ tablePluginHooks: {
         onBlur: RealmNode<FocusEvent>;
     }, K>) => void) => void;
     useEmitterValues: <K_1 extends SystemKeys<{
-        insertTable: RealmNode<true>;
+        insertTable: RealmNode<InsertTablePayload>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
@@ -416,7 +426,7 @@ tablePluginHooks: {
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
     }>>(...keys: K_1) => ValuesForKeys<{
-        insertTable: RealmNode<true>;
+        insertTable: RealmNode<InsertTablePayload>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
@@ -474,7 +484,7 @@ tablePluginHooks: {
         onBlur: RealmNode<FocusEvent>;
     }, K_1>;
     usePubKeys: () => (values: SystemDict<{
-        insertTable: RealmNode<true>;
+        insertTable: RealmNode<InsertTablePayload>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
@@ -532,7 +542,7 @@ tablePluginHooks: {
         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" | "insertTable">(key: K_2) => (value: ValueForKey<{
-        insertTable: RealmNode<true>;
+        insertTable: RealmNode<InsertTablePayload>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
@@ -590,3 +600,4 @@ tablePluginHooks: {
         onBlur: RealmNode<FocusEvent>;
     }, K_2>) => void;
 };
+export {};

package/dist/plugins/table/index.js

@@ -6,16 +6,26 @@ import { MdastTableVisitor } from "./MdastTableVisitor.js";
 import { $createTableNode, TableNode } from "./TableNode.js";
 import { system } from "../../gurx/realmFactory.js";
 import { realmPlugin } from "../../gurx/react.js";
-function seedTable() {
-  return {
+function seedTable(rows = 1, columns = 1) {
+  const table = {
     type: "table",
-    children: [
-      {
-        type: "tableRow",
-        children: [{ type: "tableCell", children: [] }]
-      }
-    ]
+    children: []
   };
+  for (let i = 0; i < rows; i++) {
+    const tableRow = {
+      type: "tableRow",
+      children: []
+    };
+    for (let j = 0; j < columns; j++) {
+      const cell = {
+        type: "tableCell",
+        children: []
+      };
+      tableRow.children.push(cell);
+    }
+    table.children.push(tableRow);
+  }
+  return table;
 }
 const tableSystem = system(
   (r, [{ insertDecoratorNode }]) => {
@@ -23,8 +33,8 @@ const tableSystem = system(
     r.link(
       r.pipe(
         insertTable,
-        r.o.mapTo(() => {
-          return $createTableNode(seedTable());
+        r.o.map(({ rows, columns }) => {
+          return () => $createTableNode(seedTable(rows, columns));
         })
       ),
       insertDecoratorNode

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

@@ -9,7 +9,7 @@ const InsertTable = () => {
     {
       title: "Insert table",
       onClick: () => {
-        insertTable(true);
+        insertTable({ rows: 3, columns: 3 });
       }
     },
     /* @__PURE__ */ React__default.createElement(TableIcon, null)

package/package.json

@@ -9,7 +9,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",