From 0883a5631113acacc27b2cd37f8d38c1094ee98e Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sat, 16 Apr 2022 15:04:49 -0700 Subject: [PATCH] feat: Additional embed integrations (#3398) * feat: Gliffy integration * feat: JSFiddle integration * feat: Otter.ai integration * Optimised images with calibre/image-actions Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- app/typings/styled-components.d.ts | 1 + public/images/gliffy.png | Bin 0 -> 3663 bytes public/images/jsfiddle.png | Bin 0 -> 2628 bytes public/images/otter.png | Bin 0 -> 1863 bytes shared/editor/embeds/Gliffy.tsx | 13 +++++++++++++ shared/editor/embeds/JSFiddle.tsx | 25 +++++++++++++++++++++++++ shared/editor/embeds/Otter.tsx | 19 +++++++++++++++++++ shared/editor/embeds/index.tsx | 26 ++++++++++++++++++++++++++ shared/styles/theme.ts | 2 ++ 9 files changed, 86 insertions(+) create mode 100644 public/images/gliffy.png create mode 100644 public/images/jsfiddle.png create mode 100644 public/images/otter.png create mode 100644 shared/editor/embeds/Gliffy.tsx create mode 100644 shared/editor/embeds/JSFiddle.tsx create mode 100644 shared/editor/embeds/Otter.tsx diff --git a/app/typings/styled-components.d.ts b/app/typings/styled-components.d.ts index 0450ab042..c8e571d58 100644 --- a/app/typings/styled-components.d.ts +++ b/app/typings/styled-components.d.ts @@ -4,6 +4,7 @@ import "styled-components"; // and extend them! declare module "styled-components" { interface EditorTheme { + isDark: boolean; background: string; text: string; cursor: string; diff --git a/public/images/gliffy.png b/public/images/gliffy.png new file mode 100644 index 0000000000000000000000000000000000000000..e0a9e0390217294e9fc96e92ea79cd49b5ffb855 GIT binary patch literal 3663 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≪*(`OrAz)S+I@{ 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 aZKKR`4BYEsUBftUUV$ZZCr2GRg_Ikkp literal 0 HcmV?d00001 diff --git a/shared/editor/embeds/Gliffy.tsx b/shared/editor/embeds/Gliffy.tsx new file mode 100644 index 000000000..e0330ffe5 --- /dev/null +++ b/shared/editor/embeds/Gliffy.tsx @@ -0,0 +1,13 @@ +import * as React from "react"; +import Frame from "../components/Frame"; +import { EmbedProps as Props } from "."; + +function Gliffy(props: Props) { + return ( + + ); +} + +Gliffy.ENABLED = [new RegExp("https?://go.gliffy.com/go/share/(.*)$")]; + +export default Gliffy; diff --git a/shared/editor/embeds/JSFiddle.tsx b/shared/editor/embeds/JSFiddle.tsx new file mode 100644 index 000000000..49249ef7c --- /dev/null +++ b/shared/editor/embeds/JSFiddle.tsx @@ -0,0 +1,25 @@ +import * as React from "react"; +import { useTheme } from "styled-components"; +import Frame from "../components/Frame"; +import { EmbedProps as Props } from "."; + +function JSFiddle(props: Props) { + const normalizedUrl = props.attrs.href.replace(/(\/embedded)?\/$/, ""); + const theme = useTheme(); + + return ( + + ); +} + +JSFiddle.ENABLED = [new RegExp("https?://jsfiddle.net/(.*)/(.*)$")]; + +export default JSFiddle; diff --git a/shared/editor/embeds/Otter.tsx b/shared/editor/embeds/Otter.tsx new file mode 100644 index 000000000..51055e60c --- /dev/null +++ b/shared/editor/embeds/Otter.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import Frame from "../components/Frame"; +import { EmbedProps as Props } from "."; + +function Otter(props: Props) { + return ( + + ); +} + +Otter.ENABLED = [new RegExp("https?://otter.ai/[su]/(.*)$")]; + +export default Otter; diff --git a/shared/editor/embeds/index.tsx b/shared/editor/embeds/index.tsx index e6317f105..8c415f970 100644 --- a/shared/editor/embeds/index.tsx +++ b/shared/editor/embeds/index.tsx @@ -15,6 +15,7 @@ import Diagrams from "./Diagrams"; import Figma from "./Figma"; import Framer from "./Framer"; import Gist from "./Gist"; +import Gliffy from "./Gliffy"; import GoogleCalendar from "./GoogleCalendar"; import GoogleDataStudio from "./GoogleDataStudio"; import GoogleDocs from "./GoogleDocs"; @@ -23,12 +24,14 @@ import GoogleDrive from "./GoogleDrive"; import GoogleSheets from "./GoogleSheets"; import GoogleSlides from "./GoogleSlides"; import InVision from "./InVision"; +import JSFiddle from "./JSFiddle"; import Loom from "./Loom"; import Lucidchart from "./Lucidchart"; import Marvel from "./Marvel"; import Mindmeister from "./Mindmeister"; import Miro from "./Miro"; import ModeAnalytics from "./ModeAnalytics"; +import Otter from "./Otter"; import Pitch from "./Pitch"; import Prezi from "./Prezi"; import Spotify from "./Spotify"; @@ -160,6 +163,13 @@ const embeds: EmbedDescriptor[] = [ component: Gist, matcher: matcher(Gist), }, + { + title: "Gliffy", + keywords: "diagram", + icon: () => Gliffy, + component: Gliffy, + matcher: matcher(Gliffy), + }, { title: "Diagrams.net", keywords: "diagrams drawio", @@ -226,6 +236,14 @@ const embeds: EmbedDescriptor[] = [ component: InVision, matcher: matcher(InVision), }, + { + title: "JSFiddle", + keywords: "code", + defaultHidden: true, + icon: () => JSFiddle, + component: JSFiddle, + matcher: matcher(JSFiddle), + }, { title: "Loom", keywords: "video screencast", @@ -269,6 +287,14 @@ const embeds: EmbedDescriptor[] = [ component: ModeAnalytics, matcher: matcher(ModeAnalytics), }, + { + title: "Otter.ai", + keywords: "audio transcription meeting notes", + defaultHidden: true, + icon: () => Otter.ai, + component: Otter, + matcher: matcher(Otter), + }, { title: "Pitch", keywords: "presentation", diff --git a/shared/styles/theme.ts b/shared/styles/theme.ts index 60ab07633..c936dd95a 100644 --- a/shared/styles/theme.ts +++ b/shared/styles/theme.ts @@ -92,6 +92,7 @@ export const base = { export const light = { ...base, + isDark: false, background: colors.white, secondaryBackground: colors.warmGrey, link: colors.primary, @@ -149,6 +150,7 @@ export const light = { export const dark = { ...base, + isDark: true, background: colors.almostBlack, secondaryBackground: colors.black50, link: "#137FFB",