feat: Add CDN support (#1817)

* chore: CSP

* chore: Optionally use CDN for serving images

app/embeds/GoogleDocs.js

@@ -1,5 +1,6 @@
 // @flow
 import * as React from "react";
+import Image from "components/Image";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp("^https?://docs.google.com/document/(.*)$");
@@ -20,7 +21,7 @@ export default class GoogleDocs extends React.Component<Props> {
         {...this.props}
         src={this.props.attrs.href.replace("/edit", "/preview")}
         icon={
-          <img
+          <Image
             src="/images/google-docs.png"
             alt="Google Docs Icon"
             width={16}

app/embeds/GoogleDrive.js

@@ -1,5 +1,6 @@
 // @flow
 import * as React from "react";
+import Image from "components/Image";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp(
@@ -21,7 +22,7 @@ export default class GoogleDrive extends React.Component<Props> {
       <Frame
         src={this.props.attrs.href.replace("/view", "/preview")}
         icon={
-          <img
+          <Image
             src="/images/google-drive.png"
             alt="Google Drive Icon"
             width={16}

app/embeds/GoogleSheets.js

@@ -1,5 +1,6 @@
 // @flow
 import * as React from "react";
+import Image from "components/Image";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp("^https?://docs.google.com/spreadsheets/d/(.*)$");
@@ -20,7 +21,7 @@ export default class GoogleSlides extends React.Component<Props> {
         {...this.props}
         src={this.props.attrs.href.replace("/edit", "/preview")}
         icon={
-          <img
+          <Image
             src="/images/google-sheets.png"
             alt="Google Sheets Icon"
             width={16}

app/embeds/GoogleSlides.js

@@ -1,5 +1,6 @@
 // @flow
 import * as React from "react";
+import Image from "components/Image";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp("^https?://docs.google.com/presentation/d/(.*)$");
@@ -22,7 +23,7 @@ export default class GoogleSlides extends React.Component<Props> {
           .replace("/edit", "/preview")
           .replace("/pub", "/embed")}
         icon={
-          <img
+          <Image
             src="/images/google-slides.png"
             alt="Google Slides Icon"
             width={16}

app/embeds/index.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import styled from "styled-components";
+import Image from "components/Image";
 import Abstract from "./Abstract";
 import Airtable from "./Airtable";
 import ClickUp from "./ClickUp";
@@ -38,7 +39,7 @@ function matcher(Component) {
   };
 }
 
-const Img = styled.img`
+const Img = styled(Image)`
   margin: 4px;
   width: 18px;
   height: 18px;