[v3] remove possible links in toc elements (#2427)

Author: Dimitri POSTOLOV

.changeset/two-scissors-prove.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+remove possible links in toc elements

packages/nextra-theme-blog/src/mdx-theme.tsx

@@ -63,7 +63,6 @@ const A = ({ children, href = '', ...props }: ComponentProps<'a'>) => {
     return (
       <a href={href} target="_blank" rel="noreferrer" {...props}>
         {children}
-        <span className="_sr-only _select-none"> (opens in a new tab)</span>
       </a>
     )
   }

packages/nextra-theme-docs/src/components/anchor.tsx

@@ -22,7 +22,6 @@ export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(function (
         {...props}
       >
         {children}
-        <span className="_sr-only _select-none"> (opens in a new tab)</span>
       </a>
     )
   }

packages/nextra-theme-docs/src/components/toc.tsx

@@ -1,7 +1,7 @@
 import cn from 'clsx'
 import type { Heading } from 'nextra'
 import type { ReactElement } from 'react'
-import { useEffect, useRef } from 'react'
+import { Children, cloneElement, useEffect, useRef } from 'react'
 import scrollIntoView from 'scroll-into-view-if-needed'
 import { useActiveAnchor, useThemeConfig } from '../contexts'
 import { renderComponent } from '../utils'
@@ -18,6 +18,26 @@ const linkClassName = cn(
   'contrast-more:_text-gray-800 contrast-more:dark:_text-gray-50'
 )
 
+type TOCElement = ReactElement | string
+
+function isLink(node: TOCElement): node is ReactElement {
+  return typeof node !== 'string' && !!node.props.href
+}
+
+function removeLinks(node: TOCElement): TOCElement[] {
+  return Children.map(node, child => {
+    if (isLink(child)) {
+      child = child.props.children
+    }
+
+    return typeof child === 'string'
+      ? child
+      : cloneElement(child, {
+          children: removeLinks(child.props.children)
+        })
+  })
+}
+
 export function TOC({ toc, filePath }: TOCProps): ReactElement {
   const activeAnchor = useActiveAnchor()
   const tocRef = useRef<HTMLDivElement>(null)
@@ -84,7 +104,7 @@ export function TOC({ toc, filePath }: TOCProps): ReactElement {
                     'contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _w-full _break-words'
                   )}
                 >
-                  {value}
+                  {removeLinks(value)}
                 </a>
               </li>
             ))}