feat: support JSX component imports in nested editors

Author: petyosi

src/examples/jsx.tsx

@@ -7,7 +7,7 @@ import { toolbarPlugin } from '../plugins/toolbar'
 import { Button } from '../plugins/toolbar/primitives/toolbar'
 import { NestedLexicalEditor } from '../plugins/core/NestedLexicalEditor'
 import { MdxJsxTextElement } from 'mdast-util-mdx'
-import { headingsPlugin } from '..'
+import { AdmonitionDirectiveDescriptor, directivesPlugin, headingsPlugin } from '..'
 import { usePublisher } from '@mdxeditor/gurx'
 
 const jsxComponentDescriptors: JsxComponentDescriptor[] = [
@@ -213,3 +213,121 @@ export const ExpressionAttributes = () => {
     </div>
   )
 }
+
+const CatchAllDescriptor: JsxComponentDescriptor[] = [
+  {
+    name: '*',
+    kind: 'flow',
+    props: [],
+    Editor: GenericJsxEditor
+  }
+]
+
+export const ImportStatements = () => {
+  const rawMd = React.useRef(`
+import { Foo } from '@bar/foo';
+import Bar from '@foo/bar';
+
+Hello
+
+<Foo />
+<Bar />
+        `)
+  const [md, setMd] = React.useState('')
+  return (
+    <div>
+      <h3>Original Source</h3>
+      <pre>
+        <code>{rawMd.current}</code>
+      </pre>
+      <h3>MDXEditor</h3>
+      <MDXEditor
+        onChange={(e) => {
+          setMd(e)
+        }}
+        markdown={rawMd.current}
+        plugins={[jsxPlugin({ jsxComponentDescriptors: CatchAllDescriptor })]}
+      />
+      <h3>Serialized MDX Editor</h3>
+      <pre>
+        <code>{md}</code>
+      </pre>
+    </div>
+  )
+}
+export const ImportStatementsNested = () => {
+  const rawMd = React.useRef(`
+Hello
+
+import Foo from '@bar';
+
+<Foo />
+
+:::info
+import Buzz from '@buzz';
+
+Hello from <Buzz />
+:::
+
+        `)
+  const [md, setMd] = React.useState('')
+  return (
+    <div>
+      <h3>Original Source</h3>
+      <pre>
+        <code>{rawMd.current}</code>
+      </pre>
+      <h3>MDXEditor</h3>
+      <MDXEditor
+        onChange={(e) => {
+          setMd(e)
+        }}
+        markdown={rawMd.current}
+        plugins={[
+          directivesPlugin({ directiveDescriptors: [AdmonitionDirectiveDescriptor] }),
+          headingsPlugin(),
+          jsxPlugin({
+            jsxComponentDescriptors: [
+              {
+                name: 'Zazz',
+                kind: 'flow',
+                source: '@zazz',
+                defaultExport: true,
+                props: [],
+                hasChildren: true,
+                Editor: GenericJsxEditor
+              },
+              ...CatchAllDescriptor
+            ]
+          }),
+          toolbarPlugin({
+            toolbarContents: () => {
+              // eslint-disable-next-line react-hooks/rules-of-hooks
+              const insertJsx = usePublisher(insertJsx$)
+              return (
+                <>
+                  <Button
+                    onClick={() => {
+                      insertJsx({
+                        name: 'Zazz',
+                        kind: 'flow',
+                        props: {},
+                        children: [{ type: 'paragraph', children: [{ type: 'text', value: 'Hello from Zazz' }] }]
+                      })
+                    }}
+                  >
+                    Zazz
+                  </Button>
+                </>
+              )
+            }
+          })
+        ]}
+      />
+      <h3>Serialized MDX Editor</h3>
+      <pre>
+        <code>{md}</code>
+      </pre>
+    </div>
+  )
+}

src/exportMarkdownFromLexical.ts

@@ -5,6 +5,7 @@ import { Options as ToMarkdownOptions, toMarkdown } from 'mdast-util-to-markdown
 import type { JsxComponentDescriptor } from './plugins/jsx'
 import { isMdastHTMLNode } from './plugins/core/MdastHTMLNode'
 import { mergeStyleAttributes } from './utils/mergeStyleAttributes'
+import { ImportStatement } from './importMarkdownToLexical'
 
 export type { Options as ToMarkdownOptions } from 'mdast-util-to-markdown'
 
@@ -58,7 +59,7 @@ export interface LexicalExportVisitor<LN extends LexicalNode, UN extends Mdast.N
        * @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
        */
@@ -117,13 +118,17 @@ export function exportLexicalTreeToMdast({
 }: ExportLexicalTreeOptions): Mdast.Root {
   let unistRoot: Mdast.Root | null = null
   const referredComponents = new Set<string>()
+  const knownImportSources = new Map<string, ImportStatement>()
 
   visitors = visitors.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0))
 
   visit(root, null)
 
-  function registerReferredComponent(componentName: string) {
+  function registerReferredComponent(componentName: string, importStatement?: ImportStatement) {
     referredComponents.add(componentName)
+    if (importStatement) {
+      knownImportSources.set(componentName, { ...importStatement })
+    }
   }
 
   function appendToParent<T extends Mdast.Parent, C extends Mdast.RootContent>(parentNode: T, node: C): C | Mdast.Root {
@@ -165,7 +170,6 @@ export function exportLexicalTreeToMdast({
         cause: lexicalNode
       })
     }
-
     visitor.visitLexicalNode?.({
       lexicalNode,
       mdastParent: mdastParent!,
@@ -197,10 +201,10 @@ export function exportLexicalTreeToMdast({
   // iterate over all referred components and construct import statements, then append them to the root
   const importsMap = new Map<string, string[]>()
   const defaultImportsMap = new Map<string, string>()
-
   for (const componentName of referredComponents) {
     const descriptor =
       jsxComponentDescriptors.find((descriptor) => descriptor.name === componentName) ??
+      knownImportSources.get(componentName) ??
       jsxComponentDescriptors.find((descriptor) => descriptor.name === '*')
     if (!descriptor) {
       throw new Error(`Component ${componentName} is used but not imported`)
@@ -221,6 +225,27 @@ export function exportLexicalTreeToMdast({
     }
   }
 
+  /**
+   * even when the import statements should not be added,
+   * raw import statements should not be removed.
+   */
+  if (!addImportStatements) {
+    // filter out new imports
+    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',
@@ -240,13 +265,10 @@ export function exportLexicalTreeToMdast({
   const typedRoot = unistRoot as Mdast.Root
 
   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, [])

src/importMarkdownToLexical.ts

@@ -2,12 +2,25 @@
 import { ElementNode, LexicalNode } from 'lexical'
 import * as Mdast from 'mdast'
 import { fromMarkdown, type Options } from 'mdast-util-from-markdown'
+import { MdxjsEsm } from 'mdast-util-mdx'
 import { toMarkdown } from 'mdast-util-to-markdown'
 import { ParseOptions } from 'micromark-util-types'
 import { FORMAT } from './FormatConstants'
-import { JsxComponentDescriptor } from './plugins/jsx'
-import { DirectiveDescriptor } from './plugins/directives'
 import { CodeBlockEditorDescriptor } from './plugins/codeblock'
+import { DirectiveDescriptor } from './plugins/directives'
+import { JsxComponentDescriptor } from './plugins/jsx'
+
+export interface ImportStatement {
+  source: string
+  defaultExport: boolean
+}
+
+/**
+ * Metadata that is provided to the visitors
+ */
+interface MetaData {
+  importDeclarations: Record<string, ImportStatement>
+}
 
 /**
  * The registered descriptors for composite nodes (jsx, directives, code blocks).
@@ -50,6 +63,10 @@ export 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.
      */
@@ -147,7 +164,7 @@ export class MarkdownParseError extends Error {
 }
 
 /**
- * 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 class UnrecognizedMarkdownConstructError extends Error {
@@ -157,6 +174,34 @@ export class UnrecognizedMarkdownConstructError extends Error {
   }
 }
 
+function gatherMetadata(mdastNode: Mdast.RootContent | Mdast.Root): MetaData {
+  const importsMap = new Map<string, ImportStatement>()
+  if (mdastNode.type !== 'root') {
+    return {
+      importDeclarations: {}
+    }
+  }
+  const importStatements = mdastNode.children
+    .filter((n) => n.type === 'mdxjsEsm')
+    .filter((n) => (n as MdxjsEsm).value.startsWith('import ')) as MdxjsEsm[]
+  importStatements.forEach((imp) => {
+    ;(imp.data?.estree?.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())
+  }
+}
+
 /** @internal */
 export function importMarkdownToLexical({
   root,
@@ -196,6 +241,7 @@ export function importMarkdownToLexical({
 export function importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors }: MdastTreeImportOptions): void {
   const formattingMap = new WeakMap<Mdast.Parent, number>()
   const styleMap = new WeakMap<Mdast.Parent, string>()
+  const metaData: MetaData = gatherMetadata(mdastRoot)
 
   visitors = visitors.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0))
 
@@ -234,6 +280,7 @@ export function importMdastTreeToLexical({ root, mdastRoot, visitors, ...descrip
       lexicalParent,
       mdastParent,
       descriptors,
+      metaData,
       actions: {
         visitChildren,
         addAndStepInto(lexicalNode) {