post message

pages/embed.js

@@ -12,6 +12,15 @@ import { DEFAULT_CODE, DEFAULT_SETTINGS } from '../lib/constants'
 import { getQueryStringState } from '../lib/routing'
 
 const isInIFrame = morph.get('parent.window.parent')
+const getParent = win => {
+  const iFrame = isInIFrame(win)
+
+  if (iFrame) {
+    return iFrame
+  }
+
+  return win.parent
+}
 
 const Page = props => (
   <React.Fragment>
@@ -49,35 +58,43 @@ class Embed extends React.Component {
     const queryParams = getQueryStringState(query)
     const initialState = Object.keys(queryParams).length ? queryParams : {}
 
-    this.setState({
+    this.setState(
-      ...initialState,
+      {
-      id: query.id,
+        ...initialState,
-      copyable: queryParams.copy !== false,
+        id: query.id,
-      readOnly: queryParams.readonly !== false,
+        copyable: queryParams.copy !== false,
-      mounted: true
+        readOnly: queryParams.readonly !== false,
-    })
+        mounted: true
+      },
+      this.postMessage
+    )
   }
 
-  updateCode = code => {
+  ref = React.createRef()
-    this.setState({ code })
 
-    const iFrame = isInIFrame(window)
+  postMessage = () => {
-    if (iFrame) {
+    getParent(window).postMessage(
-      iFrame.postMessage(
+      JSON.stringify({
-        {
+        // Used by embed provider
-          id: this.state.id ? `carbon:${this.state.id}` : 'carbon',
+        src: window.location.toString(),
-          code
+        context: 'iframe.resize',
-        },
+        height: this.ref.current.exportContainerNode.offsetHeight,
-        '*'
+        // Carbon specific data
-      )
+        id: this.state.id ? `carbon:${this.state.id}` : 'carbon',
-    }
+        code: this.state.code
+      }),
+      '*'
+    )
   }
 
+  updateCode = code => this.setState({ code }, this.postMessage)
+
   render() {
     return (
       <Page theme={this.state.theme}>
         {this.state.mounted && (
           <Carbon
+            ref={this.ref}
             config={this.state}
             readOnly={this.state.readOnly}
             copyable={this.state.copyable}