(incubator-answer-plugins) branch plugin/render-markdown-codehighlight created (now 08b4c40)

[ro...@apache.org]

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

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


      at 08b4c40  refactor(hooks): improve code readability and update default theme

This branch includes the following new commits:

     new 08b4c40  refactor(hooks): improve code readability and update default theme

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.

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

[ro...@apache.org]

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);
     });