Fix an issue where ContentKit iframes were not resizing. (#2967)

.changeset/afraid-countries-own.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/react-contentkit': minor
+---
+
+Fix an issue where ContentKit iframes were not resizing.

packages/react-contentkit/src/ElementWebframe.tsx

@@ -14,8 +14,7 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
     const renderer = useContentKitClientContext();
     const iframeRef = React.useRef<HTMLIFrameElement>(null);
     const [size, setSize] = React.useState<{
-        maxWidth?: number;
+        height?: number;
-        maxHeight?: number;
         aspectRatio?: number;
     }>({});
 
@@ -88,9 +87,8 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
                         const height = parsed.height;
 
                         setSize({
-                            maxWidth: width,
                             aspectRatio: width / height,
-                            maxHeight: height,
+                            height: height,
                         });
                     }
                 } catch (_err) {
@@ -108,11 +106,25 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
                         messagesQueueRef.current = [];
                         break;
                     case '@webframe.resize':
-                        setSize({
+                        setSize((size) => ({
-                            maxWidth: Number(message.action.size.maxWidth),
+                            aspectRatio:
-                            maxHeight: Number(message.action.size.maxHeight),
+                                typeof message.action.size.aspectRatio !== 'undefined'
-                            aspectRatio: Number(message.action.size.aspectRatio),
+                                    ? Number(message.action.size.aspectRatio)
-                        });
+                                    : size.aspectRatio,
+
+                            height: (() => {
+                                if (typeof message.action.size.height !== 'undefined') {
+                                    return Number(message.action.size.height);
+                                }
+
+                                // maxHeight was used prior to moving to height, maintain it for backward compatibility.
+                                if (typeof message.action.size.maxHeight !== 'undefined') {
+                                    return Number(message.action.size.maxHeight);
+                                }
+
+                                return size.height;
+                            })(),
+                        }));
                         break;
                     default:
                         renderer.update({
@@ -149,33 +161,33 @@ export function ElementWebframe(props: ContentKitClientElementProps<ContentKitWe
         return sendMessage({ state });
     }, [element.data, renderer.state, sendMessage]);
 
+    if (!mounted) {
+        return null;
+    }
+
+    const aspectRatio = size.aspectRatio || element.aspectRatio;
+
     return (
-        <div
+        <iframe
-            className={'contentkit-webframe'}
+            ref={iframeRef}
+            src={element.source.url}
+            title={element.source.url}
+            allowFullScreen
+            allow="clipboard-write"
+            className="contentkit-webframe"
             style={{
-                aspectRatio: size.aspectRatio || element.aspectRatio || undefined,
+                // If given an aspect ratio, use width as auto dimension and let height take precedence.
-                maxWidth: size.maxWidth || undefined,
+                ...(aspectRatio
-                maxHeight: size.maxHeight || undefined,
+                    ? {
+                          width: 'auto',
+                          aspectRatio,
+                      }
+                    : { width: '100%' }),
+
+                maxWidth: '100%',
+                height: Math.max(size.height || 0, 32),
+                border: 'none',
             }}
-        >
+        />
-            {mounted ? (
-                <iframe
-                    ref={iframeRef}
-                    src={element.source.url}
-                    allowFullScreen
-                    allow="clipboard-write"
-                    style={{
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        bottom: 0,
-                        right: 0,
-                        width: '100%',
-                        height: '100%',
-                        border: 'none',
-                    }}
-                />
-            ) : null}
-        </div>
     );
 }