2022-07-26 23:48:49 +00:00
|
|
|
import { Fragment, memo } from "react"
|
2022-06-11 03:08:49 +00:00
|
|
|
import { default as ReactMarkdown } from "react-markdown"
|
2022-07-21 16:19:14 +00:00
|
|
|
import { ReactMarkdownOptions } from "react-markdown/lib/react-markdown"
|
2022-07-26 23:51:06 +00:00
|
|
|
import { default as remarkGfm } from "remark-gfm"
|
2022-06-11 03:08:49 +00:00
|
|
|
|
2022-07-21 16:19:14 +00:00
|
|
|
type FestaMarkdownRendererProps = Omit<ReactMarkdownOptions, "children"> & {
|
2022-06-11 03:08:49 +00:00
|
|
|
code: string,
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Component rendering Markdown source with {@link ReactMarkdown}, using some custom settings to better handle user input.
|
|
|
|
*
|
|
|
|
* Currently, it converts `h1` and `h2` into `h3`, and disables the rendering of `img` elements.
|
|
|
|
*/
|
2022-07-21 16:19:14 +00:00
|
|
|
export const FestaMarkdownRenderer = memo(({ code, ...props }: FestaMarkdownRendererProps) => {
|
2022-06-11 03:08:49 +00:00
|
|
|
return (
|
|
|
|
<ReactMarkdown
|
2022-07-21 16:19:14 +00:00
|
|
|
{...props}
|
2022-06-11 03:08:49 +00:00
|
|
|
components={{
|
2022-07-17 04:20:19 +00:00
|
|
|
h1: "h2", // h1 is reserved for the page name
|
|
|
|
h2: "h3",
|
|
|
|
h3: "h4",
|
|
|
|
h4: "h5",
|
|
|
|
h5: "h6",
|
2022-07-26 23:48:49 +00:00
|
|
|
img: ({ }) => (<></>), // images reveal the IP of the user to third parties!
|
2022-07-21 16:19:14 +00:00
|
|
|
...props.components,
|
2022-06-11 03:08:49 +00:00
|
|
|
}}
|
2022-07-26 23:51:06 +00:00
|
|
|
remarkPlugins={[
|
|
|
|
remarkGfm,
|
|
|
|
]}
|
2022-06-11 03:08:49 +00:00
|
|
|
>
|
|
|
|
{code}
|
|
|
|
</ReactMarkdown>
|
|
|
|
)
|
|
|
|
})
|
2022-07-16 14:12:29 +00:00
|
|
|
FestaMarkdownRenderer.displayName = "FestaMarkdownRenderer"
|