diff options
author | Michael Muré <batolettre@gmail.com> | 2022-03-01 20:57:43 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-01 20:57:43 +0100 |
commit | 2dbe0fd5fc3f3f74848df9499cddf32663e771ee (patch) | |
tree | fa162059dd8732ab3d6b22fb6df1fa10a353985f /webui/src/components/Content/index.tsx | |
parent | 08e00b4eb8f8cf8e614cae8dee46862a398f465d (diff) | |
parent | 8229e80d1eeee73bd4eab46c90d9f97f802ab063 (diff) | |
download | git-bug-2dbe0fd5fc3f3f74848df9499cddf32663e771ee.tar.gz |
Merge pull request #750 from MichaelMure/sandhose/webui-upgrade
Upgrade webui dependencies
Diffstat (limited to 'webui/src/components/Content/index.tsx')
-rw-r--r-- | webui/src/components/Content/index.tsx | 46 |
1 files changed, 29 insertions, 17 deletions
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; |