This is an automated email from the ASF dual-hosted git repository. robin0716 pushed a commit to branch dev in repository https://gitbox.apache.org/repos/asf/incubator-answer-plugins.git
commit 4117281b654a1f5e299df4e982015c0ceab9dd25 Author: robin <[email protected]> AuthorDate: Fri Sep 20 11:11:48 2024 +0800 refactor(highlight): Improve useHighlightCode function --- render-markdown-codehighlight/hooks.ts | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/render-markdown-codehighlight/hooks.ts b/render-markdown-codehighlight/hooks.ts index 99bf52a..1cec680 100644 --- a/render-markdown-codehighlight/hooks.ts +++ b/render-markdown-codehighlight/hooks.ts @@ -19,10 +19,12 @@ import { useEffect, useState } from 'react'; import hljs from 'highlight.js'; -import { themeStyles } from './themeStyles' +import { themeStyles } from './themeStyles'; -const useHighlightCode = (element: HTMLElement | null) => { +const useHighlightCode = (props: HTMLElement | null | { + current: HTMLElement | null; +}) => { const [selectTheme, setSelectTheme] = useState<string>('default'); // Fetch theme from API @@ -39,7 +41,14 @@ const useHighlightCode = (element: HTMLElement | null) => { }, []); useEffect(() => { - if (!element) return; + let element; + if (props instanceof HTMLElement) { + element = props; + } else if (props && props.current instanceof HTMLElement) { + element = props.current; + } else { + return; + } const applyThemeCSS = async (theme: string) => { const existingStyleElement = document.querySelector('style[data-theme-style="highlight"]'); @@ -96,10 +105,9 @@ const useHighlightCode = (element: HTMLElement | null) => { contentObserver.disconnect(); themeObserver.disconnect(); }; - }, [element, selectTheme]); + }, [props, selectTheme]); return null; }; export { useHighlightCode }; -
