@mdxeditor/editor 1.14.3 → 2.0.0

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 })
   )));
 };

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

@@ -1,11 +1,11 @@
 import { TOGGLE_LINK_COMMAND, $isLinkNode } from "@lexical/link";
-import { $isRangeSelection, KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_LOW, KEY_MODIFIER_COMMAND, $getSelection, COMMAND_PRIORITY_HIGH, $createTextNode, $insertNodes } from "lexical";
+import { KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_LOW, KEY_MODIFIER_COMMAND, $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, $createTextNode, $insertNodes } from "lexical";
 import { IS_APPLE } from "../../utils/detectMac.js";
 import { getSelectionRectangle, getSelectedNode } from "../../utils/lexicalHelpers.js";
-import { coreSystem } from "../core/index.js";
+import { createActiveEditorSubscription$, activeEditor$, currentSelection$, addComposerChild$ } from "../core/index.js";
 import { LinkDialog } from "./LinkDialog.js";
-import { system } from "../../gurx/realmFactory.js";
-import { realmPlugin } from "../../gurx/react.js";
+import { Signal, Cell, withLatestFrom, map, Action, filter } from "@mdxeditor/gurx";
+import { realmPlugin } from "../../RealmWithPlugins.js";
 function getLinkNodeInSelection(selection) {
   if (!selection) {
     return null;
@@ -22,236 +22,214 @@ function getLinkNodeInSelection(selection) {
   }
   return null;
 }
-const linkDialogSystem = system(
-  (r, [{ activeEditor, currentSelection, createActiveEditorSubscription }]) => {
-    const dialogState = r.node(false);
-    const onWindowChange = r.node();
-    const linkDialogState = r.node({ type: "inactive" }, true);
-    const updateLink = r.node();
-    const cancelLinkEdit = r.node();
-    const applyLinkChanges = r.node();
-    const switchFromPreviewToLinkEdit = r.node();
-    const removeLink = r.node();
-    const openLinkEditDialog = r.node();
-    const linkAutocompleteSuggestions = r.node([]);
-    r.sub(
-      r.pipe(
-        openLinkEditDialog,
-        r.o.withLatestFrom(currentSelection, activeEditor),
-        r.o.filter(([, selection]) => $isRangeSelection(selection))
-      ),
-      ([, selection, editor]) => {
-        editor == null ? void 0 : editor.focus(() => {
-          editor == null ? void 0 : editor.getEditorState().read(() => {
-            const node = getLinkNodeInSelection(selection);
-            const rectangle = getSelectionRectangle(editor);
-            if (node) {
-              r.pub(linkDialogState, {
-                type: "edit",
-                initialUrl: node.getURL(),
-                initialTitle: node.getTitle() || "",
-                url: node.getURL(),
-                title: node.getTitle() || "",
-                linkNodeKey: node.getKey(),
-                rectangle
-              });
-            } else {
-              r.pub(linkDialogState, {
-                type: "edit",
-                initialUrl: "",
-                initialTitle: "",
-                title: "",
-                url: "",
-                linkNodeKey: "",
-                rectangle
-              });
-            }
-          });
-        });
-      }
+const onWindowChange$ = Signal();
+const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
+  r.pub(createActiveEditorSubscription$, (editor) => {
+    return editor.registerCommand(
+      KEY_ESCAPE_COMMAND,
+      () => {
+        const state = r.getValue(linkDialogState$);
+        if (state.type === "preview") {
+          r.pub(linkDialogState$, { type: "inactive" });
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_LOW
     );
-    r.sub(r.pipe(removeLink, r.o.withLatestFrom(activeEditor)), ([, editor]) => {
-      editor == null ? void 0 : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
-    });
-    r.pub(createActiveEditorSubscription, (editor) => {
-      return editor.registerCommand(
-        KEY_ESCAPE_COMMAND,
-        () => {
-          const state = r.getValue(linkDialogState);
-          if (state.type === "preview") {
-            r.pub(linkDialogState, { type: "inactive" });
+  });
+  r.pub(createActiveEditorSubscription$, (editor) => {
+    return editor.registerCommand(
+      KEY_MODIFIER_COMMAND,
+      (event) => {
+        if (event.key === "k" && (IS_APPLE ? event.metaKey : event.ctrlKey)) {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            r.pub(openLinkEditDialog$);
+            event.stopPropagation();
+            event.preventDefault();
             return true;
+          } else {
+            return false;
           }
-          return false;
-        },
-        COMMAND_PRIORITY_LOW
-      );
-    });
-    r.pub(createActiveEditorSubscription, (editor) => {
-      return editor.registerCommand(
-        KEY_MODIFIER_COMMAND,
-        (event) => {
-          if (event.key === "k" && (IS_APPLE ? event.metaKey : event.ctrlKey)) {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              r.pub(openLinkEditDialog, true);
-              event.stopPropagation();
-              event.preventDefault();
-              return true;
-            } else {
-              return false;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_HIGH
+    );
+  });
+  r.link(
+    r.pipe(
+      switchFromPreviewToLinkEdit$,
+      withLatestFrom(linkDialogState$),
+      map(([, state]) => {
+        if (state.type === "preview") {
+          return {
+            type: "edit",
+            initialUrl: state.url,
+            url: state.url,
+            title: state.title,
+            linkNodeKey: state.linkNodeKey,
+            rectangle: state.rectangle
+          };
+        } else {
+          throw new Error("Cannot switch to edit mode when not in preview mode");
+        }
+      })
+    ),
+    linkDialogState$
+  );
+  r.sub(r.pipe(updateLink$, withLatestFrom(activeEditor$, linkDialogState$, currentSelection$)), ([payload, editor, state, selection]) => {
+    const url = payload.url.trim();
+    const title = payload.title.trim();
+    if (url.trim() !== "") {
+      if (selection == null ? void 0 : selection.isCollapsed()) {
+        const linkContent = title || url;
+        editor == null ? void 0 : editor.update(
+          () => {
+            if (!getLinkNodeInSelection(selection)) {
+              const node = $createTextNode(linkContent);
+              $insertNodes([node]);
+              node.select();
             }
-          }
-          return false;
-        },
-        COMMAND_PRIORITY_HIGH
-      );
-    });
-    r.link(
-      r.pipe(
-        switchFromPreviewToLinkEdit,
-        r.o.withLatestFrom(linkDialogState),
-        r.o.map(([, state]) => {
-          if (state.type === "preview") {
+          },
+          { discrete: true }
+        );
+      }
+      editor == null ? void 0 : editor.dispatchCommand(TOGGLE_LINK_COMMAND, { url, title });
+      r.pub(linkDialogState$, {
+        type: "preview",
+        linkNodeKey: state.linkNodeKey,
+        rectangle: state.rectangle,
+        title,
+        url
+      });
+    } else {
+      if (state.type === "edit" && state.initialUrl !== "") {
+        editor == null ? void 0 : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+      }
+      r.pub(linkDialogState$, {
+        type: "inactive"
+      });
+    }
+  });
+  r.link(
+    r.pipe(
+      cancelLinkEdit$,
+      withLatestFrom(linkDialogState$, activeEditor$),
+      map(([, state, editor]) => {
+        if (state.type === "edit") {
+          editor == null ? void 0 : editor.focus();
+          if (state.initialUrl === "") {
             return {
-              type: "edit",
-              initialUrl: state.url,
-              url: state.url,
-              title: state.title,
+              type: "inactive"
+            };
+          } else {
+            return {
+              type: "preview",
+              url: state.initialUrl,
               linkNodeKey: state.linkNodeKey,
               rectangle: state.rectangle
             };
-          } else {
-            throw new Error("Cannot switch to edit mode when not in preview mode");
-          }
-        })
-      ),
-      linkDialogState
-    );
-    r.sub(
-      r.pipe(updateLink, r.o.withLatestFrom(activeEditor, linkDialogState, currentSelection)),
-      ([payload, editor, state, selection]) => {
-        const url = payload.url.trim();
-        const title = payload.title.trim();
-        if (url.trim() !== "") {
-          if (selection == null ? void 0 : selection.isCollapsed()) {
-            const linkContent = title || url;
-            editor == null ? void 0 : editor.update(
-              () => {
-                if (!getLinkNodeInSelection(selection)) {
-                  const node = $createTextNode(linkContent);
-                  $insertNodes([node]);
-                  node.select();
-                }
-              },
-              { discrete: true }
-            );
           }
-          editor == null ? void 0 : editor.dispatchCommand(TOGGLE_LINK_COMMAND, { url, title });
-          r.pub(linkDialogState, {
-            type: "preview",
-            linkNodeKey: state.linkNodeKey,
-            rectangle: state.rectangle,
-            title,
-            url
-          });
         } else {
-          if (state.type === "edit" && state.initialUrl !== "") {
-            editor == null ? void 0 : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
-          }
-          r.pub(linkDialogState, {
-            type: "inactive"
-          });
+          throw new Error("Cannot cancel edit when not in edit mode");
         }
-      }
-    );
-    r.link(
-      r.pipe(
-        cancelLinkEdit,
-        r.o.withLatestFrom(linkDialogState, activeEditor),
-        r.o.map(([, state, editor]) => {
-          if (state.type === "edit") {
-            editor == null ? void 0 : editor.focus();
-            if (state.initialUrl === "") {
-              return {
-                type: "inactive"
-              };
-            } else {
-              return {
-                type: "preview",
-                url: state.initialUrl,
-                linkNodeKey: state.linkNodeKey,
-                rectangle: state.rectangle
-              };
-            }
+      })
+    ),
+    linkDialogState$
+  );
+  r.link(
+    r.pipe(
+      r.combine(currentSelection$, onWindowChange$),
+      withLatestFrom(activeEditor$, linkDialogState$),
+      map(([[selection], activeEditor]) => {
+        if ($isRangeSelection(selection) && activeEditor) {
+          const node = getLinkNodeInSelection(selection);
+          if (node) {
+            return {
+              type: "preview",
+              url: node.getURL(),
+              linkNodeKey: node.getKey(),
+              title: node.getTitle(),
+              rectangle: getSelectionRectangle(activeEditor)
+            };
           } else {
-            throw new Error("Cannot cancel edit when not in edit mode");
+            return { type: "inactive" };
           }
-        })
-      ),
-      linkDialogState
-    );
-    r.link(
-      r.pipe(
-        r.combine(currentSelection, onWindowChange),
-        r.o.withLatestFrom(activeEditor, linkDialogState),
-        r.o.map(([[selection], activeEditor2]) => {
-          if ($isRangeSelection(selection) && activeEditor2) {
-            const node = getLinkNodeInSelection(selection);
-            if (node) {
-              return {
-                type: "preview",
-                url: node.getURL(),
-                linkNodeKey: node.getKey(),
-                title: node.getTitle(),
-                rectangle: getSelectionRectangle(activeEditor2)
-              };
-            } else {
-              return {
-                type: "inactive"
-              };
-            }
+        } else {
+          return { type: "inactive" };
+        }
+      })
+    ),
+    linkDialogState$
+  );
+});
+const updateLink$ = Signal();
+const cancelLinkEdit$ = Action();
+const applyLinkChanges$ = Action();
+const switchFromPreviewToLinkEdit$ = Action();
+const removeLink$ = Action((r) => {
+  r.sub(r.pipe(removeLink$, withLatestFrom(activeEditor$)), ([, editor]) => {
+    editor == null ? void 0 : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+  });
+});
+const openLinkEditDialog$ = Action((r) => {
+  r.sub(
+    r.pipe(
+      openLinkEditDialog$,
+      withLatestFrom(currentSelection$, activeEditor$),
+      filter(([, selection]) => $isRangeSelection(selection))
+    ),
+    ([, selection, editor]) => {
+      editor == null ? void 0 : editor.focus(() => {
+        editor == null ? void 0 : editor.getEditorState().read(() => {
+          const node = getLinkNodeInSelection(selection);
+          const rectangle = getSelectionRectangle(editor);
+          if (node) {
+            r.pub(linkDialogState$, {
+              type: "edit",
+              initialUrl: node.getURL(),
+              initialTitle: node.getTitle() || "",
+              url: node.getURL(),
+              title: node.getTitle() || "",
+              linkNodeKey: node.getKey(),
+              rectangle
+            });
           } else {
-            return {
-              type: "inactive"
-            };
+            r.pub(linkDialogState$, {
+              type: "edit",
+              initialUrl: "",
+              initialTitle: "",
+              title: "",
+              url: "",
+              linkNodeKey: "",
+              rectangle
+            });
           }
-        })
-      ),
-      linkDialogState
-    );
-    return {
-      dialogState,
-      onWindowChange,
-      linkDialogState,
-      updateLink,
-      switchFromPreviewToLinkEdit,
-      cancelLinkEdit,
-      removeLink,
-      openLinkEditDialog,
-      applyLinkChanges,
-      linkAutocompleteSuggestions
-    };
-  },
-  [coreSystem]
-);
-const [
-  /** @internal */
-  linkDialogPlugin,
-  /** @internal */
-  linkDialogPluginHooks
-] = realmPlugin({
-  id: "link-dialog",
-  dependencies: ["link"],
-  systemSpec: linkDialogSystem,
-  applyParamsToSystem(r, params = {}) {
-    r.pubKey("linkAutocompleteSuggestions", params.linkAutocompleteSuggestions || []);
-  },
+        });
+      });
+    }
+  );
+});
+const linkAutocompleteSuggestions$ = Cell([]);
+const linkDialogPlugin = realmPlugin({
   init(r, params) {
-    r.pubKey("addComposerChild", (params == null ? void 0 : params.LinkDialog) || LinkDialog);
+    r.pub(addComposerChild$, (params == null ? void 0 : params.LinkDialog) || LinkDialog);
+  },
+  update(r, params = {}) {
+    r.pub(linkAutocompleteSuggestions$, params.linkAutocompleteSuggestions || []);
   }
 });
 export {
+  applyLinkChanges$,
+  cancelLinkEdit$,
+  linkAutocompleteSuggestions$,
   linkDialogPlugin,
-  linkDialogPluginHooks
+  linkDialogState$,
+  onWindowChange$,
+  openLinkEditDialog$,
+  removeLink$,
+  switchFromPreviewToLinkEdit$,
+  updateLink$
 };