Skip to content

fix(packages/components/src): MDX indentation#236

Open
code-qtzl wants to merge 2 commits intomintlify:mainfrom
code-qtzl:fix/mdx-intentations
Open

fix(packages/components/src): MDX indentation#236
code-qtzl wants to merge 2 commits intomintlify:mainfrom
code-qtzl:fix/mdx-intentations

Conversation

@code-qtzl
Copy link
Copy Markdown

@code-qtzl code-qtzl commented May 1, 2026

Issue: #226

Summary

When CodeBlock is used inside MDX/JSX with template literals, the code content inherits the surrounding JSX indentation, causing it to render with extra leading whitespace. This fix adds a dedentCode utility that detects the minimum indentation across all non-empty lines (after the first) and strips it uniformly, so the rendered code aligns correctly regardless of nesting depth.

Two Storybook stories (MDXIndents, MDXIndentsDeeplyNested) are added to cover typical and deeply-nested JSX indentation scenarios.

MDXIndents

MDX_Indents

MDXIndentsDeeplyNested

MDX_IndentsDeeplyNested

Note

Medium Risk
Changes how CodeBlock/CodeGroup derive the raw code string (used for rendering and copy), which could unintentionally alter leading whitespace in some code samples beyond the MDX template-literal cases.

Overview
Fixes extra leading whitespace when CodeBlock content is provided via indented MDX/JSX template literals by adding a dedentCode step to getCodeString.

Updates CodeBlock and CodeGroup to use getCodeString (instead of getNodeText) for copy-to-clipboard text extraction, and adds two Storybook stories (MDXIndents, MDXIndentsDeeplyNested) to cover nested indentation scenarios.

Reviewed by Cursor Bugbot for commit 728aecf. Bugbot is set up for automated code reviews on this repo. Configure here.

Co-authored-by: Copilot <copilot@github.com>
Copy link
Copy Markdown

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 212818e. Configure here.

Comment thread packages/components/src/utils/shiki/lib.ts
Comment thread packages/components/src/utils/shiki/lib.ts
@code-qtzl code-qtzl force-pushed the fix/mdx-intentations branch from ba3d064 to 728aecf Compare May 1, 2026 19:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant