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 5eb148518bd66971db4eadf47657b5bc05f74f15 Author: 青湛 <[email protected]> AuthorDate: Thu Mar 28 14:39:31 2024 +1300 feat: support image zoom in onboard (#7225) --- config-ui/package.json | 1 + config-ui/src/routes/onboard/step-1.tsx | 14 +++++++++++++- config-ui/yarn.lock | 11 +++++++++++ 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/config-ui/package.json b/config-ui/package.json index d3d2ee115..68710baa5 100644 --- a/config-ui/package.json +++ b/config-ui/package.json @@ -40,6 +40,7 @@ "react-dom": "^18.2.0", "react-is": "^18.2.0", "react-markdown": "^9.0.1", + "react-medium-image-zoom": "^5.1.10", "react-redux": "^9.1.0", "react-router-dom": "^6.22.2", "react-transition-group": "^4.4.5", diff --git a/config-ui/src/routes/onboard/step-1.tsx b/config-ui/src/routes/onboard/step-1.tsx index 73850c488..7cffde5af 100644 --- a/config-ui/src/routes/onboard/step-1.tsx +++ b/config-ui/src/routes/onboard/step-1.tsx @@ -20,6 +20,8 @@ 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'; @@ -109,7 +111,17 @@ export const Step1 = () => { /> </Block> </div> - <Markdown className="qa" rehypePlugins={[rehypeRaw]}> + <Markdown + className="qa" + rehypePlugins={[rehypeRaw]} + components={{ + img: ({ alt, ...props }) => ( + <Zoom> + <img alt={alt} {...props} /> + </Zoom> + ), + }} + > {QA} </Markdown> </S.StepContent> diff --git a/config-ui/yarn.lock b/config-ui/yarn.lock index 27acc8d19..e4930f8df 100644 --- a/config-ui/yarn.lock +++ b/config-ui/yarn.lock @@ -3701,6 +3701,7 @@ __metadata: react-dom: ^18.2.0 react-is: ^18.2.0 react-markdown: ^9.0.1 + react-medium-image-zoom: ^5.1.10 react-redux: ^9.1.0 react-router-dom: ^6.22.2 react-transition-group: ^4.4.5 @@ -7722,6 +7723,16 @@ __metadata: languageName: node linkType: hard +"react-medium-image-zoom@npm:^5.1.10": + version: 5.1.10 + resolution: "react-medium-image-zoom@npm:5.1.10" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 9c2cf83fc63eb705f1696ad6b50c457d8a77f0b458d7d9cc8975f20ebd3ee8ef6fbdc39af145fb9a5fd81191ceb37de1fb362bf67d6d31a183aa407b2a522030 + languageName: node + linkType: hard + "react-redux@npm:^9.1.0": version: 9.1.0 resolution: "react-redux@npm:9.1.0"
