fix: catch incorrectly identified text JSX elements

src/examples/assets/jsx.md

@@ -11,3 +11,7 @@ more Content
 something more.
 
 <UnknownJsxNode>What</UnknownJsxNode>
+
+<MyLeaf foo="fooValue">Some content</MyLeaf>
+
+<MyLeaf foo="fooValue" />

src/importMarkdownToLexical.ts

@@ -30,9 +30,9 @@ export interface MdastImportVisitor<UN extends Mdast.Nodes> {
   /**
    * The test function that determines if this visitor should be used for the given node.
    * As a convenience, you can also pass a string here, which will be compared to the node's type.
-   * @param options - the registered descriptors for composite nodes (jsx, directives, code blocks).
+   * @param descriptors - the registered descriptors for composite nodes (jsx, directives, code blocks).
    */
-  testNode: ((mdastNode: Mdast.Nodes, options: Descriptors) => boolean) | string
+  testNode: ((mdastNode: Mdast.Nodes, descriptors: Descriptors) => boolean) | string
   visitNode(params: {
     /**
      * The node that is currently being visited.
@@ -46,6 +46,10 @@ export interface MdastImportVisitor<UN extends Mdast.Nodes> {
      * The parent lexical node to which the results of the processing should be added.
      */
     lexicalParent: LexicalNode
+    /**
+     * The descriptors for composite nodes (jsx, directives, code blocks).
+     */
+    descriptors: Descriptors
     /**
      * A set of convenience utilities that can be used to add nodes to the lexical tree.
      */
@@ -219,6 +223,7 @@ export function importMdastTreeToLexical({ root, mdastRoot, visitors, ...descrip
       mdastNode,
       lexicalParent,
       mdastParent,
+      descriptors,
       actions: {
         visitChildren,
         addAndStepInto(lexicalNode) {

src/plugins/core/index.ts

@@ -9,7 +9,6 @@ import {
   $getRoot,
   $getSelection,
   $insertNodes,
-  $isDecoratorNode,
   $isRangeSelection,
   $isRootOrShadowRoot,
   $setSelection,
@@ -20,7 +19,6 @@ import {
   ElementNode,
   FOCUS_COMMAND,
   FORMAT_TEXT_COMMAND,
-  KEY_DOWN_COMMAND,
   Klass,
   LexicalEditor,
   LexicalNode,
@@ -50,7 +48,6 @@ import {
   UnrecognizedMarkdownConstructError,
   importMarkdownToLexical
 } from '../../importMarkdownToLexical'
-import { controlOrMeta } from '../../utils/detectMac'
 import { noop } from '../../utils/fp'
 import type { JsxComponentDescriptor } from '../jsx'
 import { GenericHTMLNode } from './GenericHTMLNode'

src/plugins/frontmatter/index.ts

@@ -15,7 +15,6 @@ import {
   $getSelection,
   $isRangeSelection,
   $isTextNode,
-  $setSelection,
   COMMAND_PRIORITY_CRITICAL,
   ElementNode,
   KEY_DOWN_COMMAND,

src/plugins/jsx/MdastMdxJsxElementVisitor.ts

@@ -1,9 +1,10 @@
-import { ElementNode } from 'lexical'
+import { $createParagraphNode, ElementNode, RootNode } from 'lexical'
 import { MdxJsxTextElement } from 'mdast-util-mdx'
 import { $createLexicalJsxNode } from './LexicalJsxNode'
 import { MdastImportVisitor } from '../../importMarkdownToLexical'
+import { MdxJsxFlowElement } from 'mdast-util-mdx-jsx/lib'
 
-export const MdastMdxJsxElementVisitor: MdastImportVisitor<MdxJsxTextElement> = {
+export const MdastMdxJsxElementVisitor: MdastImportVisitor<MdxJsxTextElement | MdxJsxFlowElement> = {
   testNode: (node, { jsxComponentDescriptors }) => {
     if (node.type === 'mdxJsxTextElement' || node.type === 'mdxJsxFlowElement') {
       const descriptor =
@@ -13,8 +14,20 @@ export const MdastMdxJsxElementVisitor: MdastImportVisitor<MdxJsxTextElement> =
     }
     return false
   },
-  visitNode({ lexicalParent, mdastNode }) {
-    ;(lexicalParent as ElementNode).append($createLexicalJsxNode(mdastNode))
+  visitNode({ lexicalParent, mdastNode, descriptors: { jsxComponentDescriptors } }) {
+    const descriptor =
+      jsxComponentDescriptors.find((descriptor) => descriptor.name === mdastNode.name) ??
+      jsxComponentDescriptors.find((descriptor) => descriptor.name === '*')
+
+    // the parser does not know that the node should be treated as an inline element, but our descriptor does.
+    if (descriptor?.kind === 'text' && mdastNode.type === 'mdxJsxFlowElement') {
+      const patchedNode = { ...mdastNode, type: 'mdxJsxTextElement' } as MdxJsxTextElement
+      const paragraph = $createParagraphNode()
+      paragraph.append($createLexicalJsxNode(patchedNode))
+      ;(lexicalParent as RootNode).append(paragraph)
+    } else {
+      ;(lexicalParent as ElementNode).append($createLexicalJsxNode(mdastNode))
+    }
   },
   priority: -200
 }