How can I wrap top-level components in paragraph tags?

[timbasel]

I'm currently building a project that will contain a large amount of written dialog. For ease of use I want to write the files in markdown and have the quotes be wrapped in components to be able to consistently apply custom styles, colors, etc.

This works perfectly for the first two lines of the following example, i.e. mdx wraps every every markdown paragraph with the correct <p> tag. But for the last two lines, because they only contain a component, mdx does not treat them as markdown paragraph. Therefore it doesn't wrap them in <p> tags and they appear on the same line.

import { Quote } from "~/components/dialog"

Lorem ipsum dolor sit amet, <Quote>consetetur sadipscing elitr, sed diam nonumy eirmod.</Quote>

<Quote>At vero eos et accusam et justo duo dolores et ea rebum.</Quote>, sed diam.

<Quote>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming</Quote>

<Quote>Ut wisi enim ad minim veniam, quis nostrud</Quote>

<p>
   Lorem ipsum dolor sit amet, <span style="color: rgb(255, 0, 0);">"<!--#-->consetetur sadipscing elitr, sed diam nonumy eirmod.<!--/-->"</span>
</p>
<p>
  <span style="color: rgb(255, 0, 0);">"<!--#-->At vero eos et accusam et justo duo dolores et ea rebum.<!--/-->"</span>, sed diam.
</p>
<span style="color: rgb(255, 0, 0);">"<!--#-->Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming<!--/-->"</span>
<span style="color: rgb(255, 0, 0);">"<!--#-->Ut wisi enim ad minim veniam, quis nostrud<!--/-->"</span>

Is there a way for me to make mdx respect the markdown structure for top-level single components, i.e. wrap them in a <p> when they are seperated by an empty line?

PS: I'm currently using vite-plugin-solid-markdown to load the mdx file and it uses mdx 2.2.1.

[ChristianMurphy]

Is there a way for me to make mdx respect the markdown structure for top-level single components, i.e. wrap them in a

when they are seperated by an empty line?

This is the intended behavior, you can see the past discussions on this for the reasoning https://github.com/orgs/mdx-js/discussions?discussions_q=block+inline
And some annotated examples in https://github.com/orgs/mdx-js/discussions/2194#discussioncomment-4357673

How can I wrap top-level components in paragraph tags?

A few ways, without any changes to mdx you can add the paragraph JSX tags where you want them

import { Quote } from "~/components/dialog"

Lorem ipsum dolor sit amet, <Quote>consetetur sadipscing elitr, sed diam nonumy eirmod.</Quote>

<Quote>At vero eos et accusam et justo duo dolores et ea rebum.</Quote>, sed diam.

<p><Quote>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming</Quote></p>

<p><Quote>Ut wisi enim ad minim veniam, quis nostrud</Quote></p>

---

How can I wrap top-level components in paragraph tags?

This may produce unexpected results, but if you really want to do this, it can be done through a plugin.
https://unifiedjs.com/learn/ introduces plugins in mdx/remark/unified and https://mdxjs.com/playground/ shows the different abstract syntax trees you can work with.
Then implement a plugin that wraps mdxJsxFlowElement nodes directly in root with a paragraph node.

If you're looking for inspiration on how another node wrapping plugin works, checkout https://github.com/jake-low/remark-sectionize which wraps headers with a section tag.

[wooorm]

Also: place newlines around your tags. That is, place the text on a different line from the tags. On its own line. Then you get p elements

[timbasel]

Thank you very much.