add tests for heading + fixes

unjs · Feb 19, 2024 · eadaefa · eadaefa
1 parent 0e6b28b
commit eadaefa
Show file tree

Hide file tree

Showing 9 changed files with 457 additions and 142 deletions.
diff --git a/README.md b/README.md
@@ -90,10 +90,10 @@ Format a string as a code block.
 
 **Example:**
 
-```js
+````js
 md.codeBlock('console.log("Hello, World!");', "js");
 // => "```js\nconsole.log("Hello, World!");\n```"
-```
+````
 
 ### `heading(text, level)`
 
@@ -149,6 +149,7 @@ Render a markdown link.
 md.link("https://www.google.com", "Google");
 // => "[Google](https://www.google.com)"
 ```
+
 ```js
 md.link("https://www.google.com", "Google", { external: true });
 // => "<a href="https://www.google.com" title="Google" target="_blank">Google</a>"
@@ -164,6 +165,7 @@ Render a markdown ordered or unordered list.
 md.list(["Item 1", "Item 2", "Item 3"]);
 // => "- Item 1\n- Item 2\n- Item 3"
 ```
+
 ```js
 md.list(["Item 1", "Item 2", "Item 3"], { ordered: true });
 // => "1. Item 1\n2. Item 2\n3. Item 3"
@@ -188,17 +190,16 @@ Render a markdown table.
 
 ```js
 md.table({
- columns: ["Breed", "Origin", "Size", "Temperament"],
- rows: [
-   ["Abyssinian", "Egypt", "Medium", "Active"],
-   ["Aegean", "Greece", "Medium", "Active"],
-   ["American Bobtail", "United States", "Medium", "Active"],
-   ["Applehead Siamese", "Thailand", "Medium", "Active"],
+  columns: ["Breed", "Origin", "Size", "Temperament"],
+  rows: [
+    ["Abyssinian", "Egypt", "Medium", "Active"],
+    ["Aegean", "Greece", "Medium", "Active"],
+    ["American Bobtail", "United States", "Medium", "Active"],
+    ["Applehead Siamese", "Thailand", "Medium", "Active"],
   ],
 });
 ```
 
-
 <!-- /automd -->
 
 <!-- automd:jsdocs src="./src/parser/index" group="parsing_utils" -->
@@ -247,8 +248,7 @@ const parser = await initMdAstParser();
 const { tree } = parser.parse("# Hello, *world*!");
 ```
 
-
-<!-- /AUTOMD -->
+<!-- /automd -->
 
 ## Development
 

diff --git a/src/parser/_utils.ts b/src/parser/_utils.ts
@@ -0,0 +1,19 @@
+export function mergeStrings<T extends Array<unknown>>(arr: T): T {
+  const res = [] as unknown as T;
+  let strBuff: string[] = [];
+  for (const el of arr) {
+    if (typeof el === "string") {
+      strBuff.push(el);
+    } else {
+      if (strBuff.length > 0) {
+        res.push(strBuff.join(""));
+        strBuff = [];
+      }
+      res.push(el);
+    }
+  }
+  if (strBuff.length > 0) {
+    res.push(strBuff.join(""));
+  }
+  return res;
+}
diff --git a/src/parser/parsers/md4w.ts b/src/parser/parsers/md4w.ts
@@ -1,5 +1,6 @@
 import type { MDTree, MDNode, Options } from "md4w";
 import type { Node, Type, Parser, ParsedTree } from "../types";
+import { mergeStrings } from "../_utils";
 
 /**
  *
@@ -54,10 +55,7 @@ function _normalizeTree(tree: MDTree | MDNode): ParsedTree {
       node.children =
         node.type === "code"
           ? [child.children.join("")]
-          : _normalizeTree(child);
-      if (!node.children.some((n) => typeof n !== "string")) {
-        node.children = [node.children.join("")];
-      }
+          : mergeStrings(_normalizeTree(child));
     }
     if (child.props) {
       node.props = child.props as any;

diff --git a/src/parser/parsers/mdast.ts b/src/parser/parsers/mdast.ts
@@ -1,6 +1,7 @@
 import type { RootContent, Root } from "mdast";
 import type { Options } from "mdast-util-from-markdown";
 import type { ParsedTree, Parser, Node, Type } from "../types";
+import { mergeStrings } from "../_utils";
 
 /**
  *
@@ -71,14 +72,9 @@ function _normalizeTree(_node: Root | RootContent): ParsedTree {
   }
 
   if ("children" in _node) {
-    node.children = _node.children.flatMap((c) => _normalizeTree(c));
-
-    if (
-      node.type === "p" &&
-      !node.children.some((c) => typeof c !== "string")
-    ) {
-      node.children = [node.children.join("")];
-    }
+    node.children = mergeStrings(
+      _node.children.flatMap((c) => _normalizeTree(c)),
+    );
 
     if (_node.type === "listItem") {
       node.children = node.children?.flatMap((c) => {
@@ -108,7 +104,6 @@ const typeMap: Partial<Record<string, Type>> = {
   inlineCode: "code",
   delete: "s",
   emphasis: "em",
-  heading: "h1",
   link: "a",
   listItem: "li",
   paragraph: "p",
@@ -122,5 +117,8 @@ function getType(node: Root | RootContent): Type {
   if (node.type === "list") {
     return node.ordered ? "ol" : "ul";
   }
+  if (node.type === "heading") {
+    return `h${node.depth}` as Type;
+  }
   return typeMap[node.type] || (node.type as Type);
 }
diff --git a/test/fixtures/simple.md b/test/fixtures/simple.md
@@ -1,8 +1,17 @@
 initial paragraph
 
-# Title
+# Markdown Testing Page
 
-> blockquote
+## Formatting
+
+**bold**
+_emphasis_
+
+## Links
+
+[link](https://example.com)
+
+## Code
 
 ```js
 import { foo } from "bar";
@@ -12,17 +21,29 @@ console.log(foo());
 
 `inline code`
 
-**bold**
-_emphasis_
-[link](https://example.com)
+## Lists
 
 1. first `item`
 2. second item
    - nested item
 
----
-
-This is hardly a "corner case," for some reason.
+## Image
 
 ![image alt](https://example.com/image.png "this is an image")
 ![](https://example.com/image.png)
+
+## Headings
+
+### h3 with `code`
+
+#### 🐈 h4 with emoji
+
+#### h5 with **bold** text
+
+###### h6 with [link](./link)
+
+## Other
+
+> blockquote
+
+This is hardly a "corner case," for some reason.
diff --git a/test/snapshots/simple.gh.html b/test/snapshots/simple.gh.html
@@ -1,15 +1,16 @@
-<!-- hash:csKuMg9ijM --><p>initial paragraph</p>
-<h1><a id="user-content-title" class="anchor" aria-hidden="true" tabindex="-1" href="#title"><span aria-hidden="true" class="octicon octicon-link"></span></a>Title</h1>
-<blockquote>
-<p>blockquote</p>
-</blockquote>
+<!-- hash:TY62NLeTC5 --><p>initial paragraph</p>
+<h1><a id="user-content-markdown-testing-page" class="anchor" aria-hidden="true" tabindex="-1" href="#markdown-testing-page"><span aria-hidden="true" class="octicon octicon-link"></span></a>Markdown Testing Page</h1>
+<h2><a id="user-content-formatting" class="anchor" aria-hidden="true" tabindex="-1" href="#formatting"><span aria-hidden="true" class="octicon octicon-link"></span></a>Formatting</h2>
+<p><strong>bold</strong>
+<em>emphasis</em></p>
+<h2><a id="user-content-links" class="anchor" aria-hidden="true" tabindex="-1" href="#links"><span aria-hidden="true" class="octicon octicon-link"></span></a>Links</h2>
+<p><a href="https://example.com" rel="nofollow">link</a></p>
+<h2><a id="user-content-code" class="anchor" aria-hidden="true" tabindex="-1" href="#code"><span aria-hidden="true" class="octicon octicon-link"></span></a>Code</h2>
 <div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">foo</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"bar"</span><span class="pl-kos">;</span>
 
 <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">foo</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
 <p><code>inline code</code></p>
-<p><strong>bold</strong>
-<em>emphasis</em>
-<a href="https://example.com" rel="nofollow">link</a></p>
+<h2><a id="user-content-lists" class="anchor" aria-hidden="true" tabindex="-1" href="#lists"><span aria-hidden="true" class="octicon octicon-link"></span></a>Lists</h2>
 <ol>
 <li>first <code>item</code>
 </li>
@@ -19,7 +20,18 @@ <h1><a id="user-content-title" class="anchor" aria-hidden="true" tabindex="-1" h
 </ul>
 </li>
 </ol>
-<hr>
-<p>This is hardly a "corner case," for some reason.</p>
+<h2><a id="user-content-image" class="anchor" aria-hidden="true" tabindex="-1" href="#image"><span aria-hidden="true" class="octicon octicon-link"></span></a>Image</h2>
 <p><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/2d169ef51bd1c6d36c670f61a0d875f15322cc65b553112a2056e4676e3a2262/68747470733a2f2f6578616d706c652e636f6d2f696d6167652e706e67"><img src="https://camo.githubusercontent.com/2d169ef51bd1c6d36c670f61a0d875f15322cc65b553112a2056e4676e3a2262/68747470733a2f2f6578616d706c652e636f6d2f696d6167652e706e67" alt="image alt" title="this is an image" data-canonical-src="https://example.com/image.png" style="max-width: 100%;"></a>
 <a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/2d169ef51bd1c6d36c670f61a0d875f15322cc65b553112a2056e4676e3a2262/68747470733a2f2f6578616d706c652e636f6d2f696d6167652e706e67"><img src="https://camo.githubusercontent.com/2d169ef51bd1c6d36c670f61a0d875f15322cc65b553112a2056e4676e3a2262/68747470733a2f2f6578616d706c652e636f6d2f696d6167652e706e67" alt="" data-canonical-src="https://example.com/image.png" style="max-width: 100%;"></a></p>
+<h2><a id="user-content-headings" class="anchor" aria-hidden="true" tabindex="-1" href="#headings"><span aria-hidden="true" class="octicon octicon-link"></span></a>Headings</h2>
+<h3><a id="user-content-h3-with-code" class="anchor" aria-hidden="true" tabindex="-1" href="#h3-with-code"><span aria-hidden="true" class="octicon octicon-link"></span></a>h3 with <code>code</code>
+</h3>
+<h4><a id="user-content--h4-with-emoji" class="anchor" aria-hidden="true" tabindex="-1" href="#-h4-with-emoji"><span aria-hidden="true" class="octicon octicon-link"></span></a>🐈 h4 with emoji</h4>
+<h4><a id="user-content-h5-with-bold-text" class="anchor" aria-hidden="true" tabindex="-1" href="#h5-with-bold-text"><span aria-hidden="true" class="octicon octicon-link"></span></a>h5 with <strong>bold</strong> text</h4>
+<h6><a id="user-content-h6-with-link" class="anchor" aria-hidden="true" tabindex="-1" href="#h6-with-link"><span aria-hidden="true" class="octicon octicon-link"></span></a>h6 with <a href="./link">link</a>
+</h6>
+<h2><a id="user-content-other" class="anchor" aria-hidden="true" tabindex="-1" href="#other"><span aria-hidden="true" class="octicon octicon-link"></span></a>Other</h2>
+<blockquote>
+<p>blockquote</p>
+</blockquote>
+<p>This is hardly a "corner case," for some reason.</p>