beta toc styling (#897)

| [![PR App][icn]][demo] | RM-9179 | | :--------------------: | :-----: | ## 🧰 Changes Removes `p` tags from the TOC ## 🧬 QA & Testing - [Broken on production][prod]. - [Working in this PR app][demo]. [demo]: https://markdown-pr-PR_NUMBER.herokuapp.com [prod]: https://SUBDOMAIN.readme.io [icn]: https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg
readmeio · Jun 4, 2024 · 0d5cd53 · 0d5cd53
1 parent 2f77967
commit 0d5cd53
Show file tree

Hide file tree

Showing 9 changed files with 10 additions and 10 deletions.
diff --git a/...ression-tests-rdmd-syntax-renders-code-block-tests-without-surprises-1-snap.png b/...ression-tests-rdmd-syntax-renders-code-block-tests-without-surprises-1-snap.png
diff --git a/...l-regression-tests-rdmd-syntax-renders-code-blocks-without-surprises-1-snap.png b/...l-regression-tests-rdmd-syntax-renders-code-blocks-without-surprises-1-snap.png
diff --git a/...visual-regression-tests-rdmd-syntax-renders-embeds-without-surprises-1-snap.png b/...visual-regression-tests-rdmd-syntax-renders-embeds-without-surprises-1-snap.png
diff --git a/...al-regression-tests-rdmd-syntax-renders-html-tests-without-surprises-1-snap.png b/...al-regression-tests-rdmd-syntax-renders-html-tests-without-surprises-1-snap.png
diff --git a/...visual-regression-tests-rdmd-syntax-renders-images-without-surprises-1-snap.png b/...visual-regression-tests-rdmd-syntax-renders-images-without-surprises-1-snap.png
diff --git a/...visual-regression-tests-rdmd-syntax-renders-tables-without-surprises-1-snap.png b/...visual-regression-tests-rdmd-syntax-renders-tables-without-surprises-1-snap.png
diff --git a/__tests__/transformers/rehype-toc.test.ts b/__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')),
         ),
       ),
     ]);

diff --git a/lib/run.tsx b/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: () => (

diff --git a/processor/transform/rehype-toc.ts b/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)),
       );
     });
-Original file line number
+Diff line change
@@ Expand Up @@
           }
           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)),
           );
         });
@@ Expand Down @@