Fix use iframe height hook

entry_types/scrolled/package/spec/contentElements/dataWrapperChart/useIframeHeight-spec.js

@@ -0,0 +1,47 @@
+import {useIframeHeight} from 'contentElements/dataWrapperChart/useIframeHeight';
+
+import {renderHook, act} from '@testing-library/react-hooks';
+import {fakeParentWindow, tick} from 'support';
+
+describe('useIframeHeight', () => {
+  it('Confirms the default height', async () => {
+    const testURL = 'testUrl/id/1/';
+    fakeParentWindow();
+
+    const {result} = renderHook(() => useIframeHeight(testURL));
+
+    window.postMessage('SOME_MESSAGE', '*');
+    await tick();
+
+    expect(result.current).toEqual('400px');
+  });
+
+  it('sets the height', async () => {
+    const testURL = 'https://datawrapper.dwcdn.net/CXXQo/1/';
+    fakeParentWindow();
+    const {result, rerender} = renderHook(() => useIframeHeight(testURL));
+    expect(result.current).toEqual('400px');
+
+    window.postMessage({'datawrapper-height': {
+      id : 'CXXQo/1/',
+      height: 350
+    }}, '*');
+    await tick();
+    rerender();
+
+    expect(result.current).toEqual('350px');
+  });
+
+  it('removes listener on cleanup', async () => {
+    const testURL = 'testUrl/id/1/';
+    fakeParentWindow();
+    const {unmount} = renderHook(() => useIframeHeight(testURL));
+    const spy = jest.spyOn(window.document, 'removeEventListener');
+
+    unmount();
+    window.postMessage('SOME_MESSAGE', '*');
+    await tick();
+
+    expect(spy).toBeCalledWith('message', expect.any(Function));
+  });
+});

entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.js

@@ -4,21 +4,25 @@ import {
   useContentElementLifecycle,
   useContentElementEditorState
 } from 'pageflow-scrolled/frontend';
+import {useIframeHeight} from './useIframeHeight';
 
 import styles from './DataWrapperChart.module.css';
 
 export function DataWrapperChart({configuration}) {
   const {isPrepared} = useContentElementLifecycle();
   const {isEditable, isSelected} = useContentElementEditorState();
+  const height = useIframeHeight(configuration.url);
 
   // remove url protocol, so that it is selected by the browser itself
   var srcURL = '';
   if (configuration.url && isPrepared) {
     srcURL = configuration.url.replace(/http(s|):/, '');
   }
+
   return (
     <div className={styles.container}
-         style={{pointerEvents: isEditable && !isSelected ? 'none' : undefined}}
+         style={{pointerEvents: isEditable && !isSelected ? 'none' : undefined,
+                 height: height}}
          data-percy="hide">
       {renderIframe(srcURL)}
     </div>

entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.module.css

@@ -1,6 +1,5 @@
 .container {
   min-height: 200px;
-  height: 400px;
   background-color: rgba(0, 0, 0, 0.5);
 }
 

entry_types/scrolled/package/src/contentElements/dataWrapperChart/useIframeHeight.js

@@ -0,0 +1,21 @@
+import {useEffect, useRef} from 'react';
+
+export function useIframeHeight(url) {
+  const height = useRef('400px');
+  useEffect(() => {
+    window.addEventListener('message', receive);
+
+    function receive(event) {            
+      if (typeof event.data['datawrapper-height'] !== 'undefined') {
+        let chartId = event.data['datawrapper-height']['id'];
+        if (chartId && url.indexOf(chartId) > -1) {
+          const receivedHeight = event.data['datawrapper-height']['height'] + 'px';          
+          height.current = receivedHeight;
+        }
+      }
+    }
+    return () => document.removeEventListener('message', receive);
+  }, [url]);
+
+  return height.current;
+}