diff --git a/packages/chakra-components/src/components/Election/Description.tsx b/packages/chakra-components/src/components/Election/Description.tsx index 2b04b571..41daddfd 100644 --- a/packages/chakra-components/src/components/Election/Description.tsx +++ b/packages/chakra-components/src/components/Election/Description.tsx @@ -1,10 +1,9 @@ import { ChakraProps, useStyleConfig } from '@chakra-ui/system' -import { ReactMarkdownProps } from 'react-markdown/lib/complex-types' -import { Markdown } from '../layout' +import { Markdown, MarkdownProps } from '../layout' import { useElection } from './Election' -export const ElectionDescription = (props: Omit & ChakraProps) => { +export const ElectionDescription = (props: Omit & ChakraProps) => { const styles = useStyleConfig('ElectionDescription', props) const { election } = useElection() diff --git a/packages/chakra-components/src/components/layout/Markdown.tsx b/packages/chakra-components/src/components/layout/Markdown.tsx index 59608bc8..2169cdc6 100644 --- a/packages/chakra-components/src/components/layout/Markdown.tsx +++ b/packages/chakra-components/src/components/layout/Markdown.tsx @@ -1,61 +1,25 @@ -import { Box, Code, Heading, Link, ListItem, OrderedList, Text, UnorderedList } from '@chakra-ui/layout' import { chakra } from '@chakra-ui/system' -import { Table, Tr } from '@chakra-ui/table' -import ReactMarkdown, { Options } from 'react-markdown' -import remarkGfm from 'remark-gfm' +import { PropsWithChildren, Suspense, lazy } from 'react' +import { Options } from 'react-markdown' -type MarkdownProps = Options & { - children?: string -} +const MarkdownRenderer = lazy(() => import('./MarkdownRenderer')) + +export type MarkdownProps = Options & + PropsWithChildren<{ + plain?: boolean + }> -const MD = ({ children, ...rest }: MarkdownProps) => { +const MD = ({ children, plain, ...rest }: MarkdownProps) => { if (!children) { return null } + if (plain) return <>{children} + return ( - ( - - {children} - - ), - h1: ({ node, children, ...props }) => ( - - {children} - - ), - h2: ({ node, children, ...props }) => ( - - {children} - - ), - h3: ({ node, children, ...props }) => ( - - {children} - - ), - ol: ({ node, children, ...props }) => {children}, - ul: ({ node, children, ...props }) => {children}, - li: ({ node, children, ...props }) => {children}, - p: ({ node, children, ...props }) => ( - - {children} - - ), - table: ({ node, children, ...props }) => ( - - {children}
-
- ), - tr: ({ node, children, ...props }) => {children}, - code: ({ node, children, ...props }) => {children}, - }} - {...rest} - /> + Burriloadin}> + {children} + ) } diff --git a/packages/chakra-components/src/components/layout/MarkdownRenderer.tsx b/packages/chakra-components/src/components/layout/MarkdownRenderer.tsx new file mode 100644 index 00000000..be701daa --- /dev/null +++ b/packages/chakra-components/src/components/layout/MarkdownRenderer.tsx @@ -0,0 +1,64 @@ +import { Box, Code, Heading, Link, ListItem, OrderedList, Text, UnorderedList } from '@chakra-ui/layout' +import { chakra } from '@chakra-ui/system' +import { Table, Tr } from '@chakra-ui/table' +import type { PropsWithChildren } from 'react' +import ReactMarkdown, { Options } from 'react-markdown' +import remarkGfm from 'remark-gfm' + +type MarkdownRenderer = PropsWithChildren + +const MDR = ({ children, ...rest }: MarkdownRenderer) => { + if (!children) { + return null + } + + return ( + ( + + {children} + + ), + h1: ({ node, children, ...props }) => ( + + {children} + + ), + h2: ({ node, children, ...props }) => ( + + {children} + + ), + h3: ({ node, children, ...props }) => ( + + {children} + + ), + ol: ({ node, children, ...props }) => {children}, + ul: ({ node, children, ...props }) => {children}, + li: ({ node, children, ...props }) => {children}, + p: ({ node, children, ...props }) => ( + + {children} + + ), + table: ({ node, children, ...props }) => ( + + {children}
+
+ ), + tr: ({ node, children, ...props }) => {children}, + code: ({ node, children, ...props }) => {children}, + }} + {...rest} + /> + ) +} + +const MarkdownRenderer = chakra(MDR) +MarkdownRenderer.displayName = 'MarkdownRenderer' + +export default MarkdownRenderer