@mdxeditor/editor 4.1.1 → 4.2.1

package/dist/MDXEditor.js

@@ -35,7 +35,7 @@ const RichTextEditor = () => {
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, topAreaChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })), /* @__PURE__ */ React__default.createElement(RenderRecursiveWrappers, { wrappers: editorWrappers }, /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.rootContentEditableWrapper, "mdxeditor-root-contenteditable") }, /* @__PURE__ */ React__default.createElement(
     RichTextPlugin,
     {
-      contentEditable: /* @__PURE__ */ React__default.createElement("div", { ref: onRef }, /* @__PURE__ */ React__default.createElement(
+      contentEditable: /* @__PURE__ */ React__default.createElement("div", { ref: onRef, className: "mdxeditor-contenteditable-wrapper" }, /* @__PURE__ */ React__default.createElement(
         ContentEditable,
         {
           className: classNames(styles.contentEditable, contentEditableClassName),

package/dist/index.d.ts

@@ -1160,6 +1160,8 @@ export declare interface EditLinkDialog {
     text: string;
     withAnchorText: boolean;
     linkNodeKey: string;
+    /** Set when the dialog targets a single inline decorator node (e.g. an image) instead of a text selection. */
+    decoratorNodeKey?: string;
     rectangle: RectData;
 }
 
@@ -1309,6 +1311,7 @@ export declare class FrontmatterNode extends DecoratorNode<JSX.Element> {
     setYaml(yaml: string): void;
     decorate(editor: LexicalEditor): JSX.Element;
     isKeyboardSelectable(): boolean;
+    isInline(): boolean;
 }
 
 /**
@@ -1385,6 +1388,17 @@ export declare function getCodeBlockLanguageSelectData(normalized: NormalizedCod
     }[];
 };
 
+/**
+ * Gets the coordinates of the DOM element that renders the node with the given key.
+ * @group Utils
+ */
+export declare function getNodeRectangle(editor: LexicalEditor, nodeKey: string): {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+} | null;
+
 /**
  * Gets the selected node from the Lexical editor.
  * @group Utils
@@ -1591,6 +1605,7 @@ export declare interface InactiveLinkDialog {
     type: 'inactive';
     rectangle?: undefined;
     linkNodeKey?: undefined;
+    decoratorNodeKey?: undefined;
 }
 
 /**
@@ -2623,6 +2638,8 @@ export declare interface PreviewLinkDialog {
     /** The fail-closed URL used only for automatic preview navigation. */
     href?: string;
     linkNodeKey: string;
+    /** Set when the link wraps a single inline decorator node (e.g. an image) that the dialog targets. */
+    decoratorNodeKey?: string;
     rectangle: RectData;
 }
 

package/dist/index.js

@@ -54,7 +54,7 @@ import { RemoteMDXEditorRealmProvider, remoteRealmPlugin, useRemoteMDXEditorReal
 import { CAN_USE_DOM, IS_APPLE, controlOrMeta } from "./utils/detectMac.js";
 import { always, call, compose, curry1to0, curry2to1, joinProc, noop, prop, tap, thrush } from "./utils/fp.js";
 import { isPartOftheEditorUI } from "./utils/isPartOftheEditorUI.js";
-import { fromWithinEditorRead, getSelectedNode, getSelectionAsMarkdown, getSelectionRectangle, getStateAsMarkdown } from "./utils/lexicalHelpers.js";
+import { fromWithinEditorRead, getNodeRectangle, getSelectedNode, getSelectionAsMarkdown, getSelectionRectangle, getStateAsMarkdown } from "./utils/lexicalHelpers.js";
 import { makeHslTransparent } from "./utils/makeHslTransparent.js";
 import { uuidv4 } from "./utils/uuid4.js";
 import { voidEmitter } from "./utils/voidEmitter.js";
@@ -242,6 +242,7 @@ export {
   frontmatterDialogOpen$,
   frontmatterPlugin,
   getCodeBlockLanguageSelectData,
+  getNodeRectangle,
   getSelectedNode,
   getSelectionAsMarkdown,
   getSelectionRectangle,

package/dist/plugins/frontmatter/FrontmatterNode.js

@@ -59,6 +59,9 @@ class FrontmatterNode extends DecoratorNode {
   isKeyboardSelectable() {
     return false;
   }
+  isInline() {
+    return false;
+  }
 }
 function $createFrontmatterNode(yaml) {
   return new FrontmatterNode(yaml);

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

@@ -1,7 +1,7 @@
 import * as RadixPopover from "@radix-ui/react-popover";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import React__default from "react";
-import { editorRootElementRef$, activeEditor$, iconComponentFor$, useTranslation } from "../core/index.js";
+import { editorRootElementRef$, contentEditableWrapperElement$, activeEditor$, iconComponentFor$, useTranslation } from "../core/index.js";
 import { DownshiftAutoComplete } from "../core/ui/DownshiftAutoComplete.js";
 import styles from "../../styles/ui.module.css.js";
 import classNames from "classnames";
@@ -93,6 +93,7 @@ function LinkEditForm({
 const LinkDialog = () => {
   const [
     editorRootElementRef,
+    contentEditableWrapperElement,
     activeEditor,
     iconComponentFor,
     linkDialogState,
@@ -101,6 +102,7 @@ const LinkDialog = () => {
     showLinkTitleField
   ] = useCellValues(
     editorRootElementRef$,
+    contentEditableWrapperElement$,
     activeEditor$,
     iconComponentFor$,
     linkDialogState$,
@@ -114,6 +116,7 @@ const LinkDialog = () => {
   const switchFromPreviewToLinkEdit = usePublisher(switchFromPreviewToLinkEdit$);
   const removeLink = usePublisher(removeLink$);
   React__default.useEffect(() => {
+    const scrollContainer = contentEditableWrapperElement == null ? void 0 : contentEditableWrapperElement.closest(".mdxeditor-root-contenteditable");
     const update = () => {
       activeEditor == null ? void 0 : activeEditor.getEditorState().read(() => {
         publishWindowChange(true);
@@ -121,11 +124,13 @@ const LinkDialog = () => {
     };
     window.addEventListener("resize", update);
     window.addEventListener("scroll", update);
+    scrollContainer == null ? void 0 : scrollContainer.addEventListener("scroll", update);
     return () => {
       window.removeEventListener("resize", update);
       window.removeEventListener("scroll", update);
+      scrollContainer == null ? void 0 : scrollContainer.removeEventListener("scroll", update);
     };
-  }, [activeEditor, publishWindowChange]);
+  }, [activeEditor, contentEditableWrapperElement, publishWindowChange]);
   const [copyUrlTooltipOpen, setCopyUrlTooltipOpen] = React__default.useState(false);
   const t = useTranslation();
   if (linkDialogState.type === "inactive") return null;
@@ -148,6 +153,7 @@ const LinkDialog = () => {
     {
       className: classNames(styles.linkDialogPopoverContent),
       sideOffset: 5,
+      updatePositionStrategy: "always",
       onOpenAutoFocus: (e) => {
         e.preventDefault();
       },

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

@@ -1,9 +1,9 @@
-import { $isLinkNode, $createLinkNode, $isAutoLinkNode, TOGGLE_LINK_COMMAND, LinkNode } from "@lexical/link";
-import { Action, Cell, withLatestFrom, map, Signal, filter } from "@mdxeditor/gurx";
-import { KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND, $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, $getNodeByKey, $createTextNode, $insertNodes, $isTextNode, $getNearestNodeFromDOMNode } from "lexical";
+import { $isLinkNode, TOGGLE_LINK_COMMAND, $createLinkNode, $isAutoLinkNode, LinkNode } from "@lexical/link";
+import { Action, Cell, withLatestFrom, map, Signal } from "@mdxeditor/gurx";
+import { KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND, $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, $getNodeByKey, $createNodeSelection, $setSelection, $createTextNode, $insertNodes, $isNodeSelection, $isDecoratorNode, $isTextNode, $getNearestNodeFromDOMNode } from "lexical";
 import { realmPlugin } from "../../RealmWithPlugins.js";
 import { IS_APPLE } from "../../utils/detectMac.js";
-import { getSelectionRectangle, getSelectedNode } from "../../utils/lexicalHelpers.js";
+import { getNodeRectangle, getSelectionRectangle, getSelectedNode } from "../../utils/lexicalHelpers.js";
 import { createActiveEditorSubscription$, viewMode$, readOnly$, activeEditor$, currentSelection$, addComposerChild$ } from "../core/index.js";
 import { LinkDialog } from "./LinkDialog.js";
 import { $findMatchingParent } from "@lexical/utils";
@@ -23,6 +23,14 @@ function getLinkNodeInSelection(selection) {
   }
   return null;
 }
+function getSelectedInlineDecorator(selection = $getSelection()) {
+  if (!$isNodeSelection(selection)) {
+    return null;
+  }
+  const nodes = selection.getNodes();
+  const node = nodes.length === 1 ? nodes[0] : null;
+  return $isDecoratorNode(node) && node.isInline() ? node : null;
+}
 function getPreviewHref(editor, linkNodeKey, url) {
   if (!editor) return "about:blank";
   return editor.getEditorState().read(() => {
@@ -60,7 +68,7 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
       (event) => {
         if (event.key === "k" && (IS_APPLE ? event.metaKey : event.ctrlKey) && !r.getValue(readOnly$)) {
           const selection = $getSelection();
-          if ($isRangeSelection(selection)) {
+          if ($isRangeSelection(selection) || getSelectedInlineDecorator(selection) !== null) {
             r.pub(openLinkEditDialog$);
             event.stopPropagation();
             event.preventDefault();
@@ -89,6 +97,7 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
             text,
             withAnchorText,
             linkNodeKey: state.linkNodeKey,
+            decoratorNodeKey: state.decoratorNodeKey,
             rectangle: state.rectangle
           });
         });
@@ -103,6 +112,44 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
     const url = ((_b = payload.url) == null ? void 0 : _b.trim()) ?? "";
     const title = ((_c = payload.title) == null ? void 0 : _c.trim()) ?? "";
     if (url !== "") {
+      if (state.decoratorNodeKey !== void 0) {
+        let linkNodeKey = "";
+        let linkApplied = false;
+        editor == null ? void 0 : editor.update(
+          () => {
+            const node = $getNodeByKey(state.decoratorNodeKey);
+            if (node === null) {
+              return;
+            }
+            const nodeSelection = $createNodeSelection();
+            nodeSelection.add(node.getKey());
+            $setSelection(nodeSelection);
+            linkApplied = editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
+            if (!linkApplied) {
+              return;
+            }
+            const parent = node.getParent();
+            if ($isLinkNode(parent)) {
+              parent.setTitle(title);
+              linkNodeKey = parent.getKey();
+            }
+          },
+          { discrete: true }
+        );
+        if (linkNodeKey === "") {
+          return;
+        }
+        r.pub(linkDialogState$, {
+          type: "preview",
+          linkNodeKey,
+          decoratorNodeKey: state.decoratorNodeKey,
+          rectangle: state.rectangle,
+          title,
+          url,
+          href: getPreviewHref(editor, linkNodeKey, url)
+        });
+        return;
+      }
       if (selection == null ? void 0 : selection.isCollapsed()) {
         const linkContent = text || title || url;
         editor == null ? void 0 : editor.update(
@@ -144,7 +191,20 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
       });
     } else {
       if (state.type === "edit" && state.initialUrl !== "") {
-        editor == null ? void 0 : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+        if (state.decoratorNodeKey !== void 0) {
+          editor == null ? void 0 : editor.update(() => {
+            const node = $getNodeByKey(state.decoratorNodeKey);
+            if (node === null) {
+              return;
+            }
+            const nodeSelection = $createNodeSelection();
+            nodeSelection.add(node.getKey());
+            $setSelection(nodeSelection);
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+          });
+        } else {
+          editor == null ? void 0 : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+        }
       }
       r.pub(linkDialogState$, {
         type: "inactive"
@@ -168,6 +228,7 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
               url: state.initialUrl,
               href: getPreviewHref(editor, state.linkNodeKey, state.initialUrl),
               linkNodeKey: state.linkNodeKey,
+              decoratorNodeKey: state.decoratorNodeKey,
               rectangle: state.rectangle
             };
           }
@@ -182,7 +243,22 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
     r.pipe(
       r.combine(currentSelection$, onWindowChange$),
       withLatestFrom(activeEditor$, linkDialogState$, readOnly$),
-      map(([[selection], activeEditor, _, readOnly]) => {
+      map(([[selection], activeEditor, state, readOnly]) => {
+        if (state.decoratorNodeKey !== void 0 && activeEditor && !readOnly) {
+          const selectedDecoratorKey = activeEditor.getEditorState().read(() => {
+            const editorSelection = $getSelection();
+            if (!$isNodeSelection(editorSelection)) {
+              return null;
+            }
+            const nodes = editorSelection.getNodes();
+            return nodes.length === 1 ? nodes[0].getKey() : null;
+          });
+          if (selectedDecoratorKey !== state.decoratorNodeKey) {
+            return { type: "inactive" };
+          }
+          const rectangle = getNodeRectangle(activeEditor, state.decoratorNodeKey);
+          return rectangle === null ? { type: "inactive" } : { ...state, rectangle };
+        }
         if ($isRangeSelection(selection) && activeEditor && !readOnly) {
           const node = getLinkNodeInSelection(selection);
           if (!selection.isCollapsed()) return { type: "inactive" };
@@ -220,39 +296,73 @@ const removeLink$ = Action((r) => {
   });
 });
 const openLinkEditDialog$ = Action((r) => {
-  r.sub(
-    r.pipe(
-      openLinkEditDialog$,
-      withLatestFrom(currentSelection$, activeEditor$),
-      filter(([, selection]) => $isRangeSelection(selection))
-    ),
-    ([, selection, editor]) => {
-      editor == null ? void 0 : editor.focus(() => {
-        setTimeout(() => {
-          editor.getEditorState().read(() => {
-            const linkNode = getLinkNodeInSelection(selection);
-            const rectangle = getSelectionRectangle(editor);
-            const initialUrl = (linkNode == null ? void 0 : linkNode.getURL()) ?? "";
-            const url = (linkNode == null ? void 0 : linkNode.getURL()) ?? "";
-            const title = (linkNode == null ? void 0 : linkNode.getTitle()) ?? "";
-            const linkNodeKey = (linkNode == null ? void 0 : linkNode.getKey()) ?? "";
-            const withAnchorText = linkNode ? linkNode.getTextContent().length > 0 && linkNode.getChildrenSize() <= 1 : Boolean(selection == null ? void 0 : selection.isCollapsed());
-            const text = withAnchorText && linkNode ? linkNode.getTextContent() : "";
-            r.pub(linkDialogState$, {
-              type: "edit",
-              initialUrl,
-              url,
-              title,
-              text,
-              withAnchorText,
-              linkNodeKey,
-              rectangle
-            });
+  r.sub(r.pipe(openLinkEditDialog$, withLatestFrom(currentSelection$, activeEditor$)), ([, selection, editor]) => {
+    if (!editor) {
+      return;
+    }
+    const decorator = editor.getEditorState().read(() => {
+      const node = getSelectedInlineDecorator();
+      if (node === null) {
+        return null;
+      }
+      const parent = node.getParent();
+      const linkNode = $isLinkNode(parent) ? parent : null;
+      return {
+        nodeKey: node.getKey(),
+        url: (linkNode == null ? void 0 : linkNode.getURL()) ?? "",
+        title: (linkNode == null ? void 0 : linkNode.getTitle()) ?? "",
+        linkNodeKey: (linkNode == null ? void 0 : linkNode.getKey()) ?? ""
+      };
+    });
+    if (decorator !== null) {
+      const rectangle = getNodeRectangle(editor, decorator.nodeKey);
+      if (rectangle === null) {
+        return;
+      }
+      r.pub(linkDialogState$, {
+        type: "edit",
+        initialUrl: decorator.url,
+        url: decorator.url,
+        title: decorator.title,
+        text: "",
+        withAnchorText: false,
+        linkNodeKey: decorator.linkNodeKey,
+        decoratorNodeKey: decorator.nodeKey,
+        rectangle
+      });
+      return;
+    }
+    if (!$isRangeSelection(selection)) {
+      return;
+    }
+    editor.focus(() => {
+      setTimeout(() => {
+        editor.getEditorState().read(() => {
+          const linkNode = getLinkNodeInSelection(selection);
+          const rectangle = getSelectionRectangle(editor);
+          if (rectangle === null) {
+            return;
+          }
+          const initialUrl = (linkNode == null ? void 0 : linkNode.getURL()) ?? "";
+          const url = (linkNode == null ? void 0 : linkNode.getURL()) ?? "";
+          const title = (linkNode == null ? void 0 : linkNode.getTitle()) ?? "";
+          const linkNodeKey = (linkNode == null ? void 0 : linkNode.getKey()) ?? "";
+          const withAnchorText = linkNode ? linkNode.getTextContent().length > 0 && linkNode.getChildrenSize() <= 1 : selection.isCollapsed();
+          const text = withAnchorText && linkNode ? linkNode.getTextContent() : "";
+          r.pub(linkDialogState$, {
+            type: "edit",
+            initialUrl,
+            url,
+            title,
+            text,
+            withAnchorText,
+            linkNodeKey,
+            rectangle
           });
         });
       });
-    }
-  );
+    });
+  });
 });
 const linkAutocompleteSuggestions$ = Cell([]);
 const onClickLinkCallback$ = Cell(null);

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

@@ -12,6 +12,9 @@ const CreateLink = () => {
     {
       "aria-label": t("toolbar.link", "Create link"),
       title: t("toolbar.link", "Create link"),
+      onPointerDown: (event) => {
+        event.preventDefault();
+      },
       onClick: (_) => {
         openLinkDialog();
       }