Update next and mdx (#644)

packages/components/package.json

@@ -54,7 +54,7 @@
     "lodash-es": "^4.17.21",
     "prism-react-renderer": "^1.1.1",
     "react-live": "^2.2.3",
-    "react-markdown": "^6.0.2",
+    "react-markdown": "^9.0.0",
     "react-responsive-carousel": "3.2.10",
     "react-table": "^7.8.0",
     "swagger-ui-react": "^5.0.0",

packages/components/src/FormattedContent.tsx

@@ -1,79 +1,70 @@
-import React, { ReactElement, useMemo } from 'react';
-import ReactMarkdown from 'react-markdown';
+import React from 'react';
+import ReactMarkdown, { Components } from 'react-markdown';
 
-import { getMarkdownElements } from './Markdown';
+import { getMarkdownElements } from './Markdown/markdownElements';
+
+type SupportedComponents = Pick<
+  Components,
+  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'em' | 'strong' | 'ul' | 'ol' | 'li'
+> & {
+  listItem: SupportedComponents['li'];
+  emphasis: SupportedComponents['em'];
+};
 
 type FormattedContentProps = {
   className?: string;
   children: string;
-  components?: {
-    h1?: () => ReactElement;
-    h2?: () => ReactElement;
-    h3?: () => ReactElement;
-    h4?: () => ReactElement;
-    h5?: () => ReactElement;
-    h6?: () => ReactElement;
-    p?: () => ReactElement;
-    em?: () => ReactElement;
-    strong?: () => ReactElement;
-    ul?: () => ReactElement;
-    ol?: () => ReactElement;
-    li?: () => ReactElement;
-  };
+  components?: SupportedComponents;
+};
+
+const {
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  h6: H6,
+  ol: Ol,
+  ul: Ul,
+  li: ListItem,
+  em: Emphasis,
+  p: P,
+  strong: Strong
+} = getMarkdownElements();
+
+const renderers: SupportedComponents = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  h1: ({ node, ...props }) => <H1 {...props} />,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  h2: ({ node, ...props }) => <H2 {...props} />,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  h3: ({ node, ...props }) => <H3 {...props} />,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  h4: ({ node, ...props }) => <H4 {...props} />,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  h5: ({ node, ...props }) => <H5 {...props} />,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  h6: ({ node, ...props }) => <H6 {...props} />,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  p: ({ node, children, ...props }) => <P {...props}>{children}</P>,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  emphasis: ({ node, children, ...props }) => <Emphasis {...props}>{children}</Emphasis>,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  strong: ({ node, children, ...props }) => <Strong {...props}>{children}</Strong>,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ul: ({ node, children, ...props }) => <Ul {...props}>{children}</Ul>,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ol: ({ node, children, ...props }) => <Ol {...props}>{children}</Ol>,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  listItem: ({ node, children, ...props }) => <ListItem {...props}>{children}</ListItem>
 };
 
 export const FormattedContent: React.FC<React.PropsWithChildren<FormattedContentProps>> = ({
   children,
   components = {},
   ...rest
-}) => {
-  const renderers = useMemo(() => {
-    const {
-      h1: H1,
-      h2: H2,
-      h3: H3,
-      h4: H4,
-      h5: H5,
-      h6: H6,
-      ol: Ol,
-      ul: Ul,
-      li: ListItem,
-      em: Emphasis,
-      p: P,
-      strong: Strong
-    } = getMarkdownElements();
-
-    return {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      h1: ({ node, ...props }) => <H1 {...props} />,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      h2: ({ node, ...props }) => <H2 {...props} />,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      h3: ({ node, ...props }) => <H3 {...props} />,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      h4: ({ node, ...props }) => <H4 {...props} />,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      h5: ({ node, ...props }) => <H5 {...props} />,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      h6: ({ node, ...props }) => <H6 {...props} />,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      p: ({ node, children, ...props }) => <P {...props}>{children}</P>,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      emphasis: ({ node, children, ...props }) => <Emphasis {...props}>{children}</Emphasis>,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      strong: ({ node, children, ...props }) => <Strong {...props}>{children}</Strong>,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      ul: ({ node, children, ...props }) => <Ul {...props}>{children}</Ul>,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      ol: ({ node, children, ...props }) => <Ol {...props}>{children}</Ol>,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      listItem: ({ node, children, ...props }) => <ListItem {...props}>{children}</ListItem>
-    };
-  }, []);
-
-  return (
-    <ReactMarkdown {...rest} components={{ ...renderers, ...components }}>
-      {children}
-    </ReactMarkdown>
-  );
-};
+}) => (
+  <ReactMarkdown {...rest} components={{ ...renderers, ...components }}>
+    {children}
+  </ReactMarkdown>
+);