search

wooorm / xdm

Just a *really* good MDX compiler. No runtime. With esbuild, Rollup, and webpack plugins
http://wooorm.com/xdm/
MIT License
595 stars 18 forks source link

Weird use of paragraph tag inside a header #98

Closed mtt87 closed 3 years ago

mtt87 commented 3 years ago

Initial checklist

Affected packages and versions: xdm 3.2.0

Steps to reproduce

Link to code example: https://codesandbox.io/s/dawn-firefly-sgphx?file=/src/index.ts

When using HTML heading tag with inside a code tag, everything gets wrapped around a paragraph tag which should not happen.

Expected behavior

<h3 id="test">
  hello this is a heading with <code>inline code</code>
</h3>

Actual behavior

<h3 id="test">
  <p>
    hello this is a heading with <code>inline code</code>
  </p>
</h3>

This behaviour is incorrect according to W3C a heading cannot contain a paragraph. https://validator.w3.org/nu/#textarea Screenshot 2021-11-06 at 00 09 40

It's also problematic because it overwrites the styles of a heading with the p tag.

wooorm commented 3 years ago

This is intended behavior resulting from the way you wrote jsx. See: https://v2.mdxjs.com/docs/what-is-mdx/#interleaving. This way, you also write lists and fenced code in a div. Place the text and tags on their own line if you don't want it.

remcohaszing commented 3 years ago

This is intended behavior resulting from the way you wrote jsx. See: https://v2.mdxjs.com/docs/what-is-mdx/#interleaving. This way, you also write lists and fenced code in a div.

This is more of a technical limitation. I do understand where both this technical limitation as well as the OP are coming from.

It could be solved using a rehype plugin. For example it could unwrap any <p> elements which don’t have siblings, similar to remark-unwrap-images. (This isn’t a call to action for anyone. I just wanted to share a solution.)

mtt87 commented 3 years ago

Thanks everyone for the explanation. I need to disable prettier auto formatting I guess 😃 because I end up with the p situation with default settings

wooorm commented 3 years ago

This is more of a technical limitation.

Technical limitation to me implies that something would be nice to have but too hard to solve, so it isn’t solved. I see this as a conscious descision to allow:

<div>
  ```js
  console.log(1)



...and to not deal with “html” semantics, because then it’d need to make a decision about whether `<MyParagraph />` is expecting inlines or not.

---

> I need to disable prettier auto formatting I guess 😃 because I end up with the p situation with default settings

Yes, I recommend that! This is a quite important distinction between MDX 1 and 2, and prettier doesn’t know about that distinction yet!