MDX idempotency issue

[cprecioso]

Prettier 2.5.1
Playground link

--parser mdx
--prose-wrap always

Input:

You might be looking for the ready-made <LinkTo kind="Components/UserAvatar">`UserAvatar`</LinkTo> or <LinkTo kind="Components/CompanyAvatar">`CompanyAvatar`</LinkTo> components.

Output:

You might be looking for the ready-made
<LinkTo kind="Components/UserAvatar">`UserAvatar`</LinkTo> or
<LinkTo kind="Components/CompanyAvatar">`CompanyAvatar`</LinkTo> components.

Second Output:

You might be looking for the ready-made

<LinkTo kind="Components/UserAvatar">`UserAvatar`</LinkTo> or
<LinkTo kind="Components/CompanyAvatar">`CompanyAvatar`</LinkTo> components.

Expected behavior:
Some way of keeping the three lines in the same inline (with the first and second output, they are recognized as different blocks). Barring that, at least getting the second output straight-away.

[kachkaev]

Thanks for reporting this issue @cprecioso! It might be related to #12209. I’ve assigned it some tags, but I’m not 100% sure that it’s not a duplicate.

[StraightOuttaCrompton]

Adding here to avoid possible duplication. I have an idempotence issue with the following in an .mdx file

Input/Output 1

<div>
    <div>
        This helps to fix some issues caused by vertical rhythm formulas (if you want to reduce <code>line-height</code>,
        you may use <code>lh100</code>, but use it wisely, it may create issues with user-generated content).
    </div>
</div>

Output 2

<div>
    <div>
        This helps to fix some issues caused by vertical rhythm formulas (if you want to reduce <code>line-height</code>
        , you may use <code>lh100</code>, but use it wisely, it may create issues with user-generated content).
    </div>
</div>

Running prettier results in the output switching between 1 and 2.

Playground link

[benjie]

Another way of describing this is that when prettier formats MDX it can break just before a tag, putting the tag as the first entry in the next line. In MDX this makes the line into a new paragraph, which prettier recognizes, so if you re-format the output it will turn it into a new paragraph.

Prettier 2.7.1
Playground link

--parser mdx
--prose-wrap always

Input:

123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 <tag /> words words

Output:

123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789
<tag /> words words

Second Output:

123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789

<tag /> words words

Expected behavior:

Output should be:

123456789 123456789 123456789 123456789 123456789 123456789 123456789
123456789 <tag /> words words

Prettier should refuse to break before an HTML tag or JSX component in MDX (unless it's already at the start of a line).