search

prettier / prettier

Prettier is an opinionated code formatter.
https://prettier.io
MIT License
49.09k stars 4.29k forks source link

MDX: Line Break Behavior in Text within JSX Tags #16589

Open tetracalibers opened 3 weeks ago

tetracalibers commented 3 weeks ago

Prettier 3.3.3 Playground link

--parser mdx

Input:

Lorem ipsum odor amet, consectetuer adipiscing elit. Ad urna torquent augue sagittis quis dis; himenaeos metus habitasse.

<WrapComponent>
  Lorem ipsum odor amet, consectetuer adipiscing elit. Ad urna torquent augue sagittis quis dis; himenaeos metus habitasse.
</WrapComponent>

<WrapComponent>
  Lorem ipsum odor amet, consectetuer adipiscing elit. Ad urna torquent augue sagittis quis dis; himenaeos metus habitasse.

</WrapComponent>

Output:

Lorem ipsum odor amet, consectetuer adipiscing elit. Ad urna torquent augue sagittis quis dis; himenaeos metus habitasse.

<WrapComponent>
  Lorem ipsum odor amet, consectetuer adipiscing elit. Ad urna torquent augue
  sagittis quis dis; himenaeos metus habitasse.
</WrapComponent>

<WrapComponent>
  Lorem ipsum odor amet, consectetuer adipiscing elit. Ad urna torquent augue sagittis quis dis; himenaeos metus habitasse.

</WrapComponent>

When placing long text within JSX tags, the --prose-wrap preserve option does not work as expected, resulting in unintended line breaks. This issue can be avoided by inserting a blank line before and/or after the text inside the JSX tags.

Expected output:

Lorem ipsum odor amet, consectetuer adipiscing elit. Ad urna torquent augue sagittis quis dis; himenaeos metus habitasse.

<WrapComponent>
  Lorem ipsum odor amet, consectetuer adipiscing elit. Ad urna torquent augue sagittis quis dis; himenaeos metus habitasse.
</WrapComponent>

<WrapComponent>
  Lorem ipsum odor amet, consectetuer adipiscing elit. Ad urna torquent augue sagittis quis dis; himenaeos metus habitasse.

</WrapComponent>

Why?

As per my understanding of MDX syntax, it is not necessary to insert blank lines between tags and the Markdown inside them. For example, the MDX documentation provides the following example, which renders correctly:

<div className="note">
  > Some notable things in a block quote!
</div>

I think it would be preferable for the text inside tags to follow the Markdown formatting rules (based on the --prose-wrap setting) even when no blank lines are inserted.

tats-u commented 2 weeks ago

Prettier supports MDX v1. You have to write instead:

<div className="note">

  > Some notable things in a block quote!

</div>

If you don't insert the two blank lines, the content of div is interpreted as a raw JSX, not Markdown.

https://v1.mdxjs.com/

See: #12209 #15221