From 68a65be135b6c067fe27be9e16ef0d43286b5a30 Mon Sep 17 00:00:00 2001 From: Maximilian Zinke Date: Fri, 15 Jan 2021 04:49:56 +0100 Subject: [PATCH] feat: Embed Google Drive (#1804) * implement google drive extension * add current logo of google drive * fix issue when posting gdrive links which are already a preview * always only show the preview * Add bottom bar to get to original url for Google Drive embeds Co-authored-by: Tom Moor --- app/embeds/GoogleDrive.js | 37 +++++++++++++++++++++++++++++++ app/embeds/GoogleDrive.test.js | 39 +++++++++++++++++++++++++++++++++ app/embeds/index.js | 8 +++++++ public/images/google-drive.png | Bin 0 -> 9341 bytes 4 files changed, 84 insertions(+) create mode 100644 app/embeds/GoogleDrive.js create mode 100644 app/embeds/GoogleDrive.test.js create mode 100644 public/images/google-drive.png diff --git a/app/embeds/GoogleDrive.js b/app/embeds/GoogleDrive.js new file mode 100644 index 00000000..428de67a --- /dev/null +++ b/app/embeds/GoogleDrive.js @@ -0,0 +1,37 @@ +// @flow +import * as React from "react"; +import Frame from "./components/Frame"; + +const URL_REGEX = new RegExp( + "^https?://drive.google.com/file/d/(.*)/(preview|view).?usp=sharing$" +); + +type Props = {| + attrs: {| + href: string, + matches: string[], + |}, +|}; + +export default class GoogleDrive extends React.Component { + static ENABLED = [URL_REGEX]; + + render() { + return ( + + } + title="Google Drive Embed" + canonicalUrl={this.props.attrs.href} + border + /> + ); + } +} diff --git a/app/embeds/GoogleDrive.test.js b/app/embeds/GoogleDrive.test.js new file mode 100644 index 00000000..d672fe47 --- /dev/null +++ b/app/embeds/GoogleDrive.test.js @@ -0,0 +1,39 @@ +/* eslint-disable flowtype/require-valid-file-annotation */ +import GoogleDrive from "./GoogleDrive"; + +describe("GoogleDrive", () => { + const match = GoogleDrive.ENABLED[0]; + test("to be enabled on share link", () => { + expect( + "https://drive.google.com/file/d/1ohkOgmE8MiNx68u6ynBfYkgjeKu_x3ZK/view?usp=sharing".match( + match + ) + ).toBeTruthy(); + expect( + "https://drive.google.com/file/d/1ohkOgmE8MiNx68u6ynBfYkgjeKu_x3ZK/preview?usp=sharing".match( + match + ) + ).toBeTruthy(); + }); + + test("to not be enabled elsewhere", () => { + expect( + "https://drive.google.com/file/d/1ohkOgmE8MiNx68u6ynBfYkgjeKu_x3ZK/view".match( + match + ) + ).toBe(null); + expect( + "https://drive.google.com/file/d/1ohkOgmE8MiNx68u6ynBfYkgjeKu_x3ZK/preview".match( + match + ) + ).toBe(null); + expect( + "https://drive.google.com/file/d/1ohkOgmE8MiNx68u6ynBfYkgjeKu_x3ZK/view?usp=restricted".match( + match + ) + ).toBeTruthy(); + expect("https://drive.google.com/file".match(match)).toBe(null); + expect("https://drive.google.com".match(match)).toBe(null); + expect("https://www.google.com".match(match)).toBe(null); + }); +}); diff --git a/app/embeds/index.js b/app/embeds/index.js index 939a6d92..2cd0522c 100644 --- a/app/embeds/index.js +++ b/app/embeds/index.js @@ -8,6 +8,7 @@ import Codepen from "./Codepen"; import Figma from "./Figma"; import Framer from "./Framer"; import Gist from "./Gist"; +import GoogleDrive from "./GoogleDrive"; import GoogleDocs from "./GoogleDocs"; import GoogleSheets from "./GoogleSheets"; import GoogleSlides from "./GoogleSlides"; @@ -93,6 +94,13 @@ export default [ component: Gist, matcher: matcher(Gist), }, + { + title: "Google Drive", + keywords: "drive", + icon: () => , + component: GoogleDrive, + matcher: matcher(GoogleDrive), + }, { title: "Google Docs", icon: () => , diff --git a/public/images/google-drive.png b/public/images/google-drive.png new file mode 100644 index 0000000000000000000000000000000000000000..a28f187502e3e49e1ab801e06f656f29d2b11f04 GIT binary patch literal 9341 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 literal 0 HcmV?d00001