yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
mastqe
2022-10-15 10:02:12 -04:00
committed by GitHub
parent ca31823228
commit 515e1a0d25
4 changed files with 64 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
shared/editor/embeds/Typeform.tsx
View File

@@ -2,20 +2,14 @@ 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/(.*)$"
);
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"
/>
);
}
function Typeform(props: Props) {
return <Frame {...props} src={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;

44
shared/editor/embeds/Vimeo.tsx
View File

@@ -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> {
static ENABLED = [URL_REGEX];
render() {
const { matches } = this.props.attrs;
const videoId = matches[4];
const hId = matches[5];
return (
<Frame
{...this.props}
src={`https://player.vimeo.com/video/${videoId}?byline=0${
hId ? `&h=${hId}` : ""
}`}
title={`Vimeo Embed (${videoId})`}
height="412px"
border={false}
referrerPolicy="origin"
/>
);
}
return (
<Frame
{...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;

32
shared/editor/embeds/Whimsical.tsx
View File

@@ -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> {
static ENABLED = [URL_REGEX];
render() {
const { matches } = this.props.attrs;
const boardId = matches[1];
return (
<Frame
{...this.props}
src={`https://whimsical.com/embed/${boardId}`}
title="Whimsical"
/>
);
}
return (
<Frame
{...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;

32
shared/editor/embeds/YouTube.tsx
View File

@@ -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;
export default class YouTube extends React.Component<Props> {
static ENABLED = [URL_REGEX];
render() {
const { matches } = this.props.attrs;
const videoId = matches[1];
return (
<Frame
{...this.props}
src={`https://www.youtube.com/embed/${videoId}?modestbranding=1`}
title={`YouTube (${videoId})`}
/>
);
}
function YouTube(props: Props) {
const { matches } = props.attrs;
const videoId = matches[1];
return (
<Frame
{...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;