diff --git a/public/images/whimsical.png b/public/images/whimsical.png new file mode 100644 index 000000000..8ec678f3a Binary files /dev/null and b/public/images/whimsical.png differ diff --git a/shared/embeds/Whimsical.tsx b/shared/embeds/Whimsical.tsx new file mode 100644 index 000000000..3e71dc9aa --- /dev/null +++ b/shared/embeds/Whimsical.tsx @@ -0,0 +1,22 @@ +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]+)\/?$/; + +export default class Whimsical extends React.Component { + static ENABLED = [URL_REGEX]; + + render() { + const { matches } = this.props.attrs; + const boardId = matches[1]; + + return ( + + ); + } +} diff --git a/shared/embeds/index.tsx b/shared/embeds/index.tsx index f03836cb1..9ec9a8f39 100644 --- a/shared/embeds/index.tsx +++ b/shared/embeds/index.tsx @@ -32,6 +32,7 @@ import Spotify from "./Spotify"; import Trello from "./Trello"; import Typeform from "./Typeform"; import Vimeo from "./Vimeo"; +import Whimsical from "./Whimsical"; import YouTube from "./YouTube"; import Image from "./components/Image"; @@ -292,6 +293,13 @@ const embeds: EmbedDescriptor[] = [ component: Vimeo, matcher: matcher(Vimeo), }, + { + title: "Whimsical", + keywords: "whiteboard", + icon: () => Whimsical, + component: Whimsical, + matcher: matcher(Whimsical), + }, { title: "YouTube", keywords: "google video",