From 8c1b447a9b0f48e8957a9bf05c4efbdd648502c5 Mon Sep 17 00:00:00 2001
From: Julien Ramboz <ramboz@users.noreply.github.com>
Date: Sun, 21 Apr 2019 18:38:15 -0700
Subject: [PATCH] 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   | 15 ++------------
 test/fixtures/heading-ids.json | 36 ++++++++++++++++++++++++++++++++++
 test/fixtures/heading-ids.md   |  4 +++-
 test/testMdastToVDOM.js        |  3 ++-
 4 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/src/utils/heading-handler.js b/src/utils/heading-handler.js
index 6114cf8ed..704fd9441 100644
--- a/src/utils/heading-handler.js
+++ b/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);
diff --git a/test/fixtures/heading-ids.json b/test/fixtures/heading-ids.json
index 211c42355..10e14b9bd 100644
--- a/test/fixtures/heading-ids.json
+++ b/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"
     }
   ]
 }
diff --git a/test/fixtures/heading-ids.md b/test/fixtures/heading-ids.md
index f7a281d93..230c66125 100644
--- a/test/fixtures/heading-ids.md
+++ b/test/fixtures/heading-ids.md
@@ -8,4 +8,6 @@
 
 ### Bar
 
-#### Bar-1
\ No newline at end of file
+#### Bar-1
+
+# **Foo** _bar_ `baz`
\ No newline at end of file
diff --git a/test/testMdastToVDOM.js b/test/testMdastToVDOM.js
index b1f911d1d..abd0ac1a7 100644
--- a/test/testMdastToVDOM.js
+++ b/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>`,
     );
   });