From e995f9f91220ef2abf2a55903e68eb4d4dc14009 Mon Sep 17 00:00:00 2001
From: jongomez <jon.olive.gomez@gmail.com>
Date: Tue, 7 Nov 2023 11:48:42 +0000
Subject: [PATCH] requests iframe height for better sizing

---
 .../StorybookDemo/StoryBookDemo.module.scss   |  1 -
 .../mdx/StorybookDemo/StorybookDemo.tsx       | 37 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/components/mdx/StorybookDemo/StoryBookDemo.module.scss b/src/components/mdx/StorybookDemo/StoryBookDemo.module.scss
index ff95d0b..9c8ad66 100644
--- a/src/components/mdx/StorybookDemo/StoryBookDemo.module.scss
+++ b/src/components/mdx/StorybookDemo/StoryBookDemo.module.scss
@@ -8,7 +8,6 @@
   iframe {
     transform: translateY(-20px);
     width: 100%;
-    height: 6000px;
     background-color: transparent;
   }
 }
diff --git a/src/components/mdx/StorybookDemo/StorybookDemo.tsx b/src/components/mdx/StorybookDemo/StorybookDemo.tsx
index fbe0c5c..59ff479 100644
--- a/src/components/mdx/StorybookDemo/StorybookDemo.tsx
+++ b/src/components/mdx/StorybookDemo/StorybookDemo.tsx
@@ -4,6 +4,34 @@ import clsx from 'clsx'
 import React, { useMemo, useRef, useState } from 'react'
 import styles from './StoryBookDemo.module.scss'
 
+const onIframeLoad = (iframe: HTMLIFrameElement) => {
+  const handleIframeMessage = (event: MessageEvent) => {
+    if (event.data && event.data.type === 'iframeHeightResponse') {
+      iframe.style.height = `${event.data.height}px`
+    }
+  }
+
+  // Request height from the iframe
+  const requestHeightFromIframe = () => {
+    if (!iframe || !iframe.contentWindow) {
+      return
+    }
+
+    iframe.contentWindow.postMessage(
+      {
+        type: 'requestHeight',
+      },
+      '*',
+    )
+  }
+
+  window.addEventListener('message', handleIframeMessage)
+
+  setInterval(() => {
+    requestHeightFromIframe()
+  }, 1000)
+}
+
 type GlobalType = {
   name: string
   description: string
@@ -124,7 +152,14 @@ export const StorybookDemo: React.FC<StorybookDemoProps> = ({
         ))}
       </div>
       <div className={styles.iframeContainer}>
-        <iframe ref={iframeRef} src={embedUrl} />
+        <iframe
+          ref={iframeRef}
+          src={embedUrl}
+          height={0}
+          onLoad={() => {
+            onIframeLoad(iframeRef.current)
+          }}
+        />
       </div>
     </div>
   )