fix: copy code and snippet

src/components/Clippy.tsx

@@ -18,17 +18,24 @@ export function Clippy({ codeSnippetElement }: Props) {
     return () => window.clearTimeout(timer)
   }, [status])
 
-  const onClippyClick = React.useCallback(function onClippyClick() {
-    if (copyElementContent(codeSnippetElement)) {
-      setStatus('success')
-    } else {
-      setStatus('fail')
+  // Temporary fix:
+  // React moved root node of event delegation since v17
+  // onClick on <a /> won't work when rendered with `renderReact`
+  const elementRef = React.useRef<HTMLButtonElement | null>(null)
+  React.useEffect(() => {
+    const element = elementRef.current
+    if (element) {
+      function onClippyClick() {
+        setStatus(copyElementContent(codeSnippetElement) ? 'success' : 'fail')
+      }
+      element.addEventListener('click', onClippyClick)
+      return () => element.removeEventListener('click', onClippyClick)
     }
   }, [])
 
   return (
     <div className={className}>
-      <button className="clippy" onClick={onClippyClick}>
+      <button className="clippy" ref={elementRef}>
         <i className={cx('icon', status)} />
       </button>
     </div>

src/platforms/GitHub/CopyFileButton.tsx

@@ -8,12 +8,12 @@ type Props = {}
 const className = 'gitako-copy-file-button'
 export const copyFileButtonClassName = className
 
+const contents = {
+  success: 'Success!',
+  error: 'Copy failed!',
+  normal: 'Copy file',
+}
 export function CopyFileButton(props: React.PropsWithChildren<Props>) {
-  const contents = {
-    success: 'Success!',
-    error: 'Copy failed!',
-    normal: 'Copy file',
-  }
   const [content, setContent] = React.useState(contents.normal)
   React.useEffect(() => {
     if (content !== contents.normal) {
@@ -23,20 +23,27 @@ export function CopyFileButton(props: React.PropsWithChildren<Props>) {
       return () => clearTimeout(timer)
     }
   }, [content])
-  return (
-    <a
-      className={cx('btn btn-sm BtnGroup-item copy-file-btn', className)}
-      onClick={() => {
+
+  const elementRef = React.useRef<HTMLAnchorElement | null>(null)
+  React.useEffect(() => {
+    // Temporary fix:
+    // React moved root node of event delegation since v17
+    // onClick on <a /> won't work when rendered with `renderReact`
+    const element = elementRef.current
+    if (element) {
+      function copyCode() {
         const codeElement = getCodeElement()
         if (codeElement) {
-          if (copyElementContent(codeElement)) {
-            setContent(contents.success)
-          } else {
-            setContent(contents.error)
-          }
+          setContent(copyElementContent(codeElement) ? contents.success : contents.error)
         }
-      }}
-    >
+      }
+      element.addEventListener('click', copyCode)
+      return () => element.removeEventListener('click', copyCode)
+    }
+  }, [])
+
+  return (
+    <a ref={elementRef} className={cx('btn btn-sm BtnGroup-item copy-file-btn', className)}>
       {content}
     </a>
   )