Playground encapsulation / iframe around the playground

[lkuechler]

Description

This PR adds a iFrame around every playground to solve problems like these: #1271 #1170

One example for the above mentioned issues is the component in dev-env/basic (https://github.com/doczjs/docz/tree/master/dev-env/basic) which currently inherits the font-family from the surrounding docz styles.

I still have open todos for this PR but already wanted to created it to make sure that I am on the correct way for solving these issues. :)

Drawbacks and issues

• any css-in-js library would need changes to still be able to apply styles
• existing projects could already depend on the provided css from docz (font-family in basic example)

Open topics

• implement examples for other css-in-js libraries
• automatic resizing of the iframe would be helpful

[rakannimer]

Hey @lkuechler

Thank you very much for this PR ! I wish you opened an issue before though, because I just finished working on an implementation to wrap the preview and the code editor with an auto-resizing iframe and made it hidden behind a useIframe flag here : #1305

I would love to merge the examples in this PR if you can replace Preview shadowing with IframeWrapper shadowing and would appreciate your feedback in #1305 if possible.

Thanks again for putting in the work, I wish this was submitted yesterday !

[lkuechler]

Thanks for the feedback. I will take a look at your PR and after that I will make the changes on my PR.

I started working on this PR this morning. This means that a issue would also really have been any quicker ;)

[lkuechler]

merged with #1305