chore: Move editor into codebase (#2930)

shared/editor/embeds/Abstract.test.ts

@@ -0,0 +1,56 @@
+import Abstract from "./Abstract";
+
+describe("Abstract", () => {
+  const match = Abstract.ENABLED[0];
+  const match2 = Abstract.ENABLED[1];
+
+  test("to be enabled on share subdomain link", () => {
+    expect(
+      "https://share.goabstract.com/aaec8bba-f473-4f64-96e7-bff41c70ff8a".match(
+        match
+      )
+    ).toBeTruthy();
+    expect(
+      "https://share.abstract.com/aaec8bba-f473-4f64-96e7-bff41c70ff8a".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on share link", () => {
+    expect(
+      "https://app.goabstract.com/share/aaec8bba-f473-4f64-96e7-bff41c70ff8a".match(
+        match2
+      )
+    ).toBeTruthy();
+    expect(
+      "https://app.abstract.com/share/aaec8bba-f473-4f64-96e7-bff41c70ff8a".match(
+        match2
+      )
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on embed link", () => {
+    expect(
+      "https://app.goabstract.com/embed/aaec8bba-f473-4f64-96e7-bff41c70ff8a".match(
+        match2
+      )
+    ).toBeTruthy();
+    expect(
+      "https://app.abstract.com/embed/aaec8bba-f473-4f64-96e7-bff41c70ff8a".match(
+        match2
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://abstract.com".match(match)).toBe(null);
+    expect("https://goabstract.com".match(match)).toBe(null);
+    expect("https://app.goabstract.com".match(match)).toBe(null);
+    expect("https://abstract.com/features".match(match)).toBe(null);
+    expect("https://app.abstract.com/home".match(match)).toBe(null);
+    expect("https://abstract.com/pricing".match(match)).toBe(null);
+    expect("https://goabstract.com/pricing".match(match)).toBe(null);
+    expect("https://www.goabstract.com/pricing".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/Abstract.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+export default class Abstract extends React.Component<Props> {
+  static ENABLED = [
+    new RegExp("https?://share.(?:go)?abstract.com/(.*)$"),
+    new RegExp("https?://app.(?:go)?abstract.com/(?:share|embed)/(.*)$"),
+  ];
+
+  render() {
+    const { matches } = this.props.attrs;
+    const shareId = matches[1];
+    return (
+      <Frame
+        {...this.props}
+        src={`https://app.goabstract.com/embed/${shareId}`}
+        title={`Abstract (${shareId})`}
+      />
+    );
+  }
+}

shared/editor/embeds/Airtable.test.ts

@@ -0,0 +1,21 @@
+import Airtable from "./Airtable";
+
+describe("Airtable", () => {
+  const match = Airtable.ENABLED[0];
+
+  test("to be enabled on share link", () => {
+    expect("https://airtable.com/shrEoQs3erLnppMie".match(match)).toBeTruthy();
+  });
+
+  test("to be enabled on embed link", () => {
+    expect(
+      "https://airtable.com/embed/shrEoQs3erLnppMie".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://airtable.com".match(match)).toBe(null);
+    expect("https://airtable.com/features".match(match)).toBe(null);
+    expect("https://airtable.com/pricing".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/Airtable.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp("https://airtable.com/(?:embed/)?(shr.*)$");
+
+export default class Airtable extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    const { matches } = this.props.attrs;
+    const shareId = matches[1];
+    return (
+      <Frame
+        {...this.props}
+        src={`https://airtable.com/embed/${shareId}`}
+        title={`Airtable (${shareId})`}
+        border
+      />
+    );
+  }
+}

shared/editor/embeds/Bilibili.test.ts

@@ -0,0 +1,23 @@
+import Bilibili from "./Bilibili";
+
+describe("Bilibili", () => {
+  const match = Bilibili.ENABLED[0];
+
+  test("to be enabled on video link", () => {
+    expect(
+      "https://www.bilibili.com/video/BV1CV411s7jd?spm_id_from=333.999.0.0".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://youtu.be".match(match)).toBe(null);
+    expect("https://bilibili.com".match(match)).toBe(null);
+    expect("https://www.bilibili.com".match(match)).toBe(null);
+    expect("https://www.bilibili.com/logout".match(match)).toBe(null);
+    expect("https://www.bilibili.com/feed/subscriptions".match(match)).toBe(
+      null
+    );
+  });
+});

shared/editor/embeds/Bilibili.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = /(?:https?:\/\/)?(www\.bilibili\.com)\/video\/([\w\d]+)?(\?\S+)?/i;
+
+export default class Vimeo extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    const { matches } = this.props.attrs;
+    const videoId = matches[2];
+    return (
+      <Frame
+        {...this.props}
+        src={`https://player.bilibili.com/player.html?bvid=${videoId}&page=1&high_quality=1`}
+        title={`Bilibili Embed (${videoId})`}
+      />
+    );
+  }
+}

shared/editor/embeds/Cawemo.test.ts

@@ -0,0 +1,22 @@
+import Cawemo from "./Cawemo";
+
+describe("Cawemo", () => {
+  const match = Cawemo.ENABLED[0];
+
+  test("to be enabled on embed link", () => {
+    expect(
+      "https://cawemo.com/embed/a82e9f22-e283-4253-8d11".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on share link", () => {
+    expect(
+      "https://cawemo.com/embed/a82e9f22-e283-4253-8d11".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://cawemo.com/".match(match)).toBe(null);
+    expect("https://cawemo.com/diagrams".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/Cawemo.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp("https?://cawemo.com/(?:share|embed)/(.*)$");
+
+export default class Cawemo extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    const { matches } = this.props.attrs;
+    const shareId = matches[1];
+    return (
+      <Frame
+        {...this.props}
+        src={`https://cawemo.com/embed/${shareId}`}
+        title={"Cawemo Embed"}
+        border
+      />
+    );
+  }
+}

shared/editor/embeds/ClickUp.test.ts

@@ -0,0 +1,17 @@
+import ClickUp from "./ClickUp";
+
+describe("ClickUp", () => {
+  const match = ClickUp.ENABLED[0];
+
+  test("to be enabled on share link", () => {
+    expect(
+      "https://share.clickup.com/b/h/6-9310960-2/c9d837d74182317".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://share.clickup.com".match(match)).toBe(null);
+    expect("https://clickup.com/".match(match)).toBe(null);
+    expect("https://clickup.com/features".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/ClickUp.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp(
+  "^https?://share.clickup.com/[a-z]/[a-z]/(.*)/(.*)$"
+);
+
+export default class ClickUp extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    return (
+      <Frame
+        {...this.props}
+        src={this.props.attrs.href}
+        title="ClickUp Embed"
+      />
+    );
+  }
+}

shared/editor/embeds/Codepen.test.ts

@@ -0,0 +1,22 @@
+import Codepen from "./Codepen";
+
+describe("Codepen", () => {
+  const match = Codepen.ENABLED[0];
+
+  test("to be enabled on pen link", () => {
+    expect(
+      "https://codepen.io/chriscoyier/pen/gfdDu".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on embed link", () => {
+    expect(
+      "https://codepen.io/chriscoyier/embed/gfdDu".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://codepen.io".match(match)).toBe(null);
+    expect("https://codepen.io/chriscoyier".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/Codepen.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp("^https://codepen.io/(.*?)/(pen|embed)/(.*)$");
+
+export default class Codepen extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    const normalizedUrl = this.props.attrs.href.replace(/\/pen\//, "/embed/");
+    return <Frame {...this.props} src={normalizedUrl} title="Codepen Embed" />;
+  }
+}

shared/editor/embeds/Descript.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+export default class Descript extends React.Component<Props> {
+  static ENABLED = [new RegExp("https?://share.descript.com/view/(\\w+)$")];
+
+  render() {
+    const { matches } = this.props.attrs;
+    const shareId = matches[1];
+    return (
+      <Frame
+        {...this.props}
+        src={`https://share.descript.com/embed/${shareId}`}
+        title={`Descript (${shareId})`}
+        width="400px"
+      />
+    );
+  }
+}

shared/editor/embeds/Diagrams.test.ts

@@ -0,0 +1,19 @@
+import Diagrams from "./Diagrams";
+
+describe("Diagrams", () => {
+  const match = Diagrams.ENABLED[0];
+
+  test("to be enabled on viewer link", () => {
+    expect(
+      "https://viewer.diagrams.net/?target=blank&nav=1#ABCDefgh_A12345-6789".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://app.diagrams.net/#ABCDefgh_A12345-6789".match(match)).toBe(
+      null
+    );
+  });
+});

shared/editor/embeds/Diagrams.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import Image from "./components/Image";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = /^https:\/\/viewer\.diagrams\.net\/.*(title=\\w+)?/;
+
+export default class Diagrams extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  get embedUrl() {
+    return this.props.attrs.matches[0];
+  }
+
+  get title() {
+    let title = "Diagrams.net";
+    const url = new URL(this.embedUrl);
+    const documentTitle = url.searchParams.get("title");
+
+    if (documentTitle) {
+      title += ` (${documentTitle})`;
+    }
+
+    return title;
+  }
+
+  render() {
+    return (
+      <Frame
+        {...this.props}
+        src={this.embedUrl}
+        title={this.title}
+        border
+        icon={
+          <Image
+            src="/images/diagrams.png"
+            alt="Diagrams.net"
+            width={16}
+            height={16}
+          />
+        }
+      />
+    );
+  }
+}

shared/editor/embeds/Figma.test.ts

@@ -0,0 +1,22 @@
+import Figma from "./Figma";
+
+describe("Figma", () => {
+  const match = Figma.ENABLED[0];
+
+  test("to be enabled on file link", () => {
+    expect(
+      "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on prototype link", () => {
+    expect(
+      "https://www.figma.com/proto/LKQ4FJ4bTnCSjedbRpk931".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://www.figma.com".match(match)).toBe(null);
+    expect("https://www.figma.com/features".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/Figma.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp(
+  "https://([w.-]+.)?figma.com/(file|proto)/([0-9a-zA-Z]{22,128})(?:/.*)?$"
+);
+
+export default class Figma extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    return (
+      <Frame
+        {...this.props}
+        src={`https://www.figma.com/embed?embed_host=outline&url=${this.props.attrs.href}`}
+        title="Figma Embed"
+        border
+      />
+    );
+  }
+}

shared/editor/embeds/Framer.test.ts

@@ -0,0 +1,13 @@
+import Framer from "./Framer";
+
+describe("Framer", () => {
+  const match = Framer.ENABLED[0];
+
+  test("to be enabled on share link", () => {
+    expect("https://framer.cloud/PVwJO".match(match)).toBeTruthy();
+  });
+
+  test("to not be enabled on root", () => {
+    expect("https://framer.cloud".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/Framer.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp("^https://framer.cloud/(.*)$");
+
+export default class Framer extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    return (
+      <Frame
+        {...this.props}
+        src={this.props.attrs.href}
+        title="Framer Embed"
+        border
+      />
+    );
+  }
+}

shared/editor/embeds/Gist.test.ts

@@ -0,0 +1,27 @@
+import Gist from "./Gist";
+
+describe("Gist", () => {
+  const match = Gist.ENABLED[0];
+
+  test("to be enabled on gist link", () => {
+    expect(
+      "https://gist.github.com/wmertens/0b4fd66ca7055fd290ecc4b9d95271a9".match(
+        match
+      )
+    ).toBeTruthy();
+    expect(
+      "https://gist.github.com/n3n/eb51ada6308b539d388c8ff97711adfa".match(
+        match
+      )
+    ).toBeTruthy();
+    expect(
+      "https://gist.github.com/ShubhanjanMedhi-dev/900c9c14093611898a4a085938bb90d9".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://gist.github.com/tommoor".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/Gist.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import styled from "styled-components";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp(
+  "^https://gist.github.com/([a-zA-Z\\d](?:[a-zA-Z\\d]|-(?=[a-zA-Z\\d])){0,38})/(.*)$"
+);
+
+class Gist extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  get id() {
+    const gistUrl = new URL(this.props.attrs.href);
+    return gistUrl.pathname.split("/")[2];
+  }
+
+  render() {
+    const id = this.id;
+    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>`;
+
+    return (
+      <Iframe
+        src={`data:text/html;base64,${btoa(iframeHtml)}`}
+        className={this.props.isSelected ? "ProseMirror-selectednode" : ""}
+        frameBorder="0"
+        width="100%"
+        height="200px"
+        scrolling="no"
+        id={`gist-${id}`}
+        title="Github Gist"
+      />
+    );
+  }
+}
+
+const Iframe = styled.iframe`
+  margin-top: 8px;
+`;
+
+export default Gist;

shared/editor/embeds/GoogleCalendar.test.ts

@@ -0,0 +1,19 @@
+import GoogleCalendar from "./GoogleCalendar";
+
+describe("GoogleCalendar", () => {
+  const match = GoogleCalendar.ENABLED[0];
+
+  test("to be enabled on share link", () => {
+    expect(
+      "https://calendar.google.com/calendar/embed?src=tom%40outline.com&ctz=America%2FSao_Paulo".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://calendar.google.com/calendar".match(match)).toBe(null);
+    expect("https://calendar.google.com".match(match)).toBe(null);
+    expect("https://www.google.com".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/GoogleCalendar.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp(
+  "^https?://calendar.google.com/calendar/embed\\?src=(.*)$"
+);
+
+export default class GoogleCalendar extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    return (
+      <Frame
+        {...this.props}
+        src={this.props.attrs.href}
+        title="Google Calendar"
+        border
+      />
+    );
+  }
+}

shared/editor/embeds/GoogleDataStudio.test.ts

@@ -0,0 +1,19 @@
+import GoogleDataStudio from "./GoogleDataStudio";
+
+describe("GoogleDataStudio", () => {
+  const match = GoogleDataStudio.ENABLED[0];
+
+  test("to be enabled on share link", () => {
+    expect(
+      "https://datastudio.google.com/embed/reporting/aab01789-f3a2-4ff3-9cba-c4c94c4a92e8/page/7zFD".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://datastudio.google.com/u/0/".match(match)).toBe(null);
+    expect("https://datastudio.google.com".match(match)).toBe(null);
+    expect("https://www.google.com".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/GoogleDataStudio.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import Image from "./components/Image";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp(
+  "^https?://datastudio.google.com/(embed|u/0)/reporting/(.*)/page/(.*)(/edit)?$"
+);
+
+export default class GoogleDataStudio extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    return (
+      <Frame
+        {...this.props}
+        src={this.props.attrs.href.replace("u/0", "embed").replace("/edit", "")}
+        icon={
+          <Image
+            src="/images/google-datastudio.png"
+            alt="Google Data Studio Icon"
+            width={16}
+            height={16}
+          />
+        }
+        canonicalUrl={this.props.attrs.href}
+        title="Google Data Studio"
+        border
+      />
+    );
+  }
+}

shared/editor/embeds/GoogleDocs.test.ts

@@ -0,0 +1,34 @@
+import GoogleDocs from "./GoogleDocs";
+
+describe("GoogleDocs", () => {
+  const match = GoogleDocs.ENABLED[0];
+
+  test("to be enabled on share link", () => {
+    expect(
+      "https://docs.google.com/document/d/e/2PACX-1vTdddHPoZ5M_47wmSHCoigRIt2cj_Pd-kgtaNQY6H0Jzn0_CVGbxC1GcK5IoNzU615lzguexFwxasAW/pubhtml".match(
+        match
+      )
+    ).toBeTruthy();
+    expect(
+      "https://docs.google.com/document/d/e/2PACX-1vTdddHPoZ5M_47wmSHCoigRIt2cj_Pd-kgtaNQY6H0Jzn0_CVGbxC1GcK5IoNzU615lzguexFwxasAW/pub".match(
+        match
+      )
+    ).toBeTruthy();
+    expect(
+      "https://docs.google.com/document/d/1SsDfWzFFTjZM2LanvpyUzjKhqVQpwpTMeiPeYxhVqOg/edit".match(
+        match
+      )
+    ).toBeTruthy();
+    expect(
+      "https://docs.google.com/document/d/1SsDfWzFFTjZM2LanvpyUzjKhqVQpwpTMeiPeYxhVqOg/preview".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://docs.google.com/document".match(match)).toBe(null);
+    expect("https://docs.google.com".match(match)).toBe(null);
+    expect("https://www.google.com".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/GoogleDocs.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import Image from "./components/Image";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp("^https?://docs.google.com/document/(.*)$");
+
+export default class GoogleDocs extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    return (
+      <Frame
+        {...this.props}
+        src={this.props.attrs.href.replace("/edit", "/preview")}
+        icon={
+          <Image
+            src="/images/google-docs.png"
+            alt="Google Docs Icon"
+            width={16}
+            height={16}
+          />
+        }
+        canonicalUrl={this.props.attrs.href}
+        title="Google Docs"
+        border
+      />
+    );
+  }
+}

shared/editor/embeds/GoogleDrawings.test.ts

@@ -0,0 +1,29 @@
+import GoogleDrawings from "./GoogleDrawings";
+
+describe("GoogleDrawings", () => {
+  const match = GoogleDrawings.ENABLED[0];
+
+  test("to be enabled on share link", () => {
+    expect(
+      "https://docs.google.com/drawings/d/1zDLtJ4HSCnjGCGSoCgqGe3F8p6o7R8Vjk8MDR6dKf-U/edit".match(
+        match
+      )
+    ).toBeTruthy();
+    expect(
+      "https://docs.google.com/drawings/d/1zDLtJ4HSCnjGCGSoCgqGe3F8p6o7R8Vjk8MDR6dKf-U/edit?usp=sharing".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect(
+      "https://docs.google.com/drawings/d/e/2PACX-1vRtzIzEWN6svSrIYZq-kq2XZEN6WaOFXHbPKRLXNOFRlxLIdJg0Vo6RfretGqs9SzD-fUazLeS594Kw/pub?w=960&h=720".match(
+        match
+      )
+    ).toBe(null);
+    expect("https://docs.google.com/drawings".match(match)).toBe(null);
+    expect("https://docs.google.com".match(match)).toBe(null);
+    expect("https://www.google.com".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/GoogleDrawings.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import Image from "./components/Image";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp(
+  "^https://docs.google.com/drawings/d/(.*)/(edit|preview)(.*)$"
+);
+
+export default class GoogleDrawings extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    return (
+      <Frame
+        {...this.props}
+        src={this.props.attrs.href.replace("/edit", "/preview")}
+        icon={
+          <Image
+            src="/images/google-drawings.png"
+            alt="Google Drawings"
+            width={16}
+            height={16}
+          />
+        }
+        canonicalUrl={this.props.attrs.href.replace("/preview", "/edit")}
+        title="Google Drawings"
+        border
+      />
+    );
+  }
+}

shared/editor/embeds/GoogleDrive.test.ts

@@ -0,0 +1,29 @@
+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();
+    expect(
+      "https://drive.google.com/file/d/1ohkOgmE8MiNx68u6ynBfYkgjeKu_x3ZK/preview?usp=sharing&resourceKey=BG8k4dEt1p2gisnVdlaSpA".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    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);
+  });
+});

shared/editor/embeds/GoogleDrive.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import Image from "./components/Image";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp("^https?://drive.google.com/file/d/(.*)$");
+
+export default class GoogleDrive extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    return (
+      <Frame
+        src={this.props.attrs.href.replace("/view", "/preview")}
+        icon={
+          <Image
+            src="/images/google-drive.png"
+            alt="Google Drive Icon"
+            width={16}
+            height={16}
+          />
+        }
+        title="Google Drive"
+        canonicalUrl={this.props.attrs.href}
+        border
+      />
+    );
+  }
+}

shared/editor/embeds/GoogleSheets.test.ts

@@ -0,0 +1,24 @@
+import GoogleSheets from "./GoogleSheets";
+
+describe("GoogleSheets", () => {
+  const match = GoogleSheets.ENABLED[0];
+
+  test("to be enabled on share link", () => {
+    expect(
+      "https://docs.google.com/spreadsheets/d/e/2PACX-1vTdddHPoZ5M_47wmSHCoigRIt2cj_Pd-kgtaNQY6H0Jzn0_CVGbxC1GcK5IoNzU615lzguexFwxasAW/pub".match(
+        match
+      )
+    ).toBeTruthy();
+    expect(
+      "https://docs.google.com/spreadsheets/d/e/2PACX-1vTdddHPoZ5M_47wmSHCoigR/edit".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://docs.google.com/spreadsheets".match(match)).toBe(null);
+    expect("https://docs.google.com".match(match)).toBe(null);
+    expect("https://www.google.com".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/GoogleSheets.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import Image from "./components/Image";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp("^https?://docs.google.com/spreadsheets/d/(.*)$");
+
+export default class GoogleSheets extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    return (
+      <Frame
+        {...this.props}
+        src={this.props.attrs.href.replace("/edit", "/preview")}
+        icon={
+          <Image
+            src="/images/google-sheets.png"
+            alt="Google Sheets Icon"
+            width={16}
+            height={16}
+          />
+        }
+        canonicalUrl={this.props.attrs.href}
+        title="Google Sheets"
+        border
+      />
+    );
+  }
+}

shared/editor/embeds/GoogleSlides.test.ts

@@ -0,0 +1,29 @@
+import GoogleSlides from "./GoogleSlides";
+
+describe("GoogleSlides", () => {
+  const match = GoogleSlides.ENABLED[0];
+
+  test("to be enabled on share link", () => {
+    expect(
+      "https://docs.google.com/presentation/d/e/2PACX-1vTdddHPoZ5M_47wmSHCoigRIt2cj_Pd-kgtaNQY6H0Jzn0_CVGbxC1GcK5IoNzU615lzguexFwxasAW/pub?start=false&loop=false&delayms=3000".match(
+        match
+      )
+    ).toBeTruthy();
+    expect(
+      "https://docs.google.com/presentation/d/e/2PACX-1vTdddHPoZ5M_47wmSHCoigRIt2cj_Pd-kgtaNQY6H0Jzn0_CVGbxC1GcK5IoNzU615lzguexFwxasAW/pub".match(
+        match
+      )
+    ).toBeTruthy();
+    expect(
+      "https://docs.google.com/presentation/d/e/2PACX-1vTdddHPoZ5M_47wmSHCoigR/edit".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://docs.google.com/presentation".match(match)).toBe(null);
+    expect("https://docs.google.com".match(match)).toBe(null);
+    expect("https://www.google.com".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/GoogleSlides.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import Image from "./components/Image";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp("^https?://docs.google.com/presentation/d/(.*)$");
+
+export default class GoogleSlides extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    return (
+      <Frame
+        {...this.props}
+        src={this.props.attrs.href
+          .replace("/edit", "/preview")
+          .replace("/pub", "/embed")}
+        icon={
+          <Image
+            src="/images/google-slides.png"
+            alt="Google Slides Icon"
+            width={16}
+            height={16}
+          />
+        }
+        canonicalUrl={this.props.attrs.href}
+        title="Google Slides"
+        border
+      />
+    );
+  }
+}

shared/editor/embeds/InVision.test.ts

@@ -0,0 +1,21 @@
+import InVision from "./InVision";
+
+describe("InVision", () => {
+  const match = InVision.ENABLED[0];
+
+  test("to be enabled on shortlink", () => {
+    expect("https://invis.io/69PG07QYQTE".match(match)).toBeTruthy();
+  });
+
+  test("to be enabled on share", () => {
+    expect(
+      "https://projects.invisionapp.com/share/69PG07QYQTE".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://invis.io".match(match)).toBe(null);
+    expect("https://invisionapp.com".match(match)).toBe(null);
+    expect("https://projects.invisionapp.com".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/InVision.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import ImageZoom from "react-medium-image-zoom";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const IFRAME_REGEX = /^https:\/\/(invis\.io\/.*)|(projects\.invisionapp\.com\/share\/.*)$/;
+const IMAGE_REGEX = /^https:\/\/(opal\.invisionapp\.com\/static-signed\/live-embed\/.*)$/;
+
+export default class InVision extends React.Component<Props> {
+  static ENABLED = [IFRAME_REGEX, IMAGE_REGEX];
+
+  render() {
+    if (IMAGE_REGEX.test(this.props.attrs.href)) {
+      return (
+        <ImageZoom
+          // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+          className={this.props.isSelected ? "ProseMirror-selectednode" : ""}
+          image={{
+            src: this.props.attrs.href,
+            alt: "InVision Embed",
+            style: {
+              maxWidth: "100%",
+              maxHeight: "75vh",
+            },
+          }}
+          shouldRespectMaxDimension
+        />
+      );
+    }
+
+    return (
+      <Frame
+        {...this.props}
+        src={this.props.attrs.href}
+        title="InVision Embed"
+      />
+    );
+  }
+}

shared/editor/embeds/Loom.test.ts

@@ -0,0 +1,32 @@
+import Loom from "./Loom";
+
+describe("Loom", () => {
+  const match = Loom.ENABLED[0];
+
+  test("to be enabled on share link", () => {
+    expect(
+      "https://www.loom.com/share/55327cbb265743f39c2c442c029277e0".match(match)
+    ).toBeTruthy();
+    expect(
+      "https://www.useloom.com/share/55327cbb265743f39c2c442c029277e0".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on embed link", () => {
+    expect(
+      "https://www.loom.com/embed/55327cbb265743f39c2c442c029277e0".match(match)
+    ).toBeTruthy();
+    expect(
+      "https://www.useloom.com/embed/55327cbb265743f39c2c442c029277e0".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://www.useloom.com".match(match)).toBe(null);
+    expect("https://www.useloom.com/features".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/Loom.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = /^https:\/\/(www\.)?(use)?loom.com\/(embed|share)\/(.*)$/;
+
+export default class Loom extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    const normalizedUrl = this.props.attrs.href.replace("share", "embed");
+    return <Frame {...this.props} src={normalizedUrl} title="Loom Embed" />;
+  }
+}

shared/editor/embeds/Lucidchart.test.ts

@@ -0,0 +1,53 @@
+import Lucidchart from "./Lucidchart";
+
+describe("Lucidchart", () => {
+  const match = Lucidchart.ENABLED[0];
+
+  test("to be enabled on view link", () => {
+    expect(
+      "https://www.lucidchart.com/documents/view/2f4a79cb-7637-433d-8ffb-27cce65a05e7".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on root link", () => {
+    expect(
+      "https://lucidchart.com/documents/view/2f4a79cb-7637-433d-8ffb-27cce65a05e7".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on app link", () => {
+    expect(
+      "https://app.lucidchart.com/documents/view/2f4a79cb-7637-433d-8ffb-27cce65a05e7".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on visited link", () => {
+    expect(
+      "https://www.lucidchart.com/documents/view/2f4a79cb-7637-433d-8ffb-27cce65a05e7/0".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on embedded link", () => {
+    expect(
+      "https://app.lucidchart.com/documents/embeddedchart/1af2bdfa-da7d-4ea1-aa1d-bec5677a9837".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://lucidchart.com".match(match)).toBe(null);
+    expect("https://app.lucidchart.com".match(match)).toBe(null);
+    expect("https://www.lucidchart.com".match(match)).toBe(null);
+    expect("https://www.lucidchart.com/features".match(match)).toBe(null);
+    expect("https://www.lucidchart.com/documents/view".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/Lucidchart.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+export default class Lucidchart extends React.Component<Props> {
+  static ENABLED = [
+    /^https?:\/\/(www\.|app\.)?lucidchart.com\/documents\/(embeddedchart|view)\/(?<chartId>[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})(?:\/.*)?$/,
+    /^https?:\/\/(www\.|app\.)?lucid.app\/lucidchart\/(?<chartId>[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})\/(embeddedchart|view)(?:\/.*)?$/,
+  ];
+
+  render() {
+    const { matches } = this.props.attrs;
+    const chartId = matches.groups?.chartId;
+
+    return (
+      <Frame
+        {...this.props}
+        src={`https://lucidchart.com/documents/embeddedchart/${chartId}`}
+        title="Lucidchart Embed"
+      />
+    );
+  }
+}

shared/editor/embeds/Marvel.test.ts

@@ -0,0 +1,14 @@
+import Marvel from "./Marvel";
+
+describe("Marvel", () => {
+  const match = Marvel.ENABLED[0];
+
+  test("to be enabled on share link", () => {
+    expect("https://marvelapp.com/75hj91".match(match)).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://marvelapp.com".match(match)).toBe(null);
+    expect("https://marvelapp.com/features".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/Marvel.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp("^https://marvelapp.com/([A-Za-z0-9-]{6})/?$");
+
+export default class Marvel extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    return (
+      <Frame
+        {...this.props}
+        src={this.props.attrs.href}
+        title="Marvel Embed"
+        border
+      />
+    );
+  }
+}

shared/editor/embeds/Mindmeister.test.ts

@@ -0,0 +1,46 @@
+import Mindmeister from "./Mindmeister";
+
+describe("Mindmeister", () => {
+  const match = Mindmeister.ENABLED[0];
+
+  test("to be enabled on mm.tt link", () => {
+    expect("https://mm.tt/326377934".match(match)).toBeTruthy();
+  });
+
+  test("to be enabled on mm.tt link with token parameter", () => {
+    expect("https://mm.tt/326377934?t=r9NcnTRr18".match(match)).toBeTruthy();
+  });
+
+  test("to be enabled on embed link", () => {
+    expect(
+      "https://www.mindmeister.com/maps/public_map_shell/326377934/paper-digital-or-online-mind-mapping".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on public link", () => {
+    expect(
+      "https://www.mindmeister.com/326377934/paper-digital-or-online-mind-mapping".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to be enabled without www", () => {
+    expect(
+      "https://mindmeister.com/326377934/paper-digital-or-online-mind-mapping".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to be enabled without slug", () => {
+    expect("https://mindmeister.com/326377934".match(match)).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://mindmeister.com".match(match)).toBe(null);
+    expect("https://www.mindmeister.com/pricing".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/Mindmeister.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp(
+  "^https://([w.-]+.)?(mindmeister.com|mm.tt)(/maps/public_map_shell)?/(\\d+)(\\?t=.*)?(/.*)?$"
+);
+
+export default class Mindmeister extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    const chartId =
+      this.props.attrs.matches[4] +
+      (this.props.attrs.matches[5] || "") +
+      (this.props.attrs.matches[6] || "");
+    return (
+      <Frame
+        {...this.props}
+        src={`https://www.mindmeister.com/maps/public_map_shell/${chartId}`}
+        title="Mindmeister Embed"
+        border
+      />
+    );
+  }
+}

shared/editor/embeds/Miro.test.ts

@@ -0,0 +1,27 @@
+import Miro from "./Miro";
+
+describe("Miro", () => {
+  const match = Miro.ENABLED[0];
+
+  test("to be enabled on old domain share link", () => {
+    expect(
+      "https://realtimeboard.com/app/board/o9J_k0fwiss=".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on share link", () => {
+    expect("https://miro.com/app/board/o9J_k0fwiss=".match(match)).toBeTruthy();
+  });
+
+  test("to extract the domain as part of the match for later use", () => {
+    expect(
+      "https://realtimeboard.com/app/board/o9J_k0fwiss=".match(match)?.[1]
+    ).toBe("realtimeboard");
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://miro.com".match(match)).toBe(null);
+    expect("https://realtimeboard.com".match(match)).toBe(null);
+    expect("https://realtimeboard.com/features".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/Miro.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = /^https:\/\/(realtimeboard|miro).com\/app\/board\/(.*)$/;
+
+export default class RealtimeBoard extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    const { matches } = this.props.attrs;
+    const domain = matches[1];
+    const boardId = matches[2];
+    const titleName = domain === "realtimeboard" ? "RealtimeBoard" : "Miro";
+
+    return (
+      <Frame
+        {...this.props}
+        src={`https://${domain}.com/app/embed/${boardId}`}
+        title={`${titleName} (${boardId})`}
+      />
+    );
+  }
+}

shared/editor/embeds/ModeAnalytics.test.ts

@@ -0,0 +1,17 @@
+import ModeAnalytics from "./ModeAnalytics";
+
+describe("ModeAnalytics", () => {
+  const match = ModeAnalytics.ENABLED[0];
+
+  test("to be enabled on report link", () => {
+    expect(
+      "https://modeanalytics.com/outline/reports/5aca06064f56".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://modeanalytics.com".match(match)).toBe(null);
+    expect("https://modeanalytics.com/outline".match(match)).toBe(null);
+    expect("https://modeanalytics.com/outline/reports".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/ModeAnalytics.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp(
+  "^https://([w.-]+.)?modeanalytics.com/(.*)/reports/(.*)$"
+);
+
+export default class ModeAnalytics extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    // Allow users to paste embed or standard urls and handle them the same
+    const normalizedUrl = this.props.attrs.href.replace(/\/embed$/, "");
+    return (
+      <Frame
+        {...this.props}
+        src={`${normalizedUrl}/embed`}
+        title="Mode Analytics Embed"
+      />
+    );
+  }
+}

shared/editor/embeds/Pitch.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp(
+  "^https?://app.pitch.com/app/(?:presentation/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}|public/player)/(.*)$"
+);
+
+export default class Pitch extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    const shareId = this.props.attrs.matches[1];
+    return (
+      <Frame
+        {...this.props}
+        src={`https://pitch.com/embed/${shareId}`}
+        title="Pitch Embed"
+        height="414px"
+      />
+    );
+  }
+}

shared/editor/embeds/Prezi.test.ts

@@ -0,0 +1,22 @@
+import Prezi from "./Prezi";
+
+describe("Prezi", () => {
+  const match = Prezi.ENABLED[0];
+
+  test("to be enabled on share link", () => {
+    expect(
+      "https://prezi.com/view/39mn8Rn1ZkoeEKQCgk5C".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on embed link", () => {
+    expect(
+      "https://prezi.com/view/39mn8Rn1ZkoeEKQCgk5C/embed".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://prezi.com".match(match)).toBe(null);
+    expect("https://prezi.com/pricing".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/Prezi.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp("^https://prezi.com/view/(.*)$");
+
+export default class Prezi extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    const url = this.props.attrs.href.replace(/\/embed$/, "");
+    return (
+      <Frame {...this.props} src={`${url}/embed`} title="Prezi Embed" border />
+    );
+  }
+}

shared/editor/embeds/Spotify.test.ts

@@ -0,0 +1,27 @@
+import Spotify from "./Spotify";
+
+describe("Spotify", () => {
+  const match = Spotify.ENABLED[0];
+
+  test("to be enabled on song link", () => {
+    expect(
+      "https://open.spotify.com/track/29G1ScCUhgjgI0H72qN4DE?si=DxjEUxV2Tjmk6pSVckPDRg".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on playlist link", () => {
+    expect(
+      "https://open.spotify.com/user/spotify/playlist/29G1ScCUhgjgI0H72qN4DE?si=DxjEUxV2Tjmk6pSVckPDRg".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://spotify.com".match(match)).toBe(null);
+    expect("https://open.spotify.com".match(match)).toBe(null);
+    expect("https://www.spotify.com".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/Spotify.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+
+const URL_REGEX = new RegExp("https?://open.spotify.com/(.*)$");
+import { EmbedProps as Props } from ".";
+
+export default class Spotify extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  get pathname() {
+    try {
+      const parsed = new URL(this.props.attrs.href);
+      return parsed.pathname;
+    } catch (err) {
+      return "";
+    }
+  }
+
+  render() {
+    const normalizedPath = this.pathname.replace(/^\/embed/, "/");
+    let height;
+
+    if (normalizedPath.includes("episode") || normalizedPath.includes("show")) {
+      height = 232;
+    } else if (normalizedPath.includes("track")) {
+      height = 80;
+    } else {
+      height = 380;
+    }
+
+    return (
+      <Frame
+        {...this.props}
+        width="100%"
+        height={`${height}px`}
+        src={`https://open.spotify.com/embed${normalizedPath}`}
+        title="Spotify Embed"
+        allow="encrypted-media"
+      />
+    );
+  }
+}

shared/editor/embeds/Trello.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = /^https:\/\/trello.com\/(c|b)\/([^/]*)(.*)?$/;
+
+export default class Trello extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    const { matches } = this.props.attrs;
+    const objectId = matches[2];
+
+    if (matches[1] === "c") {
+      return (
+        <Frame
+          width="316px"
+          height="158px"
+          src={`https://trello.com/embed/card?id=${objectId}`}
+          title={`Trello Card (${objectId})`}
+        />
+      );
+    }
+
+    return (
+      <Frame
+        {...this.props}
+        width="248px"
+        height="185px"
+        src={`https://trello.com/embed/board?id=${objectId}`}
+        title={`Trello Board (${objectId})`}
+      />
+    );
+  }
+}

shared/editor/embeds/Typeform.test.ts

@@ -0,0 +1,17 @@
+import Typeform from "./Typeform";
+
+describe("Typeform", () => {
+  const match = Typeform.ENABLED[0];
+
+  test("to be enabled on share link", () => {
+    expect(
+      "https://beardyman.typeform.com/to/zvlr4L".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://www.typeform.com".match(match)).toBe(null);
+    expect("https://typeform.com/to/zvlr4L".match(match)).toBe(null);
+    expect("https://typeform.com/features".match(match)).toBe(null);
+  });
+});

shared/editor/embeds/Typeform.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = new RegExp(
+  "^https://([A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?).typeform.com/to/(.*)$"
+);
+
+export default class Typeform extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    return (
+      <Frame
+        {...this.props}
+        src={this.props.attrs.href}
+        title="Typeform Embed"
+      />
+    );
+  }
+}

shared/editor/embeds/Vimeo.test.ts

@@ -0,0 +1,18 @@
+import Vimeo from "./Vimeo";
+
+describe("Vimeo", () => {
+  const match = Vimeo.ENABLED[0];
+
+  test("to be enabled on video link", () => {
+    expect("https://vimeo.com/265045525".match(match)).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://vimeo.com".match(match)).toBe(null);
+    expect("https://www.vimeo.com".match(match)).toBe(null);
+    expect("https://vimeo.com/upgrade".match(match)).toBe(null);
+    expect("https://vimeo.com/features/video-marketing".match(match)).toBe(
+      null
+    );
+  });
+});

shared/editor/embeds/Vimeo.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = /(http|https)?:\/\/(www\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|)(\d\w+)(?:\/|\?)?(\d\w+)?/;
+
+export default class Vimeo extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    const { matches } = this.props.attrs;
+    const videoId = matches[4];
+    const hId = matches[5];
+
+    return (
+      <Frame
+        {...this.props}
+        src={`https://player.vimeo.com/video/${videoId}?byline=0${
+          hId ? `&h=${hId}` : ""
+        }`}
+        title={`Vimeo Embed (${videoId})`}
+        height="412px"
+        border={false}
+      />
+    );
+  }
+}

shared/editor/embeds/Whimsical.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = /^https?:\/\/whimsical.com\/[0-9a-zA-Z-_~]*-([a-zA-Z0-9]+)\/?$/;
+
+export default class Whimsical extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    const { matches } = this.props.attrs;
+    const boardId = matches[1];
+
+    return (
+      <Frame
+        {...this.props}
+        src={`https://whimsical.com/embed/${boardId}`}
+        title="Whimsical"
+      />
+    );
+  }
+}

shared/editor/embeds/YouTube.test.ts

@@ -0,0 +1,31 @@
+import YouTube from "./YouTube";
+
+describe("YouTube", () => {
+  const match = YouTube.ENABLED[0];
+
+  test("to be enabled on video link", () => {
+    expect(
+      "https://www.youtube.com/watch?v=dQw4w9WgXcQ".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on embed link", () => {
+    expect(
+      "https://www.youtube.com/embed?v=dQw4w9WgXcQ".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on shortlink", () => {
+    expect("https://youtu.be/dQw4w9WgXcQ".match(match)).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://youtu.be".match(match)).toBe(null);
+    expect("https://youtube.com".match(match)).toBe(null);
+    expect("https://www.youtube.com".match(match)).toBe(null);
+    expect("https://www.youtube.com/logout".match(match)).toBe(null);
+    expect("https://www.youtube.com/feed/subscriptions".match(match)).toBe(
+      null
+    );
+  });
+});

shared/editor/embeds/YouTube.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
+
+const URL_REGEX = /(?:https?:\/\/)?(?:www\.)?youtu\.?be(?:\.com)?\/?.*(?:watch|embed)?(?:.*v=|v\/|\/)([a-zA-Z0-9_-]{11})$/i;
+
+export default class YouTube extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    const { matches } = this.props.attrs;
+    const videoId = matches[1];
+    return (
+      <Frame
+        {...this.props}
+        src={`https://www.youtube.com/embed/${videoId}?modestbranding=1`}
+        title={`YouTube (${videoId})`}
+      />
+    );
+  }
+}

shared/editor/embeds/components/Frame.tsx

@@ -0,0 +1,149 @@
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { OpenIcon } from "outline-icons";
+import * as React from "react";
+import styled from "styled-components";
+
+type Props = React.HTMLAttributes<HTMLIFrameElement> & {
+  src?: string;
+  border?: boolean;
+  title?: string;
+  icon?: React.ReactNode;
+  canonicalUrl?: string;
+  isSelected?: boolean;
+  width?: string;
+  height?: string;
+  allow?: string;
+};
+
+type PropsWithRef = Props & {
+  forwardedRef: React.Ref<HTMLIFrameElement>;
+};
+
+@observer
+class Frame extends React.Component<PropsWithRef> {
+  mounted: boolean;
+
+  @observable
+  isLoaded = false;
+
+  componentDidMount() {
+    this.mounted = true;
+    setImmediate(this.loadIframe);
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
+  loadIframe = () => {
+    if (!this.mounted) return;
+    this.isLoaded = true;
+  };
+
+  render() {
+    const {
+      border,
+      width = "100%",
+      height = "400px",
+      forwardedRef,
+      icon,
+      title,
+      canonicalUrl,
+      isSelected,
+      src,
+    } = this.props;
+    const withBar = !!(icon || canonicalUrl);
+
+    return (
+      <Rounded
+        width={width}
+        height={height}
+        $withBar={withBar}
+        $border={border}
+        className={isSelected ? "ProseMirror-selectednode" : ""}
+      >
+        {this.isLoaded && (
+          <Iframe
+            ref={forwardedRef}
+            $withBar={withBar}
+            sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+            width={width}
+            height={height}
+            frameBorder="0"
+            title="embed"
+            loading="lazy"
+            src={src}
+            allowFullScreen
+          />
+        )}
+        {withBar && (
+          <Bar>
+            {icon} <Title>{title}</Title>
+            {canonicalUrl && (
+              <Open
+                href={canonicalUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <OpenIcon color="currentColor" size={18} /> Open
+              </Open>
+            )}
+          </Bar>
+        )}
+      </Rounded>
+    );
+  }
+}
+
+const Iframe = styled.iframe<{ $withBar: boolean }>`
+  border-radius: ${(props) => (props.$withBar ? "3px 3px 0 0" : "3px")};
+  display: block;
+`;
+
+const Rounded = styled.div<{
+  width: string;
+  height: string;
+  $withBar: boolean;
+  $border?: boolean;
+}>`
+  border: 1px solid
+    ${(props) => (props.$border ? props.theme.embedBorder : "transparent")};
+  border-radius: 6px;
+  overflow: hidden;
+  width: ${(props) => props.width};
+  height: ${(props) => (props.$withBar ? props.height + 28 : props.height)};
+`;
+
+const Open = styled.a`
+  color: ${(props) => props.theme.textSecondary} !important;
+  font-size: 13px;
+  font-weight: 500;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  right: 0;
+  padding: 0 8px;
+`;
+
+const Title = styled.span`
+  font-size: 13px;
+  font-weight: 500;
+  padding-left: 4px;
+`;
+
+const Bar = styled.div`
+  display: flex;
+  align-items: center;
+  border-top: 1px solid ${(props) => props.theme.embedBorder};
+  background: ${(props) => props.theme.secondaryBackground};
+  color: ${(props) => props.theme.textSecondary};
+  padding: 0 8px;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  user-select: none;
+`;
+
+export default React.forwardRef<HTMLIFrameElement, Props>((props, ref) => (
+  <Frame {...props} forwardedRef={ref} />
+));

shared/editor/embeds/components/Image.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { cdnPath } from "../../../utils/urls";
+
+type Props = {
+  alt: string;
+  src: string;
+  title?: string;
+  width?: number;
+  height?: number;
+};
+
+export default function Image({ src, alt, ...rest }: Props) {
+  return <img src={cdnPath(src)} alt={alt} {...rest} />;
+}

shared/editor/embeds/index.tsx

@@ -0,0 +1,312 @@
+import * as React from "react";
+import styled from "styled-components";
+import { EmbedDescriptor } from "@shared/editor/types";
+import Abstract from "./Abstract";
+import Airtable from "./Airtable";
+import Bilibili from "./Bilibili";
+import Cawemo from "./Cawemo";
+import ClickUp from "./ClickUp";
+import Codepen from "./Codepen";
+import Descript from "./Descript";
+import Diagrams from "./Diagrams";
+import Figma from "./Figma";
+import Framer from "./Framer";
+import Gist from "./Gist";
+import GoogleCalendar from "./GoogleCalendar";
+import GoogleDataStudio from "./GoogleDataStudio";
+import GoogleDocs from "./GoogleDocs";
+import GoogleDrawings from "./GoogleDrawings";
+import GoogleDrive from "./GoogleDrive";
+import GoogleSheets from "./GoogleSheets";
+import GoogleSlides from "./GoogleSlides";
+import InVision from "./InVision";
+import Loom from "./Loom";
+import Lucidchart from "./Lucidchart";
+import Marvel from "./Marvel";
+import Mindmeister from "./Mindmeister";
+import Miro from "./Miro";
+import ModeAnalytics from "./ModeAnalytics";
+import Pitch from "./Pitch";
+import Prezi from "./Prezi";
+import Spotify from "./Spotify";
+import Trello from "./Trello";
+import Typeform from "./Typeform";
+import Vimeo from "./Vimeo";
+import Whimsical from "./Whimsical";
+import YouTube from "./YouTube";
+import Image from "./components/Image";
+
+export type EmbedProps = {
+  isSelected: boolean;
+  attrs: {
+    href: string;
+    matches: RegExpMatchArray;
+  };
+};
+
+function matcher(Component: React.ComponentType<EmbedProps>) {
+  return (url: string): boolean | [] | RegExpMatchArray => {
+    // @ts-expect-error not aware of static
+    const regexes = Component.ENABLED;
+
+    for (const regex of regexes) {
+      const result = url.match(regex);
+
+      if (result) {
+        return result;
+      }
+    }
+
+    return false;
+  };
+}
+
+const Img = styled(Image)`
+  margin: 4px;
+  width: 18px;
+  height: 18px;
+`;
+
+const embeds: EmbedDescriptor[] = [
+  {
+    title: "Abstract",
+    keywords: "design",
+    defaultHidden: true,
+    icon: () => <Img src="/images/abstract.png" alt="Abstract" />,
+    component: Abstract,
+    matcher: matcher(Abstract),
+  },
+  {
+    title: "Airtable",
+    keywords: "spreadsheet",
+    icon: () => <Img src="/images/airtable.png" alt="Airtable" />,
+    component: Airtable,
+    matcher: matcher(Airtable),
+  },
+  {
+    title: "Bilibili",
+    keywords: "video",
+    defaultHidden: true,
+    icon: () => <Img src="/images/bilibili.png" alt="Bilibili" />,
+    component: Bilibili,
+    matcher: matcher(Bilibili),
+  },
+  {
+    title: "Cawemo",
+    keywords: "bpmn process",
+    defaultHidden: true,
+    icon: () => <Img src="/images/cawemo.png" alt="Cawemo" />,
+    component: Cawemo,
+    matcher: matcher(Cawemo),
+  },
+  {
+    title: "ClickUp",
+    keywords: "project",
+    icon: () => <Img src="/images/clickup.png" alt="ClickUp" />,
+    component: ClickUp,
+    matcher: matcher(ClickUp),
+  },
+  {
+    title: "Codepen",
+    keywords: "code editor",
+    icon: () => <Img src="/images/codepen.png" alt="Codepen" />,
+    component: Codepen,
+    matcher: matcher(Codepen),
+  },
+  {
+    title: "Descript",
+    keywords: "audio",
+    icon: () => <Img src="/images/descript.png" alt="Descript" />,
+    component: Descript,
+    matcher: matcher(Descript),
+  },
+  {
+    title: "Figma",
+    keywords: "design svg vector",
+    icon: () => <Img src="/images/figma.png" alt="Figma" />,
+    component: Figma,
+    matcher: matcher(Figma),
+  },
+  {
+    title: "Framer",
+    keywords: "design prototyping",
+    icon: () => <Img src="/images/framer.png" alt="Framer" />,
+    component: Framer,
+    matcher: matcher(Framer),
+  },
+  {
+    title: "GitHub Gist",
+    keywords: "code",
+    icon: () => <Img src="/images/github-gist.png" alt="GitHub" />,
+    component: Gist,
+    matcher: matcher(Gist),
+  },
+  {
+    title: "Diagrams.net",
+    keywords: "diagrams drawio",
+    icon: () => <Img src="/images/diagrams.png" alt="Diagrams.net" />,
+    component: Diagrams,
+    matcher: matcher(Diagrams),
+  },
+  {
+    title: "Google Drawings",
+    keywords: "drawings",
+    icon: () => <Img src="/images/google-drawings.png" alt="Google Drawings" />,
+    component: GoogleDrawings,
+    matcher: matcher(GoogleDrawings),
+  },
+  {
+    title: "Google Drive",
+    keywords: "drive",
+    icon: () => <Img src="/images/google-drive.png" alt="Google Drive" />,
+    component: GoogleDrive,
+    matcher: matcher(GoogleDrive),
+  },
+  {
+    title: "Google Docs",
+    keywords: "documents word",
+    icon: () => <Img src="/images/google-docs.png" alt="Google Docs" />,
+    component: GoogleDocs,
+    matcher: matcher(GoogleDocs),
+  },
+  {
+    title: "Google Sheets",
+    keywords: "excel spreadsheet",
+    icon: () => <Img src="/images/google-sheets.png" alt="Google Sheets" />,
+    component: GoogleSheets,
+    matcher: matcher(GoogleSheets),
+  },
+  {
+    title: "Google Slides",
+    keywords: "presentation slideshow",
+    icon: () => <Img src="/images/google-slides.png" alt="Google Slides" />,
+    component: GoogleSlides,
+    matcher: matcher(GoogleSlides),
+  },
+  {
+    title: "Google Calendar",
+    keywords: "calendar",
+    icon: () => <Img src="/images/google-calendar.png" alt="Google Calendar" />,
+    component: GoogleCalendar,
+    matcher: matcher(GoogleCalendar),
+  },
+  {
+    title: "Google Data Studio",
+    keywords: "bi business intelligence",
+    icon: () => (
+      <Img src="/images/google-datastudio.png" alt="Google Data Studio" />
+    ),
+    component: GoogleDataStudio,
+    matcher: matcher(GoogleDataStudio),
+  },
+  {
+    title: "InVision",
+    keywords: "design prototype",
+    defaultHidden: true,
+    icon: () => <Img src="/images/invision.png" alt="InVision" />,
+    component: InVision,
+    matcher: matcher(InVision),
+  },
+  {
+    title: "Loom",
+    keywords: "video screencast",
+    icon: () => <Img src="/images/loom.png" alt="Loom" />,
+    component: Loom,
+    matcher: matcher(Loom),
+  },
+  {
+    title: "Lucidchart",
+    keywords: "chart",
+    icon: () => <Img src="/images/lucidchart.png" alt="Lucidchart" />,
+    component: Lucidchart,
+    matcher: matcher(Lucidchart),
+  },
+  {
+    title: "Marvel",
+    keywords: "design prototype",
+    icon: () => <Img src="/images/marvel.png" alt="Marvel" />,
+    component: Marvel,
+    matcher: matcher(Marvel),
+  },
+  {
+    title: "Mindmeister",
+    keywords: "mindmap",
+    icon: () => <Img src="/images/mindmeister.png" alt="Mindmeister" />,
+    component: Mindmeister,
+    matcher: matcher(Mindmeister),
+  },
+  {
+    title: "Miro",
+    keywords: "whiteboard",
+    icon: () => <Img src="/images/miro.png" alt="Miro" />,
+    component: Miro,
+    matcher: matcher(Miro),
+  },
+  {
+    title: "Mode",
+    keywords: "analytics",
+    defaultHidden: true,
+    icon: () => <Img src="/images/mode-analytics.png" alt="Mode" />,
+    component: ModeAnalytics,
+    matcher: matcher(ModeAnalytics),
+  },
+  {
+    title: "Pitch",
+    keywords: "presentation",
+    defaultHidden: true,
+    icon: () => <Img src="/images/pitch.png" alt="Pitch" />,
+    component: Pitch,
+    matcher: matcher(Pitch),
+  },
+  {
+    title: "Prezi",
+    keywords: "presentation",
+    icon: () => <Img src="/images/prezi.png" alt="Prezi" />,
+    component: Prezi,
+    matcher: matcher(Prezi),
+  },
+  {
+    title: "Spotify",
+    keywords: "music",
+    icon: () => <Img src="/images/spotify.png" alt="Spotify" />,
+    component: Spotify,
+    matcher: matcher(Spotify),
+  },
+  {
+    title: "Trello",
+    keywords: "kanban",
+    icon: () => <Img src="/images/trello.png" alt="Trello" />,
+    component: Trello,
+    matcher: matcher(Trello),
+  },
+  {
+    title: "Typeform",
+    keywords: "form survey",
+    icon: () => <Img src="/images/typeform.png" alt="Typeform" />,
+    component: Typeform,
+    matcher: matcher(Typeform),
+  },
+  {
+    title: "Vimeo",
+    keywords: "video",
+    icon: () => <Img src="/images/vimeo.png" alt="Vimeo" />,
+    component: Vimeo,
+    matcher: matcher(Vimeo),
+  },
+  {
+    title: "Whimsical",
+    keywords: "whiteboard",
+    icon: () => <Img src="/images/whimsical.png" alt="Whimsical" />,
+    component: Whimsical,
+    matcher: matcher(Whimsical),
+  },
+  {
+    title: "YouTube",
+    keywords: "google video",
+    icon: () => <Img src="/images/youtube.png" alt="YouTube" />,
+    component: YouTube,
+    matcher: matcher(YouTube),
+  },
+];
+
+export default embeds;