From 50b3f9ddd9cafe8641e48f515e7901ac69489324 Mon Sep 17 00:00:00 2001
From: Philip Okugbe <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 9 Jun 2025 22:32:23 +0100
Subject: [PATCH] generic iframe embed (#1234)

---
 .../editor/components/embed/embed-view.tsx     |  9 ++++++++-
 .../editor/components/slash-menu/menu-items.ts | 18 ++++++++++++++++--
 packages/editor-ext/src/lib/embed-provider.ts  |  8 ++++++++
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/features/editor/components/embed/embed-view.tsx b/apps/client/src/features/editor/components/embed/embed-view.tsx
index 77743a07..0eaa820b 100644
--- a/apps/client/src/features/editor/components/embed/embed-view.tsx
+++ b/apps/client/src/features/editor/components/embed/embed-view.tsx
@@ -18,7 +18,10 @@ import { useForm, zodResolver } from "@mantine/form";
 import { notifications } from "@mantine/notifications";
 import { useTranslation } from "react-i18next";
 import i18n from "i18next";
-import { getEmbedProviderById, getEmbedUrlAndProvider } from '@docmost/editor-ext';
+import {
+  getEmbedProviderById,
+  getEmbedUrlAndProvider,
+} from "@docmost/editor-ext";
 
 const schema = z.object({
   url: z
@@ -49,6 +52,10 @@ export default function EmbedView(props: NodeViewProps) {
   async function onSubmit(data: { url: string }) {
     if (provider) {
       const embedProvider = getEmbedProviderById(provider);
+      if (embedProvider.id === "iframe") {
+        updateAttributes({ src: data.url });
+        return;
+      }
       if (embedProvider.regex.test(data.url)) {
         updateAttributes({ src: data.url });
       } else {
diff --git a/apps/client/src/features/editor/components/slash-menu/menu-items.ts b/apps/client/src/features/editor/components/slash-menu/menu-items.ts
index fbc3a8a4..42bed5c1 100644
--- a/apps/client/src/features/editor/components/slash-menu/menu-items.ts
+++ b/apps/client/src/features/editor/components/slash-menu/menu-items.ts
@@ -17,8 +17,8 @@ import {
   IconTable,
   IconTypography,
   IconMenu4,
-  IconCalendar,
-} from "@tabler/icons-react";
+  IconCalendar, IconAppWindow,
+} from '@tabler/icons-react';
 import {
   CommandProps,
   SlashMenuGroupedItemsType,
@@ -357,6 +357,20 @@ const CommandGroups: SlashMenuGroupedItemsType = {
           .run();
       },
     },
+    {
+      title: "Iframe embed",
+      description: "Embed any Iframe",
+      searchTerms: ["iframe"],
+      icon: IconAppWindow,
+      command: ({ editor, range }: CommandProps) => {
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .setEmbed({ provider: "iframe" })
+          .run();
+      },
+    },
     {
       title: "Airtable",
       description: "Embed Airtable",
diff --git a/packages/editor-ext/src/lib/embed-provider.ts b/packages/editor-ext/src/lib/embed-provider.ts
index ab0690d0..7a91ae9f 100644
--- a/packages/editor-ext/src/lib/embed-provider.ts
+++ b/packages/editor-ext/src/lib/embed-provider.ts
@@ -104,6 +104,14 @@ export const embedProviders: IEmbedProvider[] = [
       return url;
     },
   },
+  {
+    id: "iframe",
+    name: "Iframe",
+    regex: /any-iframe/,
+    getEmbedUrl: (match, url) => {
+      return url;
+    },
+  },
 ];
 
 export function getEmbedProviderById(id: string) {