feat: custom prettier plugin to correctly format inline MDX components#29770
Open
mvvmm wants to merge 5 commits intoproductionfrom
Open
feat: custom prettier plugin to correctly format inline MDX components#29770mvvmm wants to merge 5 commits intoproductionfrom
mvvmm wants to merge 5 commits intoproductionfrom
Conversation
github-actions
bot
added
product:workers
github-actions
bot
assigned
patriciasantaana,
elithrar,
joshthoward,
lambrospetrou,
mikenomitch,
Oxyjun,
vy-ton,
pedrosousa,
GregBrimble and
irvinebroque
Contributor
|
This pull request requires reviews from CODEOWNERS as it changes files that match the following patterns:
|
mvvmm
changed the title
Contributor
Contributor
Author
|
Checked each of the files output myself, and they all look correct. |
mvvmm
requested review from
a team,
elithrar and
patriciasantaana
as code owners
mvvmm
requested review from
a team,
GregBrimble,
MattieTK,
Oxyjun,
WalshyDev,
celso,
irvinebroque,
jonesphillip,
joshthoward,
korinne,
lambrospetrou,
mia303,
mikenomitch,
pedrosousa and
vy-ton
as code owners
mvvmm
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
12 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a custom prettier plugin (
prettier-plugin-mdx-inline) that prevents prettier from wrapping<code>and<GlossaryTooltip>children onto new lines in MDX files.The problem: Prettier's MDX formatter treats standalone JSX elements as block-level and wraps their children onto new lines when they exceed
printWidth. MDX v2+ interprets those newlines as markdown paragraph boundaries, injecting<p>tags inside inline elements — producing broken HTML like<code><p>...</p></code>. This is a known MDX behavior (mdx-js/mdx#1798) and prettier's MDX parser does not yet account for it (prettier/prettier#12209 tracks MDX v3 support which may eventually resolve this). The codebase relied on 41prettier-ignorecomments to work around it.The fix: The plugin wraps prettier's built-in MDX parser and converts matching JSX AST nodes to opaque HTML nodes that prettier outputs verbatim. It also collapses any existing multi-line formatting (from previous prettier runs) back to a single line. The element list is configurable via
mdxInlineElementsin.prettierrc.mjs.What changed in content files:
prettier-ignorecomments that were guarding<code>and<GlossaryTooltip>elements<code>blocks back to single lines (these had been reformatted by prettier in the past withoutprettier-ignoreprotection)Performance: Negligible overhead (~60ms across 231 files, within run-to-run noise).
Images
Here are just two examples...
Before
https://developers.cloudflare.com/durable-objects/best-practices/websockets/
https://developers.cloudflare.com/durable-objects/api/base/
After
https://mdx-formatting.preview.developers.cloudflare.com/durable-objects/best-practices/websockets/
https://mdx-formatting.preview.developers.cloudflare.com/durable-objects/api/base/