gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-16 23:55:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Steven H
2025-03-12 14:52:27 +00:00
committed by GitHub
parent e5f0cc8663
commit 6aaeae269e
2 changed files with 51 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/afraid-countries-own.md
+5
View File
@@ -0,0 +1,5 @@
---
'@gitbook/react-contentkit': minor
---
Fix an issue where ContentKit iframes were not resizing.
packages/react-contentkit/src/ElementWebframe.tsx
+46 -34
View File
@@ -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>
/>
);
}