@mdxeditor/editor 1.14.2 → 2.0.0

package/dist/plugins/lists/index.js

@@ -1,9 +1,9 @@
-import { coreSystem } from "../core/index.js";
+import { currentSelection$, activeEditor$, rootEditor$, addActivePlugin$, addMdastExtension$, addSyntaxExtension$, addImportVisitor$, addLexicalNode$, addExportVisitor$, addToMarkdownExtension$, addComposerChild$, addNestedEditorChild$ } from "../core/index.js";
 import { MdastListVisitor } from "./MdastListVisitor.js";
 import { MdastListItemVisitor } from "./MdastListItemVisitor.js";
 import { LexicalListVisitor } from "./LexicalListVisitor.js";
 import { LexicalListItemVisitor } from "./LexicalListItemVisitor.js";
-import { $isListNode, ListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, INSERT_CHECK_LIST_COMMAND, REMOVE_LIST_COMMAND, ListItemNode, $getListDepth, $isListItemNode } from "@lexical/list";
+import { $isListNode, ListNode, ListItemNode, $getListDepth, $isListItemNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, INSERT_CHECK_LIST_COMMAND, REMOVE_LIST_COMMAND } from "@lexical/list";
 import { $isRootOrShadowRoot, INDENT_CONTENT_COMMAND, COMMAND_PRIORITY_CRITICAL, $getSelection, $isRangeSelection, $isElementNode } from "lexical";
 import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin.js";
 import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin.js";
@@ -11,75 +11,60 @@ import { ListPlugin } from "@lexical/react/LexicalListPlugin.js";
 import { $findMatchingParent, $getNearestNodeOfType } from "@lexical/utils";
 import { gfmTaskListItem } from "micromark-extension-gfm-task-list-item";
 import { gfmTaskListItemFromMarkdown, gfmTaskListItemToMarkdown } from "mdast-util-gfm-task-list-item";
-import { system } from "../../gurx/realmFactory.js";
-import { realmPlugin } from "../../gurx/react.js";
+import { Cell, withLatestFrom, Signal } from "@mdxeditor/gurx";
+import { realmPlugin } from "../../RealmWithPlugins.js";
 const ListTypeCommandMap = /* @__PURE__ */ new Map([
   ["number", INSERT_ORDERED_LIST_COMMAND],
   ["bullet", INSERT_UNORDERED_LIST_COMMAND],
   ["check", INSERT_CHECK_LIST_COMMAND],
   ["", REMOVE_LIST_COMMAND]
 ]);
-const listsSystem = system(
-  (r, [{ activeEditor, currentSelection }]) => {
-    const currentListType = r.node("");
-    const applyListType = r.node();
-    r.sub(r.pipe(applyListType, r.o.withLatestFrom(activeEditor)), ([listType, theEditor]) => {
-      theEditor == null ? void 0 : theEditor.dispatchCommand(ListTypeCommandMap.get(listType), void 0);
+const currentListType$ = Cell("", (r) => {
+  r.sub(r.pipe(currentSelection$, withLatestFrom(activeEditor$)), ([selection, theEditor]) => {
+    if (!selection || !theEditor) {
+      return;
+    }
+    const anchorNode = selection.anchor.getNode();
+    let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
+      const parent = e.getParent();
+      return parent !== null && $isRootOrShadowRoot(parent);
     });
-    r.sub(r.pipe(currentSelection, r.o.withLatestFrom(activeEditor)), ([selection, theEditor]) => {
-      if (!selection || !theEditor) {
-        return;
-      }
-      const anchorNode = selection.anchor.getNode();
-      let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
-        const parent = e.getParent();
-        return parent !== null && $isRootOrShadowRoot(parent);
-      });
-      if (element === null) {
-        element = anchorNode.getTopLevelElementOrThrow();
-      }
-      const elementKey = element.getKey();
-      const elementDOM = theEditor.getElementByKey(elementKey);
-      if (elementDOM !== null) {
-        if ($isListNode(element)) {
-          const parentList = $getNearestNodeOfType(anchorNode, ListNode);
-          const type = parentList ? parentList.getListType() : element.getListType();
-          r.pub(currentListType, type);
-        } else {
-          r.pub(currentListType, null);
-        }
+    if (element === null) {
+      element = anchorNode.getTopLevelElementOrThrow();
+    }
+    const elementKey = element.getKey();
+    const elementDOM = theEditor.getElementByKey(elementKey);
+    if (elementDOM !== null) {
+      if ($isListNode(element)) {
+        const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+        const type = parentList ? parentList.getListType() : element.getListType();
+        r.pub(currentListType$, type);
+      } else {
+        r.pub(currentListType$, "");
       }
-    });
-    return { currentListType, applyListType };
-  },
-  [coreSystem]
-);
-const [
-  /** @internal */
-  listsPlugin,
-  /** @internal */
-  listsPluginHooks
-] = realmPlugin({
-  id: "lists",
-  systemSpec: listsSystem,
-  init: (realm) => {
+    }
+  });
+});
+const applyListType$ = Signal((r) => {
+  r.sub(r.pipe(applyListType$, withLatestFrom(activeEditor$)), ([listType, theEditor]) => {
+    theEditor == null ? void 0 : theEditor.dispatchCommand(ListTypeCommandMap.get(listType), void 0);
+  });
+});
+const listsPlugin = realmPlugin({
+  init(realm) {
     var _a;
-    realm.pubKey("addMdastExtension", gfmTaskListItemFromMarkdown);
-    realm.pubKey("addSyntaxExtension", gfmTaskListItem);
-    realm.pubKey("addImportVisitor", MdastListVisitor);
-    realm.pubKey("addImportVisitor", MdastListItemVisitor);
-    realm.pubKey("addLexicalNode", ListItemNode);
-    realm.pubKey("addLexicalNode", ListNode);
-    realm.pubKey("addExportVisitor", LexicalListVisitor);
-    realm.pubKey("addExportVisitor", LexicalListItemVisitor);
-    realm.pubKey("addToMarkdownExtension", gfmTaskListItemToMarkdown);
-    (_a = realm.getKeyValue("rootEditor")) == null ? void 0 : _a.registerCommand(INDENT_CONTENT_COMMAND, () => !isIndentPermitted(7), COMMAND_PRIORITY_CRITICAL);
-    realm.pubKey("addComposerChild", TabIndentationPlugin);
-    realm.pubKey("addComposerChild", ListPlugin);
-    realm.pubKey("addComposerChild", CheckListPlugin);
-    realm.pubKey("addNestedEditorChild", TabIndentationPlugin);
-    realm.pubKey("addNestedEditorChild", ListPlugin);
-    realm.pubKey("addNestedEditorChild", CheckListPlugin);
+    (_a = realm.getValue(rootEditor$)) == null ? void 0 : _a.registerCommand(INDENT_CONTENT_COMMAND, () => !isIndentPermitted(7), COMMAND_PRIORITY_CRITICAL);
+    realm.pubIn({
+      [addActivePlugin$]: "lists",
+      [addMdastExtension$]: gfmTaskListItemFromMarkdown(),
+      [addSyntaxExtension$]: gfmTaskListItem(),
+      [addImportVisitor$]: [MdastListVisitor, MdastListItemVisitor],
+      [addLexicalNode$]: [ListItemNode, ListNode],
+      [addExportVisitor$]: [LexicalListVisitor, LexicalListItemVisitor],
+      [addToMarkdownExtension$]: gfmTaskListItemToMarkdown(),
+      [addComposerChild$]: [TabIndentationPlugin, ListPlugin, CheckListPlugin],
+      [addNestedEditorChild$]: [TabIndentationPlugin, ListPlugin, CheckListPlugin]
+    });
   }
 });
 function getElementNodesInSelection(selection) {
@@ -116,7 +101,7 @@ function isIndentPermitted(maxDepth) {
   return totalDepth <= maxDepth;
 }
 export {
-  listsPlugin,
-  listsPluginHooks,
-  listsSystem
+  applyListType$,
+  currentListType$,
+  listsPlugin
 };

package/dist/plugins/markdown-shortcut/index.js

@@ -1,23 +1,20 @@
+import { realmPlugin } from "../../RealmWithPlugins.js";
 import { QUOTE, LINK, ORDERED_LIST, UNORDERED_LIST, CHECK_LIST, CODE, BOLD_ITALIC_STAR, BOLD_ITALIC_UNDERSCORE, BOLD_STAR, BOLD_UNDERSCORE, INLINE_CODE, ITALIC_STAR, ITALIC_UNDERSCORE } from "@lexical/markdown";
 import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin.js";
+import { HeadingNode, $isHeadingNode, $createHeadingNode } from "@lexical/rich-text";
 import React__default from "react";
 import { CodeBlockNode, $createCodeBlockNode } from "../codeblock/CodeBlockNode.js";
-import { coreSystem } from "../core/index.js";
-import { HeadingNode, $isHeadingNode, $createHeadingNode } from "@lexical/rich-text";
-import { realmPlugin } from "../../gurx/react.js";
-import { system } from "../../gurx/realmFactory.js";
-const [markdownShortcutPlugin] = realmPlugin({
-  id: "markdown-shortcut",
-  dependencies: [],
-  systemSpec: system((_) => ({}), [coreSystem]),
-  init: (realm, _, pluginIds) => {
-    const allowedHeadingLevels = pluginIds.includes("headings") ? (
-      // @ts-expect-error we query the realm for the allowed heading levels
-      realm.getKeyValue("allowedHeadingLevels")
-    ) : [];
+import { activePlugins$, addComposerChild$, addNestedEditorChild$ } from "../core/index.js";
+import { allowedHeadingLevels$ } from "../headings/index.js";
+const markdownShortcutPlugin = realmPlugin({
+  init(realm) {
+    const pluginIds = realm.getValue(activePlugins$);
+    const allowedHeadingLevels = pluginIds.includes("headings") ? realm.getValue(allowedHeadingLevels$) : [];
     const transformers = pickTransformersForActivePlugins(pluginIds, allowedHeadingLevels);
-    realm.pubKey("addComposerChild", () => /* @__PURE__ */ React__default.createElement(MarkdownShortcutPlugin, { transformers }));
-    realm.pubKey("addNestedEditorChild", () => /* @__PURE__ */ React__default.createElement(MarkdownShortcutPlugin, { transformers }));
+    realm.pubIn({
+      [addComposerChild$]: () => /* @__PURE__ */ React__default.createElement(MarkdownShortcutPlugin, { transformers }),
+      [addNestedEditorChild$]: () => /* @__PURE__ */ React__default.createElement(MarkdownShortcutPlugin, { transformers })
+    });
   }
 });
 const createBlockNode = (createNode) => {

package/dist/plugins/quote/index.js

@@ -1,26 +1,18 @@
-import { coreSystem } from "../core/index.js";
 import { QuoteNode } from "@lexical/rich-text";
 import { MdastBlockQuoteVisitor } from "./MdastBlockQuoteVisitor.js";
 import { LexicalQuoteVisitor } from "./LexicalQuoteVisitor.js";
-import { realmPlugin } from "../../gurx/react.js";
-import { system } from "../../gurx/realmFactory.js";
-const [
-  /** @internal */
-  quotePlugin,
-  /** @internal */
-  quotePluginHooks
-] = realmPlugin({
-  id: "quote",
-  systemSpec: system(() => {
-    return {};
-  }, [coreSystem]),
-  init: (realm) => {
-    realm.pubKey("addImportVisitor", MdastBlockQuoteVisitor);
-    realm.pubKey("addLexicalNode", QuoteNode);
-    realm.pubKey("addExportVisitor", LexicalQuoteVisitor);
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { addActivePlugin$, addImportVisitor$, addLexicalNode$, addExportVisitor$ } from "../core/index.js";
+const quotePlugin = realmPlugin({
+  init(realm) {
+    realm.pubIn({
+      [addActivePlugin$]: "quote",
+      [addImportVisitor$]: MdastBlockQuoteVisitor,
+      [addLexicalNode$]: QuoteNode,
+      [addExportVisitor$]: LexicalQuoteVisitor
+    });
   }
 });
 export {
-  quotePlugin,
-  quotePluginHooks
+  quotePlugin
 };

package/dist/plugins/sandpack/SandpackEditor.js

@@ -2,7 +2,8 @@ import React__default from "react";
 import { useCodeMirrorRef } from "./useCodeMirrorRef.js";
 import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview, useSandpack } from "@codesandbox/sandpack-react";
 import { useCodeBlockEditorContext } from "../codeblock/CodeBlockNode.js";
-import { corePluginHooks } from "../core/index.js";
+import { readOnly$ } from "../core/index.js";
+import { useCellValue } from "@mdxeditor/gurx";
 const CodeUpdateEmitter = ({ onChange, snippetFileName }) => {
   const { sandpack } = useSandpack();
   onChange(sandpack.files[snippetFileName].code);
@@ -10,7 +11,7 @@ const CodeUpdateEmitter = ({ onChange, snippetFileName }) => {
 };
 const SandpackEditor = ({ nodeKey, code, focusEmitter, preset }) => {
   const codeMirrorRef = useCodeMirrorRef(nodeKey, "sandpack", "jsx", focusEmitter);
-  const [readOnly] = corePluginHooks.useEmitterValues("readOnly");
+  const readOnly = useCellValue(readOnly$);
   const { setCode } = useCodeBlockEditorContext();
   return /* @__PURE__ */ React__default.createElement(
     SandpackProvider,

package/dist/plugins/sandpack/index.js

@@ -1,9 +1,8 @@
 import React__default from "react";
-import { coreSystem } from "../core/index.js";
-import { codeBlockSystem } from "../codeblock/index.js";
+import { insertCodeBlock$, appendCodeBlockEditorDescriptor$ } from "../codeblock/index.js";
 import { SandpackEditor } from "./SandpackEditor.js";
-import { system } from "../../gurx/realmFactory.js";
-import { realmPlugin } from "../../gurx/react.js";
+import { Cell, Signal, withLatestFrom, map, useCellValue } from "@mdxeditor/gurx";
+import { realmPlugin } from "../../RealmWithPlugins.js";
 const defaultSnippetContent = `
 export default function App() {
   return (
@@ -29,54 +28,36 @@ const defaultSandpackConfig = {
     }
   ]
 };
-const sandpackSystem = system(
-  (r, [, { insertCodeBlock }]) => {
-    const sandpackConfig = r.node(defaultSandpackConfig);
-    const insertSandpack = r.node();
-    r.link(
-      r.pipe(
-        insertSandpack,
-        r.o.withLatestFrom(sandpackConfig),
-        r.o.map(([presetName, sandpackConfig2]) => {
-          const preset = presetName ? sandpackConfig2.presets.find((preset2) => preset2.name === presetName) : sandpackConfig2.presets.find((preset2) => preset2.name == sandpackConfig2.defaultPreset);
-          if (!preset) {
-            throw new Error(`No sandpack preset found with name ${presetName}`);
-          }
-          return {
-            code: preset.initialSnippetContent || "",
-            language: preset.snippetLanguage || "jsx",
-            meta: preset.meta
-          };
-        })
-      ),
-      insertCodeBlock
-    );
-    return {
-      insertSandpack,
-      sandpackConfig
-    };
-  },
-  [coreSystem, codeBlockSystem]
-);
-const [
-  /** @internal */
-  sandpackPlugin,
-  /** @internal */
-  sandpackPluginHooks
-] = realmPlugin({
-  id: "sandpack",
-  systemSpec: sandpackSystem,
-  applyParamsToSystem(r, params) {
-    r.pubKey("sandpackConfig", params.sandpackConfig);
-  },
-  init(r) {
-    r.pubKey("appendCodeBlockEditorDescriptor", {
+const sandpackConfig$ = Cell(defaultSandpackConfig);
+const insertSandpack$ = Signal((r) => {
+  r.link(
+    r.pipe(
+      insertSandpack$,
+      withLatestFrom(sandpackConfig$),
+      map(([presetName, sandpackConfig]) => {
+        const preset = presetName ? sandpackConfig.presets.find((preset2) => preset2.name === presetName) : sandpackConfig.presets.find((preset2) => preset2.name == sandpackConfig.defaultPreset);
+        if (!preset) {
+          throw new Error(`No sandpack preset found with name ${presetName}`);
+        }
+        return {
+          code: preset.initialSnippetContent || "",
+          language: preset.snippetLanguage || "jsx",
+          meta: preset.meta
+        };
+      })
+    ),
+    insertCodeBlock$
+  );
+});
+const sandpackPlugin = realmPlugin({
+  init(realm) {
+    realm.pub(appendCodeBlockEditorDescriptor$, {
       match(_language, meta) {
         return meta == null ? void 0 : meta.startsWith("live");
       },
       priority: 1,
       Editor(props) {
-        const [config] = sandpackPluginHooks.useEmitterValues("sandpackConfig");
+        const config = useCellValue(sandpackConfig$);
         const preset = config.presets.find((preset2) => preset2.meta === props.meta);
         if (!preset) {
           throw new Error(`No sandpack preset found with ${props.meta}`);
@@ -84,10 +65,13 @@ const [
         return /* @__PURE__ */ React__default.createElement(SandpackEditor, { ...props, preset });
       }
     });
+  },
+  update(realm, params) {
+    realm.pub(sandpackConfig$, params == null ? void 0 : params.sandpackConfig);
   }
 });
 export {
-  sandpackPlugin,
-  sandpackPluginHooks,
-  sandpackSystem
+  insertSandpack$,
+  sandpackConfig$,
+  sandpackPlugin
 };

package/dist/plugins/sandpack/useCodeMirrorRef.js

@@ -1,10 +1,11 @@
 import { $getNodeByKey, $createParagraphNode } from "lexical";
 import React__default from "react";
 import { useCodeBlockEditorContext } from "../codeblock/CodeBlockNode.js";
-import { corePluginHooks } from "../core/index.js";
+import { activeEditor$, editorInFocus$ } from "../core/index.js";
+import { useCellValue, usePublisher } from "@mdxeditor/gurx";
 function useCodeMirrorRef(nodeKey, editorType, language, focusEmitter) {
-  const [theEditor] = corePluginHooks.useEmitterValues("activeEditor");
-  const setEditorInFocus = corePluginHooks.usePublisher("editorInFocus");
+  const activeEditor = useCellValue(activeEditor$);
+  const setEditorInFocus = usePublisher(editorInFocus$);
   const codeMirrorRef = React__default.useRef(null);
   const { lexicalNode } = useCodeBlockEditorContext();
   const atBottom = React__default.useRef(false);
@@ -27,7 +28,7 @@ function useCodeMirrorRef(nodeKey, editorType, language, focusEmitter) {
             if (!atBottom.current) {
               atBottom.current = true;
             } else {
-              theEditor == null ? void 0 : theEditor.update(() => {
+              activeEditor == null ? void 0 : activeEditor.update(() => {
                 var _a2, _b2;
                 const node = $getNodeByKey(nodeKey);
                 const nextSibling = node.getNextSibling();
@@ -50,7 +51,7 @@ function useCodeMirrorRef(nodeKey, editorType, language, focusEmitter) {
             if (!atTop.current) {
               atTop.current = true;
             } else {
-              theEditor == null ? void 0 : theEditor.update(() => {
+              activeEditor == null ? void 0 : activeEditor.update(() => {
                 var _a2, _b2;
                 const node = $getNodeByKey(nodeKey);
                 const previousSibling = node.getPreviousSibling();
@@ -67,7 +68,7 @@ function useCodeMirrorRef(nodeKey, editorType, language, focusEmitter) {
         e.stopPropagation();
       }
     },
-    [theEditor, nodeKey]
+    [activeEditor, nodeKey]
   );
   React__default.useEffect(() => {
     const codeMirror = codeMirrorRef.current;

package/dist/plugins/table/TableEditor.js

@@ -15,7 +15,8 @@ import classNames from "classnames";
 import styles from "../../styles/ui.module.css.js";
 import { isPartOftheEditorUI } from "../../utils/isPartOftheEditorUI.js";
 import { uuidv4 } from "../../utils/uuid4.js";
-import { corePluginHooks } from "../core/index.js";
+import { iconComponentFor$, readOnly$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, jsxIsAvailable$, rootEditor$, editorRootElementRef$ } from "../core/index.js";
+import { useCellValues } from "@mdxeditor/gurx";
 const AlignToTailwindClassMap = {
   center: styles.centeredCell,
   left: styles.leftAlignedCell,
@@ -23,7 +24,7 @@ const AlignToTailwindClassMap = {
 };
 const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
   const [activeCell, setActiveCell] = React__default.useState(null);
-  const [iconComponentFor, readOnly] = corePluginHooks.useEmitterValues("iconComponentFor", "readOnly");
+  const [iconComponentFor, readOnly] = useCellValues(iconComponentFor$, readOnly$);
   const getCellKey = React__default.useMemo(() => {
     return (cell) => {
       if (!cell.__cacheKey) {
@@ -187,13 +188,13 @@ const Cell = ({ align, ...props }) => {
   );
 };
 const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents, colIndex, rowIndex }) => {
-  const [importVisitors, exportVisitors, usedLexicalNodes, jsxComponentDescriptors, jsxIsAvailable, rootEditor] = corePluginHooks.useEmitterValues(
-    "importVisitors",
-    "exportVisitors",
-    "usedLexicalNodes",
-    "jsxComponentDescriptors",
-    "jsxIsAvailable",
-    "rootEditor"
+  const [importVisitors, exportVisitors, usedLexicalNodes, jsxComponentDescriptors, jsxIsAvailable, rootEditor] = useCellValues(
+    importVisitors$,
+    exportVisitors$,
+    usedLexicalNodes$,
+    jsxComponentDescriptors$,
+    jsxIsAvailable$,
+    rootEditor$
   );
   const [editor] = React__default.useState(() => {
     const editor2 = createEditor({
@@ -283,8 +284,7 @@ const ColumnEditor = ({
   colIndex,
   setActiveCellWithBoundaries
 }) => {
-  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
-  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
+  const [editorRootElementRef, iconComponentFor] = useCellValues(editorRootElementRef$, iconComponentFor$);
   const insertColumnAt = React__default.useCallback(
     (colIndex2) => {
       parentEditor.update(() => {
@@ -351,8 +351,7 @@ const RowEditor = ({
   rowIndex,
   setActiveCellWithBoundaries
 }) => {
-  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
-  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
+  const [editorRootElementRef, iconComponentFor] = useCellValues(editorRootElementRef$, iconComponentFor$);
   const insertRowAt = React__default.useCallback(
     (rowIndex2) => {
       parentEditor.update(() => {

package/dist/plugins/table/TableNode.js

@@ -21,21 +21,31 @@ function coordinatesEmitter() {
   };
 }
 class TableNode extends DecoratorNode {
+  /**
+   * Constructs a new {@link TableNode} with the specified MDAST table node as the object to edit.
+   * See {@link https://github.com/micromark/micromark-extension-gfm-table | micromark/micromark-extension-gfm-table} for more information on the MDAST table node.
+   */
   constructor(mdastNode, key) {
     super(key);
+    /** @internal */
     __publicField(this, "__mdastNode");
+    /** @internal */
     __publicField(this, "focusEmitter", coordinatesEmitter());
     this.__mdastNode = mdastNode || { type: "table", children: [] };
   }
+  /** @internal */
   static getType() {
     return "table";
   }
+  /** @internal */
   static clone(node) {
     return new TableNode(structuredClone(node.__mdastNode), node.__key);
   }
+  /** @internal */
   static importJSON(serializedNode) {
     return $createTableNode(serializedNode.mdastNode);
   }
+  /** @internal */
   exportJSON() {
     return {
       mdastNode: structuredClone(this.__mdastNode),
@@ -43,22 +53,34 @@ class TableNode extends DecoratorNode {
       version: 1
     };
   }
+  /**
+   * Returns the mdast node that this node is constructed from.
+   */
   getMdastNode() {
     return this.__mdastNode;
   }
+  /**
+   * Returns the number of rows in the table.
+   */
   getRowCount() {
     return this.__mdastNode.children.length;
   }
+  /**
+   * Returns the number of columns in the table.
+   */
   getColCount() {
     var _a;
     return ((_a = this.__mdastNode.children[0]) == null ? void 0 : _a.children.length) || 0;
   }
+  /** @internal */
   createDOM() {
     return document.createElement("div");
   }
+  /** @internal */
   updateDOM() {
     return false;
   }
+  /** @internal */
   updateCellContents(colIndex, rowIndex, children) {
     const self = this.getWritable();
     const table = self.__mdastNode;
@@ -129,12 +151,18 @@ class TableNode extends DecoratorNode {
     }
     table.align[colIndex] = align;
   }
+  /** @internal */
   decorate(parentEditor) {
     return /* @__PURE__ */ React__default.createElement(TableEditor, { lexicalTable: this, mdastNode: this.__mdastNode, parentEditor });
   }
+  /**
+   * Focuses the table cell at the specified coordinates.
+   * Pass `undefined` to remove the focus.
+   */
   select(coords) {
     this.focusEmitter.publish(coords || [0, 0]);
   }
+  /** @internal */
   isInline() {
     return false;
   }

package/dist/plugins/table/index.js

@@ -1,11 +1,12 @@
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { Signal, map } from "@mdxeditor/gurx";
 import { gfmTableFromMarkdown, gfmTableToMarkdown } from "mdast-util-gfm-table";
 import { gfmTable } from "micromark-extension-gfm-table";
-import { coreSystem } from "../core/index.js";
+import { insertDecoratorNode$, addMdastExtension$, addSyntaxExtension$, addImportVisitor$, addLexicalNode$, addExportVisitor$, addToMarkdownExtension$ } from "../core/index.js";
 import { LexicalTableVisitor } from "./LexicalTableVisitor.js";
 import { MdastTableVisitor } from "./MdastTableVisitor.js";
 import { $createTableNode, TableNode } from "./TableNode.js";
-import { system } from "../../gurx/realmFactory.js";
-import { realmPlugin } from "../../gurx/react.js";
+import { $isTableNode } from "./TableNode.js";
 function seedTable(rows = 1, columns = 1) {
   const table = {
     type: "table",
@@ -27,43 +28,35 @@ function seedTable(rows = 1, columns = 1) {
   }
   return table;
 }
-const tableSystem = system(
-  (r, [{ insertDecoratorNode }]) => {
-    const insertTable = r.node();
-    r.link(
-      r.pipe(
-        insertTable,
-        r.o.map(({ rows, columns }) => {
-          return () => $createTableNode(seedTable(rows, columns));
-        })
-      ),
-      insertDecoratorNode
-    );
-    return {
-      insertTable
-    };
-  },
-  [coreSystem]
-);
-const [
-  /** @internal */
-  tablePlugin,
-  /** @internal */
-  tablePluginHooks
-] = realmPlugin({
-  id: "table",
-  systemSpec: tableSystem,
-  init: (realm) => {
-    realm.pubKey("addMdastExtension", gfmTableFromMarkdown);
-    realm.pubKey("addSyntaxExtension", gfmTable);
-    realm.pubKey("addImportVisitor", MdastTableVisitor);
-    realm.pubKey("addLexicalNode", TableNode);
-    realm.pubKey("addExportVisitor", LexicalTableVisitor);
-    realm.pubKey("addToMarkdownExtension", gfmTableToMarkdown({ tableCellPadding: true, tablePipeAlign: true }));
+const insertTable$ = Signal((r) => {
+  r.link(
+    r.pipe(
+      insertTable$,
+      map(({ rows, columns }) => {
+        return () => $createTableNode(seedTable(rows, columns));
+      })
+    ),
+    insertDecoratorNode$
+  );
+});
+const tablePlugin = realmPlugin({
+  init(realm) {
+    realm.pubIn({
+      // import
+      [addMdastExtension$]: gfmTableFromMarkdown(),
+      [addSyntaxExtension$]: gfmTable(),
+      [addImportVisitor$]: MdastTableVisitor,
+      // export
+      [addLexicalNode$]: TableNode,
+      [addExportVisitor$]: LexicalTableVisitor,
+      [addToMarkdownExtension$]: gfmTableToMarkdown({ tableCellPadding: true, tablePipeAlign: true })
+    });
   }
 });
 export {
-  tablePlugin,
-  tablePluginHooks,
-  tableSystem
+  $createTableNode,
+  $isTableNode,
+  TableNode,
+  insertTable$,
+  tablePlugin
 };