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 <[email protected]> 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]); };
