@mdxeditor/editor 4.2.2 → 4.2.3

package/dist/importMarkdownToLexical.js

@@ -1,5 +1,6 @@
 import { fromMarkdown } from "mdast-util-from-markdown";
 import { toMarkdown } from "mdast-util-to-markdown";
+import { reconcileJsxKindMismatches } from "./plugins/jsx/reconcileJsxKind.js";
 function isParent(node) {
   return node.children instanceof Array;
 }
@@ -73,10 +74,30 @@ function importMarkdownToLexical({
   importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors });
 }
 function importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors }) {
+  visitors = visitors.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  function findVisitor(mdastNode, skipVisitors = null) {
+    return visitors.find((visitor, index) => {
+      if (skipVisitors == null ? void 0 : skipVisitors.has(index)) {
+        return false;
+      }
+      if (typeof visitor.testNode === "string") {
+        return visitor.testNode === mdastNode.type;
+      }
+      return visitor.testNode(mdastNode, descriptors);
+    });
+  }
+  mdastRoot = reconcileJsxKindMismatches(
+    mdastRoot,
+    descriptors.jsxComponentDescriptors,
+    descriptors.jsxKindMismatchPolicy ?? "source",
+    (node) => {
+      var _a;
+      return ((_a = findVisitor(node)) == null ? void 0 : _a.jsxKindReconciliationOwner) === true;
+    }
+  );
   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)) {
       throw new Error("Attempting to visit children of a non-parent");
@@ -86,15 +107,7 @@ function importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors })
     });
   }
   function visit(mdastNode, lexicalParent, mdastParent, skipVisitors = null) {
-    const visitor = visitors.find((visitor2, index) => {
-      if (skipVisitors == null ? void 0 : skipVisitors.has(index)) {
-        return false;
-      }
-      if (typeof visitor2.testNode === "string") {
-        return visitor2.testNode === mdastNode.type;
-      }
-      return visitor2.testNode(mdastNode, descriptors);
-    });
+    const visitor = findVisitor(mdastNode, skipVisitors);
     if (!visitor) {
       try {
         throw new UnrecognizedMarkdownConstructError(`Unsupported markdown syntax: ${toMarkdown(mdastNode)}`);

package/dist/index.d.ts

@@ -904,6 +904,8 @@ export declare const defaultSvgIcons: {
  */
 export declare interface Descriptors {
     jsxComponentDescriptors: JsxComponentDescriptor[];
+    /** How parsed JSX node kinds are reconciled with their component descriptors. */
+    jsxKindMismatchPolicy?: JsxKindMismatchPolicy;
     directiveDescriptors: DirectiveDescriptor[];
     codeBlockEditorDescriptors: CodeBlockEditorDescriptor[];
     /**
@@ -1869,6 +1871,18 @@ export declare interface JsxEditorProps {
  */
 export declare const jsxIsAvailable$: NodeRef<boolean>;
 
+/**
+ * Controls how parsed JSX node kinds are reconciled with component descriptors.
+ * @group JSX
+ */
+export declare const jsxKindMismatchPolicy$: NodeRef<JsxKindMismatchPolicy>;
+
+/**
+ * Controls how parsed JSX node kinds are reconciled with component descriptors.
+ * @group JSX
+ */
+export declare type JsxKindMismatchPolicy = 'source' | 'normalize' | 'error';
+
 /**
  * a plugin that adds support for JSX elements (MDX).
  * @group JSX
@@ -1887,6 +1901,11 @@ export declare interface JsxPluginParams {
      * Whether or not to allow default React fragments <></> processing in MDX.
      */
     allowFragment?: boolean;
+    /**
+     * Controls whether the parsed JSX kind or the component descriptor is authoritative when they disagree.
+     * @defaultValue 'source'
+     */
+    kindMismatchPolicy?: JsxKindMismatchPolicy;
 }
 
 export declare type JsxProperties = Record<string, string | ExpressionValue>;
@@ -2252,6 +2271,7 @@ export declare interface MdastImportVisitor<UN extends Mdast.Nodes> {
      * Default 0, optional, sets the priority of the visitor. The higher the number, the earlier it will be called.
      */
     priority?: number;
+    /* Excluded from this release type: jsxKindReconciliationOwner */
 }
 
 /**

package/dist/index.js

@@ -4,7 +4,7 @@ import { MDXEditor } from "./MDXEditor.js";
 import { defaultSvgIcons } from "./defaultSvgIcons.js";
 import { MarkdownParseError, UnrecognizedMarkdownConstructError, importMarkdownToLexical, importMdastTreeToLexical } from "./importMarkdownToLexical.js";
 import { exportLexicalTreeToMdast, exportMarkdownFromLexical } from "./exportMarkdownFromLexical.js";
-import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addBottomAreaChild$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addTableCellEditorChild$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, bottomAreaChildren$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, contentEditableRef$, contentEditableWrapperElement$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, defaultCodeBlockLanguage$, directiveDescriptors$, editorInFocus$, editorInTable$, editorRootElementRef$, editorWrapperElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, initialMarkdownNormalize$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, lexicalTheme$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, spellCheck$, syntaxExtensions$, tableCellEditorChildren$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, translation$, useTranslation, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
+import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addBottomAreaChild$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addTableCellEditorChild$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, bottomAreaChildren$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, contentEditableRef$, contentEditableWrapperElement$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, defaultCodeBlockLanguage$, directiveDescriptors$, editorInFocus$, editorInTable$, editorRootElementRef$, editorWrapperElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, initialMarkdownNormalize$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, jsxKindMismatchPolicy$, lexicalTheme$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, spellCheck$, syntaxExtensions$, tableCellEditorChildren$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, translation$, useTranslation, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
 import { ALL_HEADING_LEVELS, allowedHeadingLevels$, headingsPlugin } from "./plugins/headings/index.js";
 import { insertThematicBreak$, thematicBreakPlugin } from "./plugins/thematic-break/index.js";
 import { applyListType$, currentListType$, listsPlugin } from "./plugins/lists/index.js";
@@ -280,6 +280,7 @@ export {
   joinProc,
   jsxComponentDescriptors$,
   jsxIsAvailable$,
+  jsxKindMismatchPolicy$,
   jsxPlugin,
   lexical,
   lexicalTheme,

package/dist/jsx-editors/GenericJsxEditor.js

@@ -66,7 +66,7 @@ const GenericJsxEditor = ({ mdastNode, descriptor, PropertyEditor }) => {
   return /* @__PURE__ */ React__default.createElement("div", { className: descriptor.kind === "text" ? styles.inlineEditor : styles.blockEditor }, shouldRenderComponentName ? /* @__PURE__ */ React__default.createElement("span", { className: styles.genericComponentName }, mdastNode.name ?? "Fragment") : null, descriptor.props.length > 0 ? /* @__PURE__ */ React__default.createElement(PropertyEditorComponent, { properties, title: mdastNode.name ?? "", onChange }) : null, descriptor.hasChildren ? /* @__PURE__ */ React__default.createElement(
     NestedLexicalEditor,
     {
-      block: descriptor.kind === "flow",
+      block: mdastNode.type === "mdxJsxFlowElement",
       getContent: (node) => node.children,
       getUpdatedMdastNode: (mdastNode2, children) => {
         return { ...mdastNode2, children };

package/dist/plugins/core/index.js

@@ -14,6 +14,7 @@ import { mdxJsx } from "micromark-extension-mdx-jsx";
 import { mdxMd } from "micromark-extension-mdx-md";
 import { exportMarkdownFromLexical } from "../../exportMarkdownFromLexical.js";
 import { importMarkdownToLexical, MarkdownParseError, UnrecognizedMarkdownConstructError } from "../../importMarkdownToLexical.js";
+import { JsxKindMismatchError } from "../jsx/reconcileJsxKind.js";
 import { noop } from "../../utils/fp.js";
 import { GenericHTMLNode } from "./GenericHTMLNode.js";
 import { $createGenericHTMLNode, $isGenericHTMLNode, TYPE_NAME } from "./GenericHTMLNode.js";
@@ -112,6 +113,7 @@ const toMarkdownExtensions$ = Cell([]);
 const toMarkdownOptions$ = Cell({});
 const jsxIsAvailable$ = Cell(false);
 const jsxComponentDescriptors$ = Cell([]);
+const jsxKindMismatchPolicy$ = Cell("source");
 const directiveDescriptors$ = Cell([]);
 const codeBlockEditorDescriptors$ = Cell([]);
 const defaultCodeBlockLanguage$ = Cell("");
@@ -376,13 +378,14 @@ function tryImportingMarkdown(r, node, markdownValue) {
       markdown: markdownValue,
       syntaxExtensions: r.getValue(syntaxExtensions$),
       jsxComponentDescriptors: r.getValue(jsxComponentDescriptors$),
+      jsxKindMismatchPolicy: r.getValue(jsxKindMismatchPolicy$),
       directiveDescriptors: r.getValue(directiveDescriptors$),
       codeBlockEditorDescriptors: r.getValue(codeBlockEditorDescriptors$),
       defaultCodeBlockLanguage: r.getValue(defaultCodeBlockLanguage$)
     });
     r.pub(markdownProcessingError$, null);
   } catch (e) {
-    if (e instanceof MarkdownParseError || e instanceof UnrecognizedMarkdownConstructError) {
+    if (e instanceof MarkdownParseError || e instanceof UnrecognizedMarkdownConstructError || e instanceof JsxKindMismatchError) {
       r.pubIn({
         [markdown$]: markdownValue,
         [markdownProcessingError$]: {
@@ -663,6 +666,7 @@ export {
   insertMarkdown$,
   jsxComponentDescriptors$,
   jsxIsAvailable$,
+  jsxKindMismatchPolicy$,
   lexicalTheme$,
   markdown$,
   markdownErrorSignal$,

package/dist/plugins/jsx/MdastMdxJsxElementVisitor.js

@@ -1,4 +1,3 @@
-import { $createParagraphNode } from "lexical";
 import { $createLexicalJsxNode } from "./LexicalJsxNode.js";
 const MdastMdxJsxElementVisitor = {
   testNode: (node, { jsxComponentDescriptors }) => {
@@ -8,20 +7,13 @@ const MdastMdxJsxElementVisitor = {
     }
     return false;
   },
-  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, mdastNode.name ? metaData.importDeclarations[mdastNode.name] : void 0));
-      lexicalParent.append(paragraph);
-    } else {
-      lexicalParent.append(
-        $createLexicalJsxNode(mdastNode, mdastNode.name ? metaData.importDeclarations[mdastNode.name] : void 0)
-      );
-    }
+  visitNode({ lexicalParent, mdastNode, metaData }) {
+    lexicalParent.append(
+      $createLexicalJsxNode(mdastNode, mdastNode.name ? metaData.importDeclarations[mdastNode.name] : void 0)
+    );
   },
-  priority: -200
+  priority: -200,
+  jsxKindReconciliationOwner: true
 };
 export {
   MdastMdxJsxElementVisitor

package/dist/plugins/jsx/index.js

@@ -1,6 +1,6 @@
 import { mdxToMarkdown, mdxFromMarkdown } from "mdast-util-mdx";
 import { mdxjs } from "micromark-extension-mdxjs";
-import { insertDecoratorNode$, jsxComponentDescriptors$, addToMarkdownExtension$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addSyntaxExtension$, addMdastExtension$, jsxIsAvailable$ } from "../core/index.js";
+import { insertDecoratorNode$, jsxKindMismatchPolicy$, jsxComponentDescriptors$, addToMarkdownExtension$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addSyntaxExtension$, addMdastExtension$, jsxIsAvailable$ } from "../core/index.js";
 import { $createLexicalJsxNode, LexicalJsxNode } from "./LexicalJsxNode.js";
 import { LexicalJsxVisitor } from "./LexicalJsxVisitor.js";
 import { MdastMdxJsEsmVisitor } from "./MdastMdxJsEsmVisitor.js";
@@ -83,11 +83,15 @@ const jsxPlugin = realmPlugin({
       [addLexicalNode$]: [LexicalJsxNode, LexicalMdxExpressionNode],
       [addExportVisitor$]: [LexicalJsxVisitor, LexicalMdxExpressionVisitor],
       [addToMarkdownExtension$]: mdxToMarkdown(),
-      [jsxComponentDescriptors$]: getDescriptors(params)
+      [jsxComponentDescriptors$]: getDescriptors(params),
+      [jsxKindMismatchPolicy$]: (params == null ? void 0 : params.kindMismatchPolicy) ?? "source"
     });
   },
   update(realm, params) {
-    realm.pub(jsxComponentDescriptors$, getDescriptors(params));
+    realm.pubIn({
+      [jsxComponentDescriptors$]: getDescriptors(params),
+      [jsxKindMismatchPolicy$]: (params == null ? void 0 : params.kindMismatchPolicy) ?? "source"
+    });
   }
 });
 export {

package/dist/plugins/jsx/reconcileJsxKind.js

@@ -0,0 +1,179 @@
+class JsxKindMismatchError extends Error {
+  constructor(node, descriptor, policy, reason) {
+    const name = node.name ?? "Fragment";
+    const parsedKind = node.type === "mdxJsxFlowElement" ? "flow" : "text";
+    const detail = reason ? ` ${reason}` : "";
+    super(
+      `JSX component "${name}" was parsed as ${parsedKind} but is declared as ${descriptor.kind} (kindMismatchPolicy: "${policy}").${detail}`
+    );
+    this.name = "JsxKindMismatchError";
+  }
+}
+const phrasingParentTypes = /* @__PURE__ */ new Set([
+  "paragraph",
+  "heading",
+  "emphasis",
+  "strong",
+  "delete",
+  "link",
+  "linkReference",
+  "tableCell",
+  "footnote",
+  "mdxJsxTextElement",
+  "textDirective",
+  "leafDirective"
+]);
+const flowParentTypes = /* @__PURE__ */ new Set(["root", "blockquote", "listItem", "footnoteDefinition", "mdxJsxFlowElement", "containerDirective"]);
+function isJsxNode(node) {
+  return node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement";
+}
+function findDescriptor(node, descriptors) {
+  return descriptors.find((descriptor) => descriptor.name === node.name) ?? descriptors.find((descriptor) => descriptor.name === "*");
+}
+function isMismatch(node, descriptor) {
+  return (node.type === "mdxJsxFlowElement" ? "flow" : "text") !== descriptor.kind;
+}
+function assertNoMismatches(node, descriptors, shouldReconcile) {
+  if (isJsxNode(node)) {
+    const descriptor = findDescriptor(node, descriptors);
+    if (descriptor && shouldReconcile(node) && isMismatch(node, descriptor)) {
+      throw new JsxKindMismatchError(node, descriptor, "error");
+    }
+  }
+  if ("children" in node) {
+    node.children.forEach((child) => {
+      assertNoMismatches(child, descriptors, shouldReconcile);
+    });
+  }
+}
+function normalizeTree(root, descriptors, shouldReconcile) {
+  const findOwnedDescriptor = (node) => shouldReconcile(node) ? findDescriptor(node, descriptors) : void 0;
+  function normalizeParent(node) {
+    const context = phrasingParentTypes.has(node.type) ? "phrasing" : flowParentTypes.has(node.type) ? "flow" : "structural";
+    if (context === "phrasing") {
+      node.children = node.children.flatMap((child) => normalizePhrasingChild(child, node.type));
+    } else if (context === "flow") {
+      node.children = node.children.flatMap((child) => normalizeFlowChild(child));
+    } else {
+      node.children = node.children.map((child) => normalizeStructuralChild(child, node.type));
+    }
+    return node;
+  }
+  function normalizeDescendants(node) {
+    if ("children" in node) {
+      normalizeParent(node);
+    }
+    return node;
+  }
+  function normalizeStructuralChild(node, parentType) {
+    if (isJsxNode(node)) {
+      const descriptor = findOwnedDescriptor(node);
+      if (descriptor && isMismatch(node, descriptor)) {
+        throw new JsxKindMismatchError(
+          node,
+          descriptor,
+          "normalize",
+          `The ${parentType} parent does not declare whether its children are flow or phrasing content.`
+        );
+      }
+    }
+    return normalizeDescendants(node);
+  }
+  function normalizePhrasingChild(node, parentType) {
+    if (!isJsxNode(node)) {
+      return [normalizeDescendants(node)];
+    }
+    const descriptor = findOwnedDescriptor(node);
+    if (!descriptor || !isMismatch(node, descriptor)) {
+      return [normalizeDescendants(node)];
+    }
+    if (node.type === "mdxJsxTextElement") {
+      throw new JsxKindMismatchError(
+        node,
+        descriptor,
+        "normalize",
+        `It cannot be lifted from ${parentType} without changing surrounding phrasing content.`
+      );
+    }
+    const textNode = convertFlowToText(node, descriptor);
+    return [normalizeDescendants(textNode)];
+  }
+  function normalizeParagraph(node) {
+    const flowMismatch = node.children.find((child) => {
+      if (child.type !== "mdxJsxTextElement") {
+        return false;
+      }
+      const descriptor2 = findOwnedDescriptor(child);
+      return (descriptor2 == null ? void 0 : descriptor2.kind) === "flow";
+    });
+    if (!flowMismatch) {
+      return [normalizeParent(node)];
+    }
+    const descriptor = findOwnedDescriptor(flowMismatch);
+    if (node.children.length !== 1) {
+      throw new JsxKindMismatchError(
+        flowMismatch,
+        descriptor,
+        "normalize",
+        "It has surrounding phrasing content, and normalization would need to split the paragraph."
+      );
+    }
+    const flowNode = {
+      ...flowMismatch,
+      type: "mdxJsxFlowElement",
+      children: flowMismatch.children.length === 0 ? [] : [{ type: "paragraph", children: flowMismatch.children }]
+    };
+    return [normalizeDescendants(flowNode)];
+  }
+  function normalizeFlowChild(node) {
+    if (node.type === "paragraph") {
+      return normalizeParagraph(node);
+    }
+    if (!isJsxNode(node)) {
+      return [normalizeDescendants(node)];
+    }
+    const descriptor = findOwnedDescriptor(node);
+    if (!descriptor || !isMismatch(node, descriptor)) {
+      return [normalizeDescendants(node)];
+    }
+    if (node.type === "mdxJsxTextElement") {
+      throw new JsxKindMismatchError(
+        node,
+        descriptor,
+        "normalize",
+        "A text JSX node can be normalized to flow only when it is the sole child of a paragraph."
+      );
+    }
+    const textNode = normalizeDescendants(convertFlowToText(node, descriptor));
+    return [{ type: "paragraph", children: [textNode] }];
+  }
+  function convertFlowToText(node, descriptor) {
+    if (node.children.length === 0) {
+      return { ...node, type: "mdxJsxTextElement", children: [] };
+    }
+    if (node.children.length !== 1 || node.children[0].type !== "paragraph") {
+      throw new JsxKindMismatchError(
+        node,
+        descriptor,
+        "normalize",
+        "Its block children cannot be represented as one phrasing-content sequence without data loss."
+      );
+    }
+    return { ...node, type: "mdxJsxTextElement", children: node.children[0].children };
+  }
+  return normalizeParent(root);
+}
+function reconcileJsxKindMismatches(root, descriptors, policy, shouldReconcile = () => true) {
+  if (policy === "source") {
+    return root;
+  }
+  if (policy === "error") {
+    assertNoMismatches(root, descriptors, shouldReconcile);
+    return root;
+  }
+  return normalizeTree(structuredClone(root), descriptors, shouldReconcile);
+}
+export {
+  JsxKindMismatchError,
+  reconcileJsxKindMismatches
+};

package/package.json

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