From 8013233528ae76a863cf490b5c826751d52d1d47 Mon Sep 17 00:00:00 2001
From: Oriol <ocastro@gigapipe.com>
Date: Tue, 13 Jun 2023 16:47:40 +0200
Subject: [PATCH] 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          | 3 ++-
 packages/mdx/src/mini-editor/editor-tween.tsx | 3 +++
 packages/mdx/src/smooth-code/code-tween.tsx   | 2 ++
 packages/mdx/src/smooth-code/copy-button.tsx  | 5 +++--
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/mdx/src/mdx-client/code.tsx b/packages/mdx/src/mdx-client/code.tsx
index 2f0644d6..35581ffd 100644
--- a/packages/mdx/src/mdx-client/code.tsx
+++ b/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 &&
diff --git a/packages/mdx/src/mini-editor/editor-tween.tsx b/packages/mdx/src/mini-editor/editor-tween.tsx
index b49846c7..f93e5147 100644
--- a/packages/mdx/src/mini-editor/editor-tween.tsx
+++ b/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
 
diff --git a/packages/mdx/src/smooth-code/code-tween.tsx b/packages/mdx/src/smooth-code/code-tween.tsx
index a15cdf6e..78ec301c 100644
--- a/packages/mdx/src/smooth-code/code-tween.tsx
+++ b/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>
diff --git a/packages/mdx/src/smooth-code/copy-button.tsx b/packages/mdx/src/smooth-code/copy-button.tsx
index 270e9498..f900d1d7 100644
--- a/packages/mdx/src/smooth-code/copy-button.tsx
+++ b/packages/mdx/src/smooth-code/copy-button.tsx
@@ -2,15 +2,16 @@ 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"
@@ -18,7 +19,7 @@ export function CopyButton({
       className={className}
       style={style}
       onClick={() => {
-        copyToClipboard(content)
+        copyToClipboard(transformContent ? transformContent(content) : content)
         setCopied(true)
         setTimeout(() => {
           setCopied(false)