safe-mdx 1.3.3 → 1.3.7

package/src/html/html-to-mdx-ast.ts

@@ -5,11 +5,13 @@ import type {
     MdxJsxTextElement,
 } from 'mdast-util-mdx-jsx'
 import type { Processor } from 'unified'
+import { unified } from 'unified'
 import { convertAttributeNameToJSX } from './convert-attributes.js'
 import { parseHTML } from './domparser.js'
+import { remarkMdxJsxNormalize } from './remark-mdx-jsx-normalize.js'
 
 // Re-export the normalize plugin
-export { default as remarkMdxJsxNormalize } from './remark-mdx-jsx-normalize.js'
+export { remarkMdxJsxNormalize }
 
 // Type for converting tag names
 export type ConvertTagName = (args: { tagName: string }) => string
@@ -29,6 +31,7 @@ export type ConvertAttributeValue = (args: {
 // Options for parsing HTML to MDX AST
 export interface ParseHtmlToMdxAstOptions {
     html: string
+    parentType?: string
     onError?: (error: unknown, text: string) => void
     convertTagName?: ConvertTagName
     textToMdast?: TextToMdast
@@ -64,6 +67,32 @@ function defaultConvertAttributeValue({
     return value
 }
 
+// Remove common indentation from multi-line text while preserving relative indentation
+function deindent(text: string): string {
+    const lines = text.split('\n')
+    
+    // Find minimum indentation (excluding empty lines)
+    let minIndent = Infinity
+    for (const line of lines) {
+        if (line.trim()) {
+            const match = line.match(/^(\s*)/)
+            if (match) {
+                minIndent = Math.min(minIndent, match[1].length)
+            }
+        }
+    }
+    
+    // If no indentation found, return as is
+    if (minIndent === 0 || minIndent === Infinity) {
+        return text
+    }
+    
+    // Remove common indentation from each line, preserving relative indentation
+    return lines
+        .map(line => line.slice(minIndent))
+        .join('\n')
+}
+
 // Convert HTML attribute to MDX JSX attribute
 function convertAttribute(
     attr: Attr,
@@ -151,29 +180,51 @@ function convertAttribute(
     }
 }
 
-// Convert DOM node to MDX AST nodes
+// Convert DOM node to MDX AST nodes - always returns an array
 function htmlNodeToMdxAst(
     node: Node,
     options?: ParseHtmlToMdxAstOptions,
-): RootContent | RootContent[] {
+): RootContent[] {
     if (isCommentNode(node)) {
         // Convert comments to MDX JSX expression with comment
-        // For now, return as HTML node
-        // return {
+        // For now, return empty array
+        // return [{
         //     type: 'html',
         //     value: `<!-- ${node.data} -->`
-        // } as Html
+        // }] as Html[]
         return []
     }
 
     if (isTextNode(node)) {
-        const textValue = node.textContent || ''
+        let textValue = node.textContent || ''
+        
+        // Skip whitespace-only nodes between elements
+        if (!textValue.trim()) {
+            const prevSibling = node.previousSibling
+            const nextSibling = node.nextSibling
+            
+            // If between elements and contains newlines, it's likely formatting
+            if (textValue.includes('\n') && 
+                ((prevSibling && isElementNode(prevSibling)) ||
+                 (nextSibling && isElementNode(nextSibling)))) {
+                return []
+            }
+            // Otherwise preserve the whitespace (could be intentional space)
+        }
+        
+        // Always deindent text content
+        textValue = deindent(textValue).trim()
+        
+        // Skip empty text after processing
+        if (!textValue) {
+            return []
+        }
 
         // If we have a textToMdast converter, use it
         if (options?.textToMdast) {
             try {
                 const result = options.textToMdast({ text: textValue })
-                return result
+                return Array.isArray(result) ? result : [result]
             } catch (error) {
                 // Call onError callback if provided, otherwise log
                 if (options.onError) {
@@ -183,18 +234,22 @@ function htmlNodeToMdxAst(
                     console.error('Text content:', textValue)
                 }
                 // Fallback to simple text node
-                return {
-                    type: 'text',
-                    value: textValue,
-                } satisfies MdastText
+                return [
+                    {
+                        type: 'text',
+                        value: textValue,
+                    } satisfies MdastText,
+                ]
             }
         }
 
         // Default: return simple text node
-        return {
-            type: 'text',
-            value: textValue,
-        } satisfies MdastText
+        return [
+            {
+                type: 'text',
+                value: textValue,
+            } satisfies MdastText,
+        ]
     }
 
     if (!isElementNode(node)) {
@@ -210,12 +265,7 @@ function htmlNodeToMdxAst(
         // Process children but skip the element wrapper
         const children: RootContent[] = []
         for (const child of Array.from(node.childNodes)) {
-            const result = htmlNodeToMdxAst(child, options)
-            if (Array.isArray(result)) {
-                children.push(...result)
-            } else {
-                children.push(result)
-            }
+            children.push(...htmlNodeToMdxAst(child, options))
         }
         return children
     }
@@ -229,12 +279,7 @@ function htmlNodeToMdxAst(
     // Process children
     const children: RootContent[] = []
     for (const child of Array.from(node.childNodes)) {
-        const result = htmlNodeToMdxAst(child, options)
-        if (Array.isArray(result)) {
-            children.push(...result)
-        } else {
-            children.push(result)
-        }
+        children.push(...htmlNodeToMdxAst(child, options))
     }
 
     // Always create MdxJsxTextElement initially
@@ -245,13 +290,11 @@ function htmlNodeToMdxAst(
         attributes,
         children: children as any,
     }
-    return element
+    return [element]
 }
 
-// Main function to parse HTML and return MDX AST
-export function htmlToMdxAst(
-    options: ParseHtmlToMdxAstOptions,
-): RootContent | RootContent[] {
+// Main function to parse HTML and return MDX AST - always returns an array
+export function htmlToMdxAst(options: ParseHtmlToMdxAstOptions): RootContent[] {
     // Parse HTML with linkedom
     const { document } = parseHTML(options.html.trim())
 
@@ -273,22 +316,50 @@ export function htmlToMdxAst(
             node.nodeType === 8, // Comment nodes
     )
 
-    if (childNodes.length === 0) {
-        return []
-    }
+    let results: RootContent[] = []
 
-    if (childNodes.length === 1) {
-        return htmlNodeToMdxAst(childNodes[0]!, options)
+    for (const node of childNodes) {
+        results.push(...htmlNodeToMdxAst(node, options))
     }
 
-    // Multiple nodes - return as array
-    const results: RootContent[] = []
-    for (const node of childNodes) {
-        const result = htmlNodeToMdxAst(node, options)
-        if (Array.isArray(result)) {
-            results.push(...result)
+    // Apply the normalize plugin if we have a parentType
+    if (options.parentType && results.length > 0) {
+        // Create a temporary AST node with the same parent type
+        const parentType = options.parentType
+        const tempRoot: Root = {
+            type: 'root',
+            children: results,
+        }
+
+        // If we have a specific parent type, wrap the content in that parent
+        // to provide proper context for the normalize plugin
+        let astToProcess: Root
+        if (parentType !== 'root') {
+            // Create a parent node of the specified type with our content as children
+            const parentNode: any = {
+                type: parentType,
+                children: tempRoot.children,
+            }
+            astToProcess = {
+                type: 'root',
+                children: [parentNode],
+            }
+        } else {
+            astToProcess = tempRoot
+        }
+
+        // Create a simple processor and run the normalize plugin
+        const processor = unified().use(remarkMdxJsxNormalize)
+        processor.runSync(astToProcess)
+
+        // Extract the result back
+        if (parentType !== 'root') {
+            // Get the children from the parent node we created
+            const processedParent = astToProcess.children[0] as any
+            results = processedParent.children as RootContent[]
         } else {
-            results.push(result)
+            // Get children directly from root
+            results = astToProcess.children
         }
     }
 
@@ -296,9 +367,9 @@ export function htmlToMdxAst(
 }
 
 // Export a wrapper that always returns an array for consistency
+// Note: htmlToMdxAst now already returns an array, so this is just an alias
 export function parseHtmlToMdxAst(
     options: ParseHtmlToMdxAstOptions,
 ): RootContent[] {
-    const result = htmlToMdxAst(options)
-    return Array.isArray(result) ? result : [result]
+    return htmlToMdxAst(options)
 }

package/src/html/remark-mdx-jsx-normalize.ts

@@ -22,6 +22,40 @@ const PHRASE_CONTAINERS = new Set([
     'mdxJsxTextElement', // MDX JSX text elements should contain phrasing
 ])
 
+/** HTML tags that require phrasing/inline children */
+const PHRASE_HTML_CONTAINERS = new Set([
+    'p',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'em',
+    'strong',
+    'b',
+    'i',
+    'u',
+    's',
+    'del',
+    'ins',
+    'mark',
+    'small',
+    'sub',
+    'sup',
+    'a',
+    'abbr',
+    'cite',
+    'code',
+    'dfn',
+    'kbd',
+    'q',
+    'samp',
+    'span',
+    'time',
+    'var',
+])
+
 /** Parents that accept/expect flow (block) content */
 const FLOW_CONTAINERS = new Set([
     'root',
@@ -55,22 +89,51 @@ const blockLevelTags = new Set([
     'div',
     'p',
     'blockquote',
-    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
-    'ul', 'ol', 'li',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'ul',
+    'ol',
+    'li',
     'pre',
     'hr',
-    'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td',
-    'section', 'article', 'aside', 'nav', 'header', 'footer', 'main',
-    'figure', 'figcaption',
+    'table',
+    'thead',
+    'tbody',
+    'tfoot',
+    'tr',
+    'th',
+    'td',
+    'section',
+    'article',
+    'aside',
+    'nav',
+    'header',
+    'footer',
+    'main',
+    'figure',
+    'figcaption',
     // Notion-specific block elements
     'callout',
-    'columns', 'column',
+    'columns',
+    'column',
     'page',
     'database',
     'data-source',
-    'audio', 'video', 'file', 'pdf', 'embed',
-    'synced_block', 'synced_block_reference',
-    'meeting-notes', 'summary', 'notes', 'transcript',
+    'audio',
+    'video',
+    'file',
+    'pdf',
+    'embed',
+    'synced_block',
+    'synced_block_reference',
+    'meeting-notes',
+    'summary',
+    'notes',
+    'transcript',
     'table_of_contents',
     'unknown',
     'image', // Images can be block-level in Notion
@@ -83,24 +146,40 @@ const blockLevelTags = new Set([
  * - Elements with block-level tag names → mdxJsxFlowElement
  * - Elements containing non-phrasing children → mdxJsxFlowElement
  */
-export default function remarkMdxJsxNormalize() {
+export function remarkMdxJsxNormalize() {
     return function transform(tree: Root) {
         visitParents(tree, isMdxJsx, (node, ancestors) => {
             const element = node as MdxJsxTextElement | MdxJsxFlowElement
             const parent = ancestors[ancestors.length - 1] as Parent | undefined
             if (!parent) return
 
-            const parentType = parent.type
-            const parentExpectsPhrasing = PHRASE_CONTAINERS.has(parentType)
-            const parentExpectsFlow = FLOW_CONTAINERS.has(parentType)
+            // Check if parent expects phrasing or flow content
+            let parentExpectsPhrasing = false
+            let parentExpectsFlow = false
+            
+            if ((parent.type === 'mdxJsxFlowElement' || parent.type === 'mdxJsxTextElement') && 
+                (parent as any).name) {
+                // For MDX JSX elements, check the tag name
+                const parentTagName = (parent as any).name.toLowerCase()
+                parentExpectsPhrasing = PHRASE_HTML_CONTAINERS.has(parentTagName)
+                // If not phrasing and is a block-level tag, it expects flow
+                parentExpectsFlow = !parentExpectsPhrasing && blockLevelTags.has(parentTagName)
+            } else {
+                // For mdast nodes, check the type
+                parentExpectsPhrasing = PHRASE_CONTAINERS.has(parent.type)
+                parentExpectsFlow = FLOW_CONTAINERS.has(parent.type)
+            }
 
             // Check element properties
-            const hasBlockTag = element.name ? blockLevelTags.has(element.name.toLowerCase()) : false
+            const hasBlockTag = element.name
+                ? blockLevelTags.has(element.name.toLowerCase())
+                : false
             const children = (element.children || []) as RootContent[]
             const containsNonPhrasing = children.some((c) => !isPhrasing(c))
 
             // Determine desired type
-            let desired: 'mdxJsxTextElement' | 'mdxJsxFlowElement' = element.type
+            let desired: 'mdxJsxTextElement' | 'mdxJsxFlowElement' =
+                element.type
 
             // Priority rules:
             // 1. If it has a block-level tag name, it should be flow
@@ -124,5 +203,7 @@ export default function remarkMdxJsxNormalize() {
 
 /** Check if a node is an MDX JSX element */
 function isMdxJsx(node: Node): boolean {
-    return node.type === 'mdxJsxTextElement' || node.type === 'mdxJsxFlowElement'
-}
+    return (
+        node.type === 'mdxJsxTextElement' || node.type === 'mdxJsxFlowElement'
+    )
+}

package/src/parse.ts

@@ -5,9 +5,9 @@ import { Root, RootContent } from 'mdast'
 import { remark } from 'remark'
 import remarkGfm from 'remark-gfm'
 import remarkMdx from 'remark-mdx'
-import { parseHtmlToMdxAst } from './html/html-to-mdx-ast.js'
+import { parseHtmlToMdxAst, remarkMdxJsxNormalize } from './html/html-to-mdx-ast.js'
 
-export { parseHtmlToMdxAst }
+export { parseHtmlToMdxAst, remarkMdxJsxNormalize }
 
 export function mdxParse(code: string) {
     const file = mdxProcessor.processSync(code)

package/src/safe-mdx.tsx

@@ -186,7 +186,7 @@ export class MdastToJsx {
 
     mapMdastChildren(node: any) {
         const res = node.children
-            ?.flatMap((child) => this.mdastTransformer(child))
+            ?.flatMap((child) => this.mdastTransformer(child, node.type))
             .filter(Boolean)
         if (Array.isArray(res)) {
             if (!res.length) {
@@ -287,7 +287,7 @@ export class MdastToJsx {
                 )
             }
             default: {
-                return this.mdastTransformer(node)
+                return this.mdastTransformer(node, 'mdxJsxElement')
             }
         }
     }
@@ -564,14 +564,14 @@ export class MdastToJsx {
     }
 
     run() {
-        const res = this.mdastTransformer(this.mdast) as ReactNode
+        const res = this.mdastTransformer(this.mdast, 'root') as ReactNode
         if (Array.isArray(res) && res.length === 1) {
             return res[0]
         }
         return res
     }
 
-    mdastTransformer(node: MyRootContent): ReactNode {
+    mdastTransformer(node: MyRootContent, parentType?: string): ReactNode {
         if (!node) {
             return []
         }
@@ -580,7 +580,7 @@ export class MdastToJsx {
         if (this.renderNode) {
             const customResult = this.renderNode(
                 node,
-                this.mdastTransformer.bind(this),
+                (n: MyRootContent) => this.mdastTransformer(n, node.type),
             )
             if (customResult !== undefined) {
                 return customResult
@@ -928,9 +928,10 @@ export class MdastToJsx {
                     return []
                 }
 
-                // Parse HTML to MDX AST using the new approach
+                // Parse HTML to MDX AST using the new approach - always returns an array
                 const mdxAst = htmlToMdxAst({
                     html: text,
+                    parentType: parentType || 'root',
                     convertTagName: ({ tagName }) => {
                         const lowerTag = tagName.toLowerCase()
                         // Only keep valid HTML elements
@@ -943,11 +944,7 @@ export class MdastToJsx {
                 })
 
                 // Process the MDX AST nodes
-                if (Array.isArray(mdxAst)) {
-                    return mdxAst.map(child => this.mdastTransformer(child))
-                } else {
-                    return this.mdastTransformer(mdxAst)
-                }
+                return mdxAst.map(child => this.mdastTransformer(child, parentType))
             }
             case 'imageReference': {
                 return []