diff options
Diffstat (limited to 'webui/src/components/Content')
-rw-r--r-- | webui/src/components/Content/AnchorTag.tsx | 10 | ||||
-rw-r--r-- | webui/src/components/Content/BlockQuoteTag.tsx | 7 | ||||
-rw-r--r-- | webui/src/components/Content/ImageTag.tsx | 9 | ||||
-rw-r--r-- | webui/src/components/Content/PreTag.tsx | 7 | ||||
-rw-r--r-- | webui/src/components/Content/index.tsx | 46 |
5 files changed, 45 insertions, 34 deletions
diff --git a/webui/src/components/Content/AnchorTag.tsx b/webui/src/components/Content/AnchorTag.tsx index 47d5e2fa..e9edef95 100644 --- a/webui/src/components/Content/AnchorTag.tsx +++ b/webui/src/components/Content/AnchorTag.tsx @@ -1,15 +1,17 @@ -import React from 'react'; +import makeStyles from '@mui/styles/makeStyles'; +import * as React from 'react'; import { Link } from 'react-router-dom'; -import { makeStyles } from '@material-ui/core/styles'; - const useStyles = makeStyles((theme) => ({ tag: { color: theme.palette.text.secondary, }, })); -const AnchorTag = ({ children, href }: React.HTMLProps<HTMLAnchorElement>) => { +const AnchorTag: React.FC = ({ + children, + href, +}: React.HTMLProps<HTMLAnchorElement>) => { const classes = useStyles(); const origin = window.location.origin; const destination = href === undefined ? '' : href; diff --git a/webui/src/components/Content/BlockQuoteTag.tsx b/webui/src/components/Content/BlockQuoteTag.tsx index 18c34d8a..ae6c34f4 100644 --- a/webui/src/components/Content/BlockQuoteTag.tsx +++ b/webui/src/components/Content/BlockQuoteTag.tsx @@ -1,6 +1,5 @@ -import React from 'react'; - -import { makeStyles } from '@material-ui/core/styles'; +import makeStyles from '@mui/styles/makeStyles'; +import * as React from 'react'; const useStyles = makeStyles((theme) => ({ tag: { @@ -13,7 +12,7 @@ const useStyles = makeStyles((theme) => ({ }, })); -const BlockQuoteTag = (props: React.HTMLProps<HTMLPreElement>) => { +const BlockQuoteTag: React.FC<React.HTMLProps<HTMLElement>> = (props) => { const classes = useStyles(); return <blockquote className={classes.tag} {...props} />; }; diff --git a/webui/src/components/Content/ImageTag.tsx b/webui/src/components/Content/ImageTag.tsx index 29b01da3..f6e7d5ba 100644 --- a/webui/src/components/Content/ImageTag.tsx +++ b/webui/src/components/Content/ImageTag.tsx @@ -1,6 +1,5 @@ -import React from 'react'; - -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@mui/styles'; +import * as React from 'react'; const useStyles = makeStyles({ tag: { @@ -8,10 +7,10 @@ const useStyles = makeStyles({ }, }); -const ImageTag = ({ +const ImageTag: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ alt, ...props -}: React.ImgHTMLAttributes<HTMLImageElement>) => { +}) => { const classes = useStyles(); return ( <> diff --git a/webui/src/components/Content/PreTag.tsx b/webui/src/components/Content/PreTag.tsx index 8e352153..aeefa655 100644 --- a/webui/src/components/Content/PreTag.tsx +++ b/webui/src/components/Content/PreTag.tsx @@ -1,6 +1,5 @@ -import React from 'react'; - -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@mui/styles'; +import * as React from 'react'; const useStyles = makeStyles({ tag: { @@ -9,7 +8,7 @@ const useStyles = makeStyles({ }, }); -const PreTag = (props: React.HTMLProps<HTMLPreElement>) => { +const PreTag: React.FC<React.HTMLProps<HTMLPreElement>> = (props) => { const classes = useStyles(); return <pre className={classes.tag} {...props} />; }; diff --git a/webui/src/components/Content/index.tsx b/webui/src/components/Content/index.tsx index e4018809..9bf9ff7a 100644 --- a/webui/src/components/Content/index.tsx +++ b/webui/src/components/Content/index.tsx @@ -1,9 +1,11 @@ -import React from 'react'; +import { createElement, Fragment, useEffect, useState } from 'react'; +import * as React from 'react'; +import rehypeReact from 'rehype-react'; import gemoji from 'remark-gemoji'; import html from 'remark-html'; import parse from 'remark-parse'; -import remark2react from 'remark-react'; -import unified from 'unified'; +import remarkRehype from 'remark-rehype'; +import { unified } from 'unified'; import AnchorTag from './AnchorTag'; import BlockQuoteTag from './BlockQuoteTag'; @@ -12,21 +14,31 @@ import PreTag from './PreTag'; type Props = { markdown: string }; const Content: React.FC<Props> = ({ markdown }: Props) => { - const content = unified() - .use(parse) - .use(gemoji) - .use(html) - .use(remark2react, { - remarkReactComponents: { - img: ImageTag, - pre: PreTag, - a: AnchorTag, - blockquote: BlockQuoteTag, - }, - }) - .processSync(markdown).result; + const [Content, setContent] = useState(<></>); - return <>{content}</>; + useEffect(() => { + unified() + .use(parse) + .use(gemoji) + .use(html) + .use(remarkRehype) + .use(rehypeReact, { + createElement, + Fragment, + components: { + img: ImageTag, + pre: PreTag, + a: AnchorTag, + blockquote: BlockQuoteTag, + }, + }) + .process(markdown) + .then((file) => { + setContent(file.result); + }); + }, [markdown]); + + return Content; }; export default Content; |