@mdxeditor/editor 3.27.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

@@ -1047,6 +1047,11 @@ export declare const directivesPlugin: (params?: {
      * Use this to register your custom directive editors. You can also use the built-in {@link GenericDirectiveEditor}.
      */
     directiveDescriptors: DirectiveDescriptor<any>[];
+    /**
+     * Set this option to display unknown text-directives as normal text nodes.
+     * This is handy when colons are used to separate words, e.g. in german "Schüler:in"
+     */
+    escapeUnknownTextDirectives?: boolean | undefined;
 } | undefined) => RealmPlugin;
 
 /**
@@ -1406,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
@@ -1828,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
              */
@@ -2022,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.
          */
@@ -2216,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
@@ -2865,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/directives/MdastDirectiveVisitor.js

@@ -1,20 +1,29 @@
+import { $createTextNode } from "lexical";
 import { $createDirectiveNode } from "./DirectiveNode.js";
 const DIRECTIVE_TYPES = ["leafDirective", "containerDirective", "textDirective"];
 function isMdastDirectivesNode(node) {
   return DIRECTIVE_TYPES.includes(node.type);
 }
-const MdastDirectiveVisitor = {
+const MdastDirectiveVisitor = (escapeUnknownTextDirectives) => ({
   testNode: (node, { directiveDescriptors }) => {
     if (isMdastDirectivesNode(node)) {
       const descriptor = directiveDescriptors.find((descriptor2) => descriptor2.testNode(node));
+      if (escapeUnknownTextDirectives && !descriptor && node.type === "textDirective") {
+        return true;
+      }
       return descriptor !== void 0;
     }
     return false;
   },
-  visitNode({ lexicalParent, mdastNode }) {
-    lexicalParent.append($createDirectiveNode(mdastNode));
+  visitNode({ lexicalParent, mdastNode, descriptors }) {
+    const isKnown = !escapeUnknownTextDirectives || descriptors.directiveDescriptors.some((d) => d.testNode(mdastNode));
+    if (isKnown) {
+      lexicalParent.append($createDirectiveNode(mdastNode));
+    } else {
+      lexicalParent.append($createTextNode(`:${mdastNode.name}`));
+    }
   }
-};
+});
 export {
   MdastDirectiveVisitor,
   isMdastDirectivesNode

package/dist/plugins/directives/index.js

@@ -28,7 +28,7 @@ const directivesPlugin = realmPlugin({
       // import
       [addMdastExtension$]: directiveFromMarkdown(),
       [addSyntaxExtension$]: directive(),
-      [addImportVisitor$]: MdastDirectiveVisitor,
+      [addImportVisitor$]: MdastDirectiveVisitor(params == null ? void 0 : params.escapeUnknownTextDirectives),
       // export
       [addLexicalNode$]: DirectiveNode,
       [addExportVisitor$]: DirectiveVisitor,

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.27.0",
+  "version": "3.29.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",