build(aio): move autolink-headings to post-processing (#16336)

The autolinking is now done on the `renderedContent` which means it also
captures and autolinks headings that were generated outside of markdown.

PR Close #16336

aio/tools/transforms/angular-base-package/index.js

@@ -113,6 +113,13 @@ module.exports = new Package('angular-base', [
     ];
   })
 
+
+  .config(function(postProcessHtml) {
+    postProcessHtml.plugins = [
+      require('./post-processors/autolink-headings')
+    ];
+  })
+
   .config(function(convertToJsonProcessor) {
     convertToJsonProcessor.docTypes = [];
   });

aio/tools/transforms/angular-base-package/post-processors/autolink-headings.js

@@ -0,0 +1,22 @@
+const slug = require('rehype-slug');
+const link = require('rehype-autolink-headings');
+
+/**
+ * Get remark to inject anchors into headings
+ */
+module.exports = [
+  slug,
+  [link, {
+    properties: {
+      title: 'Link to this heading',
+      className: ['header-link'],
+      'aria-hidden': 'true'
+    },
+    content: {
+      type: 'element',
+      tagName: 'i',
+      properties: {className: ['material-icons']},
+      children: [{ type: 'text', value: 'link' }]
+    }
+  }]
+];

aio/tools/transforms/angular-base-package/post-processors/autolink-headings.spec.js

@@ -0,0 +1,30 @@
+const processorFactory = require('../../post-process-package/processors/post-process-html');
+const plugin = require('./autolink-headings');
+
+describe('autolink-headings postprocessor', () => {
+  let processor;
+
+  beforeEach(() => {
+    processor = processorFactory();
+    processor.docTypes = ['a'];
+    processor.plugins = [plugin];
+  });
+
+  it('should add anchors to headings', () => {
+    const docs = [ {
+      docType: 'a',
+      renderedContent: `
+        <h1>Heading 1</h2>
+        <h2>Heading with <strong>bold</strong></h2>
+        <h3>Heading with encoded chars &#x26;</h3>
+    `
+    }];
+    processor.$process(docs);
+    expect(docs[0].renderedContent).toEqual(`
+        <h1 id="heading-1"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-1"><i class="material-icons">link</i></a>Heading 1</h1>
+        <h2 id="heading-with-bold"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-bold"><i class="material-icons">link</i></a>Heading with <strong>bold</strong></h2>
+        <h3 id="heading-with-encoded-chars-"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-encoded-chars-"><i class="material-icons">link</i></a>Heading with encoded chars &#x26;</h3>
+    `);
+  });
+});
+