feat: add option to transform the content copied to the clipboard

Use this function to replace placeholder for variables you don't want to display
Useful for example to replace key values in snipped examples

packages/mdx/src/mdx-client/code.tsx

@@ -57,6 +57,7 @@ export function mergeCodeConfig<T>(
         : showExpandButton,
     rows: props.rows,
     debug: props.debug ?? props.codeConfig?.debug,
+    transformCopyContent: props.transformCopyContent 
   }
   return { ...rest, codeConfig }
 }
@@ -68,7 +69,7 @@ export function InnerCode({
   onTabClick?: (filename: string) => void
 } & Partial<CodeHikeConfig>) {
   const { className, style, codeConfig, ...editorProps } =
-    mergeCodeConfig(props)
+  mergeCodeConfig(props)
 
   if (
     !props.southPanel &&

packages/mdx/src/mini-editor/editor-tween.tsx

@@ -102,6 +102,7 @@ function EditorTween({
         <CopyButton
           className="ch-editor-button"
           content={northContent}
+          transformContent={codeConfig.transformCopyContent}
         />
       ) : undefined}
       {showExpandButton ? (
@@ -117,6 +118,8 @@ function EditorTween({
     <CopyButton
       className="ch-editor-button"
       content={southContent}
+      transformContent={codeConfig.transformCopyContent}
+
     />
   ) : undefined
 

packages/mdx/src/smooth-code/code-tween.tsx

@@ -42,6 +42,7 @@ export type CodeConfig = {
   horizontalCenter?: boolean
   lineNumbers?: boolean
   showCopyButton?: boolean
+  transformCopyContent?: (content: string) => string
   showExpandButton?: boolean
   staticMediaQuery?: string
   rows?: number | "focus" | (number | "focus")[]
@@ -148,6 +149,7 @@ function AfterDimensions({
         <CopyButton
           className="ch-code-button"
           content={stepInfo?.code?.prev}
+          transformContent={config.transformCopyContent}
         />
       ) : undefined}
     </Wrapper>

packages/mdx/src/smooth-code/copy-button.tsx

@@ -2,23 +2,24 @@ import React from "react"
 
 export function CopyButton({
   content,
+  transformContent,
   style,
   className,
 }: {
   content: string
+  transformContent?: (content: string) => string
   style?: React.CSSProperties
   className?: string
 }) {
   const [copied, setCopied] = React.useState(false)
-
   return (
     <button
       type="button"
       title="Copy code"
       className={className}
       style={style}
       onClick={() => {
-        copyToClipboard(content)
+        copyToClipboard(transformContent ? transformContent(content) : content)
         setCopied(true)
         setTimeout(() => {
           setCopied(false)