fix: Fix code copy button issue.

Author: jaywcjlove

src/index.tsx

@@ -12,6 +12,7 @@ import rehypePrism from 'rehype-prism-plus';
 import rehypeRewrite, { getCodeString, RehypeRewriteOptions } from 'rehype-rewrite';
 import { octiconLink } from './nodes/octiconLink';
 import { copyElement } from './nodes/copy';
+import { useCopied } from './plugins/useCopied';
 import './styles/markdown.less';
 
 import { reservedMeta } from './plugins/reservedMeta';
@@ -50,9 +51,10 @@ export default React.forwardRef<MarkdownPreviewRef, MarkdownPreviewProps>((props
     warpperElement = {},
     ...other
   } = props;
-  const mdp = React.createRef<HTMLDivElement>();
+  const mdp = React.useRef<HTMLDivElement>(null);
   useImperativeHandle(ref, () => ({ ...props, mdp }), [mdp, props]);
   const cls = `${prefixCls || ''} ${className || ''}`;
+  useCopied(mdp);
 
   const rehypeRewriteHandle: RehypeRewriteOptions['rewrite'] = (node, index, parent) => {
     if (node.type === 'element' && parent && parent.type === 'root' && /h(1|2|3|4|5|6)/.test(node.tagName)) {

src/nodes/copy.ts

@@ -1,23 +1,12 @@
 import { Element } from 'hast';
-import copyTextToClipboard from '@uiw/copy-to-clipboard';
 
 export function copyElement(str: string = ''): Element {
   return {
     type: 'element',
     tagName: 'div',
     properties: {
-      // @ts-ignore
-      onClick: (event) => {
-        const target = event.currentTarget || event.target;
-        target.classList.add('active');
-        copyTextToClipboard(target.dataset.code as string, function () {
-          setTimeout(() => {
-            target.classList.remove('active');
-          }, 2000);
-        });
-      },
-      'data-code': str,
       class: 'copied',
+      'data-code': str,
     },
     children: [
       {

src/plugins/useCopied.tsx

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