remark-responsive-tables

Author: srmagura

site/pages/docs/@emotion/[packageName].tsx

@@ -4,7 +4,10 @@ import remarkPrism from 'remark-prism'
 import rehypeSlug from 'rehype-slug'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import { docQueries } from '../../../queries'
-import { remarkFixLinks } from '../../../util/remark-fix-links'
+import {
+  remarkFixLinks,
+  remarkResponsiveTables
+} from '../../../util/remark-plugins'
 import DocsPage from '../[slug]'
 
 export const getStaticPaths: GetStaticPaths = async () => {
@@ -29,7 +32,7 @@ export async function getStaticProps({ params }: GetStaticPropsContext) {
   // READMEs should not contain live code blocks
   const mdx = await serialize(content, {
     mdxOptions: {
-      remarkPlugins: [remarkPrism, remarkFixLinks],
+      remarkPlugins: [remarkPrism, remarkFixLinks, remarkResponsiveTables],
 
       // rehypeSlug must come first
       rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings]

site/pages/docs/[slug].tsx

@@ -12,7 +12,10 @@ import rehypeSlug from 'rehype-slug'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import { DocWrapper, ResponsiveTable, Title } from '../../components'
 import { docQueries } from '../../queries'
-import { remarkFixLinks } from '../../util/remark-fix-links'
+import {
+  remarkFixLinks,
+  remarkResponsiveTables
+} from '../../util/remark-plugins'
 import { mediaQueries, styleConstants } from '../../util'
 import {
   remarkLiveEditor,
@@ -41,7 +44,12 @@ export async function getStaticProps({ params }: GetStaticPropsContext) {
   const mdx = await serialize(content, {
     mdxOptions: {
       // remarkLiveEditor must come before remarkPrism
-      remarkPlugins: [remarkLiveEditor, remarkPrism, remarkFixLinks],
+      remarkPlugins: [
+        remarkLiveEditor,
+        remarkPrism,
+        remarkFixLinks,
+        remarkResponsiveTables
+      ],
 
       // rehypeSlug must come first
       rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings]
@@ -123,7 +131,7 @@ export default function DocsPage({
         <MDXRemote
           {...mdx}
           components={{
-            table: ResponsiveTable,
+            ResponsiveTable,
             EmotionLiveEditor
           }}
         />

site/util/remark-fix-links.ts renamed to site/util/remark-plugins.ts

@@ -1,7 +1,7 @@
 import { visit } from 'unist-util-visit'
 
 export function remarkFixLinks() {
-  return (markdownAST: any) =>
+  return (markdownAST: any) => {
     visit(markdownAST, 'link', (node: { url: string }) => {
       node.url = node.url.replace(/^https?:\/\/emotion.sh/, '')
 
@@ -13,4 +13,15 @@ export function remarkFixLinks() {
           .replace(/^\/packages\//, '/docs/@emotion/')
       }
     })
+  }
+}
+
+export function remarkResponsiveTables() {
+  return (markdownAST: any) => {
+    visit(markdownAST, 'mdxJsxFlowElement', (node: any) => {
+      if (node.name === 'table') {
+        node.name = 'ResponsiveTable'
+      }
+    })
+  }
 }