aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src/components/Content
diff options
context:
space:
mode:
authorQuentin Gliech <quentingliech@gmail.com>2022-02-16 10:27:26 +0100
committerQuentin Gliech <quentingliech@gmail.com>2022-02-16 10:27:26 +0100
commitce50269639988e39fe4e27cc8c309a9d5c75c958 (patch)
treed6ccbc61dcabc065acce19497a7e26f49d905139 /webui/src/components/Content
parent11d51bee9e2a535e5308bb6f1d23cab351d66923 (diff)
downloadgit-bug-ce50269639988e39fe4e27cc8c309a9d5c75c958.tar.gz
webui: upgrade most dependencies
Also reformat everything with prettier
Diffstat (limited to 'webui/src/components/Content')
-rw-r--r--webui/src/components/Content/AnchorTag.tsx5
-rw-r--r--webui/src/components/Content/BlockQuoteTag.tsx2
-rw-r--r--webui/src/components/Content/ImageTag.tsx4
-rw-r--r--webui/src/components/Content/PreTag.tsx2
-rw-r--r--webui/src/components/Content/index.tsx45
5 files changed, 36 insertions, 22 deletions
diff --git a/webui/src/components/Content/AnchorTag.tsx b/webui/src/components/Content/AnchorTag.tsx
index 47d5e2fa..bbd45bc8 100644
--- a/webui/src/components/Content/AnchorTag.tsx
+++ b/webui/src/components/Content/AnchorTag.tsx
@@ -9,7 +9,10 @@ const useStyles = makeStyles((theme) => ({
},
}));
-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..c7c250f5 100644
--- a/webui/src/components/Content/BlockQuoteTag.tsx
+++ b/webui/src/components/Content/BlockQuoteTag.tsx
@@ -13,7 +13,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..94004f0e 100644
--- a/webui/src/components/Content/ImageTag.tsx
+++ b/webui/src/components/Content/ImageTag.tsx
@@ -8,10 +8,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..ecb573e0 100644
--- a/webui/src/components/Content/PreTag.tsx
+++ b/webui/src/components/Content/PreTag.tsx
@@ -9,7 +9,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..ccb412c1 100644
--- a/webui/src/components/Content/index.tsx
+++ b/webui/src/components/Content/index.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { createElement, Fragment, useEffect, useState } 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 +13,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;