fix(html pipe): Generate proper identifiers for complex headings (#273)

Properly support complex headers that include child elements (strong, em, code, etc.) when
automatically generating the heading identifiers

fix #26

src/utils/heading-handler.js

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 const fallback = require('mdast-util-to-hast/lib/handlers/heading');
+const toString = require('mdast-util-to-string');
 const GithubSlugger = require('github-slugger');
 
 /**
@@ -25,18 +26,6 @@ class HeadingHandler {
     this.slugger = new GithubSlugger();
   }
 
-  /**
-   * Gets the text content for the specified heading.
-   * @param {UnistParent~Heading} heading The heading node
-   * @returns {string} The text content for the heading
-   */
-  static getTextContent(heading) {
-    return heading.children
-      .filter(el => el.type === 'text')
-      .map(el => el.value)
-      .join('').trim();
-  }
-
   /**
    * Reset the heading counter
    */
@@ -50,7 +39,7 @@ class HeadingHandler {
   handler() {
     return (h, node) => {
       // Prepare the heading id
-      const headingIdentifier = this.slugger.slug(HeadingHandler.getTextContent(node));
+      const headingIdentifier = this.slugger.slug(toString(node));
 
       // Inject the id after transformation
       const n = Object.assign({}, node);

test/fixtures/heading-ids.json

@@ -59,6 +59,42 @@
       ],
       "depth": 4,
       "type": "heading"
+    },
+    {
+      "children": [
+        {
+          "children": [
+            {
+              "type": "text",
+              "value": "Foo"
+            }
+          ],
+          "type": "strong"
+        },
+        {
+          "type": "text",
+          "value": " "
+        },
+        {
+          "children": [
+            {
+              "type": "text",
+              "value": "Bar"
+            }
+          ],
+          "type": "emphasis"
+        },
+        {
+          "type": "text",
+          "value": " "
+        },
+        {
+          "type": "inlineCode",
+          "value": "Baz"
+        }
+      ],
+      "depth": 1,
+      "type": "heading"
     }
   ]
 }

test/fixtures/heading-ids.md

@@ -8,4 +8,6 @@
 
 ### Bar
 
-#### Bar-1
+#### Bar-1
+
+# **Foo** _bar_ `baz`

test/testMdastToVDOM.js

@@ -64,7 +64,8 @@ describe('Test MDAST to VDOM Transformation', () => {
       <h3 id="baz">Baz</h1>
       <h2 id="qux">Qux</h2>
       <h3 id="bar-1">Bar</h3>
-      <h4 id="bar-1-1">Bar-1</h4>`,
+      <h4 id="bar-1-1">Bar-1</h4>
+      <h1 id="foo-bar-baz"><strong>Foo</strong> <em>Bar</em> <code>Baz</code></h1>`,
     );
   });