fix(gatsby-theme-docz): replace iframe in playground with div #984 #1035

core/gatsby-theme-docz/src/components/Playground/LivePreviewWrapper.js

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+
+const styles = {
+  iframe: (showingCode, height = 'auto') => ({
+    height,
+    display: 'block',
+    minHeight: '100%',
+    width: 'calc(100% - 2px)',
+    border: t => `1px solid ${t.colors.playground.border}`,
+    borderRadius: showingCode ? '4px 4px 0 0' : '4px',
+  }),
+}
+
+export const LivePreviewWrapper = ({ children, showingCode }) => {
+  return <div sx={styles.iframe(showingCode)}>{children}</div>
+}

core/gatsby-theme-docz/src/components/Playground/index.js

@@ -8,7 +8,7 @@ import { Resizable } from 're-resizable'
 import copy from 'copy-text-to-clipboard'
 
 import { usePrismTheme } from '~utils/theme'
-import { IframeWrapper } from './IframeWrapper'
+import { LivePreviewWrapper } from './LivePreviewWrapper'
 import * as styles from './styles'
 import * as Icons from '../Icons'
 
@@ -69,9 +69,9 @@ export const Playground = ({ code, scope }) => {
         })}
       >
         <div sx={styles.previewWrapper}>
-          <IframeWrapper showingCode={showingCode}>
+          <LivePreviewWrapper showingCode={showingCode}>
             <LivePreview sx={styles.preview} />
-          </IframeWrapper>
+          </LivePreviewWrapper>
           <div sx={styles.buttons}>
             <button sx={styles.button} onClick={() => copy(code)}>
               <Icons.Clipboard size={12} />