@mdxeditor/editor 3.23.2 → 3.25.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';
@@ -905,6 +906,7 @@ export declare const diffSourcePlugin: (params?: {
 export declare const DiffSourceToggleWrapper: default_2.FC<{
     children: default_2.ReactNode;
     options?: ViewMode[];
+    SourceToolbar?: default_2.ReactNode;
 }>;
 
 /**
@@ -1844,6 +1846,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 +2015,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 +2301,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 +2384,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 { $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 } from "lexical";
+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$, viewMode$, readOnly$, activeEditor$, currentSelection$, addComposerChild$ } from "../core/index.js";
 import { LinkDialog } from "./LinkDialog.js";
+import { $findMatchingParent } from "@lexical/utils";
 function getLinkNodeInSelection(selection) {
   if (!selection) {
     return null;
@@ -228,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 ?? []);
@@ -244,6 +273,7 @@ export {
   linkDialogPlugin,
   linkDialogState$,
   onClickLinkCallback$,
+  onReadOnlyClickLinkCallback$,
   onWindowChange$,
   openLinkEditDialog$,
   removeLink$,

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

@@ -5,6 +5,7 @@ import styles from "../../../styles/ui.module.css.js";
 import { SingleChoiceToggleGroup } from "../primitives/toolbar.js";
 const DiffSourceToggleWrapper = ({
   children,
+  SourceToolbar,
   options = ["rich-text", "diff", "source"]
 }) => {
   const [viewMode, iconComponentFor] = useCellValues(viewMode$, iconComponentFor$);
@@ -20,7 +21,7 @@ const DiffSourceToggleWrapper = ({
   if (options.includes("source")) {
     toggleGroupItems.push({ title: t("toolbar.source", "Source mode"), contents: iconComponentFor("markdown"), value: "source" });
   }
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, viewMode === "rich-text" ? children : viewMode === "diff" ? /* @__PURE__ */ React__default.createElement("span", { className: styles.toolbarTitleMode }, t("toolbar.diffMode", "Diff mode")) : /* @__PURE__ */ React__default.createElement("span", { className: styles.toolbarTitleMode }, t("toolbar.source", "Source mode")), /* @__PURE__ */ React__default.createElement("div", { style: { marginLeft: "auto", pointerEvents: "auto", opacity: 1 } }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, viewMode === "rich-text" ? children : viewMode === "diff" ? /* @__PURE__ */ React__default.createElement("span", { className: styles.toolbarTitleMode }, t("toolbar.diffMode", "Diff mode")) : SourceToolbar ?? /* @__PURE__ */ React__default.createElement("span", { className: styles.toolbarTitleMode }, t("toolbar.source", "Source mode")), /* @__PURE__ */ React__default.createElement("div", { style: { marginLeft: "auto", pointerEvents: "auto", opacity: 1 } }, /* @__PURE__ */ React__default.createElement(
     SingleChoiceToggleGroup,
     {
       className: styles.diffSourceToggle,

package/package.json

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