Astro 3.0 Markdown/MDX auto image asset imports ignore Remark plugins

[i-bsd]

Astro info

Astro version            v3.0.3
Package manager          pnpm
Platform                 linux
Architecture             x64
Adapter                  Couldn't determine.
Integrations             @astrojs/mdx, @astrojs/partytown, @astrojs/prefetch, @astrojs/sitemap, @astrojs/react, @astrojs/svelte, client:click, astro-purgecss, astro-imagetools

What browser are you using?

Chrome

Describe the Bug

Upgraded to Astro 3.0.

Using Remark plugin remark-unwrap-images to remove parent <p> tags from images.

Because of the way Astro is now automatically processing relative path images in Markdown/MDX (e.g. ![alt](./filename.jpg)), the Remark plugin is ignored.

If I use /public/ folder images or remote images, there is no issue.

import remarkUnwrapImages from 'remark-unwrap-images';

...

integrations: [mdx(
    {
      remarkPlugins: [
        remarkUnwrapImages
      ]
    }
  )... ]

Can the automatic image asset import in Markdown/MDX be fixed to check for the existence of Remark plugins?

What's the expected result?

Outputted <img> should not be wrapped by <p> tags.

Astro's new automatic image asset imports in Markdown should take into account Remark plugins if they exist.

Link to Minimal Reproducible Example

https://github.com/i-bsd/astro-3-img-test

Participation

• I am willing to submit a pull request for this issue.

[Princesseuh]

Hmm, I'm not exactly sure how we would check for remark / rehype plugins existing for that. Nonetheless I think a way we could make this work for MDX at least would be a way to disable the rehype part that uses the Image component and instead have a remark plugin just adding the attributes to the node using getImage

I'm not sure why it doesn't work in vanilla Markdown however, there we just add attributes to the existing img tag.

[Princesseuh]

@epsseniyer Please refrain from trying to help people in issues with AI tools. Your messages are all incorrect and spammy.

[epsseniyer]

No. I don't use any AI tool. If you want, you can go ask an AI, 'Is this your code?' I probably won't be there because I only use Google Translate. So, I'm just writing an English text that follows grammar rules, and I handle the formatting myself.

[i-bsd]

@epsseniyer Your comment was utterly irrelevant and unhelpful.

[epsseniyer]

Sorry then. @i-bsd

[i-bsd]

I'm not sure why it doesn't work in vanilla Markdown however, there we just add attributes to the existing img tag.

Does this also apply to MDX?

If I use custom components. E.g:

import Image from '@components/Image.astro'

const mdxComponents = {
	img: Image
}
---

<Page.Content components={mdxComponents} />

this <img> replacement is now ignored in Astro 3.0 also, just like the Remark plugins.

[Princesseuh]

I'm not sure why it doesn't work in vanilla Markdown however, there we just add attributes to the existing img tag.

Does this also apply to MDX?

If I use custom components. E.g:

import Image from '@components/Image.astro'

const mdxComponents = {
	img: Image
}
---

<Page.Content components={mdxComponents} />

this <img> replacement is now ignored in Astro 3.0 also, just like the Remark plugins.

No, in MDX we replace the img tags with our component using rehype. It's a known issue that user components are not respected at this time for that.

In Markdown we can't do that, since well, you can't have components. So there the existing img tags just get updated attributes outside of the remark pipeline.

Markdoc works similarly to MDX. Many formats, many implementations, many problems, arf.

[Nickersoft]

Just ran into this problem myself – is there any plan to address this?

[just-andy]

I've tried using this plugin too