Move all heading id assignment to after postprocess (#1635)

packages/cli/test/functional/test_site/expected/index.html

@@ -284,6 +284,12 @@ <h1 id="panel-with-heading-with-keyword"><span id="panel-with-heading-with-keywo
             <h1 id="keyword-should-be-tagged-to-the-panel-heading-not-this-heading"><span id="keyword-should-be-tagged-to-the-panel-heading-not-this-heading" class="anchor"></span>Keyword should be tagged to the panel heading, not this heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-the-panel-heading-not-this-heading" onclick="event.stopPropagation()"></a></h1>
             <p><span class="keyword">panel keyword</span></p>
           </panel>
+          <h1 id="heading-fragment-with-leading-spaces-and-newline"><span id="heading-fragment-with-leading-spaces-and-newline" class="anchor"></span>Heading <div>
+              <pre><code v-pre>Fragment with leading spaces and newline
+</code></pre>
+            </div><a class="fa fa-anchor" href="#heading-fragment-with-leading-spaces-and-newline" onclick="event.stopPropagation()"></a></h1>
+          <p>The <code class="hljs inline no-lang" v-pre>id</code> for the above heading should be <code class="hljs inline no-lang" v-pre>heading-fragment-with-leading-spaces-and-newline</code> in total.
+            This test ensures heading ids are assigned last (e.g. after <code class="hljs inline no-lang" v-pre>&lt;include /&gt;</code>s are processed).</p>
           <h1 id="heading-with-included-keyword"><span id="heading-with-included-keyword" class="anchor"></span>Heading with included keyword<a class="fa fa-anchor" href="#heading-with-included-keyword" onclick="event.stopPropagation()"></a></h1>
           <div>
             <p><span class="keyword">included keyword</span></p>
@@ -753,6 +759,9 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
             <a class="nav-link py-1" href="#panel-without-heading-with-keyword">Panel without heading with keyword&#x200E;</a>
             <a class="nav-link py-1" href="#keyword-should-be-tagged-to-this-heading-not-the-panel-heading">Keyword should be tagged to this heading, not the panel heading&#x200E;</a>
             <a class="nav-link py-1" href="#panel-with-heading-with-keyword">Panel with heading with keyword&#x200E;</a>
+            <a class="nav-link py-1" href="#heading-fragment-with-leading-spaces-and-newline">Heading
+              Fragment with leading spaces and newline
+              &#x200E;</a>
             <a class="nav-link py-1" href="#heading-with-included-keyword">Heading with included keyword&#x200E;</a>
             <a class="nav-link py-1" href="#included-heading">Included Heading&#x200E;</a>
             <a class="nav-link py-1" href="#heading-with-nested-keyword">Heading with nested keyword&#x200E;</a>

packages/cli/test/functional/test_site/expected/siteData.json

@@ -36,6 +36,7 @@
         "feature-list": "Feature list",
         "heading-with-multiple-keywords": "Heading with multiple keywords",
         "heading-with-keyword-in-panel": "Heading with keyword in panel",
+        "heading-fragment-with-leading-spaces-and-newline": "Heading \nFragment with leading spaces and newline\n",
         "heading-with-included-keyword": "Heading with included keyword",
         "included-heading": "Included Heading",
         "heading-with-nested-keyword": "Heading with nested keyword",

packages/cli/test/functional/test_site/expected/testVariableContainsInclude.html

@@ -206,7 +206,7 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
         </div>
       </overlay-source>
       <div id="content-wrapper" class="fixed-header-padding">
-        <h1 id="content-fragment"><span id="content-fragment" class="anchor"></span><span>content fragment</span></h1>
+        <h1 id="content-fragment"><span id="content-fragment" class="anchor"></span><span>content fragment</span><a class="fa fa-anchor" href="#content-fragment" onclick="event.stopPropagation()"></a></h1>
         <i class="fa fa-arrow-circle-up fa-lg d-print-none" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i>
       </div>
       <overlay-source id="page-nav" class="fixed-header-padding" tag-name="nav" to="page-nav">

packages/cli/test/functional/test_site/index.md

@@ -103,6 +103,11 @@ Page Variable with {{ global_variable }}
   <span class="keyword">panel keyword</span>
 </panel>
 
+# Heading <include src="testTrimIncludeFragment.mbdf#fragment" />
+
+The `id` for the above heading should be `heading-fragment-with-leading-spaces-and-newline` in total.
+This test ensures heading ids are assigned last (e.g. after `<include />`s are processed).
+
 # Heading with included keyword
 <include src="testKeyword.md" />
 

packages/core/src/html/NodeProcessor.js

@@ -270,12 +270,6 @@ class NodeProcessor {
       linkProcessor.collectSource(node, this.config.rootPath, this.config.baseUrl, this.pageSources);
     }
 
-    const isHeadingTag = (/^h[1-6]$/).test(node.name);
-
-    if (isHeadingTag && !node.attribs.id) {
-      setHeadingId(node, this.config);
-    }
-
     switch (node.name) {
     case 'md':
       node.name = 'span';
@@ -305,8 +299,8 @@ class NodeProcessor {
 
     addSitePageNavPortal(node);
 
+    const isHeadingTag = (/^h[1-6]$/).test(node.name);
     if (isHeadingTag && !node.attribs.id) {
-      // do this one more time, in case the first one assigned a blank id
       setHeadingId(node, this.config);
     }
 
@@ -315,6 +309,8 @@ class NodeProcessor {
       cheerio(node).prepend(`<span id="${node.attribs.id}" class="anchor"></span>`);
     }
 
+    this.pluginManager.postProcessNode(node, this.config);
+
     return node;
   }
 

packages/core/src/plugins/Plugin.js

@@ -115,6 +115,14 @@ class Plugin {
     this.plugin.processNode(this.pluginOptions, node, config);
   }
 
+  postProcessNode(node, config) {
+    if (!this.plugin.postProcessNode) {
+      return;
+    }
+
+    this.plugin.postProcessNode(this.pluginOptions, node, config);
+  }
+
   getTagConfig() {
     return this.plugin.tagConfig;
   }

packages/core/src/plugins/PluginManager.js

@@ -186,6 +186,12 @@ class PluginManager {
       plugin.processNode(node, this.config);
     });
   }
+
+  postProcessNode(node) {
+    Object.values(this.plugins).forEach((plugin) => {
+      plugin.postProcessNode(node, this.config);
+    });
+  }
 }
 
 // Static property for easy access in linkProcessor

packages/core/src/plugins/default/markbind-plugin-anchors.js

@@ -9,7 +9,7 @@ const HEADER_REGEX = new RegExp('^h[1-6]$');
  */
 module.exports = {
   getLinks: () => [`<link rel="stylesheet" href="${CSS_FILE_NAME}">`],
-  processNode: (pluginContext, node) => {
+  postProcessNode: (pluginContext, node) => {
     if (HEADER_REGEX.test(node.name) && node.attribs.id) {
       cheerio(node).append(
         `<a class="fa fa-anchor" href="#${node.attribs.id}" onclick="event.stopPropagation()"></a>`);