Fix crossdomain clickoutside listener

web/app/components/dropdown/dropdown.jsx

@@ -13,6 +13,7 @@ export default class Dropdown extends Component {
 
     this.onTitleClick = this.onTitleClick.bind(this);
     this.onOutsideClick = this.onOutsideClick.bind(this);
+    this.receiveMessage = this.receiveMessage.bind(this);
   }
 
   onTitleClick() {
@@ -25,6 +26,20 @@ export default class Dropdown extends Component {
     }
   }
 
+  receiveMessage(e) {
+    try {
+      const data = typeof e.data === 'string' ? JSON.parse(e.data) : e.data;
+
+      if (data.clickOutside) {
+        if (this.state.isActive) {
+          this.setState({
+            isActive: false,
+          });
+        }
+      }
+    } catch (e) {}
+  }
+
   onOutsideClick(e) {
     if (!this.rootNode.contains(e.target)) {
       if (this.state.isActive) {
@@ -38,17 +53,13 @@ export default class Dropdown extends Component {
   componentDidMount() {
     document.addEventListener('click', this.onOutsideClick);
 
-    if (parent) {
-      parent.document.addEventListener('click', this.onOutsideClick);
-    }
+    window.addEventListener('message', this.receiveMessage);
   }
 
   componentWillUnmount() {
     document.removeEventListener('click', this.onOutsideClick);
 
-    if (parent) {
-      parent.document.removeEventListener('click', this.onOutsideClick);
-    }
+    window.removeEventListener('message', this.receiveMessage);
   }
 
   render(props, { isActive }) {

web/app/deleteme.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { NODE_ID } from 'common/constants';
 import { approveDeleteMe } from 'common/api';
 import { token } from 'common/settings';

web/app/embed.js

@@ -51,9 +51,8 @@ function init() {
   const iframe = node.getElementsByTagName('iframe')[0];
 
   window.addEventListener('message', receiveMessages);
-
   window.addEventListener('hashchange', postHashToIframe);
-
+  document.addEventListener('click', postClickOutsideToIframe);
   setTimeout(postHashToIframe, 1000);
 
   const remarkRootId = 'remark-km423lmfdslkm34';
@@ -230,4 +229,10 @@ function init() {
       iframe.contentWindow.postMessage(JSON.stringify({ hash }), '*');
     }
   }
+
+  function postClickOutsideToIframe(e) {
+    if (!iframe.contains(e.target)) {
+      iframe.contentWindow.postMessage(JSON.stringify({ clickOutside: true }), '*');
+    }
+  }
 }

web/webpack.config.js

@@ -17,7 +17,7 @@ const remarkUrl = process.env.REMARK_URL || 'https://demo.remark42.com';
 const NODE_ID = 'remark42';
 // let's log some env variables because we can
 console.log(`NODE_ENV = ${env}`);
-console.log(`REMARK_ENV = ${process.env.REMARK_URL}`);
+console.log(`REMARK_ENV = ${remarkUrl}`);
 
 const commonStyleLoaders = [
   'css-loader',