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

Functional Component Refactor: InVision, Loom, Lucidchart (#4262)

Browse Source
This commit is contained in:
mastqe
2022-10-15 10:01:43 -04:00
committed by GitHub
parent 28371a4942
commit 557ad75fc2
3 changed files with 44 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
shared/editor/embeds/InVision.tsx
View File

@@ -6,34 +6,28 @@ 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\/.*)$/;
export default class InVision extends React.Component<Props> {
static ENABLED = [IFRAME_REGEX, IMAGE_REGEX];
render() {
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,
alt: "InVision Embed",
style: {
maxWidth: "100%",
maxHeight: "75vh",
},
}}
shouldRespectMaxDimension
/>
);
}
function InVision(props: Props) {
if (IMAGE_REGEX.test(props.attrs.href)) {
return (
<Frame
{...this.props}
src={this.props.attrs.href}
title="InVision Embed"
<ImageZoom
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
className={props.isSelected ? "ProseMirror-selectednode" : ""}
image={{
src: props.attrs.href,
alt: "InVision Embed",
style: {
maxWidth: "100%",
maxHeight: "75vh",
},
}}
shouldRespectMaxDimension
/>
);
}
return <Frame {...props} src={props.attrs.href} title="InVision Embed" />;
}
InVision.ENABLED = [IFRAME_REGEX, IMAGE_REGEX];
export default InVision;

16
shared/editor/embeds/Loom.tsx
View File

@@ -2,13 +2,11 @@ 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)\/(.*)$/;
export default class Loom extends React.Component<Props> {
static ENABLED = [URL_REGEX];
render() {
const normalizedUrl = this.props.attrs.href.replace("share", "embed");
return <Frame {...this.props} src={normalizedUrl} title="Loom Embed" />;
}
function Loom(props: Props) {
const normalizedUrl = props.attrs.href.replace("share", "embed");
return <Frame {...props} src={normalizedUrl} title="Loom Embed" />;
}
Loom.ENABLED = [/^https:\/\/(www\.)?(use)?loom\.com\/(embed|share)\/(.*)$/];
export default Loom;

34
shared/editor/embeds/Lucidchart.tsx
View File

@@ -2,22 +2,22 @@ import * as React from "react";
import Frame from "../components/Frame";
import { EmbedProps as Props } from ".";
export default class Lucidchart extends React.Component<Props> {
static ENABLED = [
/^https?:\/\/(www\.|app\.)?(lucidchart\.com|lucid\.app)\/documents\/(embeddedchart|view|edit)\/(?<chartId>[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})(?:.*)?$/,
/^https?:\/\/(www\.|app\.)?(lucid\.app|lucidchart\.com)\/lucidchart\/(?<chartId>[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})\/(embeddedchart|view|edit)(?:.*)?$/,
];
function Lucidchart(props: Props) {
const { matches } = props.attrs;
const chartId = matches.groups?.chartId;
render() {
const { matches } = this.props.attrs;
const chartId = matches.groups?.chartId;
return (
<Frame
{...this.props}
src={`https://lucidchart.com/documents/embeddedchart/${chartId}`}
title="Lucidchart Embed"
/>
);
}
return (
<Frame
{...props}
src={`https://lucidchart.com/documents/embeddedchart/${chartId}`}
title="Lucidchart Embed"
/>
);
}
Lucidchart.ENABLED = [
/^https?:\/\/(www\.|app\.)?(lucidchart\.com|lucid\.app)\/documents\/(embeddedchart|view|edit)\/(?<chartId>[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})(?:.*)?$/,
/^https?:\/\/(www\.|app\.)?(lucid\.app|lucidchart\.com)\/lucidchart\/(?<chartId>[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})\/(embeddedchart|view|edit)(?:.*)?$/,
];
export default Lucidchart;