2024-03-23 22:30:08 -04:00
parent d8d60814ce
commit 8b6a760e02
3 changed files with 51 additions and 21 deletions
							
							
								
							
							
						
@@ -8,15 +8,26 @@ import { s } from "../../styles";
import { sanitizeUrl } from "../../utils/urls";
type Props = Omit<Optional<HTMLIFrameElement>, "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<PropsWithRef> {
      isSelected,
      referrerPolicy,
      className = "",
      dangerouslySkipSanitizeSrc,
      src,
    } = this.props;
    const withBar = !!(icon || canonicalUrl);
							
							
							
								
							
						
@@ -82,7 +94,7 @@ class Frame extends React.Component<PropsWithRef> {
            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 = `<script>
  const resizeObserver = new ResizeObserver((entries) => {
    for (const entry of entries) {
      window.parent.postMessage({ "type": "frame-resized", "value": entry.contentRect.height }, '*');
    }
  });
  resizeObserver.observe(document.body);
</script>`;
export default React.forwardRef<HTMLIFrameElement, Props>((props, ref) => (
  <Frame {...props} forwardedRef={ref} />
));
							
							
							
						
 
							
							
							
						
@@ -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 = `<script type="text/javascript" src="${gistLink}"></script>`;
  const styles =
    "<style>*{ font-size:12px; } body { margin: 0; } .gist .blob-wrapper.data { max-height:150px; overflow:auto; }</style>";
    "<style>*{ font-size:12px; } body { margin: 0; } .gist .blob-wrapper.data { max-height:300px; overflow:auto; }</style>";
  const iframeHtml = `<html><head><base target="_parent">${styles}</head><body>${gistScript}</body></html>`;
  return (
    <Iframe
    <Frame
      src={`data:text/html;base64,${btoa(iframeHtml)}`}
      className={props.isSelected ? "ProseMirror-selectednode" : ""}
      frameBorder="0"
      width="100%"
      height="200px"
      scrolling="no"
      height="355px"
      id={`gist-${id}`}
      title="GitHub Gist"
      dangerouslySkipSanitizeSrc
    />
  );
}
							
								
							
							
							
						
 
							
							
							
						
@@ -1,28 +1,38 @@
import * as React from "react";
import styled from "styled-components";
import useEventListener from "~/hooks/useEventListener";
import Frame, { resizeObserverScript } from "../components/Frame";
import { EmbedProps as Props } from ".";
const Iframe = styled.iframe`
  margin-top: 8px;
`;
function GitLabSnippet(props: Props) {
  const frame = React.useRef(null);
  const [height, setHeight] = React.useState(400);
  const snippetUrl = new URL(props.attrs.href);
  const id = snippetUrl.pathname.split("/").pop();
  const snippetLink = `${snippetUrl}.js`;
  const snippetScript = `<script type="text/javascript" src="${snippetLink}"></script>`;
  const styles = "<style>body { margin: 0; }</style>";
  const snippetScript = `<script type="text/javascript" src="${snippetLink}"></script>${resizeObserverScript}`;
  const styles =
    "<style>body { margin: 0; .gitlab-embed-snippets { margin: 0; } }</style>";
  const iframeHtml = `<html><head><base target="_parent">${styles}</head><body>${snippetScript}</body></html>`;
  useEventListener(
    "message",
    (event: MessageEvent<{ type: string; value: number }>) => {
      if (event.data.type === "frame-resized") {
        setHeight(event.data.value);
      }
    }
  );
  return (
    <Iframe
    <Frame
      ref={frame}
      src={`data:text/html;base64,${btoa(iframeHtml)}`}
      className={props.isSelected ? "ProseMirror-selectednode" : ""}
      frameBorder="0"
      width="100%"
      height="400px"
      height={`${height}px`}
      id={`gitlab-snippet-${id}`}
      title="GitLab Snippet"
      dangerouslySkipSanitizeSrc
    />
  );
}