fix(packages/components/src): MDX indentation

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.17] - 2026-05-01
+
+### Fixed
+
+- Added TOML language preset to CodeGroup to fix missing icon (#235 by @20syldev)
+- Removed unintended clipboard copy on Accordion open (#234 by @20syldev)
+
 ## [1.0.16] - 2026-04-17
 
 ### Changed

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintlify/components",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Mintlify open-source UI components",
   "type": "module",
   "main": "./dist/index.cjs",

packages/components/src/components/accordion/accordion-url-utils.ts

@@ -1,5 +1,4 @@
 import isEqual from "lodash/isEqual";
-import { copyToClipboard } from "@/utils/copy-to-clipboard";
 
 const CONNECTING_CHARACTER = ":";
 
@@ -42,8 +41,6 @@ const updateAndCopyUrl = () => {
     const idsString = ids.join(CONNECTING_CHARACTER);
     const newUrl = buildHistoryUrl(idsString);
 
-    copyToClipboard(newUrl);
-
     window.history.replaceState(
       { ...window.history.state, as: newUrl, url: newUrl },
       "",

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

@@ -464,3 +464,43 @@ export const WithCustomClassName: Story = {
     </CodeBlock>
   ),
 };
+
+export const MDXIndents: Story = {
+  render: () => (
+    <CodeBlock filename="example.ts" language="ts">
+      {`import {
+        a,
+        b,
+      } from 'pkg';
+
+      async function main() {
+        console.log('hello');
+      }`}
+    </CodeBlock>
+  ),
+};
+
+export const MDXIndentsDeeplyNested: Story = {
+  render: () => (
+    <CodeBlock filename="nested.ts" language="ts">
+      {`function outer() {
+        function middle() {
+          function inner() {
+            function deepest() {
+              if (true) {
+                for (let i = 0; i < 10; i++) {
+                  while (i > 0) {
+                    return 42;
+                  }
+                }
+              }
+            }
+            return deepest();
+          }
+          return inner();
+        }
+        return middle();
+      }`}
+    </CodeBlock>
+  ),
+};

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

@@ -3,6 +3,14 @@ import { type ReactNode, useMemo } from "react";
 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") {
     return false;
@@ -37,6 +45,49 @@ function findShikiClassName(children: unknown): boolean {
   return false;
 }
 
+function dedentCode(code: string): string {
+  const lines = code.split("\n");
+  if (lines.length <= 1) {
+    return code;
+  }
+
+  const relevantLines = lines.filter((line) => line.trim() !== "");
+  if (relevantLines.length === 0) {
+    return code;
+  }
+
+  const firstLine = relevantLines[0];
+  const lastLine = relevantLines.at(-1) ?? firstLine;
+  const firstIndent = getIndent(firstLine);
+  const lastIndent = getIndent(lastLine);
+  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.map((line) => line.slice(minIndent)).join("\n");
+}
+
 function getCodeString(
   children: ReactNode,
   className?: string,
@@ -50,7 +101,7 @@ function getCodeString(
 
   const codeString = getNodeText(children);
 
-  return codeString;
+  return dedentCode(codeString);
 }
 
 function calculateCodeLinesFromHtml(html: string | undefined): number {

packages/components/src/utils/shiki/snippet-presets.ts

@@ -10,7 +10,7 @@ type SnippetPreset = {
   /** Shiki language for syntax highlighting */
   shikiLanguage: string;
   /** httpsnippet config for code generation */
-  httpSnippet: {
+  httpSnippet?: {
     target: string;
     client?: string;
   };
@@ -145,6 +145,11 @@ const SNIPPET_PRESETS: SnippetPreset[] = [
     shikiLanguage: "dart",
     httpSnippet: { target: "dart" },
   },
+  {
+    key: "toml",
+    displayName: "TOML",
+    shikiLanguage: "yaml",
+  },
 ];
 
 const presetLookup = new Map<string, SnippetPreset>();