Handle encoded image paths in markdown

[bluwy]

Changes

fix #11291

The markdown vfile data.imagePaths now contains decoded paths instead of possibly-encoded paths. I'm not sure if this is ideal/intentional for the option itself, but this top-level change helps align all downstream usage:

1. Printing decoded paths in the imports allow Vite to properly resolve assets (Also a Vite bug)

astro/packages/astro/src/vite-plugin-markdown/images.ts

Lines 6 to 8 in 93d068a

	${imagePaths
	.map((entry) => `import Astro__${entry.safeName} from ${JSON.stringify(entry.raw)};`)
	.join('\n')}

2. MDX rehypeImageToComponent currently compares with decoded paths, the generated imports are also decoded:

astro/packages/integrations/mdx/src/rehype-images-to-component.ts

Lines 84 to 86 in 93d068a

	const src = decodeURI(String(node.properties.src));
	if (!file.data.imagePaths.has(src)) return;

3. rehype-images is also comparing with decoded paths:

astro/packages/markdown/remark/src/rehype-images.ts

Lines 14 to 16 in 93d068a

	node.properties.src = decodeURI(node.properties.src);
	if (file.data.imagePaths?.has(node.properties.src)) {

4. Encoded paths also messes with this regex generation (that I don't complete understand yet):

astro/packages/astro/src/vite-plugin-markdown/images.ts

Lines 12 to 20 in 93d068a

	${imagePaths
	.map((entry) => {
	const rawUrl = JSON.stringify(entry.raw);
	return `{
	const regex = new RegExp('__ASTRO_IMAGE_="([^"]*' + ${rawUrl.replace(
	/[.*+?^${}()|[\]\\]/g,
	'\\\\$&'
	)} + '[^"]*)"', 'g');
	let match;

---

So with the above discoveries, I made this PR change instead of keeping imagePaths encoded only.

Testing

Added new tests

Docs

n/a. bug fix.

[changeset-bot]

🦋 Changeset detected

Latest commit: 93d068a

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR