beta toc styling

__tests__/transformers/rehype-toc.test.ts

@@ -17,15 +17,15 @@ describe('rehype-toc transformer', () => {
     const { ast } = module.data.toc;
 
     const expected = h('ul', undefined, [
-      h('li', undefined, h('p', undefined, h('a', { href: '#title' }, 'Title'))),
+      h('li', undefined, h('a', { href: '#title' }, 'Title')),
       h(
         'li',
         undefined,
         h(
           'ul',
           undefined,
-          h('li', undefined, h('p', undefined, h('a', { href: '#subheading' }, 'Subheading'))),
-          h('li', undefined, h('p', undefined, h('a', { href: '#second-subheading' }, 'Second Subheading'))),
+          h('li', undefined, h('a', { href: '#subheading' }, 'Subheading')),
+          h('li', undefined, h('a', { href: '#second-subheading' }, 'Second Subheading')),
         ),
       ),
     ]);
@@ -68,15 +68,15 @@ describe('rehype-toc transformer', () => {
     const { ast } = module.data.toc;
 
     const expected = h('ul', undefined, [
-      h('li', undefined, h('p', undefined, h('a', { href: '#title' }, 'Title'))),
+      h('li', undefined, h('a', { href: '#title' }, 'Title')),
       h(
         'li',
         undefined,
         h(
           'ul',
           undefined,
-          h('li', undefined, h('p', undefined, h('a', { href: '#common-heading' }, 'Common Heading'))),
-          h('li', undefined, h('p', undefined, h('a', { href: '#subheading' }, 'Subheading'))),
+          h('li', undefined, h('a', { href: '#common-heading' }, 'Common Heading')),
+          h('li', undefined, h('a', { href: '#subheading' }, 'Subheading')),
         ),
       ),
     ]);

lib/run.tsx

@@ -55,19 +55,19 @@ const run = async (stringOrFile: string | VFileWithToc, _opts: RunOpts = {}) =>
   const { components, terms, variables, baseUrl, ...opts } = _opts;
   const vfile = new VFile(stringOrFile) as VFileWithToc;
 
-  const exec = (file: VFile | string) =>
+  const exec = (file: VFile | string, toc = false) =>
     mdxRun(file, {
       ...runtime,
       Fragment,
       baseUrl: import.meta.url,
       imports: { React },
-      useMDXComponents: makeUseMDXComponents(components),
+      useMDXComponents: makeUseMDXComponents({ ...components, ...(toc && { p: Fragment }) }),
       ...opts,
     });
 
   const file = await exec(vfile);
   const Content = file.default;
-  const { default: Toc } = 'toc' in vfile.data ? await exec(vfile.data.toc.vfile) : { default: null };
+  const { default: Toc } = 'toc' in vfile.data ? await exec(vfile.data.toc.vfile, true) : { default: null };
 
   return {
     default: () => (

processor/transform/rehype-toc.ts

@@ -49,7 +49,7 @@ const rehypeToc = ({ components = {} }: Options): Transformer<Root, Root> => {
       }
 
       stack[stack.length - 1].children.push(
-        h('li', null, h('p', null, h('a', { href: `#${heading.properties.id}` }, heading.children))),
+        h('li', null, h('a', { href: `#${heading.properties.id}` }, heading.children)),
       );
     });