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

@@ -4,6 +4,7 @@ import "styled-components";
 // and extend them!
 declare module "styled-components" {
   interface EditorTheme {
+    isDark: boolean;
     background: string;
     text: string;
     cursor: string;

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 (
+    <Frame {...props} src={props.attrs.href} title="Gliffy Embed" border />
+  );
+}
+
+Gliffy.ENABLED = [new RegExp("https?://go.gliffy.com/go/share/(.*)$")];
+
+export default Gliffy;

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 (
+    <Frame
+      {...props}
+      src={`${normalizedUrl}/embedded/result,js,css,html/${
+        theme.isDark ? "dark/" : ""
+      }`}
+      title="JSFiddle Embed"
+      referrerPolicy="origin"
+      border
+    />
+  );
+}
+
+JSFiddle.ENABLED = [new RegExp("https?://jsfiddle.net/(.*)/(.*)$")];
+
+export default JSFiddle;

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 (
+    <Frame
+      {...props}
+      src={props.attrs.href}
+      title="Otter.ai Embed"
+      referrerPolicy="origin"
+      border
+    />
+  );
+}
+
+Otter.ENABLED = [new RegExp("https?://otter.ai/[su]/(.*)$")];
+
+export default Otter;

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: () => <Img src="/images/gliffy.png" alt="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: () => <Img src="/images/jsfiddle.png" alt="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: () => <Img src="/images/otter.png" alt="Otter.ai" />,
+    component: Otter,
+    matcher: matcher(Otter),
+  },
   {
     title: "Pitch",
     keywords: "presentation",

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",