Fix web frame height (#3709)

.changeset/giant-jobs-greet.md

@@ -0,0 +1,5 @@
+---
+"@gitbook/react-contentkit": patch
+---
+
+Fix web frame height calculation

bun.lock

@@ -6,8 +6,8 @@
       "devDependencies": {
         "@biomejs/biome": "^1.9.4",
         "@changesets/cli": "^2.29.7",
-        "turbo": "^2.5.0",
+        "turbo": "^2.5.8",
-        "vercel": "^39.3.0",
+        "vercel": "^39.4.2",
       },
     },
     "packages/browser-types": {
@@ -241,6 +241,7 @@
         "@gitbook/api": "catalog:",
         "@gitbook/icons": "workspace:*",
         "classnames": "^2.5.1",
+        "usehooks-ts": "^3.1.0",
       },
       "devDependencies": {
         "typescript": "^5.5.3",

packages/react-contentkit/package.json

@@ -11,7 +11,8 @@
     "dependencies": {
         "classnames": "^2.5.1",
         "@gitbook/api": "catalog:",
-        "@gitbook/icons": "workspace:*"
+        "@gitbook/icons": "workspace:*",
+        "usehooks-ts": "^3.1.0"
     },
     "peerDependencies": {
         "react": "*"

packages/react-contentkit/src/ElementWebframe.tsx

@@ -2,7 +2,9 @@
 
 import type { ContentKitWebFrame } from '@gitbook/api';
 import React from 'react';
+import { useResizeObserver } from 'usehooks-ts';
 
+import { Icon } from '@gitbook/icons';
 import { useContentKitClientContext } from './context';
 import { resolveDynamicBinding } from './dynamic';
 import type { ContentKitClientElementProps } from './types';
@@ -47,9 +49,7 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
         [renderer.security]
     );
 
-    //
+    // Listen to messages coming from the webframe
-    // Listen to message coming from the webframe
-    //
     React.useEffect(() => {
         const callback = (event: MessageEvent) => {
             if (!iframeRef.current) {
@@ -83,7 +83,7 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
                     // https://docs.embed.ly/reference/provider-height-resizing
                     const parsed = JSON.parse(message);
                     if (parsed.context === 'iframe.resize' && typeof parsed.height === 'number') {
-                        const width = contentWindow.outerWidth;
+                        const width = iframeRef.current.clientWidth;
                         const height = parsed.height;
 
                         setSize({
@@ -145,9 +145,7 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
         };
     }, [renderer, sendMessage]);
 
-    //
     // Send data to the webframe
-    //
     React.useEffect(() => {
         if (!element.data) {
             return;
@@ -161,12 +159,20 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
         return sendMessage({ state });
     }, [element.data, renderer.state, sendMessage]);
 
-    if (!mounted) {
+    const { width: observedWidth = 0 } = useResizeObserver({ ref: iframeRef });
-        return null;
+    const liveWidth = observedWidth || iframeRef.current?.clientWidth || 0;
-    }
 
     const aspectRatio = size.aspectRatio || element.aspectRatio;
 
+    const height =
+        liveWidth && aspectRatio && liveWidth > (size.height ?? 0)
+            ? Math.min(Math.round(liveWidth / aspectRatio), size.height ?? 32)
+            : 'auto';
+
+    if (!mounted) {
+        return <Icon icon="spinner" className="contentkit-button-loading" style={{ height }} />;
+    }
+
     return (
         <iframe
             ref={iframeRef}
@@ -179,7 +185,8 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
                 width: '100%',
                 maxWidth: '100%',
                 aspectRatio,
-                height: size.height ? Math.max(size.height, 32) : '100%',
+                maxHeight: height,
+                height: 'fit-content',
                 border: 'none',
             }}
         />