Added new Frame Component for iframe encapsulation

no issue

- Adds new FrameComponent which allows encapsulating any React Component inside Iframe directly
- Wraps the Popup and Trigger components inside frame components to be rendered inside iframe

ghost/portal/src/components/FrameComponent.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import { createPortal } from 'react-dom'
+
+export default class Frame extends Component {
+  constructor(props) {
+    super(props)
+
+    this.setContentRef = (node) => {
+        this.contentRef = ((!node || !node.contentWindow) && null) || (node && node.contentWindow.document.body);
+        if (this.contentRef) {
+            this.setState({
+                refUpdated: this.state.refUpdated + 1
+            })
+        }
+    }
+
+    this.state = {
+        refUpdated: 0
+    }
+  }
+
+
+  renderFrameChildren() {
+    const { children } = this.props // eslint-disable-line
+      if (this.contentRef) {
+          return createPortal(
+            React.Children.only(children),
+            this.contentRef
+          );
+      }
+      return null;
+  }
+
+  render() {
+    const { children, title = "membersjs-frame", ...props } = this.props // eslint-disable-line
+    const style = this.props.style || {};
+    return (
+      <iframe title= {title} ref={this.setContentRef} style={style} frameBorder="0">
+          {this.renderFrameChildren()}
+      </iframe>
+    )
+  }
+}

ghost/portal/src/components/ParentContainer.js

@@ -1,4 +1,5 @@
 import TriggerComponent from './TriggerComponent';
+import FrameComponent from './FrameComponent';
 import PopupMenuComponent from './PopupMenuComponent';
 const React = require("react");
 const PropTypes = require("prop-types");

ghost/portal/src/components/PopupMenuComponent.js

@@ -1,7 +1,7 @@
+import FrameComponent from './FrameComponent';
 const React = require("react");
 const PropTypes = require("prop-types");
 
-
 export default class PopupMenuComponent extends React.Component {
     static propTypes = {
         name: PropTypes.string,
@@ -44,7 +44,7 @@ export default class PopupMenuComponent extends React.Component {
             textAlign: 'left'
         };
         return (
-            <div style={hoverStyle}>
+            <FrameComponent style={hoverStyle}>
                 <div style={launcherStyle}>
                     <div style={buttonStyle}>
                         <div style={{display: 'flex', flexDirection: 'column'}}>
@@ -60,7 +60,7 @@ export default class PopupMenuComponent extends React.Component {
                         </div>
                     </div>
                 </div>
-            </div>
+            </FrameComponent>
         );
     }
 }

ghost/portal/src/components/TriggerComponent.js

@@ -1,4 +1,5 @@
 import logo from '../logo.svg';
+import FrameComponent from './FrameComponent';
 import closeIcon from '../images/close.png';
 const React = require("react");
 const PropTypes = require("prop-types");
@@ -68,13 +69,13 @@ export default class TriggerComponent extends React.Component {
             transition: 'transform 0.16s linear 0s, opacity 0.08s linear 0s',
         };
         return (
-            <div style={hoverStyle} onClick={(e) => this.onToggle(e)}>
-                <div style={launcherStyle}>
+            <FrameComponent style={hoverStyle} title="membersjs-trigger">
+                <div style={launcherStyle} onClick={(e) => this.onToggle(e)}>
                     <div style={buttonStyle}>
                         {this.renderTriggerIcon()}
                     </div>
                 </div>
-            </div>
+            </FrameComponent>
         );
     }
 }