feat: add copyText to CodeBlock

Author: darrickyong

main/snippets/AuthCodeBlock.jsx

@@ -5,14 +5,17 @@ export const AuthCodeBlock = ({
   highlight,
   children,
 }) => {
-  const [processedChildren, setProcessedChildren] = useState(children);
+  const [displayText, setDisplayText] = useState(children);
+  const [copyText, setCopyText] = useState(children);
 
   useEffect(() => {
     let unsubscribe = null;
 
     function init() {
       unsubscribe = window.autorun(() => {
-        let processedChildren = children;
+        let processedChildrenForDisplay = children;
+        let processedChildrenForCopy = children;
+
         for (const [
           key,
           value,
@@ -21,12 +24,27 @@ export const AuthCodeBlock = ({
             /[.*+?^${}()|[\]\\]/g,
             String.raw`\$&`
           );
-          processedChildren = processedChildren.replaceAll(
+
+          // For display: mask client secret if it's not the placeholder
+          let displayValue = value;
+          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
+            displayValue = value.substring(0, 3) + "*****MASKED*****";
+          }
+
+          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(
+            new RegExp(escapedKey, "g"),
+            displayValue
+          );
+
+          // For copy: use the actual value (unmasked)
+          processedChildrenForCopy = processedChildrenForCopy.replaceAll(
             new RegExp(escapedKey, "g"),
             value
           );
         }
-        setProcessedChildren(processedChildren);
+
+        setDisplayText(processedChildrenForDisplay);
+        setCopyText(processedChildrenForCopy);
       });
     }
 
@@ -49,8 +67,9 @@ export const AuthCodeBlock = ({
       language={language}
       lines
       highlight={highlight}
+      copyButtonProps={{ textToCopy: copyText, onCopied: () => console.log('onCopied') }}
     >
-      {processedChildren}
+      {displayText}
     </CodeBlock>
   );
 };