fix(rehypeHeaderAnchor): trim anchor for better format with React Component (#2318)

Author: SoonIter

packages/core/src/node/mdx/rehypePlugins/__snapshots__/headerAnchor.test.ts.snap

@@ -203,3 +203,49 @@ MDXContent.__RSPRESS_PAGE_META = {};
 MDXContent.__RSPRESS_PAGE_META["inline-code.mdx"] = {"toc":[],"title":"Hello World \`inline code\`","headingTitle":"Hello World \`inline code\`","frontmatter":{}};
 "
 `;
+
+exports[`rehypeHeadAnchor > should support mdx component with trim 1`] = `
+"const frontmatter = {};
+import {jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+function _createMdxContent(props) {
+  const _components = {
+    a: "a",
+    h1: "h1",
+    ..._provideComponents(),
+    ...props.components
+  }, {Badge} = _components;
+  if (!Badge) _missingMdxReference("Badge", true);
+  return _jsxs(_components.h1, {
+    id: "hello-world",
+    children: [_jsx(_components.a, {
+      className: "header-anchor",
+      "aria-hidden": "true",
+      href: "#hello-world",
+      children: "#"
+    }), "Hello World ", _jsx(Badge, {
+      text: "WARNING"
+    })]
+  });
+}
+export default function MDXContent(props = {}) {
+  const {wrapper: MDXLayout} = {
+    ..._provideComponents(),
+    ...props.components
+  };
+  return MDXLayout ? _jsx(MDXLayout, {
+    ...props,
+    children: _jsx(_createMdxContent, {
+      ...props
+    })
+  }) : _createMdxContent(props);
+}
+function _missingMdxReference(id, component) {
+  throw new Error("Expected " + (component ? "component" : "object") + " \`" + id + "\` to be defined: you likely forgot to import, pass, or provide it.");
+}
+
+MDXContent.__RSPRESS_PAGE_META = {};
+
+MDXContent.__RSPRESS_PAGE_META["inline-code.mdx"] = {"toc":[],"title":"Hello World ","headingTitle":"Hello World ","frontmatter":{}};
+"
+`;

packages/core/src/node/mdx/rehypePlugins/headerAnchor.test.ts

@@ -68,6 +68,35 @@ describe('rehypeHeadAnchor', () => {
     const resultWithoutBackslash = await compile({
       source: `
 # Hello World \`inline code\` {#custom-id}
+`,
+      checkDeadLinks: false,
+      docDirectory: '/usr/rspress-project/docs',
+      filepath: '/usr/rspress-project/docs/inline-code.mdx',
+      config: null,
+      pluginDriver: null,
+      routeService: null,
+    });
+    expect(resultWithoutBackslash).toEqual(result);
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should support mdx component with trim', async () => {
+    const result = await compile({
+      source: `
+# Hello World <Badge text={"WARNING"} />
+`,
+      checkDeadLinks: false,
+      docDirectory: '/usr/rspress-project/docs',
+      filepath: '/usr/rspress-project/docs/inline-code.mdx',
+      config: null,
+      pluginDriver: null,
+      routeService: null,
+    });
+
+    // This is actually a wrong usage, but we need to be compatible.
+    const resultWithoutBackslash = await compile({
+      source: `
+# Hello World <Badge text={"WARNING"} />
 `,
       checkDeadLinks: false,
       docDirectory: '/usr/rspress-project/docs',

packages/core/src/node/mdx/rehypePlugins/headerAnchor.ts

@@ -21,7 +21,7 @@ export const rehypeHeaderAnchor: Plugin<[], Root> = () => {
       if (!node.properties?.id) {
         const [text, customId] = collectHeaderText(node);
         node.properties ??= {};
-        node.properties.id = customId || slugger.slug(text);
+        node.properties.id = customId || slugger.slug(text.trim());
       }
       // apply to headings
       node.children.unshift(create(node));

packages/core/src/node/mdx/remarkPlugins/toc.ts

@@ -64,7 +64,7 @@ export const parseToc = (tree: Root) => {
       if (node.depth === 1) {
         if (!title) title = text;
       } else {
-        const id = customId ? customId : slugger.slug(text);
+        const id = customId ? customId : slugger.slug(text.trim());
         const { depth } = node;
         toc.push({ id, text, depth });
       }

packages/plugin-api-docgen/static/global-components/API.tsx

@@ -36,7 +36,7 @@ const rehypeHeaderAnchor: Plugin<[], Root> = () => {
       if (!node.properties?.id) {
         const text = collectHeaderText(node);
         node.properties ??= {};
-        node.properties.id = slugger.slug(text);
+        node.properties.id = slugger.slug(text.trim());
       }
       // apply to headings
       node.children.unshift(create(node));