lint, tsc

.eslintrc

@@ -26,8 +26,18 @@
   "rules": {
     "eqeqeq": 2,
     "no-mixed-operators": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "args": "after-used",
+        "ignoreRestSiblings": true
+      }
+    ],
     "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "export" }],
     "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
+    "import/no-named-as-default": "off",
+    "import/no-named-as-default-member": "off",
     "import/newline-after-import": 2,
     "import/order": [
       "error",

app/components/CollectionDescription.tsx

@@ -84,8 +84,17 @@ function CollectionDescription({ collection }: Props) {
         <span onClick={can.update ? handleStartEditing : undefined}>
           {collections.isSaving && <LoadingIndicator />}
           {collection.hasDescription || isEditing || isDirty ? (
-            // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+            <React.Suspense
-            <React.Suspense fallback={<Placeholder>Loading…</Placeholder>}>
+              fallback={
+                <Placeholder
+                  onClick={() => {
+                    //
+                  }}
+                >
+                  Loading…
+                </Placeholder>
+              }
+            >
               <Editor
                 key={key}
                 defaultValue={collection.description || ""}

app/components/CopyToClipboard.ts

@@ -27,7 +27,7 @@ class CopyToClipboard extends React.PureComponent<Props> {
   };
 
   render() {
-    const { text: _text, onCopy: _onCopy, children, ...rest } = this.props;
+    const { text, onCopy, children, ...rest } = this.props;
     const elem = React.Children.only(children);
     if (!elem) {
       return null;

app/components/LocaleTime.tsx

@@ -40,8 +40,7 @@ function LocaleTime({
   tooltipDelay,
 }: Props) {
   const userLocale = useUserLocale();
-  const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line no-unused-vars
+  const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line @typescript-eslint/no-unused-vars
-
   const callback = React.useRef<() => void>();
 
   React.useEffect(() => {

app/menus/CollectionSortMenu.tsx

@@ -14,7 +14,7 @@ type Props = {
   onClose?: () => void;
 };
 
-function CollectionSortMenu({ collection, onOpen, onClose, ...rest }: Props) {
+function CollectionSortMenu({ collection, onOpen, onClose }: Props) {
   const { t } = useTranslation();
   const menu = useMenuState({
     modal: true,

app/models/Document.ts

@@ -1,7 +1,7 @@
 import { addDays, differenceInDays } from "date-fns";
 import invariant from "invariant";
 import { floor } from "lodash";
-import { action, computed, observable, set } from "mobx";
+import { action, computed, observable } from "mobx";
 import parseTitle from "@shared/utils/parseTitle";
 import unescape from "@shared/utils/unescape";
 import DocumentsStore from "~/stores/DocumentsStore";

app/stores/BaseStore.ts

@@ -1,6 +1,6 @@
 import invariant from "invariant";
 import { orderBy } from "lodash";
-import { observable, set, action, computed, runInAction } from "mobx";
+import { observable, action, computed, runInAction } from "mobx";
 import { Class } from "utility-types";
 import RootStore from "~/stores/RootStore";
 import BaseModel from "~/models/BaseModel";

app/utils/download.ts

@@ -59,27 +59,6 @@ export default function download(
     }
   }
 
-  function d2b(u: string) {
-    if (typeof u !== "string") {
-      throw Error("Attempted to pass non-string to d2b");
-    }
-
-    const p = u.split(/[:;,]/),
-      t = p[1],
-      dec = p[2] === "base64" ? atob : decodeURIComponent,
-      // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-      bin = dec(p.pop()),
-      mx = bin.length,
-      uia = new Uint8Array(mx);
-
-    let i = 0;
-    for (i; i < mx; ++i) uia[i] = bin.charCodeAt(i);
-
-    return new B([uia], {
-      type: t,
-    });
-  }
-
   function saver(url: string, winMode = false) {
     if (typeof url !== "string") {
       throw Error("Attempted to pass non-string url to saver");
@@ -140,7 +119,7 @@ export default function download(
     // Blob but not URL:
     fr = new FileReader();
 
-    fr.onload = function (e) {
+    fr.onload = function () {
       // @ts-expect-error ts-migrate(2554) FIXME: Expected 2 arguments, but got 1.
       saver(this.result);
     };

server/collaboration/persistence.ts

@@ -2,7 +2,7 @@ import { onChangePayload, onLoadDocumentPayload } from "@hocuspocus/server";
 import { debounce } from "lodash";
 import * as Y from "yjs";
 import Logger from "@server/logging/logger";
-import { Document, User } from "@server/models";
+import { Document } from "@server/models";
 import documentUpdater from "../commands/documentUpdater";
 import markdownToYDoc from "./utils/markdownToYDoc";
 

server/commands/documentCreator.ts

@@ -11,7 +11,6 @@ export default async function documentCreator({
   // allows override for import
   updatedAt,
   template,
-  index,
   user,
   editorVersion,
   source,

server/commands/documentImporter.ts

@@ -28,7 +28,7 @@ turndownService
   .use(tables)
   .addRule("breaks", {
     filter: ["br"],
-    replacement: function (content) {
+    replacement: function () {
       return "\n";
     },
   });

server/emails/DocumentNotificationEmail.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { User, Document, Team, Collection } from "@server/models";
+import { User, Team, Collection } from "@server/models";
 import Body from "./components/Body";
 import Button from "./components/Button";
 import EmailTemplate from "./components/EmailLayout";

server/logging/metrics.ts

@@ -39,7 +39,7 @@ class Metrics {
     return ddMetrics.gauge(key, value, [...tags, `instance:${instanceId}`]);
   }
 
-  increment(key: string, tags?: Record<string, string>): void {
+  increment(key: string, _tags?: Record<string, string>): void {
     if (!this.enabled) {
       return;
     }

server/models/Group.ts

@@ -79,7 +79,7 @@ Group.associate = (models) => {
 
 // Cascade deletes to group and collection relations
 // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'group' implicitly has an 'any' type.
-Group.addHook("afterDestroy", async (group, options) => {
+Group.addHook("afterDestroy", async (group) => {
   if (!group.deletedAt) return;
   await GroupUser.destroy({
     where: {

shared/embeds/Abstract.tsx

@@ -1,12 +1,6 @@
 import * as React from "react";
 import Frame from "./components/Frame";
-
+import { EmbedProps as Props } from ".";
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class Abstract extends React.Component<Props> {
   static ENABLED = [
@@ -20,7 +14,6 @@ export default class Abstract 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={`https://app.goabstract.com/embed/${shareId}`}
         title={`Abstract (${shareId})`}
       />

shared/embeds/Airtable.tsx

@@ -1,13 +1,8 @@
 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.*)$");
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class Airtable extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -18,7 +13,6 @@ export default class Airtable 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://airtable.com/embed/${shareId}`}
         title={`Airtable (${shareId})`}
         border

shared/embeds/Bilibili.tsx

@@ -1,13 +1,8 @@
 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;
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class Vimeo extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -18,7 +13,6 @@ export default class Vimeo 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={`https://player.bilibili.com/player.html?bvid=${videoId}&page=1&high_quality=1`}
         title={`Bilibili Embed (${videoId})`}
       />

shared/embeds/Cawemo.tsx

@@ -1,13 +1,8 @@
 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)/(.*)$");
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class Cawemo extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -18,11 +13,9 @@ export default class Cawemo 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://cawemo.com/embed/${shareId}`}
         title={"Cawemo Embed"}
         border
-        allowfullscreen
       />
     );
   }

shared/embeds/ClickUp.tsx

@@ -1,15 +1,10 @@
 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]/(.*)/(.*)$"
 );
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class ClickUp extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -18,7 +13,6 @@ 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.tsx

@@ -1,20 +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)/(.*)$");
-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,12 +1,6 @@
 import * as React from "react";
 import Frame from "./components/Frame";
-
+import { EmbedProps as Props } from ".";
-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+)$")];
@@ -17,7 +11,6 @@ export default class Descript extends React.Component<Props> {
     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.tsx

@@ -1,14 +1,9 @@
 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+)?/;
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class Diagrams extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -33,7 +28,6 @@ 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.tsx

@@ -1,15 +1,10 @@
 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})(?:/.*)?$"
 );
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class Figma extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -18,7 +13,6 @@ 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.tsx

@@ -1,13 +1,8 @@
 import * as React from "react";
 import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
 
 const URL_REGEX = new RegExp("^https://framer.cloud/(.*)$");
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class Framer extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -16,7 +11,6 @@ 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.tsx

@@ -1,15 +1,9 @@
 import * as React from "react";
+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})/(.*)$"
 );
-type Props = {
-  isSelected: boolean;
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 class Gist extends React.Component<Props> {
   static ENABLED = [URL_REGEX];

shared/embeds/GoogleCalendar.tsx

@@ -1,15 +1,10 @@
 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=(.*)$"
 );
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class GoogleCalendar extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -18,7 +13,6 @@ 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.tsx

@@ -1,16 +1,11 @@
 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)?$"
 );
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class GoogleDataStudio extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -19,7 +14,6 @@ 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.tsx

@@ -1,14 +1,9 @@
 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/(.*)$");
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class GoogleDocs extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -17,7 +12,6 @@ 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.tsx

@@ -1,16 +1,11 @@
 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)(.*)$"
 );
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class GoogleDrawings extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -19,7 +14,6 @@ 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.tsx

@@ -1,14 +1,9 @@
 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/(.*)$");
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class GoogleDrive extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -16,7 +11,6 @@ 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.tsx

@@ -1,14 +1,9 @@
 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/(.*)$");
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class GoogleSheets extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -17,7 +12,6 @@ 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.tsx

@@ -1,14 +1,9 @@
 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/(.*)$");
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class GoogleSlides extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -17,7 +12,6 @@ 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.tsx

@@ -1,16 +1,10 @@
 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\/.*)$/;
-type Props = {
-  isSelected: boolean;
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class InVision extends React.Component<Props> {
   static ENABLED = [IFRAME_REGEX, IMAGE_REGEX];
@@ -37,7 +31,6 @@ 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.tsx

@@ -1,20 +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)\/(.*)$/;
-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.tsx

@@ -1,12 +1,6 @@
 import * as React from "react";
 import Frame from "./components/Frame";
-
+import { EmbedProps as Props } from ".";
-type Props = {
-  attrs: {
-    href: string;
-    matches: Record<string, any>;
-  };
-};
 
 export default class Lucidchart extends React.Component<Props> {
   static ENABLED = [
@@ -16,11 +10,11 @@ export default class Lucidchart extends React.Component<Props> {
 
   render() {
     const { matches } = this.props.attrs;
-    const { chartId } = matches.groups;
+    const chartId = matches.groups?.chartId;
+
     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.tsx

@@ -1,13 +1,8 @@
 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})/?$");
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class Marvel extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -16,7 +11,6 @@ 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.tsx

@@ -1,15 +1,10 @@
 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=.*)?(/.*)?$"
 );
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class Mindmeister extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -22,7 +17,6 @@ export default class Mindmeister 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.mindmeister.com/maps/public_map_shell/${chartId}`}
         title="Mindmeister Embed"
         border

shared/embeds/Miro.tsx

@@ -1,13 +1,8 @@
 import * as React from "react";
 import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
 
 const URL_REGEX = /^https:\/\/(realtimeboard|miro).com\/app\/board\/(.*)$/;
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class RealtimeBoard extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -17,10 +12,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.tsx

@@ -1,15 +1,10 @@
 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/(.*)$"
 );
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class ModeAnalytics extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -20,7 +15,6 @@ export default class ModeAnalytics 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={`${normalizedUrl}/embed`}
         title="Mode Analytics Embed"
       />

shared/embeds/Pitch.tsx

@@ -1,15 +1,10 @@
 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)/(.*)$"
 );
-type Props = {
-  attrs: {
-    href: string;
-    matches: any;
-  };
-};
 
 export default class Pitch extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -19,7 +14,6 @@ export default class Pitch extends React.Component<Props> {
     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.tsx

@@ -1,13 +1,8 @@
 import * as React from "react";
 import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
 
 const URL_REGEX = new RegExp("^https://prezi.com/view/(.*)$");
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class Prezi extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -15,7 +10,6 @@ export default class Prezi extends React.Component<Props> {
   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.tsx

@@ -2,12 +2,7 @@ import * as React from "react";
 import Frame from "./components/Frame";
 
 const URL_REGEX = new RegExp("https?://open.spotify.com/(.*)$");
-type Props = {
+import { EmbedProps as Props } from ".";
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class Spotify extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -36,7 +31,6 @@ 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,13 +1,8 @@
 import * as React from "react";
 import Frame from "./components/Frame";
+import { EmbedProps as Props } from ".";
 
 const URL_REGEX = /^https:\/\/trello.com\/(c|b)\/([^/]*)(.*)?$/;
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class Trello extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -19,7 +14,6 @@ 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}`}
@@ -31,7 +25,6 @@ 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.tsx

@@ -1,15 +1,10 @@
 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/(.*)$"
 );
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class Typeform extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -18,7 +13,6 @@ 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.tsx

@@ -1,13 +1,8 @@
 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+)(?:|\/\?)/;
-type Props = {
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class Vimeo extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -18,7 +13,6 @@ export default class Vimeo 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={`https://player.vimeo.com/video/${videoId}?byline=0`}
         title={`Vimeo Embed (${videoId})`}
       />

shared/embeds/YouTube.tsx

@@ -1,14 +1,8 @@
 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;
-type Props = {
-  isSelected: boolean;
-  attrs: {
-    href: string;
-    matches: string[];
-  };
-};
 
 export default class YouTube extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
@@ -19,7 +13,6 @@ export default class YouTube 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={`https://www.youtube.com/embed/${videoId}?modestbranding=1`}
         title={`YouTube (${videoId})`}
       />

shared/embeds/components/Frame.tsx

@@ -13,7 +13,7 @@ const StyledIframe = styled(Iframe)`
   border-radius: ${(props) => (props.$withBar ? "3px 3px 0 0" : "3px")};
   display: block;
 `;
-type Props = {
+type Props = React.HTMLAttributes<HTMLIFrameElement> & {
   src?: string;
   border?: boolean;
   title?: string;
@@ -22,6 +22,7 @@ type Props = {
   isSelected?: boolean;
   width?: string;
   height?: string;
+  allow?: string;
 };
 
 type PropsWithRef = Props & {
@@ -147,7 +148,7 @@ const Bar = styled.div`
   user-select: none;
 `;
 
-export default React.forwardRef((props, ref) => (
+export default React.forwardRef<Frame, Props>((props, ref) => (
   // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
   <Frame {...props} forwardedRef={ref} />
 ));

shared/embeds/index.tsx

@@ -34,10 +34,17 @@ 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
+export type EmbedProps = {
-function matcher(Component) {
+  isSelected: boolean;
-  // @ts-expect-error ts-migrate(7030) FIXME: Not all code paths return a value.
+  attrs: {
+    href: string;
+    matches: RegExpMatchArray;
+  };
+};
+
+function matcher(Component: React.ComponentType<EmbedProps>) {
   return (url: string) => {
+    // @ts-expect-error not aware of static
     const regexes = Component.ENABLED;
 
     for (const regex of regexes) {
@@ -47,6 +54,8 @@ function matcher(Component) {
         return result;
       }
     }
+
+    return undefined;
   };
 }
 
@@ -60,16 +69,15 @@ export default [
   {
     title: "Abstract",
     keywords: "design",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    defaultHidden: true,
-    icon: () => <Img src="/images/abstract.png" />,
+    icon: () => <Img src="/images/abstract.png" alt="Abstract" />,
     component: Abstract,
     matcher: matcher(Abstract),
   },
   {
     title: "Airtable",
     keywords: "spreadsheet",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/airtable.png" alt="Airtable" />,
-    icon: () => <Img src="/images/airtable.png" />,
     component: Airtable,
     matcher: matcher(Airtable),
   },
@@ -77,8 +85,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" alt="Bilibili" />,
-    icon: () => <Img src="/images/bilibili.png" />,
     component: Bilibili,
     matcher: matcher(Bilibili),
   },
@@ -86,120 +93,106 @@ 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" alt="Cawemo" />,
-    icon: () => <Img src="/images/cawemo.png" />,
     component: Cawemo,
     matcher: matcher(Cawemo),
   },
   {
     title: "ClickUp",
     keywords: "project",
-    defaultHidden: true,
+    icon: () => <Img src="/images/clickup.png" alt="ClickUp" />,
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-    icon: () => <Img src="/images/clickup.png" />,
     component: ClickUp,
     matcher: matcher(ClickUp),
   },
   {
     title: "Codepen",
     keywords: "code editor",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/codepen.png" alt="Codepen" />,
-    icon: () => <Img src="/images/codepen.png" />,
     component: Codepen,
     matcher: matcher(Codepen),
   },
   {
     title: "Descript",
     keywords: "audio",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/descript.png" alt="Descript" />,
-    icon: () => <Img src="/images/descript.png" />,
     component: Descript,
     matcher: matcher(Descript),
   },
   {
     title: "Figma",
     keywords: "design svg vector",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/figma.png" alt="Figma" />,
-    icon: () => <Img src="/images/figma.png" />,
     component: Figma,
     matcher: matcher(Figma),
   },
   {
     title: "Framer",
     keywords: "design prototyping",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/framer.png" alt="Framer" />,
-    icon: () => <Img src="/images/framer.png" />,
     component: Framer,
     matcher: matcher(Framer),
   },
   {
     title: "GitHub Gist",
     keywords: "code",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/github-gist.png" alt="GitHub" />,
-    icon: () => <Img src="/images/github-gist.png" />,
     component: Gist,
     matcher: matcher(Gist),
   },
   {
     title: "Diagrams.net",
     keywords: "diagrams drawio",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/diagrams.png" alt="Diagrams.net" />,
-    icon: () => <Img src="/images/diagrams.png" />,
     component: Diagrams,
     matcher: matcher(Diagrams),
   },
   {
     title: "Google Drawings",
     keywords: "drawings",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/google-drawings.png" alt="Google Drawings" />,
-    icon: () => <Img src="/images/google-drawings.png" />,
     component: GoogleDrawings,
     matcher: matcher(GoogleDrawings),
   },
   {
     title: "Google Drive",
     keywords: "drive",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/google-drive.png" alt="Google Drive" />,
-    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" alt="Google Docs" />,
-    icon: () => <Img src="/images/google-docs.png" />,
     component: GoogleDocs,
     matcher: matcher(GoogleDocs),
   },
   {
     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" alt="Google Sheets" />,
-    icon: () => <Img src="/images/google-sheets.png" />,
     component: GoogleSheets,
     matcher: matcher(GoogleSheets),
   },
   {
     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" alt="Google Slides" />,
-    icon: () => <Img src="/images/google-slides.png" />,
     component: GoogleSlides,
     matcher: matcher(GoogleSlides),
   },
   {
     title: "Google Calendar",
     keywords: "calendar",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/google-calendar.png" alt="Google Calendar" />,
-    icon: () => <Img src="/images/google-calendar.png" />,
     component: GoogleCalendar,
     matcher: matcher(GoogleCalendar),
   },
   {
     title: "Google Data Studio",
-    keywords: "business intelligence",
+    keywords: "bi business intelligence",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => (
-    icon: () => <Img src="/images/google-datastudio.png" />,
+      <Img src="/images/google-datastudio.png" alt="Google Data Studio" />
+    ),
     component: GoogleDataStudio,
     matcher: matcher(GoogleDataStudio),
   },
@@ -207,48 +200,42 @@ 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" alt="InVision" />,
-    icon: () => <Img src="/images/invision.png" />,
     component: InVision,
     matcher: matcher(InVision),
   },
   {
     title: "Loom",
     keywords: "video screencast",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/loom.png" alt="Loom" />,
-    icon: () => <Img src="/images/loom.png" />,
     component: Loom,
     matcher: matcher(Loom),
   },
   {
     title: "Lucidchart",
     keywords: "chart",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/lucidchart.png" alt="Lucidchart" />,
-    icon: () => <Img src="/images/lucidchart.png" />,
     component: Lucidchart,
     matcher: matcher(Lucidchart),
   },
   {
     title: "Marvel",
     keywords: "design prototype",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/marvel.png" alt="Marvel" />,
-    icon: () => <Img src="/images/marvel.png" />,
     component: Marvel,
     matcher: matcher(Marvel),
   },
   {
     title: "Mindmeister",
     keywords: "mindmap",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/mindmeister.png" alt="Mindmeister" />,
-    icon: () => <Img src="/images/mindmeister.png" />,
     component: Mindmeister,
     matcher: matcher(Mindmeister),
   },
   {
     title: "Miro",
     keywords: "whiteboard",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/miro.png" alt="Miro" />,
-    icon: () => <Img src="/images/miro.png" />,
     component: Miro,
     matcher: matcher(Miro),
   },
@@ -256,8 +243,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" alt="Mode" />,
-    icon: () => <Img src="/images/mode-analytics.png" />,
     component: ModeAnalytics,
     matcher: matcher(ModeAnalytics),
   },
@@ -265,56 +251,49 @@ 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" alt="Pitch" />,
-    icon: () => <Img src="/images/pitch.png" />,
     component: Pitch,
     matcher: matcher(Pitch),
   },
   {
     title: "Prezi",
     keywords: "presentation",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/prezi.png" alt="Prezi" />,
-    icon: () => <Img src="/images/prezi.png" />,
     component: Prezi,
     matcher: matcher(Prezi),
   },
   {
     title: "Spotify",
     keywords: "music",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/spotify.png" alt="Spotify" />,
-    icon: () => <Img src="/images/spotify.png" />,
     component: Spotify,
     matcher: matcher(Spotify),
   },
   {
     title: "Trello",
     keywords: "kanban",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/trello.png" alt="Trello" />,
-    icon: () => <Img src="/images/trello.png" />,
     component: Trello,
     matcher: matcher(Trello),
   },
   {
     title: "Typeform",
     keywords: "form survey",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/typeform.png" alt="Typeform" />,
-    icon: () => <Img src="/images/typeform.png" />,
     component: Typeform,
     matcher: matcher(Typeform),
   },
   {
     title: "Vimeo",
     keywords: "video",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/vimeo.png" alt="Vimeo" />,
-    icon: () => <Img src="/images/vimeo.png" />,
     component: Vimeo,
     matcher: matcher(Vimeo),
   },
   {
     title: "YouTube",
     keywords: "google video",
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+    icon: () => <Img src="/images/youtube.png" alt="YouTube" />,
-    icon: () => <Img src="/images/youtube.png" />,
     component: YouTube,
     matcher: matcher(YouTube),
   },