@mdxeditor/editor 1.14.3 → 2.0.1

package/dist/plugins/jsx/index.js

@@ -1,12 +1,12 @@
 import { mdxFromMarkdown, mdxToMarkdown } from "mdast-util-mdx";
 import { mdxjs } from "micromark-extension-mdxjs";
-import { coreSystem } from "../core/index.js";
+import { insertDecoratorNode$, jsxIsAvailable$, addMdastExtension$, addSyntaxExtension$, addImportVisitor$, addLexicalNode$, addExportVisitor$, addToMarkdownExtension$, jsxComponentDescriptors$ } from "../core/index.js";
 import { $createLexicalJsxNode, LexicalJsxNode } from "./LexicalJsxNode.js";
 import { LexicalJsxVisitor } from "./LexicalJsxVisitor.js";
 import { MdastMdxJsEsmVisitor } from "./MdastMdxJsEsmVisitor.js";
 import { MdastMdxJsxElementVisitor } from "./MdastMdxJsxElementVisitor.js";
-import { system } from "../../gurx/realmFactory.js";
-import { realmPlugin } from "../../gurx/react.js";
+import { Signal, map } from "@mdxeditor/gurx";
+import { realmPlugin } from "../../RealmWithPlugins.js";
 function isMdastJsxNode(node) {
   return node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement";
 }
@@ -17,66 +17,54 @@ function toMdastJsxAttributes(attributes) {
     value
   }));
 }
-const jsxSystem = system(
-  (r, [{ insertDecoratorNode }]) => {
-    const insertJsx = r.node();
-    r.link(
-      r.pipe(
-        insertJsx,
-        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
-    );
-    return {
-      insertJsx
-    };
-  },
-  [coreSystem]
-);
-const [
-  /** @internal */
-  jsxPlugin,
-  /** @internal */
-  jsxPluginHooks
-] = realmPlugin({
-  id: "jsx",
-  systemSpec: jsxSystem,
-  applyParamsToSystem: (realm, params) => {
-    realm.pubKey("jsxComponentDescriptors", (params == null ? void 0 : params.jsxComponentDescriptors) || []);
+const insertJsx$ = Signal((r) => {
+  r.link(
+    r.pipe(
+      insertJsx$,
+      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$
+  );
+});
+const jsxPlugin = realmPlugin({
+  init: (realm) => {
+    realm.pubIn({
+      // import
+      [jsxIsAvailable$]: true,
+      [addMdastExtension$]: mdxFromMarkdown(),
+      [addSyntaxExtension$]: mdxjs(),
+      [addImportVisitor$]: [MdastMdxJsxElementVisitor, MdastMdxJsEsmVisitor],
+      // export
+      [addLexicalNode$]: LexicalJsxNode,
+      [addExportVisitor$]: LexicalJsxVisitor,
+      [addToMarkdownExtension$]: mdxToMarkdown()
+    });
   },
-  init: (realm, _) => {
-    realm.pubKey("jsxIsAvailable", true);
-    realm.pubKey("addMdastExtension", mdxFromMarkdown());
-    realm.pubKey("addSyntaxExtension", mdxjs());
-    realm.pubKey("addImportVisitor", MdastMdxJsxElementVisitor);
-    realm.pubKey("addImportVisitor", MdastMdxJsEsmVisitor);
-    realm.pubKey("addLexicalNode", LexicalJsxNode);
-    realm.pubKey("addExportVisitor", LexicalJsxVisitor);
-    realm.pubKey("addToMarkdownExtension", mdxToMarkdown());
+  update(realm, params) {
+    realm.pub(jsxComponentDescriptors$, (params == null ? void 0 : params.jsxComponentDescriptors) || []);
   }
 });
 export {
+  insertJsx$,
   isMdastJsxNode,
-  jsxPlugin,
-  jsxPluginHooks,
-  jsxSystem
+  jsxPlugin
 };

package/dist/plugins/link/index.js

@@ -1,33 +1,28 @@
 import React__default from "react";
-import { coreSystem } from "../core/index.js";
 import { MdastLinkVisitor } from "./MdastLinkVisitor.js";
 import { LexicalLinkVisitor } from "./LexicalLinkVisitor.js";
 import { LinkNode, AutoLinkNode } from "@lexical/link";
 import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin.js";
 import { LexicalAutoLinkPlugin } from "./AutoLinkPlugin.js";
-import { system } from "../../gurx/realmFactory.js";
-import { realmPlugin } from "../../gurx/react.js";
-const linkSystem = system(
-  (r) => {
-    const disableAutoLink = r.node(false);
-    return { disableAutoLink };
-  },
-  [coreSystem]
-);
-const [linkPlugin] = realmPlugin({
-  id: "link",
-  systemSpec: linkSystem,
-  init: (realm, params) => {
+import { Cell } from "@mdxeditor/gurx";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { addActivePlugin$, addImportVisitor$, addLexicalNode$, addExportVisitor$, addComposerChild$ } from "../core/index.js";
+const disableAutoLink$ = Cell(false);
+const linkPlugin = realmPlugin({
+  init(realm, params) {
     const disableAutoLink = Boolean(params == null ? void 0 : params.disableAutoLink);
-    realm.pubKey("addImportVisitor", MdastLinkVisitor);
-    realm.pubKey("addLexicalNode", LinkNode);
-    realm.pubKey("addLexicalNode", AutoLinkNode);
-    realm.pubKey("addExportVisitor", LexicalLinkVisitor);
-    realm.pubKey("disableAutoLink", disableAutoLink);
     const linkPluginProps = (params == null ? void 0 : params.validateUrl) ? { validateUrl: params.validateUrl } : {};
-    realm.pubKey("addComposerChild", () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(LinkPlugin, { ...linkPluginProps }), disableAutoLink ? null : /* @__PURE__ */ React__default.createElement(LexicalAutoLinkPlugin, null)));
+    realm.pubIn({
+      [addActivePlugin$]: "link",
+      [addImportVisitor$]: MdastLinkVisitor,
+      [addLexicalNode$]: [LinkNode, AutoLinkNode],
+      [addExportVisitor$]: LexicalLinkVisitor,
+      [disableAutoLink$]: disableAutoLink,
+      [addComposerChild$]: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(LinkPlugin, { ...linkPluginProps }), disableAutoLink ? null : /* @__PURE__ */ React__default.createElement(LexicalAutoLinkPlugin, null))
+    });
   }
 });
 export {
+  disableAutoLink$,
   linkPlugin
 };

package/dist/plugins/link-dialog/LinkDialog.js

@@ -1,13 +1,14 @@
 import * as RadixPopover from "@radix-ui/react-popover";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import React__default from "react";
-import { corePluginHooks } from "../core/index.js";
+import { editorRootElementRef$, activeEditor$, iconComponentFor$ } from "../core/index.js";
 import { DownshiftAutoComplete } from "../core/ui/DownshiftAutoComplete.js";
 import styles from "../../styles/ui.module.css.js";
 import classNames from "classnames";
 import { createCommand } from "lexical";
 import { useForm } from "react-hook-form";
-import { linkDialogPluginHooks } from "./index.js";
+import { linkDialogState$, linkAutocompleteSuggestions$, onWindowChange$, updateLink$, cancelLinkEdit$, switchFromPreviewToLinkEdit$, removeLink$ } from "./index.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 createCommand();
 function LinkEditForm({ url, title, onSubmit, onCancel, linkAutocompleteSuggestions }) {
   const {
@@ -54,18 +55,18 @@ function LinkEditForm({ url, title, onSubmit, onCancel, linkAutocompleteSuggesti
   );
 }
 const LinkDialog = () => {
-  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
-  const publishWindowChange = linkDialogPluginHooks.usePublisher("onWindowChange");
-  const [activeEditor] = corePluginHooks.useEmitterValues("activeEditor");
-  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
-  const [linkDialogState, linkAutocompleteSuggestions] = linkDialogPluginHooks.useEmitterValues(
-    "linkDialogState",
-    "linkAutocompleteSuggestions"
+  const [editorRootElementRef, activeEditor, iconComponentFor, linkDialogState, linkAutocompleteSuggestions] = useCellValues(
+    editorRootElementRef$,
+    activeEditor$,
+    iconComponentFor$,
+    linkDialogState$,
+    linkAutocompleteSuggestions$
   );
-  const updateLink = linkDialogPluginHooks.usePublisher("updateLink");
-  const cancelLinkEdit = linkDialogPluginHooks.usePublisher("cancelLinkEdit");
-  const switchFromPreviewToLinkEdit = linkDialogPluginHooks.usePublisher("switchFromPreviewToLinkEdit");
-  const removeLink = linkDialogPluginHooks.usePublisher("removeLink");
+  const publishWindowChange = usePublisher(onWindowChange$);
+  const updateLink = usePublisher(updateLink$);
+  const cancelLinkEdit = usePublisher(cancelLinkEdit$);
+  const switchFromPreviewToLinkEdit = usePublisher(switchFromPreviewToLinkEdit$);
+  const removeLink = usePublisher(removeLink$);
   React__default.useEffect(() => {
     const update = () => {
       activeEditor == null ? void 0 : activeEditor.getEditorState().read(() => {
@@ -108,7 +109,7 @@ const LinkDialog = () => {
         url: linkDialogState.url,
         title: linkDialogState.title,
         onSubmit: updateLink,
-        onCancel: cancelLinkEdit.bind(null, true),
+        onCancel: cancelLinkEdit.bind(null),
         linkAutocompleteSuggestions
       }
     ),
@@ -122,7 +123,7 @@ const LinkDialog = () => {
       },
       /* @__PURE__ */ React__default.createElement("span", null, linkDialogState.url),
       urlIsExternal && iconComponentFor("open_in_new")
-    ), /* @__PURE__ */ React__default.createElement(ActionButton, { onClick: () => switchFromPreviewToLinkEdit(true), title: "Edit link URL", "aria-label": "Edit link URL" }, iconComponentFor("edit")), /* @__PURE__ */ React__default.createElement(Tooltip.Provider, null, /* @__PURE__ */ React__default.createElement(Tooltip.Root, { open: copyUrlTooltipOpen }, /* @__PURE__ */ React__default.createElement(Tooltip.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React__default.createElement(ActionButton, { onClick: () => switchFromPreviewToLinkEdit(), title: "Edit link URL", "aria-label": "Edit link URL" }, iconComponentFor("edit")), /* @__PURE__ */ React__default.createElement(Tooltip.Provider, null, /* @__PURE__ */ React__default.createElement(Tooltip.Root, { open: copyUrlTooltipOpen }, /* @__PURE__ */ React__default.createElement(Tooltip.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
       ActionButton,
       {
         title: "Copy to clipboard",
@@ -135,7 +136,7 @@ const LinkDialog = () => {
         }
       },
       copyUrlTooltipOpen ? iconComponentFor("check") : iconComponentFor("content_copy")
-    )), /* @__PURE__ */ React__default.createElement(Tooltip.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Tooltip.Content, { className: classNames(styles.tooltipContent), sideOffset: 5 }, "Copied!", /* @__PURE__ */ React__default.createElement(Tooltip.Arrow, null))))), /* @__PURE__ */ React__default.createElement(ActionButton, { title: "Remove link", "aria-label": "Remove link", onClick: () => removeLink(true) }, iconComponentFor("link_off"))),
+    )), /* @__PURE__ */ React__default.createElement(Tooltip.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Tooltip.Content, { className: classNames(styles.tooltipContent), sideOffset: 5 }, "Copied!", /* @__PURE__ */ React__default.createElement(Tooltip.Arrow, null))))), /* @__PURE__ */ React__default.createElement(ActionButton, { title: "Remove link", "aria-label": "Remove link", onClick: () => removeLink() }, iconComponentFor("link_off"))),
     /* @__PURE__ */ React__default.createElement(RadixPopover.Arrow, { className: styles.popoverArrow })
   )));
 };