safe-mdx 0.0.5 → 0.0.6

package/src/safe-mdx.test.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import dedent from 'dedent'
-import { test, expect } from 'vitest'
-import { MdastToJsx } from './safe-mdx.js'
+import React from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, test } from 'vitest'
+import { mdastBfs, MdastToJsx, mdxParse } from './safe-mdx.js'
 void React
 
 const components = {
@@ -19,17 +19,83 @@ function render(code) {
     return { result, errors: visitor.errors || [], html }
 }
 
+test('remark and jsx does not wrap in p', () => {
+    const code = dedent`
+    # Hello
+
+    i am a paragraph
+
+    <Heading>heading</Heading>
+
+    something
+    `
+    const mdast = mdxParse(code)
+    
+
+    mdastBfs(mdast, (x) => {
+        delete x.position
+    })
+    expect(mdast).toMatchInlineSnapshot(`
+      {
+        "children": [
+          {
+            "children": [
+              {
+                "type": "text",
+                "value": "Hello",
+              },
+            ],
+            "depth": 1,
+            "type": "heading",
+          },
+          {
+            "children": [
+              {
+                "type": "text",
+                "value": "i am a paragraph",
+              },
+            ],
+            "type": "paragraph",
+          },
+          {
+            "attributes": [],
+            "children": [
+              {
+                "type": "text",
+                "value": "heading",
+              },
+            ],
+            "name": "Heading",
+            "type": "mdxJsxFlowElement",
+          },
+          {
+            "children": [
+              {
+                "type": "text",
+                "value": "something",
+              },
+            ],
+            "type": "paragraph",
+          },
+        ],
+        "type": "root",
+      }
+    `)
+})
+
 test('basic', () => {
     expect(
         render(dedent`
         # Hello
 
         i am a paragraph
+
+        <Heading>heading</Heading>
         `),
     ).toMatchInlineSnapshot(`
       {
         "errors": [],
-        "html": "<h1>Hello</h1><p>i am a paragraph</p>",
+        "html": "<h1>Hello</h1><p>i am a paragraph</p><h1>heading</h1>",
         "result": <React.Fragment>
           <h1>
             Hello
@@ -37,6 +103,9 @@ test('basic', () => {
           <p>
             i am a paragraph
           </p>
+          <Heading>
+            heading
+          </Heading>
         </React.Fragment>,
       }
     `)
@@ -205,15 +274,13 @@ test('inline jsx', () => {
     ).toMatchInlineSnapshot(`
       {
         "errors": [],
-        "html": "<p><h1>hello</h1></p>",
+        "html": "<h1>hello</h1>",
         "result": <React.Fragment>
-          <p>
-            <Heading
-              level={2}
-            >
-              hello
-            </Heading>
-          </p>
+          <Heading
+            level={2}
+          >
+            hello
+          </Heading>
         </React.Fragment>,
       }
     `)
@@ -793,11 +860,41 @@ test('kitchen sink', () => {
     ).toMatchInlineSnapshot(`
       {
         "errors": [
+          {
+            "message": "Unsupported language no-highlight",
+          },
+          {
+            "message": "Unsupported language no-highlight",
+          },
+          {
+            "message": "Unsupported language no-highlight",
+          },
+          {
+            "message": "Unsupported language no-highlight",
+          },
+          {
+            "message": "Unsupported language no-highlight",
+          },
+          {
+            "message": "Unsupported language no-highlight",
+          },
+          {
+            "message": "Unsupported language no-highlight",
+          },
+          {
+            "message": "Unsupported language no-highlight",
+          },
           {
             "message": "Unsupported jsx component dl",
           },
+          {
+            "message": "Unsupported language no-highlight",
+          },
+          {
+            "message": "Unsupported language no-highlight",
+          },
         ],
-        "html": "<h1>Markdown Kitchen Sink</h1><p>This file is <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" title="">https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet</a> plus a few fixes and additions. Used by <a href="https://github.com/obedm503/bootmark" title="">obedm503/bootmark</a> to <a href="https://obedm503.github.io/bootmark/docs/markdown-cheatsheet.html" title="">demonstrate</a> it&#x27;s styling features.</p><p>This is intended as a quick reference and showcase. For more complete info, see <a href="http://daringfireball.net/projects/markdown/" title="">John Gruber&#x27;s original spec</a> and the <a href="http://github.github.com/github-flavored-markdown/" title="">Github-flavored Markdown info page</a>.</p><p>Note that there is also a <a href="./Markdown-Here-Cheatsheet" title="">Cheatsheet specific to Markdown Here</a> if that&#x27;s what you&#x27;re looking for. You can also check out <a href="./Other-Markdown-Tools" title="">more Markdown tools</a>.</p><h5>Table of Contents</h5><p><a href="#headers" title="">Headers</a><br/><a href="#emphasis" title="">Emphasis</a><br/><a href="#lists" title="">Lists</a><br/><a href="#links" title="">Links</a><br/><a href="#images" title="">Images</a><br/><a href="#code" title="">Code and Syntax Highlighting</a><br/><a href="#tables" title="">Tables</a><br/><a href="#blockquotes" title="">Blockquotes</a><br/><a href="#html" title="">Inline HTML</a><br/><a href="#hr" title="">Horizontal Rule</a><br/><a href="#lines" title="">Line Breaks</a><br/><a href="#videos" title="">YouTube Videos</a></p><a name="headers"></a><h2>Headers</h2><h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6><p>Alternatively, for H1 and H2, an underline-ish style:</p><h1>Alt-H1</h1><h2>Alt-H2</h2><h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6><p>Alternatively, for H1 and H2, an underline-ish style:</p><h1>Alt-H1</h1><h2>Alt-H2</h2><a name="emphasis"></a><h2>Emphasis</h2><pre><code>Emphasis, aka italics, with *asterisks* or _underscores_.
+        "html": "<link rel="preload" as="image" href="https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png"/><h1>Markdown Kitchen Sink</h1><p>This file is <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" title="">https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet</a> plus a few fixes and additions. Used by <a href="https://github.com/obedm503/bootmark" title="">obedm503/bootmark</a> to <a href="https://obedm503.github.io/bootmark/docs/markdown-cheatsheet.html" title="">demonstrate</a> it&#x27;s styling features.</p><p>This is intended as a quick reference and showcase. For more complete info, see <a href="http://daringfireball.net/projects/markdown/" title="">John Gruber&#x27;s original spec</a> and the <a href="http://github.github.com/github-flavored-markdown/" title="">Github-flavored Markdown info page</a>.</p><p>Note that there is also a <a href="./Markdown-Here-Cheatsheet" title="">Cheatsheet specific to Markdown Here</a> if that&#x27;s what you&#x27;re looking for. You can also check out <a href="./Other-Markdown-Tools" title="">more Markdown tools</a>.</p><h5>Table of Contents</h5><p><a href="#headers" title="">Headers</a><br/><a href="#emphasis" title="">Emphasis</a><br/><a href="#lists" title="">Lists</a><br/><a href="#links" title="">Links</a><br/><a href="#images" title="">Images</a><br/><a href="#code" title="">Code and Syntax Highlighting</a><br/><a href="#tables" title="">Tables</a><br/><a href="#blockquotes" title="">Blockquotes</a><br/><a href="#html" title="">Inline HTML</a><br/><a href="#hr" title="">Horizontal Rule</a><br/><a href="#lines" title="">Line Breaks</a><br/><a href="#videos" title="">YouTube Videos</a></p><a name="headers"></a><h2>Headers</h2><h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6><p>Alternatively, for H1 and H2, an underline-ish style:</p><h1>Alt-H1</h1><h2>Alt-H2</h2><h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6><p>Alternatively, for H1 and H2, an underline-ish style:</p><h1>Alt-H1</h1><h2>Alt-H2</h2><a name="emphasis"></a><h2>Emphasis</h2><pre><code>Emphasis, aka italics, with *asterisks* or _underscores_.
 
       Strong emphasis, aka bold, with **asterisks** or __underscores__.
 
@@ -850,11 +947,11 @@ test('kitchen sink', () => {
 
       [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png &quot;Logo Title Text 2&quot;</code></pre><p>Here&#x27;s our logo (hover to see the title text):</p><p>Inline-style:
       <img src="https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png" alt="alt text" title="Logo Title Text 1"/></p><p>Reference-style:
-      </p><a name="code"></a><h2>Code and Syntax Highlighting</h2><p>Code blocks are part of the Markdown spec, but syntax highlighting isn&#x27;t. However, many renderers -- like Github&#x27;s and <em>Markdown Here</em> -- support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. <em>Markdown Here</em> supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the <a href="http://softwaremaniacs.org/media/soft/highlight/test.html" title="">highlight.js demo page</a>.</p><pre><code>Inline \`code\` has \`back-ticks around\` it.</code></pre><p>Inline <code>code</code> has <code>back-ticks around</code> it.</p><p>Blocks of code are either fenced by lines with three back-ticks <code>\`\`\`</code>, or are indented with four spaces. I recommend only using the fenced code blocks -- they&#x27;re easier and only they support syntax highlighting.</p><pre><code>var s = &quot;JavaScript syntax highlighting&quot;;
-      alert(s);</code></pre><pre><code>s = &quot;Python syntax highlighting&quot;
+      </p><a name="code"></a><h2>Code and Syntax Highlighting</h2><p>Code blocks are part of the Markdown spec, but syntax highlighting isn&#x27;t. However, many renderers -- like Github&#x27;s and <em>Markdown Here</em> -- support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. <em>Markdown Here</em> supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the <a href="http://softwaremaniacs.org/media/soft/highlight/test.html" title="">highlight.js demo page</a>.</p><pre><code>Inline \`code\` has \`back-ticks around\` it.</code></pre><p>Inline <code>code</code> has <code>back-ticks around</code> it.</p><p>Blocks of code are either fenced by lines with three back-ticks <code>\`\`\`</code>, or are indented with four spaces. I recommend only using the fenced code blocks -- they&#x27;re easier and only they support syntax highlighting.</p><pre><code class="language-javascript">var s = &quot;JavaScript syntax highlighting&quot;;
+      alert(s);</code></pre><pre><code class="language-python">s = &quot;Python syntax highlighting&quot;
       print s</code></pre><pre><code>No language indicated, so no syntax highlighting. 
-      But let&#x27;s throw in a &amp;lt;b&amp;gt;tag&amp;lt;/b&amp;gt;.</code></pre><pre><code>var s = &quot;JavaScript syntax highlighting&quot;;
-      alert(s);</code></pre><pre><code>s = &quot;Python syntax highlighting&quot;
+      But let&#x27;s throw in a &amp;lt;b&amp;gt;tag&amp;lt;/b&amp;gt;.</code></pre><pre><code class="language-javascript">var s = &quot;JavaScript syntax highlighting&quot;;
+      alert(s);</code></pre><pre><code class="language-python">s = &quot;Python syntax highlighting&quot;
       print s</code></pre><pre><code>No language indicated, so no syntax highlighting in Markdown Here (varies on Github). 
       But let&#x27;s throw in a &lt;b&gt;tag&lt;/b&gt;.</code></pre><a name="tables"></a><h2>Tables</h2><p>Tables aren&#x27;t part of the core Markdown spec, but they are part of GFM and <em>Markdown Here</em> supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.</p><pre><code>Colons can be used to align columns.
 
@@ -1447,13 +1544,17 @@ test('kitchen sink', () => {
             , or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.
           </p>
           <pre>
-            <code>
+            <code
+              className="language-javascript"
+            >
               var s = "JavaScript syntax highlighting";
       alert(s);
             </code>
           </pre>
           <pre>
-            <code>
+            <code
+              className="language-python"
+            >
               s = "Python syntax highlighting"
       print s
             </code>
@@ -1465,13 +1566,17 @@ test('kitchen sink', () => {
             </code>
           </pre>
           <pre>
-            <code>
+            <code
+              className="language-javascript"
+            >
               var s = "JavaScript syntax highlighting";
       alert(s);
             </code>
           </pre>
           <pre>
-            <code>
+            <code
+              className="language-python"
+            >
               s = "Python syntax highlighting"
       print s
             </code>
@@ -1844,3 +1949,42 @@ test('kitchen sink', () => {
       }
     `)
 })
+
+test('code block rendering', () => {
+    const code = dedent`
+`
+    expect(
+        render(dedent`
+      \`\`\`typescript
+      const x = 1;
+      \`\`\`
+
+      \`\`\`invalid-language
+      const y = 2;
+      \`\`\`
+    `),
+    ).toMatchInlineSnapshot(`
+      {
+        "errors": [
+          {
+            "message": "Unsupported language invalid-language",
+          },
+        ],
+        "html": "<pre><code class="language-typescript">const x = 1;</code></pre><pre><code>const y = 2;</code></pre>",
+        "result": <React.Fragment>
+          <pre>
+            <code
+              className="language-typescript"
+            >
+              const x = 1;
+            </code>
+          </pre>
+          <pre>
+            <code>
+              const y = 2;
+            </code>
+          </pre>
+        </React.Fragment>,
+      }
+    `)
+})