wip

fix: Add correct icon

app/embeds/Dropbox.js

@@ -0,0 +1,69 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import env from "env";
+
+const URL_REGEX = new RegExp("^https://www.dropbox.com/sh?/(.*)$");
+
+type Props = {|
+  isSelected: boolean,
+  attrs: {|
+    href: string,
+    matches: string[],
+  |},
+|};
+
+class Dropbox extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  container = React.createRef<HTMLAnchorElement>();
+
+  shouldComponentUpdate(nextProps: Props) {
+    return (
+      nextProps.isSelected !== this.props.isSelected ||
+      nextProps.attrs.href !== this.props.attrs.href
+    );
+  }
+
+  componentDidMount() {
+    if (document.getElementById("dropboxjs")) {
+      if (this.container.current) {
+        window.Dropbox.embed(
+          { link: this.props.attrs.href },
+          this.container.current
+        );
+      }
+
+      return;
+    }
+
+    const tag = document.createElement("script");
+    tag.async = false;
+    tag.id = "dropboxjs";
+    tag.setAttribute("data-app-key", env.DROPBOX_APP_KEY);
+    tag.src = "https://www.dropbox.com/static/api/2/dropins.js";
+    document.body?.appendChild(tag);
+  }
+
+  render() {
+    return (
+      <Rounded
+        className={this.props.isSelected ? "ProseMirror-selectednode" : ""}
+      >
+        <a
+          ref={this.container}
+          href={this.props.attrs.href}
+          className="dropbox-embed"
+          data-height="400px"
+        />
+      </Rounded>
+    );
+  }
+}
+
+const Rounded = styled.div`
+  border-radius: 3px;
+  height: 400px;
+`;
+
+export default Dropbox;

app/embeds/index.js

@@ -1,4 +1,5 @@
 // @flow
+import { filter } from "lodash";
 import * as React from "react";
 import styled from "styled-components";
 import Image from "components/Image";
@@ -8,6 +9,7 @@ import Cawemo from "./Cawemo";
 import ClickUp from "./ClickUp";
 import Codepen from "./Codepen";
 import Descript from "./Descript";
+import Dropbox from "./Dropbox";
 import Figma from "./Figma";
 import Framer from "./Framer";
 import Gist from "./Gist";
@@ -29,6 +31,8 @@ import Trello from "./Trello";
 import Typeform from "./Typeform";
 import Vimeo from "./Vimeo";
 import YouTube from "./YouTube";
+import env from "env";
+import { isCustomDomain } from "utils/domains";
 
 function matcher(Component) {
   return (url: string) => {
@@ -48,197 +52,219 @@ const Img = styled(Image)`
   height: 18px;
 `;
 
-export default [
-  {
-    title: "Abstract",
-    keywords: "design",
-    icon: () => <Img src="/images/abstract.png" />,
-    component: Abstract,
-    matcher: matcher(Abstract),
-  },
-  {
-    title: "Airtable",
-    keywords: "spreadsheet",
-    icon: () => <Img src="/images/airtable.png" />,
-    component: Airtable,
-    matcher: matcher(Airtable),
-  },
-  {
-    title: "Cawemo",
-    keywords: "bpmn process",
-    defaultHidden: true,
-    icon: () => <Img src="/images/cawemo.png" />,
-    component: Cawemo,
-    matcher: matcher(Cawemo),
-  },
-  {
-    title: "ClickUp",
-    keywords: "project",
-    defaultHidden: true,
-    icon: () => <Img src="/images/clickup.png" />,
-    component: ClickUp,
-    matcher: matcher(ClickUp),
-  },
-  {
-    title: "Codepen",
-    keywords: "code editor",
-    icon: () => <Img src="/images/codepen.png" />,
-    component: Codepen,
-    matcher: matcher(Codepen),
-  },
-  {
-    title: "Descript",
-    keywords: "audio",
-    icon: () => <Img src="/images/descript.png" />,
-    component: Descript,
-    matcher: matcher(Descript),
-  },
-  {
-    title: "Figma",
-    keywords: "design svg vector",
-    icon: () => <Img src="/images/figma.png" />,
-    component: Figma,
-    matcher: matcher(Figma),
-  },
-  {
-    title: "Framer",
-    keywords: "design prototyping",
-    icon: () => <Img src="/images/framer.png" />,
-    component: Framer,
-    matcher: matcher(Framer),
-  },
-  {
-    title: "GitHub Gist",
-    keywords: "code",
-    icon: () => <Img src="/images/github-gist.png" />,
-    component: Gist,
-    matcher: matcher(Gist),
-  },
-  {
-    title: "Google Drawings",
-    keywords: "drawings",
-    icon: () => <Img src="/images/google-drawings.png" />,
-    component: GoogleDrawings,
-    matcher: matcher(GoogleDrawings),
-  },
-  {
-    title: "Google Drive",
-    keywords: "drive",
-    icon: () => <Img src="/images/google-drive.png" />,
-    component: GoogleDrive,
-    matcher: matcher(GoogleDrive),
-  },
-  {
-    title: "Google Docs",
-    icon: () => <Img src="/images/google-docs.png" />,
-    component: GoogleDocs,
-    matcher: matcher(GoogleDocs),
-  },
-  {
-    title: "Google Sheets",
-    keywords: "excel spreadsheet",
-    icon: () => <Img src="/images/google-sheets.png" />,
-    component: GoogleSheets,
-    matcher: matcher(GoogleSheets),
-  },
-  {
-    title: "Google Slides",
-    keywords: "presentation slideshow",
-    icon: () => <Img src="/images/google-slides.png" />,
-    component: GoogleSlides,
-    matcher: matcher(GoogleSlides),
-  },
-  {
-    title: "InVision",
-    keywords: "design prototype",
-    defaultHidden: true,
-    icon: () => <Img src="/images/invision.png" />,
-    component: InVision,
-    matcher: matcher(InVision),
-  },
-  {
-    title: "Loom",
-    keywords: "video screencast",
-    icon: () => <Img src="/images/loom.png" />,
-    component: Loom,
-    matcher: matcher(Loom),
-  },
-  {
-    title: "Lucidchart",
-    keywords: "chart",
-    icon: () => <Img src="/images/lucidchart.png" />,
-    component: Lucidchart,
-    matcher: matcher(Lucidchart),
-  },
-  {
-    title: "Marvel",
-    keywords: "design prototype",
-    icon: () => <Img src="/images/marvel.png" />,
-    component: Marvel,
-    matcher: matcher(Marvel),
-  },
-  {
-    title: "Mindmeister",
-    keywords: "mindmap",
-    icon: () => <Img src="/images/mindmeister.png" />,
-    component: Mindmeister,
-    matcher: matcher(Mindmeister),
-  },
-  {
-    title: "Miro",
-    keywords: "whiteboard",
-    icon: () => <Img src="/images/miro.png" />,
-    component: Miro,
-    matcher: matcher(Miro),
-  },
-  {
-    title: "Mode",
-    keywords: "analytics",
-    defaultHidden: true,
-    icon: () => <Img src="/images/mode-analytics.png" />,
-    component: ModeAnalytics,
-    matcher: matcher(ModeAnalytics),
-  },
-  {
-    title: "Prezi",
-    keywords: "presentation",
-    icon: () => <Img src="/images/prezi.png" />,
-    component: Prezi,
-    matcher: matcher(Prezi),
-  },
-  {
-    title: "Spotify",
-    keywords: "music",
-    icon: () => <Img src="/images/spotify.png" />,
-    component: Spotify,
-    matcher: matcher(Spotify),
-  },
-  {
-    title: "Trello",
-    keywords: "kanban",
-    icon: () => <Img src="/images/trello.png" />,
-    component: Trello,
-    matcher: matcher(Trello),
-  },
-  {
-    title: "Typeform",
-    keywords: "form survey",
-    icon: () => <Img src="/images/typeform.png" />,
-    component: Typeform,
-    matcher: matcher(Typeform),
-  },
-  {
-    title: "Vimeo",
-    keywords: "video",
-    icon: () => <Img src="/images/vimeo.png" />,
-    component: Vimeo,
-    matcher: matcher(Vimeo),
-  },
-  {
-    title: "YouTube",
-    keywords: "google video",
-    icon: () => <Img src="/images/youtube.png" />,
-    component: YouTube,
-    matcher: matcher(YouTube),
-  },
-];
+type EmbedSpec = {
+  title: string,
+  keywords?: string,
+  defaultHidden?: boolean,
+  icon: any,
+  component: React.ComponentType<any>,
+  matcher: any,
+};
+
+export default filter<void | EmbedSpec>(
+  [
+    {
+      title: "Abstract",
+      keywords: "design",
+      icon: () => <Img src="/images/abstract.png" />,
+      component: Abstract,
+      matcher: matcher(Abstract),
+    },
+    {
+      title: "Airtable",
+      keywords: "spreadsheet",
+      icon: () => <Img src="/images/airtable.png" />,
+      component: Airtable,
+      matcher: matcher(Airtable),
+    },
+    {
+      title: "Cawemo",
+      keywords: "bpmn process",
+      defaultHidden: true,
+      icon: () => <Img src="/images/cawemo.png" />,
+      component: Cawemo,
+      matcher: matcher(Cawemo),
+    },
+    {
+      title: "ClickUp",
+      keywords: "project",
+      defaultHidden: true,
+      icon: () => <Img src="/images/clickup.png" />,
+      component: ClickUp,
+      matcher: matcher(ClickUp),
+    },
+    {
+      title: "Codepen",
+      keywords: "code editor",
+      icon: () => <Img src="/images/codepen.png" />,
+      component: Codepen,
+      matcher: matcher(Codepen),
+    },
+    {
+      title: "Descript",
+      keywords: "audio",
+      defaultHidden: true,
+      icon: () => <Img src="/images/descript.png" />,
+      component: Descript,
+      matcher: matcher(Descript),
+    },
+    env.DROPBOX_APP_KEY && !isCustomDomain()
+      ? {
+          title: "Dropbox",
+          keywords: "dropbox file pdf",
+          icon: () => <Img src="/images/dropbox.png" />,
+          component: Dropbox,
+          matcher: matcher(Dropbox),
+        }
+      : undefined,
+    {
+      title: "Figma",
+      keywords: "design svg vector",
+      icon: () => <Img src="/images/figma.png" />,
+      component: Figma,
+      matcher: matcher(Figma),
+    },
+    {
+      title: "Framer",
+      keywords: "design prototyping",
+      icon: () => <Img src="/images/framer.png" />,
+      component: Framer,
+      matcher: matcher(Framer),
+    },
+    {
+      title: "GitHub Gist",
+      keywords: "code",
+      icon: () => <Img src="/images/github-gist.png" />,
+      component: Gist,
+      matcher: matcher(Gist),
+    },
+    {
+      title: "Google Drawings",
+      keywords: "drawings",
+      icon: () => <Img src="/images/google-drawings.png" />,
+      component: GoogleDrawings,
+      matcher: matcher(GoogleDrawings),
+    },
+    {
+      title: "Google Drive",
+      keywords: "drive",
+      icon: () => <Img src="/images/google-drive.png" />,
+      component: GoogleDrive,
+      matcher: matcher(GoogleDrive),
+    },
+    {
+      title: "Google Docs",
+      icon: () => <Img src="/images/google-docs.png" />,
+      component: GoogleDocs,
+      matcher: matcher(GoogleDocs),
+    },
+    {
+      title: "Google Sheets",
+      keywords: "excel spreadsheet",
+      icon: () => <Img src="/images/google-sheets.png" />,
+      component: GoogleSheets,
+      matcher: matcher(GoogleSheets),
+    },
+    {
+      title: "Google Slides",
+      keywords: "presentation slideshow",
+      icon: () => <Img src="/images/google-slides.png" />,
+      component: GoogleSlides,
+      matcher: matcher(GoogleSlides),
+    },
+    {
+      title: "InVision",
+      keywords: "design prototype",
+      defaultHidden: true,
+      icon: () => <Img src="/images/invision.png" />,
+      component: InVision,
+      matcher: matcher(InVision),
+    },
+    {
+      title: "Loom",
+      keywords: "video screencast",
+      icon: () => <Img src="/images/loom.png" />,
+      component: Loom,
+      matcher: matcher(Loom),
+    },
+    {
+      title: "Lucidchart",
+      keywords: "chart",
+      icon: () => <Img src="/images/lucidchart.png" />,
+      component: Lucidchart,
+      matcher: matcher(Lucidchart),
+    },
+    {
+      title: "Marvel",
+      keywords: "design prototype",
+      icon: () => <Img src="/images/marvel.png" />,
+      component: Marvel,
+      matcher: matcher(Marvel),
+    },
+    {
+      title: "Mindmeister",
+      keywords: "mindmap",
+      icon: () => <Img src="/images/mindmeister.png" />,
+      component: Mindmeister,
+      matcher: matcher(Mindmeister),
+    },
+    {
+      title: "Miro",
+      keywords: "whiteboard",
+      icon: () => <Img src="/images/miro.png" />,
+      component: Miro,
+      matcher: matcher(Miro),
+    },
+    {
+      title: "Mode",
+      keywords: "analytics",
+      defaultHidden: true,
+      icon: () => <Img src="/images/mode-analytics.png" />,
+      component: ModeAnalytics,
+      matcher: matcher(ModeAnalytics),
+    },
+    {
+      title: "Prezi",
+      keywords: "presentation",
+      icon: () => <Img src="/images/prezi.png" />,
+      component: Prezi,
+      matcher: matcher(Prezi),
+    },
+    {
+      title: "Spotify",
+      keywords: "music",
+      icon: () => <Img src="/images/spotify.png" />,
+      component: Spotify,
+      matcher: matcher(Spotify),
+    },
+    {
+      title: "Trello",
+      keywords: "kanban",
+      icon: () => <Img src="/images/trello.png" />,
+      component: Trello,
+      matcher: matcher(Trello),
+    },
+    {
+      title: "Typeform",
+      keywords: "form survey",
+      icon: () => <Img src="/images/typeform.png" />,
+      component: Typeform,
+      matcher: matcher(Typeform),
+    },
+    {
+      title: "Vimeo",
+      keywords: "video",
+      icon: () => <Img src="/images/vimeo.png" />,
+      component: Vimeo,
+      matcher: matcher(Vimeo),
+    },
+    {
+      title: "YouTube",
+      keywords: "google video",
+      icon: () => <Img src="/images/youtube.png" />,
+      component: YouTube,
+      matcher: matcher(YouTube),
+    },
+  ],
+  (i: void | EmbedSpec) => !!i
+);

server/app.js

@@ -31,6 +31,7 @@ const scriptSrc = [
   "'unsafe-inline'",
   "'unsafe-eval'",
   "gist.github.com",
+  "www.dropbox.com/static/api/2/dropins.js",
 ];
 
 if (env.GOOGLE_ANALYTICS_ID) {

server/env.js

@@ -11,6 +11,7 @@ export default {
   TEAM_LOGO: process.env.TEAM_LOGO,
   SLACK_KEY: process.env.SLACK_KEY,
   SLACK_APP_ID: process.env.SLACK_APP_ID,
+  DROPBOX_APP_KEY: process.env.DROPBOX_APP_KEY,
   MAXIMUM_IMPORT_SIZE: process.env.MAXIMUM_IMPORT_SIZE || 1024 * 1000 * 5,
   SUBDOMAINS_ENABLED: process.env.SUBDOMAINS_ENABLED === "true",
   GOOGLE_ANALYTICS_ID: process.env.GOOGLE_ANALYTICS_ID,