fix: use client-side ref to handle onclick string from transformerCopyButton

components/blog/button-client.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+export function ClientButton({ children, onClick, ...props }: { children?: React.ReactNode; onClick?: string } & React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const btnRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (typeof onClick === 'string' && btnRef.current) {
+      btnRef.current.onclick = onClick as any
+    }
+  }, [onClick])
+
+  return (
+    <button ref={btnRef} {...props}>
+      {children}
+    </button>
+  )
+}

mdx-components.tsx

@@ -1,4 +1,5 @@
 import type { MDXComponents } from 'mdx/types'
+import { ClientButton } from '@/components/blog/button-client'
 
 export function getMDXComponents(components: MDXComponents): MDXComponents {
   return {
@@ -106,10 +107,9 @@ export function getMDXComponents(components: MDXComponents): MDXComponents {
     details: (props) => <details className="my-4 rounded-lg border border-border p-4" {...props} />,
     summary: (props) => <summary className="cursor-pointer font-semibold" {...props} />,
 
-    button: ({ children, onClick, ...props }) => (
-      typeof onClick === 'string'
-        ? <button {...props} dangerouslySetInnerHTML={{ __html: children as string }} onclick={onClick} />
-        : <button {...props} onClick={onClick}>{children}</button>
-    ),
+    button: ({ children, onClick, ...props }) => {
+      const onClickString = typeof onClick === 'string' ? onClick : undefined
+      return <ClientButton onClick={onClickString} {...props}>{children}</ClientButton>
+    },
   }
 }