yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Loop loading GitHub Gist embeds in Safari

Browse Source 
closes #2520
This commit is contained in:
Tom Moor
2021-12-19 17:38:03 -08:00
parent 66d5a567c2
commit 36c0372d62
2 changed files with 10 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
server/services/web.ts
View File

@@ -111,7 +111,7 @@ export default function init(app: Koa = new Koa()): Koa {
scriptSrc,
styleSrc: ["'self'", "'unsafe-inline'", "github.githubassets.com"],
imgSrc: ["*", "data:", "blob:"],
frameSrc: ["*"],
frameSrc: ["*", "data:"],
connectSrc: ["*"], // Do not use connect-src: because self + websockets does not work in
// Safari, ref: https://bugs.webkit.org/show_bug.cgi?id=201591
},

45
shared/embeds/Gist.tsx
View File

@@ -1,4 +1,5 @@
import * as React from "react";
import styled from "styled-components";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp(
@@ -8,64 +9,36 @@ const URL_REGEX = new RegExp(
class Gist extends React.Component<Props> {
static ENABLED = [URL_REGEX];
ref = React.createRef<HTMLIFrameElement>();
get id() {
const gistUrl = new URL(this.props.attrs.href);
return gistUrl.pathname.split("/")[2];
}
componentDidMount() {
this.updateIframeContent();
}
componentDidUpdate() {
this.updateIframeContent();
}
updateIframeContent = () => {
const iframe = this.ref.current;
if (!iframe) return;
render() {
const id = this.id;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'document' does not exist on type 'HTMLIF... Remove this comment to see the full error message
let doc = iframe.document;
if (iframe.contentDocument) {
doc = iframe.contentDocument;
} else if (iframe.contentWindow) {
doc = iframe.contentWindow.document;
}
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>";
const iframeHtml = `<html><head><base target="_parent">${styles}</head><body>${gistScript}</body></html>`;
if (!doc) return;
doc.open();
doc.writeln(iframeHtml);
doc.close();
};
render() {
const id = this.id;
return (
<iframe
<Iframe
src={`data:text/html;base64,${btoa(iframeHtml)}`}
className={this.props.isSelected ? "ProseMirror-selectednode" : ""}
ref={this.ref}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ className: string; ref: RefObject<HTMLIFra... Remove this comment to see the full error message
type="text/html"
frameBorder="0"
width="100%"
height="200px"
scrolling="no"
id={`gist-${id}`}
title={`Github Gist (${id})`}
onLoad={this.updateIframeContent}
title="Github Gist"
/>
);
}
}
const Iframe = styled.iframe`
margin-top: 8px;
`;
export default Gist;