bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SafeEmbed: autosize iframe height

Browse source
This commit is contained in:
Alex Gleason 2022-08-22 12:43:12 -05:00
parent f1248018e6
commit c79506e1fd
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 17 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/soapbox/components/safe-embed.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useRef } from 'react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
interface ISafeEmbed {
/** Styles for the outer frame element. */
@ -19,6 +19,13 @@ const SafeEmbed: React.FC<ISafeEmbed> = ({
html,
}) => {
const iframe = useRef<HTMLIFrameElement>(null);
const [height, setHeight] = useState<number | undefined>(undefined);
const handleMessage = useCallback((e: MessageEvent) => {
if (e.data?.type === 'setHeight') {
setHeight(e.data?.height);
}
}, []);
useEffect(() => {
const iframeDocument = iframe.current?.contentWindow?.document;
@ -29,11 +36,19 @@ const SafeEmbed: React.FC<ISafeEmbed> = ({
iframeDocument.close();
iframeDocument.body.style.margin = '0';
iframe.current?.contentWindow?.addEventListener('message', handleMessage);
const innerFrame = iframeDocument.querySelector('iframe');
if (innerFrame) {
innerFrame.width = '100%';
}
}
return () => {
if (iframeDocument) {
iframe.current?.contentWindow?.removeEventListener('message', handleMessage);
}
};
}, [iframe.current, html]);
return (
@ -41,6 +56,7 @@ const SafeEmbed: React.FC<ISafeEmbed> = ({
ref={iframe}
className={className}
sandbox={sandbox}
height={height}
title={title}
/>
);