InstagramEmbed does not load inside Netlify CMS preview

[miensol]

In the Netlify CMS app, a preview is rendered inside an iframe. When we use InstagramEmbed as a custom component with MDX the JS script ('//www.instagram.com/embed.js') is attached to the iframe host window/document.

To alleviate any issues with the Netlify CMS preview rendering one can access the iframe's window and document. However, for InstagramEmbed to use it we would need the ability to pass in window and document.

[justinmahar]

Heck yeah. Working on this now.

[justinmahar]

@miensol Thanks for the PR. I expanded on this an added iframe support for Facebook and TikTok.

The API is slightly different from how you implemented it. You need to provide a webAPIs prop that contains window and document. Like so: webAPIs={{window: myWin, document: myDoc}}

Thanks for opening the issue and the PR! Let me know how that works for you.

npm i react-social-media-embed@latest

[miensol]

Thanks for such prompt action!

You're right, I didn't notice that other components use window/document directly as well.

I like the idea of grouping the 2 props i.e. window and document into a single object/type.

I wonder though if there's a more intuitive name for that pair. I mean more intuitive than webAPIs.

For example react-frame-component refers to them as frame. WDYT?

[justinmahar]

I like it. Let's ship it.

[justinmahar]

Done. New prop is frame, like so: frame={{window: myWin, document: myDoc}}. Also renamed the hook to useFrame and updated the README.

npm i react-social-media-embed@latest

Give that a shot and if it's all good we can close this issue.

[miensol]

Awesome! You rock 😎

[justinmahar]

So do you 🤘 Thanks for working on this with me!