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.

[epsseniyer]

1. First, if you're using Astro version 3.0.3, navigate to the root directory of your Astro project and run the command pnpm install remark-unwrap-images to install the remark-unwrap-images package. This package helps remove the <p> tags wrapping the image tags in Markdown files.

2. Next, open the astro.config.mjs file in your Astro project. If such a file doesn't exist, create a file named astro.config.mjs in the root directory of your project.

3. In the astro.config.mjs file, add the following code snippet to configure the mdx integration:

   
   import mdx from '@astrojs/mdx';
   import remarkUnwrapImages from 'remark-unwrap-images';

export default { // Add other configuration settings here

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

This configuration sets up the mdx integration and uses the remarkUnwrapImages plugin to remove the `<p>` tags wrapping image tags in Markdown files.

4. Now you can create a Markdown file. Here's a simple example:
```md
# Hello, World lol!

This is a Markdown file. Here's an image:

![Astro Logo](./astro-logo.png)

And here's another image:

![Astro Banner](./astro-banner.png)

[i-bsd]

1. First, if you're using Astro version 3.0.3, navigate to the root directory of your Astro project and run the command pnpm install remark-unwrap-images to install the remark-unwrap-images package. This package helps remove the <p> tags wrapping the image tags in Markdown files.
2. Next, open the astro.config.mjs file in your Astro project. If such a file doesn't exist, create a file named astro.config.mjs in the root directory of your project.
3. In the astro.config.mjs file, add the following code snippet to configure the mdx integration:

import mdx from '@astrojs/mdx';
import remarkUnwrapImages from 'remark-unwrap-images';

export default {
  // Add other configuration settings here

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

This configuration sets up the mdx integration and uses the remarkUnwrapImages plugin to remove the <p> tags wrapping image tags in Markdown files.

4. Now you can create a Markdown file. Here's a simple example:

# Hello, World lol!

This is a Markdown file. Here's an image:

![Astro Logo](./astro-logo.png)

And here's another image:

![Astro Banner](./astro-banner.png)

This does not work at all which is why I submitted the issue.

Did exactly this (see my minimal reproducible example).

[epsseniyer]

1. First, I accessed the shared GitHub repository and reviewed the content to better understand your problem.

2. After examining your code, you can follow these steps to resolve the issue:

• Open the Intro.astro file and modify the <div class={class}> tag on line 10 as follows:

  <div class={props.class}>

• Open the index.astro file and modify the <Intro class="intro"> tag on line 6 as follows:

  <Intro class="intro" class={props.class}>

3. After making these changes, restart your Astro project and refresh the page. The Intro component should now retain the styles provided by the class prop.

[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