feat(editor): support google form embeds (#3930)

Fixes #3129 and #3923

shared/editor/embeds/GoogleForms.test.ts

@@ -0,0 +1,48 @@
+import GoogleForms from "./GoogleForms";
+
+describe("GoogleForms", () => {
+  const match = GoogleForms.ENABLED[0];
+
+  test("to be enabled on long-form share links", () => {
+    expect(
+      "https://docs.google.com/forms/d/e/1FAIpQLSetbCGiE8DhfVQZMtLE_CU2MwpSsrkXi690hkEDREOvMu8VYQ/viewform?usp=sf_link".match(
+        match
+      )
+    ).toBeTruthy();
+    expect(
+      "https://docs.google.com/forms/d/e/1FAIpQLSetbCGiE8DhfVQZMtLE_CU2MwpSsrkXi690hkEDREOvMu8VYQ/viewform".match(
+        match
+      )
+    ).toBeTruthy();
+    expect(
+      "https://docs.google.com/forms/d/e/1FAIpQLSetbCGiE8DhfVQZMtLE_CU2MwpSsrkXi690hkEDREOvMu8VYQ/viewform?embedded=true".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on edit links", () => {
+    expect(
+      "https://docs.google.com/forms/d/1zG75dmHQGpomQlWB6VtRhWajNer7mKMjtApM_aRAJV8/edit".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://docs.google.com/forms".match(match)).toBe(null);
+    expect("https://docs.google.com/forms/d/".match(match)).toBe(null);
+    expect("https://docs.google.com".match(match)).toBe(null);
+    expect("https://www.google.com".match(match)).toBe(null);
+    expect(
+      "https://docssgoogle.com/forms/d/e/1FAIpQLSetbCGiE8DhfVQZMtLE_CU2MwpSsrkXi690hkEDREOvMu8VYQ/viewform?usp=sf_link".match(
+        match
+      )
+    ).toBe(null);
+    expect(
+      "https://docs.googleecom/forms/d/e/1FAIpQLSetbCGiE8DhfVQZMtLE_CU2MwpSsrkXi690hkEDREOvMu8VYQ/viewform".match(
+        match
+      )
+    ).toBe(null);
+  });
+});

shared/editor/embeds/GoogleForms.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import Frame from "../components/Frame";
+import Image from "../components/Image";
+import { EmbedProps as Props } from ".";
+
+function GoogleForms(props: Props) {
+  return (
+    <Frame
+      {...props}
+      src={props.attrs.href.replace(
+        /\/(edit|viewform)(\?.+)?$/,
+        "/viewform?embedded=true"
+      )}
+      icon={
+        <Image
+          src="/images/google-forms.png"
+          alt="Google Forms Icon"
+          width={16}
+          height={16}
+        />
+      }
+      canonicalUrl={props.attrs.href}
+      title="Google Forms"
+      border
+    />
+  );
+}
+
+GoogleForms.ENABLED = [
+  new RegExp("^https?://docs\\.google\\.com/forms/d/(.+)$"),
+];
+
+export default GoogleForms;

shared/editor/embeds/index.tsx

@@ -21,6 +21,7 @@ import GoogleDataStudio from "./GoogleDataStudio";
 import GoogleDocs from "./GoogleDocs";
 import GoogleDrawings from "./GoogleDrawings";
 import GoogleDrive from "./GoogleDrive";
+import GoogleForms from "./GoogleForms";
 import GoogleSheets from "./GoogleSheets";
 import GoogleSlides from "./GoogleSlides";
 import InVision from "./InVision";
@@ -233,6 +234,13 @@ const embeds: EmbedDescriptor[] = [
     component: GoogleDataStudio,
     matcher: matcher(GoogleDataStudio),
   },
+  {
+    title: "Google Forms",
+    keywords: "form survey",
+    icon: () => <Img src="/images/google-forms.png" alt="Google Forms" />,
+    component: GoogleForms,
+    matcher: matcher(GoogleForms),
+  },
   {
     title: "InVision",
     keywords: "design prototype",