fix: GitHub Gist embed reliability, closes #1400

This commit is contained in:
Tom Moor
2020-08-09 21:53:57 -07:00
parent e2bd03494d
commit 07d488c826

View File

@@ -13,31 +13,16 @@ type Props = {|
|}; |};
class Gist extends React.Component<Props> { class Gist extends React.Component<Props> {
iframeNode: ?HTMLIFrameElement;
static ENABLED = [URL_REGEX]; static ENABLED = [URL_REGEX];
componentDidMount() {
this.updateIframeContent();
}
get id() { get id() {
const gistUrl = new URL(this.props.attrs.href); const gistUrl = new URL(this.props.attrs.href);
return gistUrl.pathname.split("/")[2]; return gistUrl.pathname.split("/")[2];
} }
updateIframeContent() { updateIframeContent = (iframe: ?HTMLIFrameElement) => {
const id = this.id;
const iframe = this.iframeNode;
if (!iframe) return; if (!iframe) return;
const id = this.id;
// We need to add some temporary content to the iframe for the document
// to be available, otherwise it's undefined on first load
const temp = document.getElementById("gist");
if (temp) {
temp.innerHTML = "";
temp.appendChild(iframe);
}
// $FlowFixMe // $FlowFixMe
let doc = iframe.document; let doc = iframe.document;
@@ -56,16 +41,14 @@ class Gist extends React.Component<Props> {
doc.open(); doc.open();
doc.writeln(iframeHtml); doc.writeln(iframeHtml);
doc.close(); doc.close();
} };
render() { render() {
const id = this.id; const id = this.id;
return ( return (
<iframe <iframe
ref={(ref) => { ref={this.updateIframeContent}
this.iframeNode = ref;
}}
type="text/html" type="text/html"
frameBorder="0" frameBorder="0"
width="100%" width="100%"