From cf9ea9072b680e7128d31a66fb52bd7992191ccf Mon Sep 17 00:00:00 2001 From: rakannimer Date: Thu, 29 Aug 2019 11:54:38 +0300 Subject: [PATCH] fix(gatsby-theme-docz): replace iframe in playground with div #984 #1035 --- .../components/Playground/IframeWrapper.js | 85 ------------------- .../Playground/LivePreviewWrapper.js | 17 ++++ .../src/components/Playground/index.js | 6 +- 3 files changed, 20 insertions(+), 88 deletions(-) delete mode 100644 core/gatsby-theme-docz/src/components/Playground/IframeWrapper.js create mode 100644 core/gatsby-theme-docz/src/components/Playground/LivePreviewWrapper.js diff --git a/core/gatsby-theme-docz/src/components/Playground/IframeWrapper.js b/core/gatsby-theme-docz/src/components/Playground/IframeWrapper.js deleted file mode 100644 index b380081bd..000000000 --- a/core/gatsby-theme-docz/src/components/Playground/IframeWrapper.js +++ /dev/null @@ -1,85 +0,0 @@ -/** @jsx jsx */ -import { jsx } from 'theme-ui' -import { createPortal } from 'react-dom' -import { useEffect, useState, useRef } from 'react' -import { get } from 'lodash/fp' - -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 IframeWrapper = ({ children, showingCode }) => { - const ref = useRef() - const [container, setContainer] = useState(null) - const [height, setHeight] = useState() - const iframeNode = get('current', ref) - - const bodyStyles = iframeNode => { - const style = document.createElement('style') - style.appendChild(document.createTextNode('')) - style.textContent = 'html,body { height: 100%; }' - iframeNode.contentDocument.head.appendChild(style) - } - - const copyStyles = iframeNode => { - const links = Array.from(document.getElementsByTagName('link')) - const styles = Array.from(document.head.getElementsByTagName('style')) - - links.forEach(link => { - if (link.rel === 'stylesheet') { - iframeNode.contentDocument.head.appendChild(link.cloneNode(true)) - } - }) - styles.forEach(style => { - iframeNode.contentDocument.head.appendChild(style.cloneNode(true)) - }) - } - - const handleLoad = () => { - const iframeNode = ref.current - const body = get('contentDocument.body', iframeNode) - if (body) { - setContainer(body) - copyStyles(iframeNode) - bodyStyles(iframeNode) - getHeightFromChild(iframeNode) - } - } - - const getChild = iframeNode => { - return get('contentDocument.body.children', iframeNode) - } - - const getHeightFromChild = iframeNode => { - const child = getChild(iframeNode) - child && child.length > 0 && setHeight(child[0].offsetHeight) - } - - useEffect(() => { - const iframeNode = ref.current - if (!iframeNode) return - iframeNode.addEventListener('load', handleLoad) - return () => iframeNode.removeEventListener('load', handleLoad) - }, [ref]) - - return ( - - ) -} diff --git a/core/gatsby-theme-docz/src/components/Playground/LivePreviewWrapper.js b/core/gatsby-theme-docz/src/components/Playground/LivePreviewWrapper.js new file mode 100644 index 000000000..18b2cb769 --- /dev/null +++ b/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
{children}
+} diff --git a/core/gatsby-theme-docz/src/components/Playground/index.js b/core/gatsby-theme-docz/src/components/Playground/index.js index 3a2ab9800..428327c5e 100644 --- a/core/gatsby-theme-docz/src/components/Playground/index.js +++ b/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 }) => { })} >
- + - +