#Remove excess `<p></p>` before and after a component in mdx

5 messages · Page 1 of 1 (latest)

outer karma
#

I'm altering the markdown image in mdx to not only unwrap it from the paragraph tags but also wrap it inside a figure. In doing so, it generates <p></p> before and after the figure. Is it possible to prevent this from happening?

// PostLayout.astro
<Content components={{ img: Figure }} />

// Figure.astro
---
import { Image } from 'astro:assets';
---

<figure>
  <Image src={Astro.props.src} alt={Astro.props.alt} />
</figure>

// post.mdx
![Building exterior in Toronto, Canada](../../assets/uploads/building-exterior.webp)

HTML output:

<p></p><figure> <img src="/_image?href=%2F%40fs%2FVolumes%2FEvo%2FSites%2Ftwenty-something%2Fsrc%2Fassets%2Fuploads%2Fbuilding-exterior.webp%3ForigWidth%3D1500%26origHeight%3D703%26origFormat%3Dwebp&amp;f=webp" alt="Building exterior in Toronto, Canada" width="1500" height="703" loading="lazy" decoding="async"> </figure> <p></p>
outer karma
# 
integrations: [
    mdx({
      remarkPlugins: [remarkUnwrapImages, remarkRemoveParagraphs],
      syntaxHighlight: "shiki",
      shikiConfig: {
        theme: "css-variables",
      },
    }),
  ],
distant niche
#

Probably a better solution but as a workaround you could just wrap the image in an empty <></> <>![](../*)</>

outer karma
#

@distant niche thanks! I had originally tried adding {<><figure><Image /></figure></>} in my component before posting this question, but I’ll try your suggestion in the mdx.