fix: fix the issue that the copy button listener may fail. (#220)

Author: jaywcjlove

core/src/plugins/useCopied.tsx

@@ -1,21 +1,34 @@
 import copyTextToClipboard from '@uiw/copy-to-clipboard';
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
+
+function getParentElement(target: EventTarget | null): null | HTMLElement {
+  if (!target) return null;
+  const dom = target as HTMLElement;
+  if (dom.dataset.code && dom.classList.contains('copied')) {
+    return dom;
+  }
+  if (dom.parentElement) {
+    return getParentElement(dom.parentElement);
+  }
+  return null;
+}
 
 export function useCopied(container: React.RefObject<HTMLDivElement>) {
-  const handle = useCallback((event: Event) => {
-    const target = (event.currentTarget || event.target) as HTMLDivElement;
+  const handle = (event: Event) => {
+    const target = getParentElement(event.target);
+    if (!target) return;
     target.classList.add('active');
     copyTextToClipboard(target.dataset.code as string, function () {
       setTimeout(() => {
         target.classList.remove('active');
       }, 2000);
     });
-  }, []);
+  };
   useEffect(() => {
-    const btns = container.current?.querySelectorAll('div.copied[data-code]');
-    btns && Array.from(btns).forEach((elm) => elm.addEventListener('click', handle, false));
+    container.current?.removeEventListener('click', handle, false);
+    container.current?.addEventListener('click', handle, false);
     return () => {
-      btns && Array.from(btns).forEach((elm) => elm.removeEventListener('click', handle, false));
+      container.current?.removeEventListener('click', handle, false);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [container]);