This is an automated email from the ASF dual-hosted git repository. abeizn pushed a commit to branch release-v1.0 in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit fbebb66bc840d9eebb3bea9618116f64ca426106 Author: 青湛 <[email protected]> AuthorDate: Fri Mar 29 19:17:13 2024 +1300 feat: add custom markdown component (#7250) --- config-ui/src/components/index.ts | 1 + .../components/{index.ts => markdown/index.tsx} | 42 ++++++++++++++++------ config-ui/src/routes/onboard/step-1.tsx | 20 ++--------- config-ui/src/routes/onboard/step-2.tsx | 7 ++-- config-ui/src/routes/onboard/step-3.tsx | 7 ++-- 5 files changed, 39 insertions(+), 38 deletions(-) diff --git a/config-ui/src/components/index.ts b/config-ui/src/components/index.ts index 56d11f2a5..6dc50b33a 100644 --- a/config-ui/src/components/index.ts +++ b/config-ui/src/components/index.ts @@ -21,6 +21,7 @@ export * from './block'; export * from './inspector'; export * from './loading'; export * from './logo'; +export * from './markdown'; export * from './message'; export * from './no-data'; export * from './page-header'; diff --git a/config-ui/src/components/index.ts b/config-ui/src/components/markdown/index.tsx similarity index 51% copy from config-ui/src/components/index.ts copy to config-ui/src/components/markdown/index.tsx index 56d11f2a5..f7421885e 100644 --- a/config-ui/src/components/index.ts +++ b/config-ui/src/components/markdown/index.tsx @@ -16,13 +16,35 @@ * */ -export * from './action'; -export * from './block'; -export * from './inspector'; -export * from './loading'; -export * from './logo'; -export * from './message'; -export * from './no-data'; -export * from './page-header'; -export * from './tip-layout'; -export * from './tooltip'; +import ReactMarkdown from 'react-markdown'; +import rehypeRaw from 'rehype-raw'; +import Zoom from 'react-medium-image-zoom'; +import 'react-medium-image-zoom/dist/styles.css'; + +interface Props { + className?: string; + children: string; +} + +export const Markdown = ({ className, children }: Props) => { + return ( + <ReactMarkdown + className={className} + rehypePlugins={[rehypeRaw]} + components={{ + img: ({ alt, ...props }) => ( + <Zoom> + <img alt={alt} {...props} /> + </Zoom> + ), + a: ({ href, children, ...props }) => ( + <a href={href} {...props} target="_blank" rel="noreferrer"> + {children} + </a> + ), + }} + > + {children} + </ReactMarkdown> + ); +}; diff --git a/config-ui/src/routes/onboard/step-1.tsx b/config-ui/src/routes/onboard/step-1.tsx index 6d97abcc5..50d10a889 100644 --- a/config-ui/src/routes/onboard/step-1.tsx +++ b/config-ui/src/routes/onboard/step-1.tsx @@ -18,13 +18,9 @@ import { useState, useEffect, useContext } from 'react'; import { Input, Flex, Button, message } from 'antd'; -import Markdown from 'react-markdown'; -import rehypeRaw from 'rehype-raw'; -import Zoom from 'react-medium-image-zoom'; -import 'react-medium-image-zoom/dist/styles.css'; import API from '@/api'; -import { Block } from '@/components'; +import { Block, Markdown } from '@/components'; import { ConnectionSelect } from '@/plugins'; import { validName } from '@/routes/project'; import { operator } from '@/utils'; @@ -121,19 +117,7 @@ export const Step1 = () => { /> </Block> </div> - <Markdown - className="qa" - rehypePlugins={[rehypeRaw]} - components={{ - img: ({ alt, ...props }) => ( - <Zoom> - <img alt={alt} {...props} /> - </Zoom> - ), - }} - > - {QA} - </Markdown> + <Markdown className="qa">{QA}</Markdown> </S.StepContent> <Flex style={{ marginTop: 64 }} justify="space-between"> <Button ghost type="primary" loading={operating} onClick={() => setStep(step - 1)}> diff --git a/config-ui/src/routes/onboard/step-2.tsx b/config-ui/src/routes/onboard/step-2.tsx index 432ba34ce..40c0c560c 100644 --- a/config-ui/src/routes/onboard/step-2.tsx +++ b/config-ui/src/routes/onboard/step-2.tsx @@ -18,10 +18,9 @@ import { useState, useContext, useEffect, useMemo } from 'react'; import { Flex, Button, Tooltip } from 'antd'; -import Markdown from 'react-markdown'; -import rehypeRaw from 'rehype-raw'; import API from '@/api'; +import { Markdown } from '@/components'; import { getPluginConfig } from '@/plugins'; import { ConnectionToken } from '@/plugins/components/connection-form/fields/token'; import { ConnectionUsername } from '@/plugins/components/connection-form/fields/username'; @@ -193,9 +192,7 @@ export const Step2 = () => { </Tooltip> </div> )} - <Markdown className="qa" rehypePlugins={[rehypeRaw]}> - {QA} - </Markdown> + <Markdown className="qa">{QA}</Markdown> </S.StepContent> <Flex style={{ marginTop: 36 }} justify="space-between"> <Button ghost type="primary" loading={operating} onClick={() => setStep(step - 1)}> diff --git a/config-ui/src/routes/onboard/step-3.tsx b/config-ui/src/routes/onboard/step-3.tsx index b87f5bdf0..6c9656860 100644 --- a/config-ui/src/routes/onboard/step-3.tsx +++ b/config-ui/src/routes/onboard/step-3.tsx @@ -19,11 +19,10 @@ import { useState, useContext, useEffect, useMemo } from 'react'; import { Flex, Button } from 'antd'; import dayjs from 'dayjs'; -import Markdown from 'react-markdown'; -import rehypeRaw from 'rehype-raw'; import API from '@/api'; import { cronPresets } from '@/config'; +import { Markdown } from '@/components'; import { IBPMode } from '@/types'; import { DataScopeRemote, getPluginScopeId } from '@/plugins'; import { operator, formatTime } from '@/utils'; @@ -149,9 +148,7 @@ export const Step3 = () => { footer={null} /> </div> - <Markdown className="qa" rehypePlugins={[rehypeRaw]}> - {QA} - </Markdown> + <Markdown className="qa">{QA}</Markdown> </S.StepContent> <Flex style={{ marginTop: 36 }} justify="space-between"> <Button ghost type="primary" loading={operating} onClick={() => setStep(step - 1)}>
