From e3ff0a602ec9e4a16a4b918ff7f085375a1dd00d Mon Sep 17 00:00:00 2001 From: robin Date: Fri, 15 Nov 2024 12:26:27 +0800 Subject: [PATCH 1/4] refactor(render-markdown-codehighlight): Update useHighlightCode hook to use custom fetch function --- render-markdown-codehighlight/hooks.ts | 13 +++++++++---- render-markdown-codehighlight/types.ts | 2 +- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/render-markdown-codehighlight/hooks.ts b/render-markdown-codehighlight/hooks.ts index 3ccbeb4c..3b5c51c7 100644 --- a/render-markdown-codehighlight/hooks.ts +++ b/render-markdown-codehighlight/hooks.ts @@ -22,20 +22,25 @@ import hljs from 'highlight.js'; import { themeStyles } from './themeStyles'; import { pluginHookProps, Request } from './types'; +const get = async (url: string) => { + const response = await fetch(url); + const { data } = await response.json(); + return data; +}; + const useHighlightCode: FC = (props: HTMLElement | null | { current: HTMLElement | null; }, request: Request = { - get: fetch, + get }) => { const [selectTheme, setSelectTheme] = useState('default'); // Fetch theme from API useEffect(() => { request.get('/answer/api/v1/render/config') - .then((response) => response.json()) .then((result) => { - console.log('Fetched theme:', result.data.select_theme); - setSelectTheme(result.data.select_theme); + console.log('Fetched theme:', result.select_theme); + setSelectTheme(result.select_theme); }) .catch((error) => { console.error('Error fetching theme:', error); diff --git a/render-markdown-codehighlight/types.ts b/render-markdown-codehighlight/types.ts index 6a034fcb..dcb5217f 100644 --- a/render-markdown-codehighlight/types.ts +++ b/render-markdown-codehighlight/types.ts @@ -22,5 +22,5 @@ import { RefObject } from 'react'; export type pluginHookProps = HTMLElement | RefObject | null; export interface Request { - get: (url: string) => Promise; + get: (url: string) => Promise; } From beaac22b51687a125314a8f35a3666d5a89da571 Mon Sep 17 00:00:00 2001 From: robin Date: Fri, 15 Nov 2024 12:26:43 +0800 Subject: [PATCH 2/4] chore: Bump version to 0.1.1 in info.yaml --- render-markdown-codehighlight/info.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/render-markdown-codehighlight/info.yaml b/render-markdown-codehighlight/info.yaml index 2ad8ed20..9542392c 100644 --- a/render-markdown-codehighlight/info.yaml +++ b/render-markdown-codehighlight/info.yaml @@ -17,6 +17,6 @@ slug_name: render_markdown_codehighlight type: render -version: 0.1.0 +version: 0.1.1 author: Chen Jiaji, Zhu Xuanlyu link: https://github.com/apache/incubator-answer-plugins/tree/main/render-markdown-codehighlight From b3fdc428249cd80e5973a374397dc592ded8a2bb Mon Sep 17 00:00:00 2001 From: robin Date: Fri, 15 Nov 2024 15:39:26 +0800 Subject: [PATCH 3/4] refactor(hooks): Simplify request handling and improve get function for embeds --- embed-basic/hooks.tsx | 38 ++++++++++++++++++++------------------ embed-basic/types.ts | 7 +------ 2 files changed, 21 insertions(+), 24 deletions(-) diff --git a/embed-basic/hooks.tsx b/embed-basic/hooks.tsx index c5e48c15..951f0620 100644 --- a/embed-basic/hooks.tsx +++ b/embed-basic/hooks.tsx @@ -17,13 +17,7 @@ * under the License. */ -import { - useEffect, - useState, - ReactElement, - isValidElement, - FC, -} from 'react'; +import { useEffect, useState, ReactElement, isValidElement } from 'react'; import { createRoot } from 'react-dom/client'; import { GithubGistEmbed, @@ -36,16 +30,25 @@ import { DropboxEmbed, TwitterEmbed, } from './components'; -import { pluginHookProps, Request } from './types'; +import { Request } from './types'; interface Config { platform: string; enable: boolean; } -const useRenderEmbed : FC = (element, request: Request = { - get: fetch, -})=> { +const get = async (url: string) => { + const response = await fetch(url); + const { data } = await response.json(); + return data; +}; + +const useRenderEmbed = ( + element, + request: Request = { + get, + }, +) => { const [configs, setConfigs] = useState(null); const embeds = [ @@ -234,13 +237,12 @@ const useRenderEmbed : FC = (element, request: Request = { styleElement = document.createElement('style'); styleElement.id = 'embed-style'; if (hasDefaultStyle) { - styleElement.textContent = ` + styleElement.textContent = ` .embed-light:hover { --bs-bg-opacity: 1; background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important; } - ` - // style 插入 header + `; const head = document.querySelector('head') as HTMLElement; head.appendChild(styleElement); } @@ -248,9 +250,9 @@ const useRenderEmbed : FC = (element, request: Request = { }; const getConfig = () => { - request.get('/answer/api/v1/embed/config') - .then((response) => response.json()) - .then((result) => setConfigs(result.data)); + request + .get('/answer/api/v1/embed/config') + .then((result) => setConfigs(result)); }; useEffect(() => { getConfig(); @@ -261,7 +263,7 @@ const useRenderEmbed : FC = (element, request: Request = { if (styleEle) { head.removeChild(styleEle); } - } + }; }, []); useEffect(() => { diff --git a/embed-basic/types.ts b/embed-basic/types.ts index 6a034fcb..afbc8315 100644 --- a/embed-basic/types.ts +++ b/embed-basic/types.ts @@ -16,11 +16,6 @@ * specific language governing permissions and limitations * under the License. */ - -import { RefObject } from 'react'; - -export type pluginHookProps = HTMLElement | RefObject | null; - export interface Request { - get: (url: string) => Promise; + get: (url: string) => Promise; } From 5526dc3d9ed3f0ee286ef64e473b7f7e46499889 Mon Sep 17 00:00:00 2001 From: robin Date: Fri, 15 Nov 2024 15:39:42 +0800 Subject: [PATCH 4/4] chore: Bump version to 1.1.1 in info.yaml --- embed-basic/info.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/embed-basic/info.yaml b/embed-basic/info.yaml index 2c69f658..723ef4ab 100644 --- a/embed-basic/info.yaml +++ b/embed-basic/info.yaml @@ -17,6 +17,6 @@ slug_name: basic_embed type: editor -version: 1.1.0 +version: 1.1.1 author: answerdev link: https://github.com/apache/incubator-answer-plugins/tree/main/embed-basic