fix unclickable links in TOC / allow passing recmaPlugins in mdxOptions (#2866)

aa

Author: Dimitri POSTOLOV

.changeset/pretty-tips-refuse.md

@@ -0,0 +1,8 @@
+---
+'nextra-theme-docs': patch
+'nextra': patch
+---
+
+fix unclickable links in TOC
+
+allow passing `recmaPlugins` in `mdxOptions`

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

@@ -12,6 +12,7 @@ export function Bleed({
     <div
       className={cn(
         'nextra-bleed _relative _-mx-6 _mt-6 md:_-mx-8 2xl:_-mx-24',
+        '_z-[1]', // for firefox https://github.com/shuding/nextra/issues/2824
         full && [
           // 'md:mx:[calc(-50vw+50%+8rem)',
           'ltr:xl:_ml-[calc(50%-50vw+16rem)] ltr:xl:_mr-[calc(50%-50vw)]',

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

@@ -56,8 +56,7 @@ export function TOC({ toc, filePath }: TOCProps): ReactElement {
     <div
       className={cn(
         'nextra-scrollbar _sticky _top-16 _overflow-y-auto _pr-4 _pt-6 _text-sm [hyphens:auto]',
-        '_max-h-[calc(100vh-var(--nextra-navbar-height)-env(safe-area-inset-bottom))] ltr:_-mr-4 rtl:_-ml-4',
-        '_z-[-1]' // for firefox https://github.com/shuding/nextra/issues/2824
+        '_max-h-[calc(100vh-var(--nextra-navbar-height)-env(safe-area-inset-bottom))] ltr:_-mr-4 rtl:_-ml-4'
       )}
     >
       {hasHeadings && (

packages/nextra/src/server/compile.ts

@@ -107,6 +107,7 @@ export async function compileMdx(
     outputFormat = 'function-body',
     remarkPlugins,
     rehypePlugins,
+    recmaPlugins,
     rehypePrettyCodeOptions
   }: MdxOptions = mdxOptions
 
@@ -344,7 +345,8 @@ export async function compileMdx(
             }
           }
         }) satisfies Plugin<[], Program>,
-        isRemoteContent ? recmaRewriteFunctionBody : recmaRewriteJsx
+        isRemoteContent ? recmaRewriteFunctionBody : recmaRewriteJsx,
+        ...(recmaPlugins || [])
       ].filter(truthy)
     })
   }

packages/nextra/src/server/schemas.ts

@@ -102,6 +102,7 @@ export const nextraConfigSchema = z
     mdxOptions: z.strictObject({
       rehypePlugins: z.custom<ProcessorOptions['rehypePlugins']>(),
       remarkPlugins: z.custom<ProcessorOptions['remarkPlugins']>(),
+      recmaPlugins: z.custom<ProcessorOptions['recmaPlugins']>(),
       format: z.enum(['detect', 'mdx', 'md']),
       rehypePrettyCodeOptions: z.custom<RehypePrettyCodeOptions>()
     })