@mdxeditor/editor 3.23.1 → 3.24.0

package/dist/importMarkdownToLexical.js

@@ -48,6 +48,7 @@ function importMarkdownToLexical({
 }
 function importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors }) {
   const formattingMap = /* @__PURE__ */ new WeakMap();
+  const styleMap = /* @__PURE__ */ new WeakMap();
   visitors = visitors.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
   function visitChildren(mdastNode, lexicalParent) {
     if (!isParent(mdastNode)) {
@@ -112,6 +113,19 @@ function importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors })
         },
         getParentFormatting() {
           return formattingMap.get(mdastParent) ?? 0;
+        },
+        addStyle(style, node) {
+          if (!node) {
+            if (isParent(mdastNode)) {
+              node = mdastNode;
+            }
+          }
+          if (node) {
+            styleMap.set(node, style);
+          }
+        },
+        getParentStyle() {
+          return styleMap.get(mdastParent) ?? "";
         }
       }
     });

package/dist/index.d.ts

@@ -17,6 +17,7 @@ import { KlassConstructor } from 'lexical';
 import { LexicalCommand } from 'lexical';
 import { LexicalEditor } from 'lexical';
 import { LexicalNode } from 'lexical';
+import { LinkNode } from '@lexical/link';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin.js';
 import { ListType } from '@lexical/list';
 import * as Mdast from 'mdast';
@@ -1844,6 +1845,10 @@ export declare const linkDialogPlugin: (params?: {
      * If set, clicking on the link in the preview popup will call this callback instead of opening the link.
      */
     onClickLinkCallback?: ClickLinkCallback | undefined;
+    /**
+     * Invoked when a link is clicked in read-only mode
+     */
+    onReadOnlyClickLinkCallback?: ReadOnlyClickLinkCallback | undefined;
 } | undefined) => RealmPlugin;
 
 /**
@@ -2009,6 +2014,15 @@ export declare interface MdastImportVisitor<UN extends Mdast.Nodes> {
              * Access the current formatting context.
              */
             getParentFormatting(): number;
+            /**
+             * Adds styling as a context for the current node and its children.
+             * This is necessary due to mdast treating styling as a node, while lexical considering it an attribute of a node.
+             */
+            addStyle(style: string, node?: Mdast.Parent | null): void;
+            /**
+             * Access the current style context.
+             */
+            getParentStyle(): string;
         };
     }): void;
     /**
@@ -2286,6 +2300,8 @@ export declare const onBlur$: NodeRef<FocusEvent>;
 
 /* Excluded from this release type: onClickLinkCallback$ */
 
+/* Excluded from this release type: onReadOnlyClickLinkCallback$ */
+
 /**
  * Emits when the window is resized.
  * @group Utils
@@ -2367,6 +2383,8 @@ export declare const quotePlugin: (params?: unknown) => RealmPlugin;
  */
 export declare const readOnly$: NodeRef<boolean>;
 
+export declare type ReadOnlyClickLinkCallback = (event: MouseEvent, node: LinkNode, url: string) => void;
+
 /* Excluded from this release type: readOnlyDiff$ */
 
 /**

package/dist/index.js

@@ -23,7 +23,7 @@ import { appendCodeBlockEditorDescriptor$, codeBlockPlugin, defaultCodeBlockLang
 import { directivesPlugin, insertDirective$ } from "./plugins/directives/index.js";
 import { ADMONITION_TYPES, AdmonitionDirectiveDescriptor } from "./directive-editors/AdmonitionDirectiveDescriptor.js";
 import { GenericDirectiveEditor } from "./directive-editors/GenericDirectiveEditor.js";
-import { applyLinkChanges$, cancelLinkEdit$, linkAutocompleteSuggestions$, linkDialogPlugin, linkDialogState$, onClickLinkCallback$, onWindowChange$, openLinkEditDialog$, removeLink$, switchFromPreviewToLinkEdit$, updateLink$ } from "./plugins/link-dialog/index.js";
+import { applyLinkChanges$, cancelLinkEdit$, linkAutocompleteSuggestions$, linkDialogPlugin, linkDialogState$, onClickLinkCallback$, onReadOnlyClickLinkCallback$, onWindowChange$, openLinkEditDialog$, removeLink$, switchFromPreviewToLinkEdit$, updateLink$ } from "./plugins/link-dialog/index.js";
 import { toolbarClassName$, toolbarContents$, toolbarPlugin } from "./plugins/toolbar/index.js";
 import { cmExtensions$, diffMarkdown$, diffSourcePlugin, readOnlyDiff$ } from "./plugins/diff-source/index.js";
 import { markdownShortcutPlugin } from "./plugins/markdown-shortcut/index.js";
@@ -276,6 +276,7 @@ export {
   noop,
   onBlur$,
   onClickLinkCallback$,
+  onReadOnlyClickLinkCallback$,
   onWindowChange$,
   openEditImageDialog$,
   openLinkEditDialog$,

package/dist/plugins/core/MdastHTMLVisitor.js

@@ -2,8 +2,13 @@ import { $createGenericHTMLNode } from "./GenericHTMLNode.js";
 import { isMdastHTMLNode } from "./MdastHTMLNode.js";
 const MdastHTMLVisitor = {
   testNode: isMdastHTMLNode,
-  visitNode: function({ mdastNode, actions }) {
-    actions.addAndStepInto($createGenericHTMLNode(mdastNode.name, mdastNode.type, mdastNode.attributes));
+  visitNode: function({ mdastNode, actions, lexicalParent }) {
+    if (mdastNode.name === "span" && mdastNode.attributes.length === 1 && mdastNode.attributes[0].type === "mdxJsxAttribute" && mdastNode.attributes[0].name === "style") {
+      actions.addStyle(mdastNode.attributes[0].value, mdastNode);
+      actions.visitChildren(mdastNode, lexicalParent);
+    } else {
+      actions.addAndStepInto($createGenericHTMLNode(mdastNode.name, mdastNode.type, mdastNode.attributes));
+    }
   },
   priority: -100
 };

package/dist/plugins/core/MdastTextVisitor.js

@@ -2,7 +2,13 @@ import { $createTextNode } from "lexical";
 const MdastTextVisitor = {
   testNode: "text",
   visitNode({ mdastNode, actions }) {
-    actions.addAndStepInto($createTextNode(mdastNode.value).setFormat(actions.getParentFormatting()));
+    const node = $createTextNode(mdastNode.value);
+    node.setFormat(actions.getParentFormatting());
+    const style = actions.getParentStyle();
+    if (style !== "") {
+      node.setStyle(style);
+    }
+    actions.addAndStepInto(node);
   }
 };
 export {

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

@@ -1,11 +1,12 @@
-import { $createLinkNode, TOGGLE_LINK_COMMAND, $isLinkNode } from "@lexical/link";
-import { KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_LOW, KEY_MODIFIER_COMMAND, $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, $createTextNode, $insertNodes } from "lexical";
+import { $createLinkNode, TOGGLE_LINK_COMMAND, $isLinkNode, LinkNode } from "@lexical/link";
+import { Signal, Cell, withLatestFrom, map, Action, filter } from "@mdxeditor/gurx";
+import { KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_LOW, KEY_MODIFIER_COMMAND, $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, $createTextNode, $insertNodes, $getNearestNodeFromDOMNode } from "lexical";
+import { realmPlugin } from "../../RealmWithPlugins.js";
 import { IS_APPLE } from "../../utils/detectMac.js";
 import { getSelectionRectangle, getSelectedNode } from "../../utils/lexicalHelpers.js";
-import { createActiveEditorSubscription$, readOnly$, activeEditor$, currentSelection$, addComposerChild$ } from "../core/index.js";
+import { createActiveEditorSubscription$, viewMode$, readOnly$, activeEditor$, currentSelection$, addComposerChild$ } from "../core/index.js";
 import { LinkDialog } from "./LinkDialog.js";
-import { Signal, Cell, withLatestFrom, map, Action, filter } from "@mdxeditor/gurx";
-import { realmPlugin } from "../../RealmWithPlugins.js";
+import { $findMatchingParent } from "@lexical/utils";
 function getLinkNodeInSelection(selection) {
   if (!selection) {
     return null;
@@ -38,6 +39,11 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
       COMMAND_PRIORITY_LOW
     );
   });
+  r.sub(r.pipe(viewMode$), (viewMode) => {
+    if (viewMode !== "rich-text") {
+      r.pub(linkDialogState$, { type: "inactive" });
+    }
+  });
   r.pub(createActiveEditorSubscription$, (editor) => {
     return editor.registerCommand(
       KEY_MODIFIER_COMMAND,
@@ -223,10 +229,38 @@ const openLinkEditDialog$ = Action((r) => {
 });
 const linkAutocompleteSuggestions$ = Cell([]);
 const onClickLinkCallback$ = Cell(null);
+const onReadOnlyClickLinkCallback$ = Cell(null, (r) => {
+  r.pub(createActiveEditorSubscription$, (editor) => {
+    function onClick(event) {
+      const [readOnly, callback] = r.getValues([readOnly$, onReadOnlyClickLinkCallback$]);
+      if (!readOnly || callback === null) {
+        return;
+      }
+      editor.update(() => {
+        const nearestNode = $getNearestNodeFromDOMNode(event.target);
+        if (nearestNode !== null) {
+          const targetNode = $findMatchingParent(nearestNode, (node) => node instanceof LinkNode);
+          if (targetNode !== null) {
+            callback(event, targetNode, targetNode.getURL());
+          }
+        }
+      });
+    }
+    return editor.registerRootListener((rootElement, prevRoot) => {
+      if (rootElement) {
+        rootElement.addEventListener("click", onClick);
+      }
+      if (prevRoot) {
+        prevRoot.removeEventListener("click", onClick);
+      }
+    });
+  });
+});
 const linkDialogPlugin = realmPlugin({
   init(r, params) {
     r.pub(addComposerChild$, (params == null ? void 0 : params.LinkDialog) ?? LinkDialog);
     r.pub(onClickLinkCallback$, (params == null ? void 0 : params.onClickLinkCallback) ?? null);
+    r.pub(onReadOnlyClickLinkCallback$, (params == null ? void 0 : params.onReadOnlyClickLinkCallback) ?? null);
   },
   update(r, params = {}) {
     r.pub(linkAutocompleteSuggestions$, params.linkAutocompleteSuggestions ?? []);
@@ -239,6 +273,7 @@ export {
   linkDialogPlugin,
   linkDialogState$,
   onClickLinkCallback$,
+  onReadOnlyClickLinkCallback$,
   onWindowChange$,
   openLinkEditDialog$,
   removeLink$,

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "3.23.1",
+  "version": "3.24.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",