diff --git a/packages/website/webpack/mdx_table_of_contents.js b/packages/website/webpack/mdx_table_of_contents.js index 6e3a5e3595..f3f714e2e4 100644 --- a/packages/website/webpack/mdx_table_of_contents.js +++ b/packages/website/webpack/mdx_table_of_contents.js @@ -1,5 +1,3 @@ -const { toJSX } = require('@mdx-js/mdx/mdx-hast-to-jsx'); - const MIN_HEADING_LEVEL = 1; const MAX_HEADING_LEVEL = 3; @@ -63,15 +61,28 @@ function isSlugifiedSection(node) { return node.tagName === 'section' && node.properties && node.properties.id && node.properties.depth; } +// Because of autolinking headings earlier (at remark stage), the headings (nodes) +// contain an anchor tag next to the title, we only want to render the title. +// Unless there is no title, then we render whatever nodes we get after the anchor + function toFragment(nodes) { - // Because of autolinking headings earlier (at remark stage), the headings (nodes) - // contain an anchor tag next to the title, we only want to render the text. - // Unless there is no text, then we render whatever nodes we get in a Fragment - const textNode = nodes.find(node => node.type === 'text'); - if (textNode) { - return JSON.stringify(textNode.value); + const nodesCopy = [...nodes]; // We copy not to mutate the original nodes array + nodesCopy.shift(); // Remove the heading anchor created by remark_autolink_headings + if (nodesCopy.length === 1 && nodesCopy[0].type === 'text') { + return JSON.stringify(nodesCopy[0].value); + } else { + const textNodes = []; + for (node of nodesCopy) { + if (node.type === 'text') { + textNodes.push(node.value); + } else { + // For nodes other than text (e.g. anchors) find child node that containes the text + childTextNode = node.children.find(child => child.type === 'text'); + textNodes.push(childTextNode.value); + } + } + return `${textNodes.join('')}`; } - return '' + nodes.map(toJSX).join('') + ''; } function tableOfContentsListSerializer(nodes, indent = 0) {