generic iframe embed (#1234)

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 {

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

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) {