docs: update docusaurus to v3 (#5625)

* update dependencies

* update onboarding mdx

* fixes for mdx issues

* fixes for mdx compatibility

* resolve mdx errors

* fixes in reference

* fix check errors

* revert change in vale action

* fix node version in action

* fix summary in markdown

www/apps/docs/src/theme/CodeBlock/Content/String.tsx

@@ -8,15 +8,22 @@ import {
   containsLineNumbers,
   useCodeWordWrap,
 } from "@docusaurus/theme-common/internal"
-import Highlight, { defaultProps, type Language } from "prism-react-renderer"
+import { Highlight, type Language } from "prism-react-renderer"
 import Line from "@theme/CodeBlock/Line"
 import Container from "@theme/CodeBlock/Container"
 import type { Props } from "@theme/CodeBlock/Content/String"
+import { Tooltip, CopyButton } from "docs-ui"
 import useIsBrowser from "@docusaurus/useIsBrowser"
 import { ThemeConfig } from "@medusajs/docs"
-import { CopyButton, Tooltip } from "docs-ui"
 import { ExclamationCircleSolid, SquareTwoStackSolid } from "@medusajs/icons"
 
+// Prism languages are always lowercase
+// We want to fail-safe and allow both "php" and "PHP"
+// See https://github.com/facebook/docusaurus/issues/9012
+function normalizeLanguage(language: string | undefined): string | undefined {
+  return language?.toLowerCase()
+}
+
 export default function CodeBlockString({
   children,
   className: blockClassName = "",
@@ -31,8 +38,10 @@ export default function CodeBlockString({
     prism: { defaultLanguage, magicComments },
     reportCodeLinkPrefix = "",
   } = useThemeConfig() as ThemeConfig
-  const language =
+  const language = normalizeLanguage(
     languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage
+  )
+
   const prismTheme = usePrismTheme()
   const wordWrap = useCodeWordWrap()
   const isBrowser = useIsBrowser()
@@ -62,7 +71,6 @@ export default function CodeBlockString({
       {title && <div>{title}</div>}
       <div className={clsx("relative rounded-[inherit]")}>
         <Highlight
-          {...defaultProps}
           theme={prismTheme}
           code={code}
           language={(language ?? "text") as Language}

www/apps/docs/src/theme/CodeBlock/index.tsx

@@ -36,7 +36,6 @@ export default function CodeBlock({
 
   const title = props.title
   delete props.title
-
   return (
     <div className="code-wrapper">
       {title && <div className="code-header">{title}</div>}