prettier: MDX: empty lines inside JSX blocks

I also ran into this issue 😞

This block:

// index.html.mdx
import Layout from "./layout.html.jsx"

export const layout = (props) => (
  <Layout title="Title">
    {props.children}
  </Layout>
)

# Heading

Gets corrected to:

// index.html.mdx
import Layout from "./layout.html.jsx"

export const layout = (props) => (
<Layout title="Title">
{props.children}
</Layout>
)

# Heading

Our team uses docz too and we also have this issue. Removing empty lines from the mdx examples above seems to help.

Looks like React formatting is successful only when the entire node is parsed as a single markdown paragraph before the JSX parser comes into play. If you add spaces to the lines after const and }} here, formatting will work once:

<Playground>
  {() => {
    const message    = "Hello world"
    
    return <Alert   >{message}</Alert   >
  }}
  
</Playground>

Playground

However, the following formatting of the result will be unsuccessful, because after the spaces are removed from the empty lines, we’ve ended up with two markdown paragraphs again. This means that both React nodes are now partial and thus unparsable.

UPD: Another example (jsx only, no functional components and js statements):

• with spaces on empty lines – works
• without spaces on empty lines – syntax error