@mdxeditor/editor 3.28.0 → 3.29.0

package/dist/exportMarkdownFromLexical.js

@@ -14,10 +14,14 @@ function exportLexicalTreeToMdast({
 }) {
   let unistRoot = null;
   const referredComponents = /* @__PURE__ */ new Set();
+  const knownImportSources = /* @__PURE__ */ new Map();
   visitors = visitors.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
   visit(root, null);
-  function registerReferredComponent(componentName) {
+  function registerReferredComponent(componentName, importStatement) {
     referredComponents.add(componentName);
+    if (importStatement) {
+      knownImportSources.set(componentName, { ...importStatement });
+    }
   }
   function appendToParent(parentNode, node) {
     if (unistRoot === null) {
@@ -87,7 +91,7 @@ function exportLexicalTreeToMdast({
   const importsMap = /* @__PURE__ */ new Map();
   const defaultImportsMap = /* @__PURE__ */ new Map();
   for (const componentName of referredComponents) {
-    const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === componentName) ?? jsxComponentDescriptors.find((descriptor2) => descriptor2.name === "*");
+    const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === componentName) ?? knownImportSources.get(componentName) ?? jsxComponentDescriptors.find((descriptor2) => descriptor2.name === "*");
     if (!descriptor) {
       throw new Error(`Component ${componentName} is used but not imported`);
     }
@@ -106,6 +110,21 @@ function exportLexicalTreeToMdast({
       }
     }
   }
+  if (!addImportStatements) {
+    for (const [path, names] of importsMap.entries()) {
+      const cleaned = names.filter((n) => knownImportSources.has(n));
+      if (cleaned.length > 0) {
+        importsMap.set(path, cleaned);
+      } else {
+        importsMap.delete(path);
+      }
+    }
+    for (const key of defaultImportsMap.keys()) {
+      if (!knownImportSources.has(key)) {
+        defaultImportsMap.delete(key);
+      }
+    }
+  }
   const imports = Array.from(importsMap).map(([source, componentNames]) => {
     return {
       type: "mdxjsEsm",
@@ -122,12 +141,10 @@ function exportLexicalTreeToMdast({
   );
   const typedRoot = unistRoot;
   const frontmatter = typedRoot.children.find((child) => child.type === "yaml");
-  if (addImportStatements) {
-    if (frontmatter) {
-      typedRoot.children.splice(typedRoot.children.indexOf(frontmatter) + 1, 0, ...imports);
-    } else {
-      typedRoot.children.unshift(...imports);
-    }
+  if (frontmatter) {
+    typedRoot.children.splice(typedRoot.children.indexOf(frontmatter) + 1, 0, ...imports);
+  } else {
+    typedRoot.children.unshift(...imports);
   }
   fixWrappingWhitespace(typedRoot, []);
   collapseNestedHtmlTags(typedRoot);

package/dist/importMarkdownToLexical.js

@@ -16,6 +16,32 @@ class UnrecognizedMarkdownConstructError extends Error {
     this.name = "UnrecognizedMarkdownConstructError";
   }
 }
+function gatherMetadata(mdastNode) {
+  const importsMap = /* @__PURE__ */ new Map();
+  if (mdastNode.type !== "root") {
+    return {
+      importDeclarations: {}
+    };
+  }
+  const importStatements = mdastNode.children.filter((n) => n.type === "mdxjsEsm").filter((n) => n.value.startsWith("import "));
+  importStatements.forEach((imp) => {
+    var _a, _b;
+    (((_b = (_a = imp.data) == null ? void 0 : _a.estree) == null ? void 0 : _b.body) ?? []).forEach((declaration) => {
+      if (declaration.type !== "ImportDeclaration") {
+        return;
+      }
+      declaration.specifiers.forEach((specifier) => {
+        importsMap.set(specifier.local.name, {
+          source: `${declaration.source.value}`,
+          defaultExport: specifier.type === "ImportDefaultSpecifier"
+        });
+      });
+    });
+  });
+  return {
+    importDeclarations: Object.fromEntries(importsMap.entries())
+  };
+}
 function importMarkdownToLexical({
   root,
   markdown,
@@ -49,6 +75,7 @@ function importMarkdownToLexical({
 function importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors }) {
   const formattingMap = /* @__PURE__ */ new WeakMap();
   const styleMap = /* @__PURE__ */ new WeakMap();
+  const metaData = gatherMetadata(mdastRoot);
   visitors = visitors.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
   function visitChildren(mdastNode, lexicalParent) {
     if (!isParent(mdastNode)) {
@@ -83,6 +110,7 @@ function importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors })
       lexicalParent,
       mdastParent,
       descriptors,
+      metaData,
       actions: {
         visitChildren,
         addAndStepInto(lexicalNode) {

package/dist/index.d.ts

@@ -1411,6 +1411,11 @@ export declare interface ImportPoint {
     getType(): string;
 }
 
+export declare interface ImportStatement {
+    source: string;
+    defaultExport: boolean;
+}
+
 /**
  * Contains the currently registered import vistors.
  * @group Core
@@ -1833,7 +1838,7 @@ export declare interface LexicalExportVisitor<LN extends LexicalNode, UN extends
              * @param componentName - the name of the component that has to be imported.
              * @see {@link JsxComponentDescriptor}
              */
-            registerReferredComponent(componentName: string): void;
+            registerReferredComponent(componentName: string, importStatement?: ImportStatement): void;
             /**
              * visits the specified lexical node
              */
@@ -2027,6 +2032,10 @@ export declare interface MdastImportVisitor<UN extends Mdast.Nodes> {
          * The descriptors for composite nodes (jsx, directives, code blocks).
          */
         descriptors: Descriptors;
+        /**
+         * metaData: context data provided from the import visitor.
+         */
+        metaData: MetaData;
         /**
          * A set of convenience utilities that can be used to add nodes to the lexical tree.
          */
@@ -2221,6 +2230,13 @@ export declare interface MDXEditorProps {
  */
 export declare type MdxNodeType = MdastHTMLNode['type'];
 
+/**
+ * Metadata that is provided to the visitors
+ */
+declare interface MetaData {
+    importDeclarations: Record<string, ImportStatement>;
+}
+
 /**
  * A toolbar primitive that allows you to build an UI with multiple non-exclusive toggle groups, like the bold/italic/underline toggle.
  * @group Toolbar Primitives
@@ -2870,7 +2886,7 @@ export declare type Translation = (key: string, defaultValue: string, interpolat
 export declare const UndoRedo: default_2.FC;
 
 /**
- * An error that gets thrown when the Markdown parsing encounters an node that has no corresponding {@link MdastImportVisitor}.
+ * An error that gets thrown when the Markdown parsing encounters a node that has no corresponding {@link MdastImportVisitor}.
  * @group Markdown Processing
  */
 export declare class UnrecognizedMarkdownConstructError extends Error {

package/dist/plugins/core/LexicalTextVisitor.js

@@ -1,5 +1,5 @@
 import { $isTextNode } from "lexical";
-import { IS_ITALIC, IS_BOLD, IS_UNDERLINE, IS_STRIKETHROUGH, IS_SUPERSCRIPT, IS_SUBSCRIPT, IS_CODE } from "../../FormatConstants.js";
+import { IS_UNDERLINE, IS_SUPERSCRIPT, IS_SUBSCRIPT, IS_ITALIC, IS_BOLD, IS_STRIKETHROUGH, IS_CODE } from "../../FormatConstants.js";
 function isMdastText(mdastNode) {
   return mdastNode.type === "text";
 }
@@ -45,18 +45,6 @@ const LexicalTextVisitor = {
         attributes: [{ type: "mdxJsxAttribute", name: "style", value: style }]
       });
     }
-    if (prevFormat & format & IS_ITALIC) {
-      localParentNode = actions.appendToParent(localParentNode, {
-        type: "emphasis",
-        children: []
-      });
-    }
-    if (prevFormat & format & IS_BOLD) {
-      localParentNode = actions.appendToParent(localParentNode, {
-        type: "strong",
-        children: []
-      });
-    }
     if (prevFormat & format & IS_UNDERLINE) {
       localParentNode = actions.appendToParent(localParentNode, {
         type: "mdxJsxTextElement",
@@ -65,12 +53,6 @@ const LexicalTextVisitor = {
         attributes: []
       });
     }
-    if (prevFormat & format & IS_STRIKETHROUGH) {
-      localParentNode = actions.appendToParent(localParentNode, {
-        type: "delete",
-        children: []
-      });
-    }
     if (prevFormat & format & IS_SUPERSCRIPT) {
       localParentNode = actions.appendToParent(localParentNode, {
         type: "mdxJsxTextElement",
@@ -87,18 +69,24 @@ const LexicalTextVisitor = {
         attributes: []
       });
     }
-    if (format & IS_ITALIC && !(prevFormat & IS_ITALIC)) {
+    if (prevFormat & format & IS_ITALIC) {
       localParentNode = actions.appendToParent(localParentNode, {
         type: "emphasis",
         children: []
       });
     }
-    if (format & IS_BOLD && !(prevFormat & IS_BOLD)) {
+    if (prevFormat & format & IS_BOLD) {
       localParentNode = actions.appendToParent(localParentNode, {
         type: "strong",
         children: []
       });
     }
+    if (prevFormat & format & IS_STRIKETHROUGH) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "delete",
+        children: []
+      });
+    }
     if (format & IS_UNDERLINE && !(prevFormat & IS_UNDERLINE)) {
       localParentNode = actions.appendToParent(localParentNode, {
         type: "mdxJsxTextElement",
@@ -107,12 +95,6 @@ const LexicalTextVisitor = {
         attributes: []
       });
     }
-    if (format & IS_STRIKETHROUGH && !(prevFormat & IS_STRIKETHROUGH)) {
-      localParentNode = actions.appendToParent(localParentNode, {
-        type: "delete",
-        children: []
-      });
-    }
     if (format & IS_SUPERSCRIPT && !(prevFormat & IS_SUPERSCRIPT)) {
       localParentNode = actions.appendToParent(localParentNode, {
         type: "mdxJsxTextElement",
@@ -129,6 +111,24 @@ const LexicalTextVisitor = {
         attributes: []
       });
     }
+    if (format & IS_ITALIC && !(prevFormat & IS_ITALIC)) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "emphasis",
+        children: []
+      });
+    }
+    if (format & IS_BOLD && !(prevFormat & IS_BOLD)) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "strong",
+        children: []
+      });
+    }
+    if (format & IS_STRIKETHROUGH && !(prevFormat & IS_STRIKETHROUGH)) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "delete",
+        children: []
+      });
+    }
     if (format & IS_CODE) {
       actions.appendToParent(localParentNode, {
         type: "inlineCode",

package/dist/plugins/jsx/LexicalJsxNode.js

@@ -11,30 +11,36 @@ import { voidEmitter } from "../../utils/voidEmitter.js";
 import { useCellValue } from "@mdxeditor/gurx";
 import { jsxComponentDescriptors$ } from "../core/index.js";
 class LexicalJsxNode extends DecoratorNode {
-  constructor(mdastNode, key) {
+  constructor(mdastNode, importStatement, key) {
     super(key);
     __publicField(this, "__mdastNode");
     __publicField(this, "__focusEmitter", voidEmitter());
+    __publicField(this, "__importStatement");
     __publicField(this, "select", () => {
       this.__focusEmitter.publish();
     });
     this.__mdastNode = mdastNode;
+    this.__importStatement = importStatement;
   }
   static getType() {
     return "jsx";
   }
   static clone(node) {
-    return new LexicalJsxNode(structuredClone(node.__mdastNode), node.__key);
+    return new LexicalJsxNode(structuredClone(node.__mdastNode), structuredClone(node.__importStatement), node.__key);
   }
   static importJSON(serializedNode) {
-    return $createLexicalJsxNode(serializedNode.mdastNode);
+    return $createLexicalJsxNode(serializedNode.mdastNode, serializedNode.importStatement);
   }
   getMdastNode() {
     return this.__mdastNode;
   }
+  getImportStatement() {
+    return this.__importStatement;
+  }
   exportJSON() {
     return {
       mdastNode: this.getMdastNode(),
+      importStatement: this.getImportStatement(),
       type: "jsx",
       version: 1
     };
@@ -89,8 +95,8 @@ function JsxEditorContainer(props) {
     /* @__PURE__ */ React__default.createElement(Editor, { descriptor, mdastNode })
   );
 }
-function $createLexicalJsxNode(mdastNode) {
-  return new LexicalJsxNode(mdastNode);
+function $createLexicalJsxNode(mdastNode, importStatement) {
+  return new LexicalJsxNode(mdastNode, importStatement);
 }
 function $isLexicalJsxNode(node) {
   return node instanceof LexicalJsxNode;

package/dist/plugins/jsx/LexicalJsxVisitor.js

@@ -15,7 +15,8 @@ const LexicalJsxVisitor = {
       }
     }
     const mdastNode = lexicalNode.getMdastNode();
-    actions.registerReferredComponent(mdastNode.name);
+    const importStatement = lexicalNode.getImportStatement();
+    actions.registerReferredComponent(mdastNode.name, importStatement);
     traverseNestedJsxNodes(mdastNode);
     actions.appendToParent(mdastParent, mdastNode);
   },

package/dist/plugins/jsx/MdastMdxJsxElementVisitor.js

@@ -8,15 +8,17 @@ const MdastMdxJsxElementVisitor = {
     }
     return false;
   },
-  visitNode({ lexicalParent, mdastNode, descriptors: { jsxComponentDescriptors } }) {
+  visitNode({ lexicalParent, mdastNode, descriptors: { jsxComponentDescriptors }, metaData }) {
     const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === mdastNode.name) ?? jsxComponentDescriptors.find((descriptor2) => descriptor2.name === "*");
     if ((descriptor == null ? void 0 : descriptor.kind) === "text" && mdastNode.type === "mdxJsxFlowElement") {
       const patchedNode = { ...mdastNode, type: "mdxJsxTextElement" };
       const paragraph = $createParagraphNode();
-      paragraph.append($createLexicalJsxNode(patchedNode));
+      paragraph.append($createLexicalJsxNode(patchedNode, mdastNode.name ? metaData.importDeclarations[mdastNode.name] : void 0));
       lexicalParent.append(paragraph);
     } else {
-      lexicalParent.append($createLexicalJsxNode(mdastNode));
+      lexicalParent.append(
+        $createLexicalJsxNode(mdastNode, mdastNode.name ? metaData.importDeclarations[mdastNode.name] : void 0)
+      );
     }
   },
   priority: -200

package/package.json

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