(incubator-answer-plugins) 13/17: fix(plugins): Fix the problem that the dom obtained by hooks in the plugin is null

[li...@apache.org]

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

linkinstar pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-answer-plugins.git

commit 47bcdd72a2fdacf552ca9dc37b9a66452aa4bf57
Author: robin <ro...@rnode.me>
AuthorDate: Wed Jun 5 16:20:19 2024 +0800

    fix(plugins): Fix the problem that the dom obtained by hooks in the plugin is null
    
    Related issue: #121
---
 editor-chart/hooks.ts   | 20 +++++++++++++++-----
 editor-formula/hooks.ts | 20 +++++++++++++++-----
 embed-basic/hooks.ts    | 26 +++++++++++++++++++-------
 3 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/editor-chart/hooks.ts b/editor-chart/hooks.ts
index 3b465ce..1e1c15b 100644
--- a/editor-chart/hooks.ts
+++ b/editor-chart/hooks.ts
@@ -17,12 +17,12 @@
  * under the License.
  */
 
-import { useEffect } from 'react';
+import { useEffect, RefObject } from 'react';
 
 // @ts-ignore
 import mermaid from 'mermaid';
 
-const useRenderChart = (element: HTMLElement) => {
+const useRenderChart = (element: HTMLElement | RefObject<HTMLElement> | null) => {
   const render = (element) => {
     mermaid.initialize({ startOnLoad: false });
     element.querySelectorAll('.language-mermaid').forEach((pre) => {
@@ -45,16 +45,26 @@ const useRenderChart = (element: HTMLElement) => {
       return;
     }
 
-    render(element);
+    let targetElement;
+    if (element instanceof HTMLElement) {
+      targetElement = element;
+    } else {
+      targetElement = element.current;
+    }
+    render(targetElement);
     const observer = new MutationObserver(() => {
-      render(element);
+      render(targetElement);
     });
 
-    observer.observe(element, {
+    observer.observe(targetElement, {
       childList: true,
       attributes: true,
       subtree: true,
     });
+
+    return () => {
+      observer.disconnect();
+    }
   }, [element]);
 };
 
diff --git a/editor-formula/hooks.ts b/editor-formula/hooks.ts
index 3fd2e4f..3c916c2 100644
--- a/editor-formula/hooks.ts
+++ b/editor-formula/hooks.ts
@@ -17,12 +17,12 @@
  * under the License.
  */
 
-import { useEffect } from 'react';
+import { useEffect, RefObject } from 'react';
 
 // @ts-ignore
 import katexRender from 'katex/contrib/auto-render/auto-render';
 
-const useRenderFormula = (element: HTMLElement) => {
+const useRenderFormula = (element: HTMLElement | RefObject<HTMLElement> | null) => {
   const render = (element) => {
     katexRender(element, {
       delimiters: [
@@ -46,16 +46,26 @@ const useRenderFormula = (element: HTMLElement) => {
       return;
     }
 
-    render(element);
+    let targetElement;
+    if (element instanceof HTMLElement) {
+      targetElement = element;
+    } else {
+      targetElement = element.current;
+    }
+    render(targetElement);
     const observer = new MutationObserver(() => {
-      render(element);
+      render(targetElement);
     });
 
-    observer.observe(element, {
+    observer.observe(targetElement, {
       childList: true,
       attributes: true,
       subtree: true,
     });
+
+    return () => {
+      observer.disconnect();
+    }
   }, [element]);
 };
 
diff --git a/embed-basic/hooks.ts b/embed-basic/hooks.ts
index 1c3a981..fd88f02 100644
--- a/embed-basic/hooks.ts
+++ b/embed-basic/hooks.ts
@@ -17,13 +17,15 @@
  * under the License.
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, RefObject } from 'react';
 
 interface Config {
   platform: string;
   enable: boolean;
 }
-const useRenderEmbed = (element: HTMLElement) => {
+const useRenderEmbed = (
+  element: HTMLElement | RefObject<HTMLElement> | null,
+) => {
   const [configs, setConfigs] = useState<Config[] | null>(null);
 
   const embeds = [
@@ -175,12 +177,12 @@ const useRenderEmbed = (element: HTMLElement) => {
     return html;
   };
 
-  const render = () => {
+  const render = (targetElement) => {
     if (!element) {
       return;
     }
 
-    const links = element.querySelectorAll('a');
+    const links = targetElement.querySelectorAll('a');
     links.forEach((link) => {
       const url = link.getAttribute('href') || '';
       const title = link.getAttribute('title') || '';
@@ -232,14 +234,24 @@ const useRenderEmbed = (element: HTMLElement) => {
       return;
     }
 
-    render();
+    let targetElement;
+    if (element instanceof HTMLElement) {
+      targetElement = element;
+    } else {
+      targetElement = element.current;
+    }
+    render(targetElement);
     const observer = new MutationObserver(() => {
-      render();
+      render(targetElement);
     });
 
-    observer.observe(element, {
+    observer.observe(targetElement, {
       childList: true,
     });
+
+    return () => {
+      observer.disconnect();
+    };
   }, [element, configs]);
 };