diff --git a/public/images/instagram.png b/public/images/instagram.png new file mode 100644 index 000000000..9d8e3119f Binary files /dev/null and b/public/images/instagram.png differ diff --git a/shared/editor/embeds/Instagram.test.ts b/shared/editor/embeds/Instagram.test.ts new file mode 100644 index 000000000..707b48ff7 --- /dev/null +++ b/shared/editor/embeds/Instagram.test.ts @@ -0,0 +1,27 @@ +import Instagram from "./Instagram"; + +describe("Instagram", () => { + const match = Instagram.ENABLED[0]; + + test("to be enabled on post link", () => { + expect( + "https://www.instagram.com/p/CrL74G6Bxgw/?utm_source=ig_web_copy_link".match( + match + ) + ).toBeTruthy(); + }); + + test("to be enabled on reel link", () => { + expect( + "https://www.instagram.com/reel/Cxdyt_fMnwN/?utm_source=ig_web_copy_link".match( + match + ) + ).toBeTruthy(); + }); + + test("to not be enabled elsewhere", () => { + expect("https://www.instagram.com".match(match)).toBe(null); + expect("https://www.instagram.com/reel/".match(match)).toBe(null); + expect("https://www.instagram.com/p/".match(match)).toBe(null); + }); +}); diff --git a/shared/editor/embeds/Instagram.tsx b/shared/editor/embeds/Instagram.tsx new file mode 100644 index 000000000..5c18401bc --- /dev/null +++ b/shared/editor/embeds/Instagram.tsx @@ -0,0 +1,14 @@ +import * as React from "react"; +import Frame from "../components/Frame"; +import { EmbedProps as Props } from "."; + +function Instagram(props: Props) { + const { matches } = props.attrs; + return ; +} + +Instagram.ENABLED = [ + /^https?:\/\/www\.instagram\.com\/(p|reel)\/([\w-]+)(\/?utm_source=\w+)?/, +]; + +export default Instagram; diff --git a/shared/editor/embeds/index.tsx b/shared/editor/embeds/index.tsx index 6353111d0..96bc2d3ce 100644 --- a/shared/editor/embeds/index.tsx +++ b/shared/editor/embeds/index.tsx @@ -32,6 +32,7 @@ import GoogleSheets from "./GoogleSheets"; import GoogleSlides from "./GoogleSlides"; import Grist from "./Grist"; import InVision from "./InVision"; +import Instagram from "./Instagram"; import JSFiddle from "./JSFiddle"; import Linkedin from "./Linkedin"; import Loom from "./Loom"; @@ -285,6 +286,12 @@ const embeds: EmbedDescriptor[] = [ icon: Grist, component: Grist, }), + new EmbedDescriptor({ + title: "Instagram", + keywords: "post", + icon: Instagram, + component: Instagram, + }), new EmbedDescriptor({ title: "InVision", keywords: "design prototype",