-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Don't swallow spaces in a srcset attribute #1607
Comments
@joostdecock this looks like a URL? |
It may also be worth checking to see how MDX 2 handles this #1041 as version 2 includes a number of parser fixes and improvements |
The The spec is rather explicit about this:
(The So urlencoding is no solution here as the space is not part of the URL, but precisely there to signal where one URL ends and the next one starts. |
Seconding @joostdecock here re the spec. This behavior landed in GH-1039 here, I checked that it works in xdm, so it most likely also works on the |
Thanks @wooorm & @ChristianMurphy I'll give In the meanwhile, for those facing the same issue (or landing here from a search) you can side-step the problem by explicitly setting a pixel density descriptor. So instead of this:
Use this:
The space before the |
Upgraded to I will try to setup a minimal repo to reproduce this as I've got next-mdx-remote in the mix. |
I have setup a minimal repo to reproduce this problem: https://github.com/joostdecock/mdx-issue It has two pages, one using What I've published uses However, given that the problem is still there when using |
This seems to be because the plugin in question, It might be able to work with xdmimport path from 'node:path'
import remarkResponsiveImages from '@fec/remark-responsive-images'
import rehypeRaw from 'rehype-raw'
import {compile} from 'xdm'
main()
async function main() {
const compiled = await compile(
'![This is an image](/example.jpg "This is the image title")',
{
remarkPlugins: [
[
remarkResponsiveImages,
{
srcDir: path.resolve('.', 'public'),
targetDir: path.resolve('.', 'public'),
blurredBackground: false,
imageSizes: [500, 1000, 1500],
resolutions: [1, 2, 3]
}
]
],
rehypePlugins: [rehypeRaw]
}
)
console.log(String(compiled))
} But I would recommend that the plugin were changed. Or a new plugin written. It’s operating in the markdown phase and injecting HTML, which is not logical. There’s an HTML phase specifically for changing HTML (so a rehype plugin could do it cleaner) |
Thank you @wooorm for your help in getting to the bottom of this, much appreciated. 🙏 I will close this and see if @florianeckerstorfer would be willing to update the plugin 🤞 If not, I might fork it 🤔 Keep up the great work! |
Spaced in a
srcset
attribute are removedI'm using a remark plugin to add responsive images. It adds image tags with a
srcset
attribute like this:MDX picks up the attribute and converts it to a prop:
MDX then feeds that to
React.CreateElement
which will concat the array and render this:The problem is that it's dropping the space, and as a comma is a valid character in a URL, the browser reads this as a single entry in the srcset:
/mdx_files/basting-1000.jpg,/mdx_files/basting-2000.jpg
Your environment
Steps to reproduce
I didn't setup a repo for this because I felt it was pretty obvious what's happening.
Expected behaviour
What we need is to not trim the splitted parts of the string, or simply prefixed each srcset entry with a space:
Leading whitespace is ok in the srcset attribute.
Actual behaviour
The whitespace after the comma in the srcset list is swallowed by splitting it into an array and then joining it.
The text was updated successfully, but these errors were encountered: