chore: Move to Typescript (#2783)

This PR moves the entire project to Typescript. Due to the ~1000 ignores this will lead to a messy codebase for a while, but the churn is worth it – all of those ignore comments are places that were never type-safe previously.

closes #1282

shared/embeds/Abstract.test.ts

@@ -1,16 +1,15 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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
@@ -24,7 +23,6 @@ describe("Abstract", () => {
         match2
       )
     ).toBeTruthy();
-
     expect(
       "https://app.abstract.com/share/aaec8bba-f473-4f64-96e7-bff41c70ff8a".match(
         match2

shared/embeds/Abstract.tsx

@@ -1,13 +1,12 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class Abstract extends React.Component<Props> {
   static ENABLED = [
@@ -18,10 +17,10 @@ export default class Abstract extends React.Component<Props> {
   render() {
     const { matches } = this.props.attrs;
     const shareId = matches[1];
-
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
         src={`https://app.goabstract.com/embed/${shareId}`}
         title={`Abstract (${shareId})`}
       />

shared/embeds/Airtable.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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();
   });

shared/embeds/Airtable.tsx

@@ -1,15 +1,13 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp("https://airtable.com/(?:embed/)?(shr.*)$");
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class Airtable extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -17,10 +15,10 @@ export default class Airtable extends React.Component<Props> {
   render() {
     const { matches } = this.props.attrs;
     const shareId = matches[1];
-
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
         src={`https://airtable.com/embed/${shareId}`}
         title={`Airtable (${shareId})`}
         border

shared/embeds/Bilibili.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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(

shared/embeds/Bilibili.tsx

@@ -1,15 +1,13 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = /(?:https?:\/\/)?(www\.bilibili\.com)\/video\/([\w\d]+)?(\?\S+)?/i;
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class Vimeo extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -17,10 +15,10 @@ export default class Vimeo extends React.Component<Props> {
   render() {
     const { matches } = this.props.attrs;
     const videoId = matches[2];
-
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
         src={`https://player.bilibili.com/player.html?bvid=${videoId}&page=1&high_quality=1`}
         title={`Bilibili Embed (${videoId})`}
       />

shared/embeds/Cawemo.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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)

shared/embeds/Cawemo.tsx

@@ -1,15 +1,13 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp("https?://cawemo.com/(?:share|embed)/(.*)$");
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class Cawemo extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -17,10 +15,10 @@ export default class Cawemo extends React.Component<Props> {
   render() {
     const { matches } = this.props.attrs;
     const shareId = matches[1];
-
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
         src={`https://cawemo.com/embed/${shareId}`}
         title={"Cawemo Embed"}
         border

shared/embeds/ClickUp.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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)

shared/embeds/ClickUp.tsx

@@ -1,17 +1,15 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp(
   "^https?://share.clickup.com/[a-z]/[a-z]/(.*)/(.*)$"
 );
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class ClickUp extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -20,6 +18,7 @@ export default class ClickUp extends React.Component<Props> {
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
         src={this.props.attrs.href}
         title="ClickUp Embed"
       />

shared/embeds/Codepen.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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)

shared/embeds/Codepen.tsx

@@ -1,22 +1,20 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp("^https://codepen.io/(.*?)/(pen|embed)/(.*)$");
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class Codepen extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
 
   render() {
     const normalizedUrl = this.props.attrs.href.replace(/\/pen\//, "/embed/");
-
+    // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
     return <Frame {...this.props} src={normalizedUrl} title="Codepen Embed" />;
   }
 }

shared/embeds/Descript.tsx

@@ -1,13 +1,12 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class Descript extends React.Component<Props> {
   static ENABLED = [new RegExp("https?://share.descript.com/view/(\\w+)$")];
@@ -15,10 +14,10 @@ export default class Descript extends React.Component<Props> {
   render() {
     const { matches } = this.props.attrs;
     const shareId = matches[1];
-
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; width: string;... Remove this comment to see the full error message
         src={`https://share.descript.com/embed/${shareId}`}
         title={`Descript (${shareId})`}
         width="400px"

shared/embeds/Diagrams.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 import Diagrams from "./Diagrams";
 
 describe("Diagrams", () => {

shared/embeds/Diagrams.tsx

@@ -1,16 +1,14 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 import Image from "./components/Image";
 
 const URL_REGEX = /^https:\/\/viewer\.diagrams\.net\/.*(title=\\w+)?/;
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class Diagrams extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -35,6 +33,7 @@ export default class Diagrams extends React.Component<Props> {
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
         src={this.embedUrl}
         title={this.title}
         border

shared/embeds/Figma.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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)

shared/embeds/Figma.tsx

@@ -1,17 +1,15 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp(
   "https://([w.-]+.)?figma.com/(file|proto)/([0-9a-zA-Z]{22,128})(?:/.*)?$"
 );
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class Figma extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -20,6 +18,7 @@ export default class Figma extends React.Component<Props> {
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
         src={`https://www.figma.com/embed?embed_host=outline&url=${this.props.attrs.href}`}
         title="Figma Embed"
         border

shared/embeds/Framer.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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();
   });

shared/embeds/Framer.tsx

@@ -1,15 +1,13 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp("^https://framer.cloud/(.*)$");
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class Framer extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -18,6 +16,7 @@ export default class Framer extends React.Component<Props> {
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
         src={this.props.attrs.href}
         title="Framer Embed"
         border

shared/embeds/Gist.test.ts

@@ -1,21 +1,19 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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

shared/embeds/Gist.tsx

@@ -1,20 +1,19 @@
-// @flow
 import * as React from "react";
 
 const URL_REGEX = new RegExp(
   "^https://gist.github.com/([a-zA-Z\\d](?:[a-zA-Z\\d]|-(?=[a-zA-Z\\d])){0,38})/(.*)$"
 );
-
-type Props = {|
-  isSelected: boolean,
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  isSelected: boolean;
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 class Gist extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
+
   ref = React.createRef<HTMLIFrameElement>();
 
   get id() {
@@ -35,8 +34,9 @@ class Gist extends React.Component<Props> {
     if (!iframe) return;
     const id = this.id;
 
-    // $FlowFixMe
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'document' does not exist on type 'HTMLIF... Remove this comment to see the full error message
     let doc = iframe.document;
+
     if (iframe.contentDocument) {
       doc = iframe.contentDocument;
     } else if (iframe.contentWindow) {
@@ -48,9 +48,7 @@ class Gist extends React.Component<Props> {
     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>`;
-
     if (!doc) return;
-
     doc.open();
     doc.writeln(iframeHtml);
     doc.close();
@@ -58,11 +56,11 @@ class Gist extends React.Component<Props> {
 
   render() {
     const id = this.id;
-
     return (
       <iframe
         className={this.props.isSelected ? "ProseMirror-selectednode" : ""}
         ref={this.ref}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ className: string; ref: RefObject<HTMLIFra... Remove this comment to see the full error message
         type="text/html"
         frameBorder="0"
         width="100%"

shared/embeds/GoogleCalendar.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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(

shared/embeds/GoogleCalendar.tsx

@@ -1,17 +1,15 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp(
   "^https?://calendar.google.com/calendar/embed\\?src=(.*)$"
 );
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class GoogleCalendar extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -20,6 +18,7 @@ export default class GoogleCalendar extends React.Component<Props> {
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
         src={this.props.attrs.href}
         title="Google Calendar"
         border

shared/embeds/GoogleDataStudio.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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(

shared/embeds/GoogleDataStudio.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 import Image from "./components/Image";
@@ -6,13 +5,12 @@ import Image from "./components/Image";
 const URL_REGEX = new RegExp(
   "^https?://datastudio.google.com/(embed|u/0)/reporting/(.*)/page/(.*)(/edit)?$"
 );
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class GoogleDataStudio extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -21,6 +19,7 @@ export default class GoogleDataStudio extends React.Component<Props> {
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; icon: Element; canonicalUrl: ... Remove this comment to see the full error message
         src={this.props.attrs.href.replace("u/0", "embed").replace("/edit", "")}
         icon={
           <Image

shared/embeds/GoogleDocs.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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(

shared/embeds/GoogleDocs.tsx

@@ -1,16 +1,14 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 import Image from "./components/Image";
 
 const URL_REGEX = new RegExp("^https?://docs.google.com/document/(.*)$");
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class GoogleDocs extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -19,6 +17,7 @@ export default class GoogleDocs extends React.Component<Props> {
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; icon: Element; canonicalUrl: ... Remove this comment to see the full error message
         src={this.props.attrs.href.replace("/edit", "/preview")}
         icon={
           <Image

shared/embeds/GoogleDrawings.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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(

shared/embeds/GoogleDrawings.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 import Image from "./components/Image";
@@ -6,13 +5,12 @@ import Image from "./components/Image";
 const URL_REGEX = new RegExp(
   "^https://docs.google.com/drawings/d/(.*)/(edit|preview)(.*)$"
 );
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class GoogleDrawings extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -21,6 +19,7 @@ export default class GoogleDrawings extends React.Component<Props> {
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; icon: Element; canonicalUrl: ... Remove this comment to see the full error message
         src={this.props.attrs.href.replace("/edit", "/preview")}
         icon={
           <Image

shared/embeds/GoogleDrive.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 import GoogleDrive from "./GoogleDrive";
 
 describe("GoogleDrive", () => {

shared/embeds/GoogleDrive.tsx

@@ -1,16 +1,14 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 import Image from "./components/Image";
 
 const URL_REGEX = new RegExp("^https?://drive.google.com/file/d/(.*)$");
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class GoogleDrive extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -18,6 +16,7 @@ export default class GoogleDrive extends React.Component<Props> {
   render() {
     return (
       <Frame
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; icon: Element; title: string;... Remove this comment to see the full error message
         src={this.props.attrs.href.replace("/view", "/preview")}
         icon={
           <Image

shared/embeds/GoogleSheets.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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(

shared/embeds/GoogleSheets.tsx

@@ -1,16 +1,14 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 import Image from "./components/Image";
 
 const URL_REGEX = new RegExp("^https?://docs.google.com/spreadsheets/d/(.*)$");
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class GoogleSheets extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -19,6 +17,7 @@ export default class GoogleSheets extends React.Component<Props> {
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; icon: Element; canonicalUrl: ... Remove this comment to see the full error message
         src={this.props.attrs.href.replace("/edit", "/preview")}
         icon={
           <Image

shared/embeds/GoogleSlides.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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(

shared/embeds/GoogleSlides.tsx

@@ -1,16 +1,14 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 import Image from "./components/Image";
 
 const URL_REGEX = new RegExp("^https?://docs.google.com/presentation/d/(.*)$");
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class GoogleSlides extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -19,6 +17,7 @@ export default class GoogleSlides extends React.Component<Props> {
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; icon: Element; canonicalUrl: ... Remove this comment to see the full error message
         src={this.props.attrs.href
           .replace("/edit", "/preview")
           .replace("/pub", "/embed")}

shared/embeds/InVision.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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();
   });

shared/embeds/InVision.tsx

@@ -1,19 +1,16 @@
-// @flow
 import * as React from "react";
 import ImageZoom from "react-medium-image-zoom";
 import Frame from "./components/Frame";
 
 const IFRAME_REGEX = /^https:\/\/(invis\.io\/.*)|(projects\.invisionapp\.com\/share\/.*)$/;
-
 const IMAGE_REGEX = /^https:\/\/(opal\.invisionapp\.com\/static-signed\/live-embed\/.*)$/;
-
-type Props = {|
-  isSelected: boolean,
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  isSelected: boolean;
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class InVision extends React.Component<Props> {
   static ENABLED = [IFRAME_REGEX, IMAGE_REGEX];
@@ -22,6 +19,7 @@ export default class InVision extends React.Component<Props> {
     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,
@@ -35,9 +33,11 @@ export default class InVision extends React.Component<Props> {
         />
       );
     }
+
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; isSelected: bo... Remove this comment to see the full error message
         src={this.props.attrs.href}
         title="InVision Embed"
       />

shared/embeds/Loom.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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)

shared/embeds/Loom.tsx

@@ -1,22 +1,20 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = /^https:\/\/(www\.)?(use)?loom.com\/(embed|share)\/(.*)$/;
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class Loom extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
 
   render() {
     const normalizedUrl = this.props.attrs.href.replace("share", "embed");
-
+    // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
     return <Frame {...this.props} src={normalizedUrl} title="Loom Embed" />;
   }
 }

shared/embeds/Lucidchart.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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(
@@ -10,6 +10,7 @@ describe("Lucidchart", () => {
       )
     ).toBeTruthy();
   });
+
   test("to be enabled on root link", () => {
     expect(
       "https://lucidchart.com/documents/view/2f4a79cb-7637-433d-8ffb-27cce65a05e7".match(
@@ -17,6 +18,7 @@ describe("Lucidchart", () => {
       )
     ).toBeTruthy();
   });
+
   test("to be enabled on app link", () => {
     expect(
       "https://app.lucidchart.com/documents/view/2f4a79cb-7637-433d-8ffb-27cce65a05e7".match(
@@ -24,6 +26,7 @@ describe("Lucidchart", () => {
       )
     ).toBeTruthy();
   });
+
   test("to be enabled on visited link", () => {
     expect(
       "https://www.lucidchart.com/documents/view/2f4a79cb-7637-433d-8ffb-27cce65a05e7/0".match(
@@ -31,6 +34,7 @@ describe("Lucidchart", () => {
       )
     ).toBeTruthy();
   });
+
   test("to be enabled on embedded link", () => {
     expect(
       "https://app.lucidchart.com/documents/embeddedchart/1af2bdfa-da7d-4ea1-aa1d-bec5677a9837".match(

shared/embeds/Lucidchart.tsx

@@ -1,12 +1,12 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: Object,
-  |},
-|};
+
+type Props = {
+  attrs: {
+    href: string;
+    matches: Record<string, any>;
+  };
+};
 
 export default class Lucidchart extends React.Component<Props> {
   static ENABLED = [
@@ -17,10 +17,10 @@ export default class Lucidchart extends React.Component<Props> {
   render() {
     const { matches } = this.props.attrs;
     const { chartId } = matches.groups;
-
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
         src={`https://lucidchart.com/documents/embeddedchart/${chartId}`}
         title="Lucidchart Embed"
       />

shared/embeds/Marvel.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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();
   });

shared/embeds/Marvel.tsx

@@ -1,15 +1,13 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp("^https://marvelapp.com/([A-Za-z0-9-]{6})/?$");
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class Marvel extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -18,6 +16,7 @@ export default class Marvel extends React.Component<Props> {
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
         src={this.props.attrs.href}
         title="Marvel Embed"
         border

shared/embeds/Mindmeister.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 import Mindmeister from "./Mindmeister";
 
 describe("Mindmeister", () => {

shared/embeds/Mindmeister.tsx

@@ -1,17 +1,15 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp(
   "^https://([w.-]+.)?(mindmeister.com|mm.tt)(/maps/public_map_shell)?/(\\d+)(\\?t=.*)?(/.*)?$"
 );
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class Mindmeister extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -21,10 +19,10 @@ export default class Mindmeister extends React.Component<Props> {
       this.props.attrs.matches[4] +
       (this.props.attrs.matches[5] || "") +
       (this.props.attrs.matches[6] || "");
-
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
         src={`https://www.mindmeister.com/maps/public_map_shell/${chartId}`}
         title="Mindmeister Embed"
         border

shared/embeds/Miro.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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)
@@ -15,6 +15,7 @@ describe("Miro", () => {
 
   test("to extract the domain as part of the match for later use", () => {
     expect(
+      // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
       "https://realtimeboard.com/app/board/o9J_k0fwiss=".match(match)[1]
     ).toBe("realtimeboard");
   });

shared/embeds/Miro.tsx

@@ -1,15 +1,13 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = /^https:\/\/(realtimeboard|miro).com\/app\/board\/(.*)$/;
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class RealtimeBoard extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -19,10 +17,10 @@ export default class RealtimeBoard extends React.Component<Props> {
     const domain = matches[1];
     const boardId = matches[2];
     const titleName = domain === "realtimeboard" ? "RealtimeBoard" : "Miro";
-
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
         src={`https://${domain}.com/app/embed/${boardId}`}
         title={`${titleName} (${boardId})`}
       />

shared/embeds/ModeAnalytics.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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)

shared/embeds/ModeAnalytics.tsx

@@ -1,17 +1,15 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp(
   "^https://([w.-]+.)?modeanalytics.com/(.*)/reports/(.*)$"
 );
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class ModeAnalytics extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -19,10 +17,10 @@ export default class ModeAnalytics extends React.Component<Props> {
   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}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
         src={`${normalizedUrl}/embed`}
         title="Mode Analytics Embed"
       />

shared/embeds/Pitch.tsx

@@ -1,27 +1,25 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 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)/(.*)$"
 );
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: any,
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: any;
+  };
+};
 
 export default class Pitch extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
 
   render() {
     const shareId = this.props.attrs.matches[1];
-
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; height: string... Remove this comment to see the full error message
         src={`https://pitch.com/embed/${shareId}`}
         title="Pitch Embed"
         height="414px"

shared/embeds/Prezi.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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)

shared/embeds/Prezi.tsx

@@ -1,23 +1,21 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp("^https://prezi.com/view/(.*)$");
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class Prezi extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
 
   render() {
     const url = this.props.attrs.href.replace(/\/embed$/, "");
-
     return (
+      // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
       <Frame {...this.props} src={`${url}/embed`} title="Prezi Embed" border />
     );
   }

shared/embeds/Spotify.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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(

shared/embeds/Spotify.tsx

@@ -1,15 +1,14 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp("https?://open.spotify.com/(.*)$");
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
 export default class Spotify extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
 
@@ -24,8 +23,7 @@ export default class Spotify extends React.Component<Props> {
 
   render() {
     const normalizedPath = this.pathname.replace(/^\/embed/, "/");
-
-    var height;
+    let height;
 
     if (normalizedPath.includes("episode") || normalizedPath.includes("show")) {
       height = 232;
@@ -38,6 +36,7 @@ export default class Spotify extends React.Component<Props> {
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ width: string; height: string; src: string... Remove this comment to see the full error message
         width="100%"
         height={`${height}px`}
         src={`https://open.spotify.com/embed${normalizedPath}`}

shared/embeds/Trello.tsx

@@ -1,15 +1,13 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = /^https:\/\/trello.com\/(c|b)\/([^/]*)(.*)?$/;
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class Trello extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -21,6 +19,7 @@ export default class Trello extends React.Component<Props> {
     if (matches[1] === "c") {
       return (
         <Frame
+          // @ts-expect-error ts-migrate(2322) FIXME: Type '{ width: string; height: string; src: string... Remove this comment to see the full error message
           width="316px"
           height="158px"
           src={`https://trello.com/embed/card?id=${objectId}`}
@@ -32,6 +31,7 @@ export default class Trello extends React.Component<Props> {
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ width: string; height: string; src: string... Remove this comment to see the full error message
         width="248px"
         height="185px"
         src={`https://trello.com/embed/board?id=${objectId}`}

shared/embeds/Typeform.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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)

shared/embeds/Typeform.tsx

@@ -1,17 +1,15 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp(
   "^https://([A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?).typeform.com/to/(.*)$"
 );
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class Typeform extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -20,6 +18,7 @@ export default class Typeform extends React.Component<Props> {
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
         src={this.props.attrs.href}
         title="Typeform Embed"
       />

shared/embeds/Vimeo.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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();
   });

shared/embeds/Vimeo.tsx

@@ -1,15 +1,13 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = /(http|https)?:\/\/(www\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|)(\d+)(?:|\/\?)/;
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class Vimeo extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -17,10 +15,10 @@ export default class Vimeo extends React.Component<Props> {
   render() {
     const { matches } = this.props.attrs;
     const videoId = matches[4];
-
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
         src={`https://player.vimeo.com/video/${videoId}?byline=0`}
         title={`Vimeo Embed (${videoId})`}
       />

shared/embeds/YouTube.test.ts

@@ -1,8 +1,8 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 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)

shared/embeds/YouTube.tsx

@@ -1,16 +1,14 @@
-// @flow
 import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = /(?:https?:\/\/)?(?:www\.)?youtu\.?be(?:\.com)?\/?.*(?:watch|embed)?(?:.*v=|v\/|\/)([a-zA-Z0-9_-]{11})$/i;
-
-type Props = {|
-  isSelected: boolean,
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
+type Props = {
+  isSelected: boolean;
+  attrs: {
+    href: string;
+    matches: string[];
+  };
+};
 
 export default class YouTube extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -18,10 +16,10 @@ export default class YouTube extends React.Component<Props> {
   render() {
     const { matches } = this.props.attrs;
     const videoId = matches[1];
-
     return (
       <Frame
         {...this.props}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; isSelected: bo... Remove this comment to see the full error message
         src={`https://www.youtube.com/embed/${videoId}?modestbranding=1`}
         title={`YouTube (${videoId})`}
       />

shared/embeds/components/Frame.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { OpenIcon } from "outline-icons";
@@ -7,32 +6,34 @@ import styled from "styled-components";
 
 // This wrapper allows us to pass non-standard HTML attributes through to the DOM element
 // https://www.styled-components.com/docs/basics#passed-props
+// @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
 const Iframe = (props) => <iframe title="Embed" {...props} />;
 
 const StyledIframe = styled(Iframe)`
   border-radius: ${(props) => (props.$withBar ? "3px 3px 0 0" : "3px")};
   display: block;
 `;
-
 type Props = {
-  src?: string,
-  border?: boolean,
-  title?: string,
-  icon?: React.Node,
-  canonicalUrl?: string,
-  isSelected?: boolean,
-  width?: string,
-  height?: string,
+  src?: string;
+  border?: boolean;
+  title?: string;
+  icon?: React.ReactNode;
+  canonicalUrl?: string;
+  isSelected?: boolean;
+  width?: string;
+  height?: string;
 };
 
 type PropsWithRef = Props & {
-  forwardedRef: React.Ref<typeof StyledIframe>,
+  forwardedRef: React.Ref<typeof StyledIframe>;
 };
 
 @observer
 class Frame extends React.Component<PropsWithRef> {
   mounted: boolean;
-  @observable isLoaded: boolean = false;
+
+  @observable
+  isLoaded = false;
 
   componentDidMount() {
     this.mounted = true;
@@ -72,6 +73,7 @@ class Frame extends React.Component<PropsWithRef> {
       >
         {this.isLoaded && (
           <Component
+            // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
             ref={forwardedRef}
             $withBar={withBar}
             sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
@@ -86,7 +88,7 @@ class Frame extends React.Component<PropsWithRef> {
           />
         )}
         {withBar && (
-          <Bar align="center">
+          <Bar>
             {icon} <Title>{title}</Title>
             {canonicalUrl && (
               <Open
@@ -104,7 +106,11 @@ class Frame extends React.Component<PropsWithRef> {
   }
 }
 
-const Rounded = styled.div`
+const Rounded = styled.div<{
+  width: string;
+  height: string;
+  $withBar: boolean;
+}>`
   border: 1px solid ${(props) => props.theme.embedBorder};
   border-radius: 6px;
   overflow: hidden;
@@ -141,6 +147,7 @@ const Bar = styled.div`
   user-select: none;
 `;
 
-export default React.forwardRef<Props, typeof Frame>((props, ref) => (
+export default React.forwardRef((props, ref) => (
+  // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
   <Frame {...props} forwardedRef={ref} />
 ));

shared/embeds/components/Image.tsx

@@ -1,14 +1,13 @@
-// @flow
 import * as React from "react";
 import { cdnPath } from "../../utils/urls";
 
-type Props = {|
-  alt: string,
-  src: string,
-  title?: string,
-  width?: number,
-  height?: number,
-|};
+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/embeds/index.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import styled from "styled-components";
 import Abstract from "./Abstract";
@@ -35,11 +34,15 @@ import Vimeo from "./Vimeo";
 import YouTube from "./YouTube";
 import Image from "./components/Image";
 
+// @ts-expect-error ts-migrate(7006) FIXME: Parameter 'Component' implicitly has an 'any' type... Remove this comment to see the full error message
 function matcher(Component) {
+  // @ts-expect-error ts-migrate(7030) FIXME: Not all code paths return a value.
   return (url: string) => {
     const regexes = Component.ENABLED;
+
     for (const regex of regexes) {
       const result = url.match(regex);
+
       if (result) {
         return result;
       }
@@ -57,6 +60,7 @@ export default [
   {
     title: "Abstract",
     keywords: "design",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/abstract.png" />,
     component: Abstract,
     matcher: matcher(Abstract),
@@ -64,6 +68,7 @@ export default [
   {
     title: "Airtable",
     keywords: "spreadsheet",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/airtable.png" />,
     component: Airtable,
     matcher: matcher(Airtable),
@@ -72,6 +77,7 @@ export default [
     title: "Bilibili",
     keywords: "video",
     defaultHidden: true,
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/bilibili.png" />,
     component: Bilibili,
     matcher: matcher(Bilibili),
@@ -80,6 +86,7 @@ export default [
     title: "Cawemo",
     keywords: "bpmn process",
     defaultHidden: true,
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/cawemo.png" />,
     component: Cawemo,
     matcher: matcher(Cawemo),
@@ -88,6 +95,7 @@ export default [
     title: "ClickUp",
     keywords: "project",
     defaultHidden: true,
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/clickup.png" />,
     component: ClickUp,
     matcher: matcher(ClickUp),
@@ -95,6 +103,7 @@ export default [
   {
     title: "Codepen",
     keywords: "code editor",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/codepen.png" />,
     component: Codepen,
     matcher: matcher(Codepen),
@@ -102,6 +111,7 @@ export default [
   {
     title: "Descript",
     keywords: "audio",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/descript.png" />,
     component: Descript,
     matcher: matcher(Descript),
@@ -109,6 +119,7 @@ export default [
   {
     title: "Figma",
     keywords: "design svg vector",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/figma.png" />,
     component: Figma,
     matcher: matcher(Figma),
@@ -116,6 +127,7 @@ export default [
   {
     title: "Framer",
     keywords: "design prototyping",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/framer.png" />,
     component: Framer,
     matcher: matcher(Framer),
@@ -123,6 +135,7 @@ export default [
   {
     title: "GitHub Gist",
     keywords: "code",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/github-gist.png" />,
     component: Gist,
     matcher: matcher(Gist),
@@ -130,6 +143,7 @@ export default [
   {
     title: "Diagrams.net",
     keywords: "diagrams drawio",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/diagrams.png" />,
     component: Diagrams,
     matcher: matcher(Diagrams),
@@ -137,6 +151,7 @@ export default [
   {
     title: "Google Drawings",
     keywords: "drawings",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/google-drawings.png" />,
     component: GoogleDrawings,
     matcher: matcher(GoogleDrawings),
@@ -144,12 +159,14 @@ export default [
   {
     title: "Google Drive",
     keywords: "drive",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/google-drive.png" />,
     component: GoogleDrive,
     matcher: matcher(GoogleDrive),
   },
   {
     title: "Google Docs",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/google-docs.png" />,
     component: GoogleDocs,
     matcher: matcher(GoogleDocs),
@@ -157,6 +174,7 @@ export default [
   {
     title: "Google Sheets",
     keywords: "excel spreadsheet",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/google-sheets.png" />,
     component: GoogleSheets,
     matcher: matcher(GoogleSheets),
@@ -164,6 +182,7 @@ export default [
   {
     title: "Google Slides",
     keywords: "presentation slideshow",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/google-slides.png" />,
     component: GoogleSlides,
     matcher: matcher(GoogleSlides),
@@ -171,6 +190,7 @@ export default [
   {
     title: "Google Calendar",
     keywords: "calendar",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/google-calendar.png" />,
     component: GoogleCalendar,
     matcher: matcher(GoogleCalendar),
@@ -178,6 +198,7 @@ export default [
   {
     title: "Google Data Studio",
     keywords: "business intelligence",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/google-datastudio.png" />,
     component: GoogleDataStudio,
     matcher: matcher(GoogleDataStudio),
@@ -186,6 +207,7 @@ export default [
     title: "InVision",
     keywords: "design prototype",
     defaultHidden: true,
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/invision.png" />,
     component: InVision,
     matcher: matcher(InVision),
@@ -193,6 +215,7 @@ export default [
   {
     title: "Loom",
     keywords: "video screencast",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/loom.png" />,
     component: Loom,
     matcher: matcher(Loom),
@@ -200,6 +223,7 @@ export default [
   {
     title: "Lucidchart",
     keywords: "chart",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/lucidchart.png" />,
     component: Lucidchart,
     matcher: matcher(Lucidchart),
@@ -207,6 +231,7 @@ export default [
   {
     title: "Marvel",
     keywords: "design prototype",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/marvel.png" />,
     component: Marvel,
     matcher: matcher(Marvel),
@@ -214,6 +239,7 @@ export default [
   {
     title: "Mindmeister",
     keywords: "mindmap",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/mindmeister.png" />,
     component: Mindmeister,
     matcher: matcher(Mindmeister),
@@ -221,6 +247,7 @@ export default [
   {
     title: "Miro",
     keywords: "whiteboard",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/miro.png" />,
     component: Miro,
     matcher: matcher(Miro),
@@ -229,6 +256,7 @@ export default [
     title: "Mode",
     keywords: "analytics",
     defaultHidden: true,
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/mode-analytics.png" />,
     component: ModeAnalytics,
     matcher: matcher(ModeAnalytics),
@@ -237,6 +265,7 @@ export default [
     title: "Pitch",
     keywords: "presentation",
     defaultHidden: true,
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/pitch.png" />,
     component: Pitch,
     matcher: matcher(Pitch),
@@ -244,6 +273,7 @@ export default [
   {
     title: "Prezi",
     keywords: "presentation",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/prezi.png" />,
     component: Prezi,
     matcher: matcher(Prezi),
@@ -251,6 +281,7 @@ export default [
   {
     title: "Spotify",
     keywords: "music",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/spotify.png" />,
     component: Spotify,
     matcher: matcher(Spotify),
@@ -258,6 +289,7 @@ export default [
   {
     title: "Trello",
     keywords: "kanban",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/trello.png" />,
     component: Trello,
     matcher: matcher(Trello),
@@ -265,6 +297,7 @@ export default [
   {
     title: "Typeform",
     keywords: "form survey",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/typeform.png" />,
     component: Typeform,
     matcher: matcher(Typeform),
@@ -272,6 +305,7 @@ export default [
   {
     title: "Vimeo",
     keywords: "video",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/vimeo.png" />,
     component: Vimeo,
     matcher: matcher(Vimeo),
@@ -279,6 +313,7 @@ export default [
   {
     title: "YouTube",
     keywords: "google video",
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
     icon: () => <Img src="/images/youtube.png" />,
     component: YouTube,
     matcher: matcher(YouTube),