safe-mdx 1.3.2 → 1.3.6

package/src/safe-mdx.test.tsx

@@ -1,5 +1,4 @@
 import dedent from 'dedent'
-import { htmlToJsx } from 'html-to-jsx-transform'
 import React from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { expect, test } from 'vitest'
@@ -29,16 +28,6 @@ function render(code, componentPropsSchema?: ComponentPropsSchema, allowClientEs
     return { result, errors: visitor.errors || [], html }
 }
 
-test('htmlToJsx', () => {
-    expect(htmlToJsx('<p x="y">')).toMatchInlineSnapshot(`"<p x="y" />"`)
-    expect(htmlToJsx('<p>text</p>')).toMatchInlineSnapshot(`"<p>text</p>"`)
-    expect(htmlToJsx('before <p>text</p>')).toMatchInlineSnapshot(
-        `"<>before <p>text</p></>"`,
-    )
-    expect(htmlToJsx('<nonexisting>text</nonexisting>')).toMatchInlineSnapshot(
-        `"<nonexisting>text</nonexisting>"`,
-    )
-})
 
 test('reference links with titles', () => {
     const code = dedent`
@@ -2269,6 +2258,66 @@ test('kitchen sink', () => {
     `)
 })
 
+test('mdx jsx with unknown components are ignored', () => {
+    // Note: In MDX, <custom-element> is treated as MDX JSX, not raw HTML
+    // Unknown JSX components are ignored completely (including their content)
+    const code = dedent`
+    # Heading with JSX
+    
+    This is a paragraph with some JSX components.
+    
+    <div>This is a valid div</div>
+    
+    <CustomElement>This unknown component should be ignored</CustomElement>
+    
+    <span className="highlight">This span is valid</span>
+    
+    <AnotherUnknown>Another unknown component content</AnotherUnknown>
+    
+    More text after JSX.
+    `
+    
+    const { html, result, errors } = render(code)
+    
+    // Check that valid HTML elements are present
+    expect(html).toContain('<div>This is a valid div</div>')
+    expect(html).toContain('<span')
+    expect(html).toContain('This span is valid</span>')
+    
+    // Check that unknown components are completely ignored
+    expect(html).not.toContain('CustomElement')
+    expect(html).not.toContain('AnotherUnknown')
+    expect(html).not.toContain('This unknown component should be ignored')
+    expect(html).not.toContain('Another unknown component content')
+    
+    // Check that errors were generated for unknown components
+    expect(errors).toHaveLength(2)
+    expect(errors[0].message).toContain('Unsupported jsx component CustomElement')
+    expect(errors[1].message).toContain('Unsupported jsx component AnotherUnknown')
+    
+    expect(result).toMatchInlineSnapshot(`
+      <React.Fragment>
+        <h1>
+          Heading with JSX
+        </h1>
+        <p>
+          This is a paragraph with some JSX components.
+        </p>
+        <div>
+          This is a valid div
+        </div>
+        <span
+          className="highlight"
+        >
+          This span is valid
+        </span>
+        <p>
+          More text after JSX.
+        </p>
+      </React.Fragment>
+    `)
+})
+
 test('code block rendering', () => {
     const code = dedent`
 `
@@ -2904,7 +2953,7 @@ test('ESM imports from https URLs', () => {
     
     // Since these are dynamic imports that only work on client, the server render should return null
     const html = renderToStaticMarkup(result)
-    expect(html).toMatchInlineSnapshot(`"<h1>Hello</h1>"`)
+    expect(html).toMatchInlineSnapshot(`"<link href="https://esm.sh" rel="dns-prefetch"/><link rel="preconnect" href="https://esm.sh"/><h1>Hello</h1>"`)
     
     expect(visitor.errors).toEqual([])
 })
@@ -3334,3 +3383,120 @@ test('jsx component with complex array props should show clear error message', (
     expect(expressionError!.message).toContain('Functions are not supported')
     expect(expressionError!.line).toBe(1)
 })
+
+test('override renderNode to wrap bold text in colored span', () => {
+    const code = dedent`
+    This is **bold text** and this is regular text.
+    
+    Another line with **more bold** content.
+    `
+    
+    const mdast = mdxParse(code)
+    const visitor = new MdastToJsx({ 
+        markdown: code, 
+        mdast, 
+        components,
+        renderNode: (node, transform) => {
+            if (node.type === 'strong') {
+                return (
+                    <span style={{ color: 'red', fontWeight: 'bold' }}>
+                        {node.children?.map(child => transform(child))}
+                    </span>
+                )
+            }
+            // Return undefined to use default rendering
+            return undefined
+        }
+    })
+    
+    const result = visitor.run()
+    const html = renderToStaticMarkup(result)
+    
+    expect(html).toMatchInlineSnapshot(`"<p>This is <span style="color:red;font-weight:bold">bold text</span> and this is regular text.</p><p>Another line with <span style="color:red;font-weight:bold">more bold</span> content.</p>"`)
+})
+
+test("skip unknown elements in raw HTML content", () => {
+  const { html } = render(`
+Some text before
+<html><body>
+<p>Valid paragraph</p>
+<unknonw>This content should be preserved</unknonw>
+<div>Valid div</div>
+<faketag>Another preserved content</faketag>
+</body></html>
+Some text after
+`);
+  expect(html).toMatchInlineSnapshot(`"<p>Some text before</p><p>Some text after</p>"`);
+});
+
+test("skip unknown elements in complex nested HTML structures", () => {
+  const { html } = render(`
+# Main Title
+
+<article>
+  <header>
+    <h1>Article Title</h1>
+    <customheader>
+      <p>This paragraph should be preserved</p>
+      <time>2024-01-01</time>
+    </customheader>
+  </header>
+  
+  <section>
+    <blockquote>
+      <p>A famous quote</p>
+      <customcite>
+        <strong>- Author Name</strong>
+        <unknowntag>
+          <em>from a book</em>
+          <span>published in <b>2024</b></span>
+        </unknowntag>
+      </customcite>
+    </blockquote>
+    
+    <fakesection>
+      <h2>Nested Heading</h2>
+      <ul>
+        <li>First item with <invalidtag>nested <code>code</code></invalidtag></li>
+        <li>Second item</li>
+        <customli>Third item should show</customli>
+      </ul>
+    </fakesection>
+  </section>
+  
+  <footer>
+    <customfooter>
+      <nav>
+        <a href="#top">Back to top</a>
+        <fakelink>
+          <span>Contact us</span>
+        </fakelink>
+      </nav>
+    </customfooter>
+  </footer>
+</article>
+
+## Another Section
+
+<div>
+  <customelement>
+    <table>
+      <thead>
+        <tr>
+          <th>Header 1</th>
+          <customth>Header 2 content</customth>
+        </tr>
+      </thead>
+      <tbody>
+        <customrow>
+          <td>Cell 1</td>
+          <td>Cell 2</td>
+        </customrow>
+      </tbody>
+    </table>
+  </customelement>
+</div>
+`);
+  
+  expect(html).toMatchInlineSnapshot(`"<h1>Main Title</h1><article><header><h1>Article Title</h1></header><section><blockquote><p>A famous quote</p></blockquote></section><footer></footer></article><h2>Another Section</h2><div></div>"`);
+});

package/src/safe-mdx.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, cloneElement } from 'react'
+import React, { cloneElement } from 'react'
 
 import type { StandardSchemaV1 } from '@standard-schema/spec'
 import type { JSXElement } from 'estree-jsx'
@@ -9,12 +9,8 @@ import type { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx'
 import { Fragment, ReactNode } from 'react'
 import { DynamicEsmComponent } from './dynamic-esm-component.js'
 import { extractComponentInfo, parseEsmImports } from './esm-parser.js'
-
-const HtmlToJsxConverter = React.lazy(() =>
-    import('./HtmlToJsxConverter.js').then((module) => ({
-        default: module.HtmlToJsxConverter,
-    })),
-)
+import { htmlToMdxAst } from './html/html-to-mdx-ast.js'
+import { validHtmlElements, nativeTags } from './html/valid-html-elements.js'
 
 export type MyRootContent = RootContent | Root
 
@@ -190,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) {
@@ -291,7 +287,7 @@ export class MdastToJsx {
                 )
             }
             default: {
-                return this.mdastTransformer(node)
+                return this.mdastTransformer(node, 'mdxJsxElement')
             }
         }
     }
@@ -568,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 []
         }
@@ -584,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
@@ -932,15 +928,23 @@ export class MdastToJsx {
                     return []
                 }
 
-                return this.createElement(
-                    Suspense,
-                    { fallback: null },
-                    this.createElement(HtmlToJsxConverter, {
-                        htmlText: text,
-                        instance: this,
-                        node,
-                    }),
-                )
+                // 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
+                        if (validHtmlElements.has(lowerTag)) {
+                            return lowerTag
+                        }
+                        // Return empty string for non-HTML elements
+                        return ''
+                    }
+                })
+
+                // Process the MDX AST nodes
+                return mdxAst.map(child => this.mdastTransformer(child, parentType))
             }
             case 'imageReference': {
                 return []
@@ -1002,69 +1006,6 @@ function safeJsonParse(str: string) {
     }
 }
 
-const nativeTags = [
-    'blockquote',
-    'strong',
-    'em',
-    'del',
-    'hr',
-    'a',
-    'b',
-    'br',
-    'button',
-    'div',
-    'form',
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'head',
-    'iframe',
-    'img',
-    'input',
-    'label',
-    'li',
-    'link',
-    'ol',
-    'p',
-    'path',
-    'picture',
-    'script',
-    'section',
-    'source',
-    'span',
-    'sub',
-    'sup',
-    'svg',
-    'table',
-    'tbody',
-    'td',
-    'tfoot',
-    'th',
-    'thead',
-    'tr',
-    'ul',
-    'video',
-    'code',
-    'pre',
-    'figure',
-    'canvas',
-    'details',
-    'dl',
-    'dt',
-    'dd',
-    'fieldset',
-    'footer',
-    'header',
-    'legend',
-    'main',
-    'mark',
-    'nav',
-    'progress',
-    'summary',
-    'time',
-] as const
-
 type ComponentsMap = { [k in (typeof nativeTags)[number]]?: any } & {
     [key: string]: any
 }

package/dist/HtmlToJsxConverter.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { MdastToJsx, MyRootContent } from './safe-mdx.js';
-interface HtmlToJsxConverterProps {
-    htmlText: string;
-    instance: MdastToJsx;
-    node: MyRootContent;
-}
-export declare function HtmlToJsxConverter({ htmlText, instance, node, }: HtmlToJsxConverterProps): string | number | bigint | true | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>>;
-export {};
-//# sourceMappingURL=HtmlToJsxConverter.d.ts.map

package/dist/HtmlToJsxConverter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HtmlToJsxConverter.d.ts","sourceRoot":"","sources":["../src/HtmlToJsxConverter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAI9D,UAAU,uBAAuB;IAC7B,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,UAAU,CAAA;IACpB,IAAI,EAAE,aAAa,CAAA;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,QAAQ,EACR,QAAQ,EACR,IAAI,GACP,EAAE,uBAAuB,+SAoBzB"}

package/dist/HtmlToJsxConverter.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { htmlToJsx } from 'html-to-jsx-transform';
-React;
-export function HtmlToJsxConverter({ htmlText, instance, node, }) {
-    try {
-        const jsx = htmlToJsx(htmlText);
-        const originalJsxStr = instance.jsxStr;
-        instance.jsxStr = jsx;
-        const result = instance.jsxTransformer(node);
-        instance.jsxStr = originalJsxStr;
-        if (Array.isArray(result)) {
-            console.log(`Unexpected array result`);
-            return null;
-        }
-        return result || null;
-    }
-    catch (error) {
-        console.error('Error converting HTML to JSX:', error);
-        return null;
-    }
-}
-//# sourceMappingURL=HtmlToJsxConverter.js.map

package/dist/HtmlToJsxConverter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HtmlToJsxConverter.js","sourceRoot":"","sources":["../src/HtmlToJsxConverter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAGjD,KAAK,CAAA;AAQL,MAAM,UAAU,kBAAkB,CAAC,EAC/B,QAAQ,EACR,QAAQ,EACR,IAAI,GACkB;IACtB,IAAI;QACA,MAAM,GAAG,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAA;QAC/B,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAA;QACtC,QAAQ,CAAC,MAAM,GAAG,GAAG,CAAA;QAErB,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;QAE5C,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAA;QAEhC,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YACvB,OAAO,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAA;YACtC,OAAO,IAAI,CAAA;SACd;QAED,OAAO,MAAM,IAAI,IAAI,CAAA;KACxB;IAAC,OAAO,KAAK,EAAE;QACZ,OAAO,CAAC,KAAK,CAAC,+BAA+B,EAAE,KAAK,CAAC,CAAA;QACrD,OAAO,IAAI,CAAA;KACd;AACL,CAAC"}

package/dist/plugins.d.ts

@@ -1,12 +0,0 @@
-import { Root } from 'mdast';
-/**
- * https://github.com/mdx-js/mdx/blob/b3351fadcb6f78833a72757b7135dcfb8ab646fe/packages/mdx/lib/plugin/remark-mark-and-unravel.js
- * A tiny plugin that unravels `<p><h1>x</h1></p>` but also
- * `<p><Component /></p>` (so it has no knowledge of "HTML").
- *
- * It also marks JSX as being explicitly JSX, so when a user passes a `h1`
- * component, it is used for `# heading` but not for `<h1>heading</h1>`.
- *
- */
-export declare function remarkMarkAndUnravel(): (tree: Root) => void;
-//# sourceMappingURL=plugins.d.ts.map

package/dist/plugins.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"plugins.d.ts","sourceRoot":"","sources":["../src/plugins.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAe,MAAM,OAAO,CAAA;AAKzC;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,WACT,IAAI,UAuE9B"}

package/dist/plugins.js

@@ -1,68 +0,0 @@
-import { collapseWhiteSpace } from 'collapse-white-space';
-import { visit } from 'unist-util-visit';
-/**
- * https://github.com/mdx-js/mdx/blob/b3351fadcb6f78833a72757b7135dcfb8ab646fe/packages/mdx/lib/plugin/remark-mark-and-unravel.js
- * A tiny plugin that unravels `<p><h1>x</h1></p>` but also
- * `<p><Component /></p>` (so it has no knowledge of "HTML").
- *
- * It also marks JSX as being explicitly JSX, so when a user passes a `h1`
- * component, it is used for `# heading` but not for `<h1>heading</h1>`.
- *
- */
-export function remarkMarkAndUnravel() {
-    return function (tree) {
-        visit(tree, function (node, index, parent) {
-            let offset = -1;
-            let all = true;
-            let oneOrMore = false;
-            if (parent &&
-                typeof index === 'number' &&
-                node.type === 'paragraph') {
-                const children = node.children;
-                while (++offset < children.length) {
-                    const child = children[offset];
-                    if (child.type === 'mdxJsxTextElement' ||
-                        child.type === 'mdxTextExpression') {
-                        oneOrMore = true;
-                    }
-                    else if (child.type === 'text' &&
-                        collapseWhiteSpace(child.value, {
-                            style: 'html',
-                            trim: true,
-                        }) === '') {
-                        // Empty.
-                    }
-                    else {
-                        all = false;
-                        break;
-                    }
-                }
-                if (all && oneOrMore) {
-                    offset = -1;
-                    const newChildren = [];
-                    while (++offset < children.length) {
-                        const child = children[offset];
-                        if (child.type === 'mdxJsxTextElement') {
-                            // @ts-expect-error: mutate because it is faster; content model is fine.
-                            child.type = 'mdxJsxFlowElement';
-                        }
-                        if (child.type === 'mdxTextExpression') {
-                            // @ts-expect-error: mutate because it is faster; content model is fine.
-                            child.type = 'mdxFlowExpression';
-                        }
-                        if (child.type === 'text' &&
-                            /^[\t\r\n ]+$/.test(String(child.value))) {
-                            // Empty.
-                        }
-                        else {
-                            newChildren.push(child);
-                        }
-                    }
-                    parent.children.splice(index, 1, ...newChildren);
-                    return index;
-                }
-            }
-        });
-    };
-}
-//# sourceMappingURL=plugins.js.map

package/dist/plugins.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"plugins.js","sourceRoot":"","sources":["../src/plugins.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAGxC;;;;;;;;GAQG;AACH,MAAM,UAAU,oBAAoB;IAChC,OAAO,UAAU,IAAU;QAEvB,KAAK,CAAC,IAAI,EAAE,UAAU,IAAI,EAAE,KAAK,EAAE,MAAM;YACrC,IAAI,MAAM,GAAG,CAAC,CAAC,CAAA;YACf,IAAI,GAAG,GAAG,IAAI,CAAA;YACd,IAAI,SAAS,GAAG,KAAK,CAAA;YAGrB,IACI,MAAM;gBACN,OAAO,KAAK,KAAK,QAAQ;gBACzB,IAAI,CAAC,IAAI,KAAK,WAAW,EAC3B;gBACE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAA;gBAE9B,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE;oBAC/B,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;oBAE9B,IACI,KAAK,CAAC,IAAI,KAAK,mBAAmB;wBAClC,KAAK,CAAC,IAAI,KAAK,mBAAmB,EACpC;wBACE,SAAS,GAAG,IAAI,CAAA;qBACnB;yBAAM,IACH,KAAK,CAAC,IAAI,KAAK,MAAM;wBACrB,kBAAkB,CAAC,KAAK,CAAC,KAAK,EAAE;4BAC5B,KAAK,EAAE,MAAM;4BACb,IAAI,EAAE,IAAI;yBACb,CAAC,KAAK,EAAE,EACX;wBACE,SAAS;qBACZ;yBAAM;wBACH,GAAG,GAAG,KAAK,CAAA;wBACX,MAAK;qBACR;iBACJ;gBAED,IAAI,GAAG,IAAI,SAAS,EAAE;oBAClB,MAAM,GAAG,CAAC,CAAC,CAAA;oBAEX,MAAM,WAAW,GAAkB,EAAE,CAAA;oBAErC,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE;wBAC/B,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;wBAE9B,IAAI,KAAK,CAAC,IAAI,KAAK,mBAAmB,EAAE;4BACpC,wEAAwE;4BACxE,KAAK,CAAC,IAAI,GAAG,mBAAmB,CAAA;yBACnC;wBAED,IAAI,KAAK,CAAC,IAAI,KAAK,mBAAmB,EAAE;4BACpC,wEAAwE;4BACxE,KAAK,CAAC,IAAI,GAAG,mBAAmB,CAAA;yBACnC;wBAED,IACI,KAAK,CAAC,IAAI,KAAK,MAAM;4BACrB,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAC1C;4BACE,SAAS;yBACZ;6BAAM;4BACH,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;yBAC1B;qBACJ;oBAED,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,WAAW,CAAC,CAAA;oBAChD,OAAO,KAAK,CAAA;iBACf;aACJ;QACL,CAAC,CAAC,CAAA;IACN,CAAC,CAAA;AACL,CAAC"}

package/src/HtmlToJsxConverter.tsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import { htmlToJsx } from 'html-to-jsx-transform'
-import type { MdastToJsx, MyRootContent } from './safe-mdx.js'
-
-React
-
-interface HtmlToJsxConverterProps {
-    htmlText: string
-    instance: MdastToJsx
-    node: MyRootContent
-}
-
-export function HtmlToJsxConverter({
-    htmlText,
-    instance,
-    node,
-}: HtmlToJsxConverterProps) {
-    try {
-        const jsx = htmlToJsx(htmlText)
-        const originalJsxStr = instance.jsxStr
-        instance.jsxStr = jsx
-
-        const result = instance.jsxTransformer(node)
-
-        instance.jsxStr = originalJsxStr
-
-        if (Array.isArray(result)) {
-            console.log(`Unexpected array result`)
-            return null
-        }
-
-        return result || null
-    } catch (error) {
-        console.error('Error converting HTML to JSX:', error)
-        return null
-    }
-}