[remark-embedder] CodeSandbox embed with sandbox link as text doesn't work
MichaelDeBoey opened this issue · 17 comments
When converting all of @CompuIves' Medium posts over to @codesandbox' blog, I copy-pasted the remark-embedder. (see codesandbox/codesandbox-client#2011)
When looking at all the pages I came across a bug with the CodeSandbox embed when using the sandbox link as the text of the link.
When I try to embed the following link, I see the embed instead of the text itself
An example of this can be seen at https://pr2011.build.csb.dev/post/codesandbox-an-online-react-editor (bottom of the page)
[https://codesandbox.io/s/o2yq9MkQk](https://codesandbox.io/s/o2yq9MkQk)This seems to be very similar to #191 at first sight, but this one occurs on your blog too (as can be seen at https://kentcdodds.com/blog/mixing-component-patterns where you get a "not found" embed) when having
[**codesandbox.io/s/534rnk5yyx**](https://codesandbox.io/s/534rnk5yyx)That should be an easy fix. I'll get that done now.
@kentcdodds Not sure if it's fixed like it's intended.
I think what we should see is the following:
✨ codesandbox.io/s/534rnk5yyx ✨
But after this fix we're seeing the CodeSandbox embed between the stars:
Aaah, yes, that makes sense. Hmmm... I'll look into it.
Alright, I've really fixed it this time. I feel like this is a pretty good improvement, especially for the different URL transformers because we moved the validation of the URL to the main plugin so by the time it gets to the transformers we know it's a URL and don't have to validate that in each transformer which I think is great.
It also probably runs faster because rather than visiting every text node we just visit the paragraph nodes!
It's indeed a good improvement, but I'm still seeing the embedded CodeSandbox on the mixing-component-patterns blogpost, even in Incognito mode 😕
Deploying my site takes a long time thanks to gatsby-plugin-sharp (the image optimization plugin). It's still going: https://app.netlify.com/sites/kentcdodds/deploys
It's done now :)
Oh I'm sorry didn't know that 😕
Will keep that in mind next time 😉
Seems to work now indeed! 🎉🤘
The way it's implemented, there would still be no difference between these 2 I think? 🤔
[https://codesandbox.io/s/o2yq9MkQk](https://codesandbox.io/s/o2yq9MkQk)and
https://codesandbox.io/s/o2yq9MkQkNot sure if that's even possible tho...
@all-contributors please add @MichaelDeBoey for bugs
I've put up a pull request to add @MichaelDeBoey! 🎉
You're correct. If someone did that then it would be auto-embedded. But chances that someone's going to do that and want it to not be embedded are very unlikely I think.
And if they did, they could do this:
[https://codesandbox.io/s/o2yq9MkQk](https://codesandbox.io/s/o2yq9MkQk Some cool codesandbox)
And that'll work :)
Or they could do this:
[codesandbox.io/s/o2yq9MkQk](https://codesandbox.io/s/o2yq9MkQk)
And that would work too.
At https://medium.com/@CompuIves/codesandbox-an-online-react-editor-b8945ce095d2 it's meant as a normal link, but when you look at https://pr2011.build.csb.dev/post/codesandbox-an-online-react-editor, you can see the embeds.
So that's why I was thinking about it
Wait, where's the source markdown for that?
This should only apply if the link is appearing by itself on the line. If it's accompanied by any other text then it will not be an embed.
My bad, I was looking at the wrong branch locally and didn't push it yet 😓
Seems te be OK now, thanks! 👊🤘