Functional Component Refactor: TypeForm, Vimeo, Whimsical, YouTube (#4265)

shared/editor/embeds/Typeform.tsx

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

shared/editor/embeds/Vimeo.tsx

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

shared/editor/embeds/Whimsical.tsx

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

shared/editor/embeds/YouTube.tsx

@@ -2,20 +2,20 @@ 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;
+function YouTube(props: Props) {
-
+  const { matches } = props.attrs;
-export default class YouTube extends React.Component<Props> {
+  const videoId = matches[1];
-  static ENABLED = [URL_REGEX];
+  return (
-
+    <Frame
-  render() {
+      {...props}
-    const { matches } = this.props.attrs;
+      src={`https://www.youtube.com/embed/${videoId}?modestbranding=1`}
-    const videoId = matches[1];
+      title={`YouTube (${videoId})`}
-    return (
+    />
-      <Frame
+  );
-        {...this.props}
-        src={`https://www.youtube.com/embed/${videoId}?modestbranding=1`}
-        title={`YouTube (${videoId})`}
-      />
-    );
-  }
 }
+
+YouTube.ENABLED = [
+  /(?:https?:\/\/)?(?:www\.)?youtu\.?be(?:\.com)?\/?.*(?:watch|embed)?(?:.*v=|v\/|\/)([a-zA-Z0-9_-]{11})$/i,
+];
+
+export default YouTube;