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-api-package/index.js

@@ -107,9 +107,10 @@ module.exports = new Package('angular-api', [basePackage, typeScriptPackage])
     });
   })
 
-  .config(function(convertToJsonProcessor, EXPORT_DOC_TYPES) {
+  .config(function(convertToJsonProcessor, postProcessHtml, EXPORT_DOC_TYPES) {
     const DOCS_TO_CONVERT = EXPORT_DOC_TYPES.concat([
       'decorator', 'directive', 'pipe', 'module'
     ]);
     convertToJsonProcessor.docTypes = convertToJsonProcessor.docTypes.concat(DOCS_TO_CONVERT);
+    postProcessHtml.docTypes = convertToJsonProcessor.docTypes.concat(DOCS_TO_CONVERT);
   });

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>
+    `);
+  });
+});
+

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

@@ -112,6 +112,7 @@ module.exports = new Package('angular-content', [basePackage, contentPackage])
   })
 
   // We want the content files to be converted
-  .config(function(convertToJsonProcessor) {
+  .config(function(convertToJsonProcessor, postProcessHtml) {
     convertToJsonProcessor.docTypes.push('content');
+    postProcessHtml.docTypes.push('content');
   });

aio/tools/transforms/remark-package/services/renderMarkdown.js

@@ -1,6 +1,4 @@
 const remark = require('remark');
-const slug = require('remark-slug');
-const autolinkHeadings = require('remark-autolink-headings');
 const html = require('remark-html');
 
 /**
@@ -17,8 +15,6 @@ module.exports = function renderMarkdown() {
                     // .use(() => tree => {
                     //   console.log(require('util').inspect(tree, { colors: true, depth: 4 }));
                     // })
-                    .use(slug)
-                    .use(autolinkHeadings)
                     .use(html);
 
   return function renderMarkdownImpl(content) {
@@ -107,13 +103,6 @@ module.exports = function renderMarkdown() {
   }
 };
 
-
-
-
-
-
-
-
 /**
  * matchRecursiveRegExp
  *

aio/tools/transforms/remark-package/services/renderMarkdown.spec.js

@@ -16,7 +16,7 @@ describe('remark: renderMarkdown service', () => {
     const output = renderMarkdown(content);
 
     expect(output).toEqual(
-        '<h1 id="heading-1"><a href="#heading-1" aria-hidden="true"><span class="icon icon-link"></span></a>heading 1</h1>\n' +
+        '<h1>heading 1</h1>\n' +
         '<p>A paragraph with <strong>bold</strong> and <em>italic</em>.</p>\n' +
         '<ul>\n' +
         '<li>List item 1</li>\n' +
@@ -67,14 +67,4 @@ describe('remark: renderMarkdown service', () => {
     const output = renderMarkdown(content);
     expect(output).toEqual('<p>some text</p>\n<p>    indented text</p>\n<p>other text</p>\n');
   });
-
-  it('should add id slugs and links to headings', () => {
-    const content = '# heading 1\n\nSome text\n\n## heading 2\n\nMore text';
-    const output = renderMarkdown(content);
-    expect(output).toEqual(
-      '<h1 id="heading-1"><a href="#heading-1" aria-hidden="true"><span class="icon icon-link"></span></a>heading 1</h1>\n' +
-      '<p>Some text</p>\n' +
-      '<h2 id="heading-2"><a href="#heading-2" aria-hidden="true"><span class="icon icon-link"></span></a>heading 2</h2>\n' +
-      '<p>More text</p>\n');
-  });
 });