Avoid parsing paragraphs inside an existing <p> tag

[Wonkers0]

I've seen previous discussions arround this topic at #1798 and have also read the documentation for Interleaving. I want to present my use case because I am unsure of how to work around MDX's "block" philosophy:

<ContentBlock>
  <p>
    Notice that every website is comprised of one *root element* — `html`. All
    other elements must be nested inside this element to be parsed correctly by
    a web browser. This element takes in only a few attributes, one of which is
    `lang`, which accepts a{" "}
    {
      <Term
        definition={
          <>
            e.g. <code>en</code> for english
          </>
        }
      >
        language code
      </Term>
    }
    to specify the language of all text content within the website.
  </p>
</ContentBlock>

This is a piece of my mdx that has been formatted with Prettier. As you can see, it spans multiple lines. The issue is that I need the entire text copy, including the Term, to be under one paragraph tag so that the term displays inline. MDX creates 2 paragraph tags before and after the term, which ends up looking like this:

As you can see, I've also tried wrapping the term in a JSX expression, but that didn't do much because the text copy itself is still parsed by markdown. What I'm looking for is a way to avoid the block parsing while still being able to use fundamental markdown features such as inline code and italics (which is what I'm really interested in).

Is there an existing solution or would a fix for this be outside the project's scope?

[wooorm]

formatted with Prettier

I recommend turning it off for MDX. It doesn’t support MDX 2 +.

---

How about:

<ContentBlock>
  Notice that every website is comprised of one *root element* — `html`. All
  other elements must be nested inside this element to be parsed correctly by
  a web browser. This element takes in only a few attributes, one of which is
  `lang`, which accepts
  a <Term definition={<>e.g. <code>en</code> for english</>}>language code</Term>
  to specify the language of all text content within the website.
</ContentBlock>

Or:

export const languageCodeDescription = <>e.g. <code>en</code> for english</>

<ContentBlock>
  Notice that every website is comprised of one *root element* — `html`. All
  other elements must be nested inside this element to be parsed correctly by
  a web browser. This element takes in only a few attributes, one of which is
  `lang`, which accepts
  a <Term definition={languageCodeDescription}>language code</Term>
  to specify the language of all text content within the website.
</ContentBlock>

[Wonkers0]

Thanks for helping out; I've followed this approach for a bit, but it sort of breaks down with more complex definitions. How would you store a definition consisting of a custom component? It is not imported from mdx-components.tsx (because we're working within a js expression here, I suppose) and trying to import from tsx files gives the following error:
Unknown file extension "tsx" for ...

Here's a snippet:

export const htmlChildrenElementsDef = (
  <div className="flex flex-col">
    <CodeSnippet>
      <pre>
        <code>{"<div><p>Hello</p></div>"}</code>
      </pre>
    </CodeSnippet>

    <span className="mt-2">
      An element is a "child" of another if it is nested inside it. For
      instance, in the example above, the <code>p</code> element is a child of
      the <code>div</code> element.
    </span>
  </div>
);

[wooorm]

How would you store a definition consisting of a custom component?

You can put it inside an MDX document, say, html-children-elements-def.mdx:

```html
<div><p>Hello</p></div>
```

<div className="mt-2">
  An element is a "child" of another if it is nested inside it. For
  instance, in the example above, the `p` element is a child of
  the `div` element.
</div>

And import it in the places that need it:

import htmlChildrenElementsDef from '../path/to/html-children-elements-def.mdx'

<ContentBlock>
  Lorem
  ipsum <Term definition={htmlChildrenElementsDef}>dolor</Term>
  sit amet.
</ContentBlock>

[wooorm]

trying to import from tsx files gives the following error:
Unknown file extension "tsx" for ...

This is an error thrown by some bundler, which I cannot infer from your posts, but you could likely also choose to configure that bundler so that this error does not happen and it thus works.