GitHub svg media library preview support #954
Conversation
|
Deploy preview ready! Built with commit 70c3090 |
|
Deploy preview ready! Built with commit 70c3090 |
|
Info on |
|
This is awesome, thanks @Jinksi! |
|
@erquhart Can you double-check this in Safari? According to MDN, EDIT: CanIUse does show Safari support? https://caniuse.com/#feat=urlsearchparams |
| return { id: sha, name, size, url: download_url, path }; | ||
| const url = new URL(download_url); | ||
| if (url.pathname.match(/.svg$/)) { | ||
| url.searchParams.append('sanitize', true); |
There was a problem hiding this comment.
MS Edge does not support searchParams, and it seems to break the entire media library if a single SVG is added.
- Upload other images -- media library works normally.
- Reload CMS page -- works normally.
- Upload SVG -- preview does not load, other image work.
- Reload CMS page -- all images missing.
There was a problem hiding this comment.
It looks like Edge will support this in v17: https://caniuse.com/#feat=urlsearchparams. We normally support two versions, though, so it's not practical to just wait until it is released.
There was a problem hiding this comment.
These should be equivalent, and the second supported in all our browsers:
url.searchParams.append('sanitize', true);url.search += (url.search.slice(1) === '' ? '?' : '&') + 'sanitize=true';
There was a problem hiding this comment.
Good catch @tech4him1, agreed on the workaround.
There was a problem hiding this comment.
@tech4him1 @erquhart Updated 70c3090
|
@tech4him1 this was updated, can you merge if you approve? |
|
Works great! There is a rendering issue in Microsoft Edge, so I've opened a separate issue for that: #983. |
- Summary
In the media library, SVG media loaded from https://raw.githubusercontent.com was unable to be displayed due to github's response content-type set to text/plain rather than image/svg+xml.
Appending a
sanitize=truequery to the url allows github to return the correct content-type.- Test plan
Example working SVG preview:
- Description for the changelog
Enable SVG preview in media library.
- A picture of a cute animal (not mandatory but encouraged)