components MarkdownContent.tsx

50% Statements 2/4

0% Branches 0/1

0% Functions 0/2

50% Lines 2/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54  
 
 
 
 
 
13x
 
 
 
 
 
 
 
 
13x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { PropsWithChildren } from 'react'
 
import Markdown from 'markdown-to-jsx'
 
import ExternalLink from './ExternalLink'
 
const Link = ({ children, ...props }: PropsWithChildren<{ href: string }>) => (
  <ExternalLink {...props}>{children}</ExternalLink>
)
 
export type MarkdownContentProps = {
  markdown: string
  disableParsingRawHTML?: boolean
}
 
export const MarkdownContent = ({
  markdown,
  disableParsingRawHTML = true,
}: MarkdownContentProps) => (
  <Markdown
    options={{
      disableParsingRawHTML,
      overrides: {
        h1: {
          component: 'h2',
          props: { className: 'h2 mt-0' },
        },
        h2: {
          component: 'h3',
          props: { className: 'h3 mt-0' },
        },
        h3: {
          component: 'h4',
          props: { className: 'h4 mt-0' },
        },
        h4: {
          component: 'h5',
          props: { className: 'h5 mt-0' },
        },
        h5: {
          component: 'h6',
          props: { className: 'h6 mt-0' },
        },
        a: { component: Link },
        ul: {
          props: { className: 'mb-5 list-disc space-y-2 pl-10 last:mb-0' },
        },
      },
    }}
  >
    {markdown}
  </Markdown>
)