fix(packages/components/src): fix dedent and copy for template-literal code blocks

Author: code-qtzl

packages/components/src/components/code-block/code-block.tsx

@@ -2,8 +2,8 @@ import type { ReactNode, RefObject } from "react";
 
 import { Classes } from "@/constants/selectors";
 import { cn } from "@/utils/cn";
-import { getNodeText } from "@/utils/get-node-text";
 import type { CodeBlockTheme, CodeStyling } from "@/utils/shiki/code-styling";
+import { getCodeString } from "@/utils/shiki/lib";
 
 import { BaseCodeBlock } from "./base-code-block";
 import { CodeHeader } from "./code-header";
@@ -98,7 +98,7 @@ const CodeBlock = function CodeBlock(params: CodeBlockProps) {
     copyButtonProps,
   } = params;
 
-  const codeString = getNodeText(children);
+  const codeString = getCodeString(children, className, true);
   const hasGrayBackgroundContainer = !!filename || !!icon;
 
   return (

packages/components/src/components/code-group/code-group.tsx

@@ -18,8 +18,8 @@ import {
 import { Icon as ComponentIcon } from "@/components/icon";
 import { Classes } from "@/constants/selectors";
 import { cn } from "@/utils/cn";
-import { getNodeText } from "@/utils/get-node-text";
 import type { CodeBlockTheme, CodeStyling } from "@/utils/shiki/code-styling";
+import { getCodeString } from "@/utils/shiki/lib";
 
 import { LanguageDropdown } from "./language-dropdown";
 
@@ -220,7 +220,11 @@ const CodeGroup = ({
           {feedbackButton && feedbackButton}
           <CopyToClipboardButton
             codeBlockTheme={codeBlockTheme}
-            textToCopy={getNodeText(childArr[selectedIndex]?.props?.children)}
+            textToCopy={getCodeString(
+              childArr[selectedIndex]?.props?.children,
+              childArr[selectedIndex]?.props?.className,
+              true
+            )}
             {...copyButtonProps}
           />
           {askAiButton && askAiButton}

packages/components/src/utils/shiki/lib.ts

@@ -4,6 +4,12 @@ import { getNodeText } from "@/utils/get-node-text";
 import { SHIKI_CLASSNAME } from "@/utils/shiki/constants";
 
 const lineIndentRegex = /^( *)/;
+const closingStructureRegex = /^([}\])]|<\/)/;
+
+function getIndent(line: string): number {
+  const match = line.match(lineIndentRegex);
+  return match ? match[1].length : 0;
+}
 
 function findShikiClassName(children: unknown): boolean {
   if (!children || typeof children !== "object") {
@@ -45,26 +51,46 @@ function dedentCode(code: string): string {
     return code;
   }
 
-  const relevantLines = lines.slice(1).filter((line) => line.trim() !== "");
+  const relevantLines = lines.filter((line) => line.trim() !== "");
   if (relevantLines.length === 0) {
     return code;
   }
 
-  const minIndent = Math.min(
-    ...relevantLines.map((line) => {
-      const match = line.match(lineIndentRegex);
-      return match ? match[1].length : 0;
-    })
-  );
+  const firstLine = relevantLines[0];
+  const lastLine = relevantLines.at(-1) ?? firstLine;
+  const firstIndent = getIndent(firstLine);
+  const lastIndent = getIndent(lastLine);
+  // Detects template-literal pollution: the opening backtick strips the first
+  // line's indent, leaving it at column 0 while the rest of the body retains
+  // JSX whitespace. The matching closing structure (}, ), ], </tag>) ends up
+  // deeper than its opener, which is structurally invalid and a reliable signal
+  // that the body should be dedented while the first line is left alone.
+  const isTemplatePolluted =
+    firstIndent < lastIndent && closingStructureRegex.test(lastLine.trim());
+
+  if (isTemplatePolluted) {
+    const firstNonEmptyIndex = lines.findIndex((line) => line.trim() !== "");
+    const tail = relevantLines.slice(1);
+    if (tail.length === 0) {
+      return code;
+    }
+    const minIndent = Math.min(...tail.map(getIndent));
+    if (minIndent === 0) {
+      return code;
+    }
+    return lines
+      .map((line, i) =>
+        i <= firstNonEmptyIndex ? line : line.slice(minIndent)
+      )
+      .join("\n");
+  }
 
+  const minIndent = Math.min(...relevantLines.map(getIndent));
   if (minIndent === 0) {
     return code;
   }
 
-  return [
-    lines[0],
-    ...lines.slice(1).map((line) => line.slice(minIndent)),
-  ].join("\n");
+  return lines.map((line) => line.slice(minIndent)).join("\n");
 }
 
 function getCodeString(