// Theirs
import React from 'react'
import Head from 'next/head'
import { withRouter } from 'next/router'
import url from 'url'
import morph from 'morphmorph'
// Ours
import { StylesheetLink, CodeMirrorLink, MetaTags } from '../components/Meta'
import Carbon from '../components/Carbon'
import { DEFAULT_CODE, DEFAULT_SETTINGS } from '../lib/constants'
import { getQueryStringState } from '../lib/routing'
const isInIFrame = morph.get('parent.window.parent')
const Page = props => (
Carbon Embeds
{props.children}
)
class Embed extends React.Component {
state = {
...DEFAULT_SETTINGS,
code: DEFAULT_CODE,
mounted: false,
readOnly: true
}
componentDidMount() {
const { asPath = '' } = this.props.router
const { query } = url.parse(asPath, true)
const queryParams = getQueryStringState(query)
const initialState = Object.keys(queryParams).length ? queryParams : {}
this.setState({
...initialState,
id: query.id,
copyable: queryParams.copy !== false,
readOnly: queryParams.readonly !== false,
mounted: true
})
}
updateCode = code => {
this.setState({ code })
if (isInIFrame(window)) {
window.parent.window.parent.postMessage(
{
id: this.state.id || 'carbon',
code
},
'*'
)
}
}
render() {
return (
{this.state.mounted && (
{this.state.code}
)}
)
}
}
export default withRouter(Embed)