feat(editor): support bookmark block convert to embed iframe block (#10907)

blocksuite/affine/blocks/block-bookmark/src/configs/toolbar.ts

@@ -1,8 +1,10 @@
+import { EmbedIframeService } from '@blocksuite/affine-block-embed';
 import { toast } from '@blocksuite/affine-components/toast';
 import { BookmarkBlockModel } from '@blocksuite/affine-model';
 import {
   ActionPlacement,
   EmbedOptionProvider,
+  FeatureFlagService,
   type ToolbarAction,
   type ToolbarActionGroup,
   type ToolbarModuleConfig,
@@ -102,11 +104,21 @@ export const builtinToolbarConfig = {
             );
             if (!model) return true;
 
+            const url = model.props.url;
+            // check if the url can be embedded as iframe block
+            const featureFlag = ctx.std.get(FeatureFlagService);
+            const embedIframeService = ctx.std.get(EmbedIframeService);
+            const isEmbedIframeEnabled = featureFlag.getFlag(
+              'enable_embed_iframe_block'
+            );
+            const canEmbedAsIframe =
+              isEmbedIframeEnabled && embedIframeService.canEmbed(url);
+
             const options = ctx.std
               .get(EmbedOptionProvider)
-              .getEmbedBlockOptions(model.props.url);
+              .getEmbedBlockOptions(url);
 
-            return options?.viewType !== 'embed';
+            return !canEmbedAsIframe && options?.viewType !== 'embed';
           },
           run(ctx) {
             const model = ctx.getCurrentModelByType(
@@ -118,29 +130,48 @@ export const builtinToolbarConfig = {
             const { caption, url, style } = model.props;
             const { parent } = model;
             const index = parent?.children.indexOf(model);
+            if (!parent) return;
 
-            const options = ctx.std
+            let blockId: string | undefined;
-              .get(EmbedOptionProvider)
-              .getEmbedBlockOptions(url);
 
-            if (!options) return;
+            // first try to embed as iframe block
-
+            const featureFlag = ctx.std.get(FeatureFlagService);
-            const { flavour, styles } = options;
+            const isEmbedIframeEnabled = featureFlag.getFlag(
-
+              'enable_embed_iframe_block'
-            const newStyle = styles.includes(style)
-              ? style
-              : styles.find(s => s !== 'vertical' && s !== 'cube');
-
-            const blockId = ctx.store.addBlock(
-              flavour,
-              {
-                url,
-                caption,
-                style: newStyle,
-              },
-              parent,
-              index
             );
+            const embedIframeService = ctx.std.get(EmbedIframeService);
+            if (isEmbedIframeEnabled && embedIframeService.canEmbed(url)) {
+              blockId = embedIframeService.addEmbedIframeBlock(
+                { url, caption },
+                parent.id,
+                index
+              );
+            } else {
+              const options = ctx.std
+                .get(EmbedOptionProvider)
+                .getEmbedBlockOptions(url);
+
+              if (!options) return;
+
+              const { flavour, styles } = options;
+
+              const newStyle = styles.includes(style)
+                ? style
+                : styles.find(s => s !== 'vertical' && s !== 'cube');
+
+              blockId = ctx.store.addBlock(
+                flavour,
+                {
+                  url,
+                  caption,
+                  style: newStyle,
+                },
+                parent,
+                index
+              );
+            }
+
+            if (!blockId) return;
 
             ctx.store.deleteBlock(model);