(incubator-answer-plugins) 01/01: refactor(hooks): improve code readability and update default theme

[robin0716]

This is an automated email from the ASF dual-hosted git repository.

robin0716 pushed a commit to branch plugin/render-markdown-codehighlight
in repository https://gitbox.apache.org/repos/asf/incubator-answer-plugins.git

commit 08b4c405256254d4c8b388e1145884d245784e59
Author: robin <ro...@rnode.me>
AuthorDate: Mon Dec 2 11:32:59 2024 +0800

    refactor(hooks): improve code readability and update default theme
---
 render-markdown-codehighlight/hooks.ts | 47 ++++++++++++++++++++++------------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/render-markdown-codehighlight/hooks.ts 
b/render-markdown-codehighlight/hooks.ts
index 3b5c51c..37e1d31 100644
--- a/render-markdown-codehighlight/hooks.ts
+++ b/render-markdown-codehighlight/hooks.ts
@@ -27,20 +27,27 @@ const get = async (url: string) => {
   const { data } = await response.json();
   return data;
 };
-
-const useHighlightCode: FC<pluginHookProps> = (props: HTMLElement | null | {
-  current: HTMLElement | null;
-}, request: Request = {
-  get
-}) => {
-  const [selectTheme, setSelectTheme] = useState<string>('default');
+const useHighlightCode: FC<pluginHookProps> = (
+  props:
+    | HTMLElement
+    | null
+    | {
+      current: HTMLElement | null;
+    },
+  request: Request = {
+    get,
+  },
+) => {
+  const [selectTheme, setSelectTheme] = useState<string>('stackoverflow');
 
   // Fetch theme from API
   useEffect(() => {
-    request.get('/answer/api/v1/render/config')
+    request
+      .get('/answer/api/v1/render/config')
       .then((result) => {
-        console.log('Fetched theme:', result.select_theme);
-        setSelectTheme(result.select_theme);
+        if (result.select_theme) {
+          setSelectTheme(result.select_theme);
+        }
       })
       .catch((error) => {
         console.error('Error fetching theme:', error);
@@ -58,7 +65,9 @@ const useHighlightCode: FC<pluginHookProps> = (props: 
HTMLElement | null | {
     }
 
     const applyThemeCSS = async (theme: string) => {
-      const existingStyleElement = 
document.querySelector('style[data-theme-style="highlight"]');
+      const existingStyleElement = document.querySelector(
+        'style[data-theme-style="highlight"]',
+      );
       if (existingStyleElement) existingStyleElement.remove();
 
       const styleElement = document.createElement('style');
@@ -81,24 +90,30 @@ const useHighlightCode: FC<pluginHookProps> = (props: 
HTMLElement | null | {
     };
 
     // Get and apply the initial theme
-    const currentTheme = 
document.documentElement.getAttribute('data-bs-theme') || 'light';
+    const currentTheme =
+      document.documentElement.getAttribute('data-bs-theme') || 'light';
     applyThemeCSS(currentTheme);
 
     // Observe DOM changes (e.g., code block content changes)
     const contentObserver = new MutationObserver(() => {
-      const newTheme = document.documentElement.getAttribute('data-bs-theme') 
|| 'light';
-      console.log('Detected code content change, reapplying syntax 
highlighting, current theme:', newTheme);
+      const newTheme =
+        document.documentElement.getAttribute('data-bs-theme') || 'light';
+      console.log(
+        'Detected code content change, reapplying syntax highlighting, current 
theme:',
+        newTheme,
+      );
       applyThemeCSS(newTheme);
     });
 
     contentObserver.observe(element, {
       childList: true, // Observe changes to child elements
-      subtree: true,   // Observe the entire subtree
+      subtree: true, // Observe the entire subtree
     });
 
     // Observe theme changes
     const themeObserver = new MutationObserver(() => {
-      const newTheme = document.documentElement.getAttribute('data-bs-theme') 
|| 'light';
+      const newTheme =
+        document.documentElement.getAttribute('data-bs-theme') || 'light';
       console.log('Detected theme change:', newTheme);
       applyThemeCSS(newTheme);
     });