Add support for Grist embeds. (#3914)

* Add support for Grist embeds.

* Change Grist integration to only support SaaS

* Update Regex

* Update shared/editor/embeds/index.tsx

Co-authored-by: Apoorv Mishra <apoorvmishra101092@gmail.com>

* Change Grist embed to use function based API

* Convert standard URL into embed url

* Update shared/editor/embeds/Grist.tsx

Co-authored-by: Apoorv Mishra <apoorvmishra101092@gmail.com>

* Update shared/editor/embeds/Grist.tsx

Co-authored-by: Apoorv Mishra <apoorvmishra101092@gmail.com>

* Update shared/editor/embeds/Grist.tsx

Co-authored-by: Apoorv Mishra <apoorvmishra101092@gmail.com>

* Lint and test updates

Co-authored-by: Apoorv Mishra <apoorvmishra101092@gmail.com>
Co-authored-by: Tom Moor <tom.moor@gmail.com>

shared/editor/embeds/Grist.test.tsx

@@ -0,0 +1,33 @@
+import Grist from "./Grist";
+
+describe("Grist", () => {
+  const match = Grist.ENABLED[0];
+
+  test("to be enabled on share link", () => {
+    expect(
+      "https://templates.getgrist.com/doc/afterschool-program/p/2?embed=true".match(
+        match
+      )
+    ).toBeTruthy();
+    expect(
+      "https://docs.getgrist.com/sg5V93LuAije/Untitled-document/p/22?embed=true".match(
+        match
+      )
+    ).toBeTruthy();
+    expect(
+      "https://templates.getgrist.com/doc/afterschool-program".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    // Self hosted not yet supported
+    expect(
+      "http://grist.my.host.com/o/docs/doc/new~5cCkr6CtMArdA62ohSy5xB/p/1?embed=true".match(
+        match
+      )
+    ).toBe(null);
+    expect(
+      "https://my.get.grist.com/doc/afterschool-program?embed=true".match(match)
+    ).toBe(null);
+  });
+});

shared/editor/embeds/Grist.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import Frame from "../components/Frame";
+import Image from "../components/Image";
+import { EmbedProps as Props } from ".";
+
+function Grist(props: Props) {
+  return (
+    <Frame
+      {...props}
+      src={props.attrs.href.replace(/(\?embed=true)?$/, "?embed=true")}
+      icon={
+        <Image
+          src="/images/grist.png"
+          alt="Grist Icon"
+          width={16}
+          height={16}
+        />
+      }
+      title="Grist Spreadsheet"
+      border
+    />
+  );
+}
+
+Grist.ENABLED = [new RegExp("^https?://([a-z.-]+\\.)?getgrist\\.com/(.+)$")];
+
+export default Grist;

shared/editor/embeds/index.tsx

@@ -24,6 +24,7 @@ import GoogleDrive from "./GoogleDrive";
 import GoogleForms from "./GoogleForms";
 import GoogleSheets from "./GoogleSheets";
 import GoogleSlides from "./GoogleSlides";
+import Grist from "./Grist";
 import InVision from "./InVision";
 import JSFiddle from "./JSFiddle";
 import Loom from "./Loom";
@@ -241,6 +242,13 @@ const embeds: EmbedDescriptor[] = [
     component: GoogleForms,
     matcher: matcher(GoogleForms),
   },
+  {
+    title: "Grist",
+    keywords: "spreadsheet",
+    icon: () => <Img src="/images/grist.png" alt="Grist" />,
+    component: Grist,
+    matcher: matcher(Grist),
+  },
   {
     title: "InVision",
     keywords: "design prototype",