feat: google sheets embed (#615)

apps/client/src/components/icons/google-sheets-icon.tsx

@@ -0,0 +1,23 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function GoogleSheetsIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 48 48"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path fill="#43a047" d="M37,45H11c-1.657,0-3-1.343-3-3V6c0-1.657,1.343-3,3-3h19l10,10v29C40,43.657,38.657,45,37,45z"/>
+      <path fill="#c8e6c9" d="M40 13L30 13 30 3z"/>
+      <path fill="#2e7d32" d="M30 13L40 23 40 13z"/>
+      <path
+        fill="#e8f5e9"
+        d="M31,23H17h-2v2v2v2v2v2v2v2h18v-2v-2v-2v-2v-2v-2v-2H31z M17,25h4v2h-4V25z M17,29h4v2h-4V29z M17,33h4v2h-4V33z M31,35h-8v-2h8V35z M31,31h-8v-2h8V31z M31,27h-8v-2h8V27z"
+      />
+    </svg>
+  );
+}

apps/client/src/components/icons/index.ts

@@ -4,6 +4,7 @@ export { TypeformIcon } from "./typeform-icon.tsx";
 export { VimeoIcon } from "./vimeo-icon.tsx";
 export { MiroIcon } from "./miro-icon.tsx";
 export { GoogleDriveIcon } from "./google-drive-icon.tsx";
+export { GoogleSheetsIcon } from "./google-sheets-icon.tsx";
 export { FramerIcon } from "./framer-icon.tsx";
 export { LoomIcon } from "./loom-icon.tsx";
 export { YoutubeIcon } from "./youtube-icon.tsx";

apps/client/src/features/editor/components/embed/providers.ts

@@ -91,6 +91,14 @@ export const embedProviders: IEmbedProvider[] = [
       return `https://drive.google.com/file/d/${match[4]}/preview`;
     }
   },
+  {
+    id: 'gsheets',
+    name: 'Google Sheets',
+    regex: /^((?:https?:)?\/\/)?((?:www|m)\.)?(docs\.google\.com)\/spreadsheets\/d\/e\/([a-zA-Z0-9_-]+)\/.*$/,
+    getEmbedUrl: (match, url: string) => {
+      return url
+    }
+  },
 ];
 
 export function getEmbedProviderById(id: string) {

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -34,6 +34,7 @@ import {
   FigmaIcon,
   FramerIcon,
   GoogleDriveIcon,
+  GoogleSheetsIcon,
   LoomIcon,
   MiroIcon,
   TypeformIcon,
@@ -442,6 +443,15 @@ const CommandGroups: SlashMenuGroupedItemsType = {
         editor.chain().focus().deleteRange(range).setEmbed({ provider: 'gdrive' }).run();
       },
     },
+    {
+      title: "Google Sheets",
+      description: "Embed Google Sheets content",
+      searchTerms: ["google sheets", "gsheets"],
+      icon: GoogleSheetsIcon,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'gsheets' }).run();
+      },
+    },
   ],
 };