Refactor/render markdown codehighlight

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<pluginHookProps> = (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<Config[] | null>(null);
 
   const embeds = [
@@ -234,23 +237,22 @@ const useRenderEmbed : FC<pluginHookProps> = (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);
       }
     }
   };
 
   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<pluginHookProps> = (element, request: Request = {
       if (styleEle) {
         head.removeChild(styleEle);
       }
-    }
+    };
   }, []);
 
   useEffect(() => {

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

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<HTMLElement> | null;
-
 export interface Request {
-    get: (url: string) => Promise<Response>;
+    get: (url: string) => Promise<any>;
 }

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<pluginHookProps> = (props: HTMLElement | null | {
   current: HTMLElement | null;
 }, request: Request = {
-  get: fetch,
+  get
 }) => {
   const [selectTheme, setSelectTheme] = useState<string>('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);

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

render-markdown-codehighlight/types.ts

@@ -22,5 +22,5 @@ import { RefObject } from 'react';
 export type pluginHookProps = HTMLElement | RefObject<HTMLElement> | null;
 
 export interface Request {
-    get: (url: string) => Promise<Response>;
+    get: (url: string) => Promise<any>;
 }