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

Author: emmerich

.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;
- maxHeight?: number;
+ height?: 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({
- maxWidth: Number(message.action.size.maxWidth),
- maxHeight: Number(message.action.size.maxHeight),
- aspectRatio: Number(message.action.size.aspectRatio),
- });
+ setSize((size) => ({
+ aspectRatio:
+ typeof message.action.size.aspectRatio !== 'undefined'
+ ? 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
- className={'contentkit-webframe'}
+ <iframe
+ ref={iframeRef}
+ src={element.source.url}
+ title={element.source.url}
+ allowFullScreen
+ allow="clipboard-write"
+ className="contentkit-webframe"
  style={{
- aspectRatio: size.aspectRatio || element.aspectRatio || undefined,
- maxWidth: size.maxWidth || undefined,
- maxHeight: size.maxHeight || undefined,
+ // If given an aspect ratio, use width as auto dimension and let height take precedence.
+ ...(aspectRatio
+ ? {
+ 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>
+ />
  );
 }