diff --git a/shared/editor/components/Frame.tsx b/shared/editor/components/Frame.tsx index 6ea72703e..dccb65cb4 100644 --- a/shared/editor/components/Frame.tsx +++ b/shared/editor/components/Frame.tsx @@ -8,15 +8,26 @@ import { s } from "../../styles"; import { sanitizeUrl } from "../../utils/urls"; type Props = Omit, "children"> & { + /** The URL to load in the iframe */ src?: string; + /** Whether to display a border, defaults to true */ border?: boolean; + /** The aria title of the frame */ title?: string; + /** An icon to display under the frame representing the service */ icon?: React.ReactNode; + /** The canonical URL of the content */ canonicalUrl?: string; + /** Whether the node is currently selected */ isSelected?: boolean; + /** The width of the frame */ width?: string; + /** The height of the frame */ height?: string; + /** The allow policy of the frame */ allow?: string; + /** Whether to skip sanitization of the `src` prop */ + dangerouslySkipSanitizeSrc?: boolean; }; type PropsWithRef = Props & { @@ -58,6 +69,7 @@ class Frame extends React.Component { isSelected, referrerPolicy, className = "", + dangerouslySkipSanitizeSrc, src, } = this.props; const withBar = !!(icon || canonicalUrl); @@ -82,7 +94,7 @@ class Frame extends React.Component { frameBorder="0" title="embed" loading="lazy" - src={sanitizeUrl(src)} + src={dangerouslySkipSanitizeSrc ? src : sanitizeUrl(src)} referrerPolicy={referrerPolicy} allowFullScreen /> @@ -155,6 +167,19 @@ const Bar = styled.div` position: relative; `; +/** + * Resize observer script that sends a message to the parent window when content is resized. Inject + * this script into the iframe to receive resize events. + */ +export const resizeObserverScript = ``; + export default React.forwardRef((props, ref) => ( )); diff --git a/shared/editor/embeds/Gist.tsx b/shared/editor/embeds/Gist.tsx index 2d8eb81b3..2592fb758 100644 --- a/shared/editor/embeds/Gist.tsx +++ b/shared/editor/embeds/Gist.tsx @@ -1,30 +1,25 @@ import * as React from "react"; -import styled from "styled-components"; +import Frame from "../components/Frame"; import { EmbedProps as Props } from "."; -const Iframe = styled.iframe` - margin-top: 8px; -`; - function Gist(props: Props) { const gistUrl = new URL(props.attrs.href); const id = gistUrl.pathname.split("/")[2]; const gistLink = `https://gist.github.com/${id}.js`; const gistScript = ``; const styles = - ""; + ""; const iframeHtml = `${styles}${gistScript}`; return ( -