kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
64 wiersze
1.6 KiB
TypeScript
64 wiersze
1.6 KiB
TypeScript
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
|
|
interface ISafeEmbed {
|
|
/** Styles for the outer frame element. */
|
|
className?: string
|
|
/** Space-separate list of restrictions to ALLOW for the iframe. */
|
|
sandbox?: string
|
|
/** Unique title for the iframe. */
|
|
title: string
|
|
/** HTML body to embed. */
|
|
html?: string
|
|
}
|
|
|
|
/** Safely embeds arbitrary HTML content on the page (by putting it in an iframe). */
|
|
const SafeEmbed: React.FC<ISafeEmbed> = ({
|
|
className,
|
|
sandbox,
|
|
title,
|
|
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;
|
|
|
|
if (iframeDocument && html) {
|
|
iframeDocument.open();
|
|
iframeDocument.write(html);
|
|
iframeDocument.close();
|
|
iframeDocument.body.style.margin = '0';
|
|
|
|
iframe.current?.contentWindow?.addEventListener('message', handleMessage);
|
|
|
|
const innerFrame = iframeDocument.querySelector('iframe');
|
|
if (innerFrame) {
|
|
innerFrame.width = '100%';
|
|
}
|
|
}
|
|
|
|
return () => {
|
|
iframe.current?.contentWindow?.removeEventListener('message', handleMessage);
|
|
};
|
|
}, [iframe.current, html]);
|
|
|
|
return (
|
|
<iframe
|
|
ref={iframe}
|
|
className={className}
|
|
sandbox={sandbox}
|
|
height={height}
|
|
title={title}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default SafeEmbed;
|