feat: support fallback descriptors for JSX

mdx-editor · Nov 5, 2024 · c6d1067 · c6d1067
1 parent 44f461c
commit c6d1067
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/src/exportMarkdownFromLexical.ts b/src/exportMarkdownFromLexical.ts
@@ -194,7 +194,9 @@ export function exportLexicalTreeToMdast({
   const defaultImportsMap = new Map<string, string>()
 
   for (const componentName of referredComponents) {
-    const descriptor = jsxComponentDescriptors.find((descriptor) => descriptor.name === componentName)
+    const descriptor =
+      jsxComponentDescriptors.find((descriptor) => descriptor.name === componentName) ??
+      jsxComponentDescriptors.find((descriptor) => descriptor.name === '*')
     if (!descriptor) {
       throw new Error(`Component ${componentName} is used but not imported`)
     }

diff --git a/src/plugins/jsx/LexicalJsxNode.tsx b/src/plugins/jsx/LexicalJsxNode.tsx
@@ -105,7 +105,10 @@ export function JsxEditorContainer(props: {
 }) {
   const { mdastNode } = props
   const jsxComponentDescriptors = useCellValue(jsxComponentDescriptors$)
-  const descriptor = jsxComponentDescriptors.find((descriptor) => descriptor.name === mdastNode.name)
+  const descriptor =
+    jsxComponentDescriptors.find((descriptor) => descriptor.name === mdastNode.name) ??
+    jsxComponentDescriptors.find((descriptor) => descriptor.name === '*')
+
   if (!descriptor) {
     throw new Error(`No JSX descriptor found for ${mdastNode.name}`)
   }

diff --git a/src/plugins/jsx/MdastMdxJsxElementVisitor.ts b/src/plugins/jsx/MdastMdxJsxElementVisitor.ts
@@ -6,7 +6,9 @@ import { MdastImportVisitor } from '../../importMarkdownToLexical'
 export const MdastMdxJsxElementVisitor: MdastImportVisitor<MdxJsxTextElement> = {
   testNode: (node, { jsxComponentDescriptors }) => {
     if (node.type === 'mdxJsxTextElement' || node.type === 'mdxJsxFlowElement') {
-      const descriptor = jsxComponentDescriptors.find((descriptor) => descriptor.name === node.name)
+      const descriptor =
+        jsxComponentDescriptors.find((descriptor) => descriptor.name === node.name) ??
+        jsxComponentDescriptors.find((descriptor) => descriptor.name === '*')
       return descriptor !== undefined
     }
     return false

diff --git a/src/plugins/jsx/index.ts b/src/plugins/jsx/index.ts
@@ -56,8 +56,9 @@ export interface JsxPropertyDescriptor {
  */
 export interface JsxComponentDescriptor {
   /**
-   * The tag name. For example: 'div', 'span', 'MyComponent'.
+   * The tag name. For example: 'div', 'span', 'MyComponent'. Use '*' for any tag.
    * Note: For fragments, use null.
+   *
    */
   name: string | null
   /**