Fix contribute table component (#43298)

Updates react-markdown to be compatible with  remark-gfm

Example issue: 
https://supabase.com/contribute/t/860-66969-11493-reddit_post_1rinknm

fixed: 

https://zone-www-dot-com-git-chore-fix-table-component-supabase.vercel.app/contribute/t/860-66969-11493-reddit_post_1rinknm

apps/www/components/Contribute/markdownComponents.tsx

@@ -1,14 +1,14 @@
 import type { Components } from 'react-markdown'
 
 export const markdownComponents: Components = {
-  code: ({ node, inline, ...props }) =>
-    inline ? (
+  code: ({ className, ...props }) =>
+    className ? (
+      <code {...props} className="font-mono text-sm whitespace-pre block min-w-0" />
+    ) : (
       <code
         {...props}
         className="bg-surface-200 text-foreground px-1.5 py-0.5 rounded text-sm font-mono"
       />
-    ) : (
-      <code {...props} className="font-mono text-sm whitespace-pre block min-w-0" />
     ),
   pre: ({ node, ...props }) => (
     <pre
@@ -25,6 +25,6 @@ export const markdownComponents: Components = {
     />
   ),
   p: ({ node, ...props }) => <p {...props} className="mb-3 last:mb-0" />,
-  ul: ({ node, ordered, ...props }) => <ul {...props} className="list-disc pl-5 space-y-1 mb-3" />,
+  ul: ({ node, ...props }) => <ul {...props} className="list-disc pl-5 space-y-1 mb-3" />,
   ol: ({ node, ...props }) => <ol {...props} className="list-decimal pl-5 space-y-1 mb-3" />,
 }

apps/www/components/Sections/FeaturesSection.tsx

@@ -2,7 +2,7 @@ import { LazyMotion, domAnimation, m, useInView } from 'framer-motion'
 import { ArrowUpRight } from 'lucide-react'
 import Link from 'next/link'
 import { ReactNode, useRef } from 'react'
-import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
+import ReactMarkdown from 'react-markdown'
 import { Button, cn } from 'ui'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import { INITIAL_BOTTOM, getAnimation } from '~/lib/animations'

apps/www/components/Sections/ParagraphSection.tsx

@@ -1,7 +1,7 @@
 import { ArrowUpRight } from 'lucide-react'
 import Link from 'next/link'
 import { ReactNode } from 'react'
-import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
+import ReactMarkdown from 'react-markdown'
 import { Button, cn } from 'ui'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 

apps/www/package.json

@@ -54,8 +54,8 @@
     "gsap": "^3.13.0",
     "icons": "workspace:*",
     "lucide-react": "*",
-    "marketing": "workspace:*",
     "markdown-toc": "^1.2.0",
+    "marketing": "workspace:*",
     "mdast-util-from-markdown": "^2.0.2",
     "mdast-util-gfm": "^2.0.2",
     "mdast-util-mdx": "^2.0.1",
@@ -74,14 +74,14 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-countdown": "^2.3.5",
     "react-dom": "catalog:",
-    "react-markdown": "^8.0.3",
+    "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.6.6",
     "react-transition-group": "^4.4.1",
     "react-use": "^17.4.0",
     "recharts": "catalog:",
     "rehype-slug": "^5.1.0",
     "remark": "^15.0.1",
-    "remark-gfm": "^4.0.0",
+    "remark-gfm": "^4.0.1",
     "shared-data": "workspace:*",
     "swiper": "^12.1.2",
     "typed.js": "^2.0.16",

pnpm-lock.yaml

@@ -1725,8 +1725,8 @@ importers:
         specifier: 'catalog:'
         version: 18.3.1(react@18.3.1)
       react-markdown:
-        specifier: ^8.0.3
-        version: 8.0.7(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1)
+        specifier: ^9.0.1
+        version: 9.0.1(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1)
       react-syntax-highlighter:
         specifier: ^15.6.6
         version: 15.6.6(react@18.3.1)
@@ -1746,7 +1746,7 @@ importers:
         specifier: ^15.0.1
         version: 15.0.1(supports-color@8.1.1)
       remark-gfm:
-        specifier: ^4.0.0
+        specifier: ^4.0.1
         version: 4.0.1(supports-color@8.1.1)
       shared-data:
         specifier: workspace:*
@@ -17900,6 +17900,7 @@ packages:
 
   unplugin-vue-router@0.15.0:
     resolution: {integrity: sha512-PyGehCjd9Ny9h+Uer4McbBjjib3lHihcyUEILa7pHKl6+rh8N7sFyw4ZkV+N30Oq2zmIUG7iKs3qpL0r+gXAaQ==}
+    deprecated: 'Merged into vuejs/router. Migrate: https://router.vuejs.org/guide/migration/v4-to-v5.html'
     peerDependencies:
       '@vue/compiler-sfc': ^3.5.17
       vue-router: ^4.5.1
@@ -35051,7 +35052,7 @@ snapshots:
       remark-parse: 11.0.0(supports-color@8.1.1)
       remark-rehype: 11.1.1
       unified: 11.0.5
-      unist-util-visit: 5.0.0
+      unist-util-visit: 5.1.0
       vfile: 6.0.3
     transitivePeerDependencies:
       - supports-color