fix(v2): static phrasing content should be rendered correctly in TOC (#1992)

* fix(v2): static phrasing content should be rendered correctly in right TOC

* innerhtml in a

packages/docusaurus-mdx-loader/src/remark/rightToc/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`non text phrasing content 1`] = `
+"export const rightToc = [
+	{
+		value: '<em>Emphasis</em>',
+		id: 'emphasis',
+		children: [
+			{
+				value: '<strong>Importance</strong>',
+				id: 'importance',
+				children: []
+			}
+		]
+	},
+	{
+		value: '<del>Strikethrough</del>',
+		id: 'strikethrough',
+		children: []
+	},
+	{
+		value: '<i>HTML</i>',
+		id: 'ihtmli',
+		children: []
+	},
+	{
+		value: '<code>inline.code()</code>',
+		id: 'inlinecode',
+		children: []
+	}
+];
+
+## _Emphasis_
+
+### **Importance**
+
+## ~~Strikethrough~~
+
+## <i>HTML</i>
+
+## \`inline.code()\`
+"
+`;

packages/docusaurus-mdx-loader/src/remark/rightToc/__tests__/fixtures/non-text-content.mdx

@@ -0,0 +1,9 @@
+## *Emphasis*
+
+### **Importance**
+
+## ~~Strikethrough~~
+
+## <i>HTML</i>
+
+## `inline.code()`

packages/docusaurus-mdx-loader/src/remark/rightToc/__tests__/index.test.js

@@ -22,7 +22,12 @@ const processFixture = async (name, options) => {
   return result.toString();
 };
 
-test('no options', async () => {
+test('non text phrasing content', async () => {
+  const result = await processFixture('non-text-content');
+  expect(result).toMatchSnapshot();
+});
+
+test('text content', async () => {
   const result = await processFixture('just-content');
   expect(result).toMatchInlineSnapshot(`
 "export const rightToc = [

packages/docusaurus-mdx-loader/src/remark/rightToc/search.js

@@ -9,6 +9,29 @@ const toString = require('mdast-util-to-string');
 const visit = require('unist-util-visit');
 const slugs = require('github-slugger')();
 
+// https://github.com/syntax-tree/mdast#heading
+function toValue(node) {
+  if (node && node.type) {
+    switch (node.type) {
+      case 'text':
+        return node.value;
+      case 'heading':
+        return node.children.map(toValue).join('');
+      case 'inlineCode':
+        return `<code>${node.value}</code>`;
+      case 'emphasis':
+        return `<em>${node.children.map(toValue).join('')}</em>`;
+      case 'strong':
+        return `<strong>${node.children.map(toValue).join('')}</strong>`;
+      case 'delete':
+        return `<del>${node.children.map(toValue).join('')}</del>`;
+      default:
+        return toString(node);
+    }
+  }
+  return '';
+}
+
 // Visit all headings. We `slug` all headings (to account for
 // duplicates), but only take h2 and h3 headings.
 const search = node => {
@@ -28,7 +51,7 @@ const search = node => {
       return;
     }
 
-    const entry = {value, id: slug, children: []};
+    const entry = {value: toValue(child), id: slug, children: []};
 
     if (!headings.length || currentDepth >= child.depth) {
       headings.push(entry);

packages/docusaurus-theme-classic/src/theme/DocItem/index.js

@@ -30,15 +30,18 @@ function DocTOC({headings}) {
   );
 }
 
+/* eslint-disable jsx-a11y/control-has-associated-label */
 function Headings({headings, isChild}) {
   if (!headings.length) return null;
   return (
     <ul className={isChild ? '' : 'contents contents__left-border'}>
       {headings.map(heading => (
         <li key={heading.id}>
-          <a href={`#${heading.id}`} className={LINK_CLASS_NAME}>
-            {heading.value}
-          </a>
+          <a
+            href={`#${heading.id}`}
+            className={LINK_CLASS_NAME}
+            dangerouslySetInnerHTML={{__html: heading.value}}
+          />
           <Headings isChild headings={heading.children} />
         </li>
       ))}