fix: correct button override to spread all props and avoid nested buttons
This commit is contained in:
@@ -106,27 +106,10 @@ export function getMDXComponents(components: MDXComponents): MDXComponents {
|
|||||||
details: (props) => <details className="my-4 rounded-lg border border-border p-4" {...props} />,
|
details: (props) => <details className="my-4 rounded-lg border border-border p-4" {...props} />,
|
||||||
summary: (props) => <summary className="cursor-pointer font-semibold" {...props} />,
|
summary: (props) => <summary className="cursor-pointer font-semibold" {...props} />,
|
||||||
|
|
||||||
// Buttons (handle onclick string from transformerCopyButton)
|
button: ({ children, onClick, ...props }) => (
|
||||||
button: ({ children, onClick, ...props }: { children?: React.ReactNode; onClick?: string | (() => void); className?: string } & Record<string, unknown>) => {
|
typeof onClick === 'string'
|
||||||
if (typeof onClick === 'string') {
|
? <button {...props} dangerouslySetInnerHTML={{ __html: children as string }} onclick={onClick} />
|
||||||
const className = (props.className as string) ?? '';
|
: <button {...props} onClick={onClick}>{children}</button>
|
||||||
return (
|
),
|
||||||
<button
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: `<button${className ? ` class="${className.replace(/"/g, '"')}"` : ''} onclick="${onClick}">${(children as string) ?? ''}</button>`
|
|
||||||
}}
|
|
||||||
suppressHydrationWarning
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
{...props}
|
|
||||||
onClick={typeof onClick === 'function' ? onClick : undefined}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user