Tilde (~) character inside JSX component breaks in MDX v2

[patrickarlt]

Subject of the issue

Tildes (~) inside MDX blocks in v2 do not parse.

Your environment

N/A can be reproduced in the v2 playground https://mdx-git-next.mdx.vercel.app/playground.

Steps to reproduce

1. Go to https://mdx-git-next.mdx.vercel.app/playground
2. Enter ~1 foot. parses as expected.
3. Replace with

   <Box>
   
   ~1 foot.
   
   </Box>
   

4. Parse error

Expected behavior

Should parse successfully.

Actual behavior

5:7: Unexpected end of file in code, expected a corresponding fence for `~`

[patrickarlt]

Current workaround would be to do something like:

<Box>

{`~`}1 foot.

</Box>

[wooorm]

Nice catch!

The reason for that is that code should be skipped:

<A>
~~~
</A>
~~~
</A>

Or:

<A>`</A>`</A>

While correctly parsing code is a bit more involved, I chose to require that ` and ~ must be balanced.
Another workaround is to use character references: ~ or ~

[patrickarlt]

@wooorm Is correctly parsing code something that you want to keep this open for on the radar? These workarounds are all pretty acceptable but since this parses fine in v1 https://mdxjs.com/playground/ should it be logged as a breaking change somewhere.

[wooorm]

I'd say both describe it in a migration guide, and keep it open while we're gathering more feedback from folks!

[wooorm]

Hi all! I’m going to close this as it landed on the main, the (now default) branch we’re using to gear up to the MDX@2 release.

The reason is so that it’s more clear which issues still need to be solved already and don’t require further work.

Expect another next release soonish, which might include it, or maybe it’s already released as a beta!

For more info, see #1041.