[docs] Fix emojis/html being included in toc

docs/src/modules/utils/parseMarkdown.js

@@ -119,6 +119,12 @@ const externs = [
   'https://ui-kit.co/',
 ];
 
+/**
+ *
+ * @param {object} config
+ * @param {() => string} config.requireRaw - returnvalue of require.context
+ * @param {string} config.pageFilename - filename relative to nextjs pages directory
+ */
 export function prepareMarkdown(config) {
   const { pageFilename, requireRaw } = config;
 
@@ -166,13 +172,20 @@ ${headers.components
 
         return render(content, {
           highlight: prism,
-          heading: (headingText, level) => {
+          heading: (headingHtml, level) => {
             // Small title. No need for an anchor.
             // It's reducing the risk of duplicated id and it's fewer elements in the DOM.
             if (level >= 4) {
-              return `<h${level}>${headingText}</h${level}>`;
+              return `<h${level}>${headingHtml}</h${level}>`;
             }
 
+            const headingText = headingHtml
+              .replace(
+                /([\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])\uFE0F?/g,
+                '',
+              ) // remove emojis
+              .replace(/<\/?[^>]+(>|$)/g, '') // remove HTML
+              .trim();
             const hash = textToHash(headingText, headingHashes);
 
             /**
@@ -201,7 +214,7 @@ ${headers.components
             return [
               `<h${level}>`,
               `<a class="anchor-link" id="${hash}"></a>`,
-              headingText,
+              headingHtml,
               `<a class="anchor-link-style" aria-hidden="true" aria-label="anchor" href="#${hash}">`,
               '<svg><use xlink:href="#anchor-link-icon" /></svg>',
               '</a>',

docs/src/modules/utils/parseMarkdown.test.js

@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import { getContents } from './parseMarkdown';
+import { getContents, prepareMarkdown } from './parseMarkdown';
 
 describe('parseMarkdown', () => {
   describe('getContents', () => {
@@ -23,4 +23,43 @@ describe('parseMarkdown', () => {
       });
     });
   });
+
+  describe('prepareMarkdown', () => {
+    it('returns the table of contents with html and emojis stripped', () => {
+      const markdown = `
+# Support
+## Community help (free)
+### GitHub <img src="/static/images/logos/github.svg" width="24" height="24" alt="GitHub logo" loading="lazy" />
+### Unofficial 👍
+### Warning ⚠️
+`;
+      // mock require.context
+      function requireRaw() {
+        return markdown;
+      }
+      requireRaw.keys = () => ['index.md'];
+
+      const {
+        docs: {
+          en: { toc },
+        },
+      } = prepareMarkdown({
+        pageFilename: 'test',
+        requireRaw,
+      });
+
+      expect(toc).to.have.deep.ordered.members([
+        {
+          children: [
+            { hash: 'github', level: 3, text: 'GitHub' },
+            { hash: 'unofficial', level: 3, text: 'Unofficial' },
+            { hash: 'warning', level: 3, text: 'Warning' },
+          ],
+          hash: 'community-help-free',
+          level: 2,
+          text: 'Community help (free)',
+        },
+      ]);
+    });
+  });
 });

docs/src/modules/utils/textToHash.js

@@ -23,7 +23,7 @@ export default function textToHash(text, unique = {}) {
         .replace(/=&gt;|&lt;| \/&gt;|<code>|<\/code>|&#39;/g, '')
         .replace(/[!@#$%^&*()=_+[\]{}`~;:'"|,.<>/?\s]+/g, '-')
         .replace(
-          /([\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
+          /([\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])\uFE0F?/g,
           '',
         ) // remove emojis
         .replace(/-+/g, '-')