From fe4261f58fac41b93fbd4141ddd0485934ba0ef6 Mon Sep 17 00:00:00 2001
From: Krishna Ayyalasomayajula <krishna@ayyalasomayajula.net>
Date: Mon, 1 Jun 2026 23:17:51 -0500
Subject: [PATCH] fix: add button override to handle transformerCopyButton
 onclick string

---
 mdx-components.tsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/mdx-components.tsx b/mdx-components.tsx
index b9a5ba7..8eae550 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -105,5 +105,28 @@ export function getMDXComponents(components: MDXComponents): MDXComponents {
     // Collapsible sections
     details: (props) => <details className="my-4 rounded-lg border border-border p-4" {...props} />,
     summary: (props) => <summary className="cursor-pointer font-semibold" {...props} />,
+
+    // Buttons (handle onclick string from transformerCopyButton)
+    button: ({ children, onClick, ...props }: { children?: React.ReactNode; onClick?: string | (() => void); className?: string } & Record<string, unknown>) => {
+      if (typeof onClick === 'string') {
+        const className = (props.className as string) ?? '';
+        return (
+          <button
+            dangerouslySetInnerHTML={{
+              __html: `<button${className ? ` class="${className.replace(/"/g, '&quot;')}"` : ''} onclick="${onClick}">${(children as string) ?? ''}</button>`
+            }}
+            suppressHydrationWarning
+          />
+        );
+      }
+      return (
+        <button
+          {...props}
+          onClick={typeof onClick === 'function' ? onClick : undefined}
+        >
+          {children}
+        </button>
+      );
+    },
   }
 }