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,7 +130,23 @@ export const builtinToolbarConfig = {
             const { caption, url, style } = model.props;
             const { parent } = model;
             const index = parent?.children.indexOf(model);
+            if (!parent) return;
 
+            let blockId: string | undefined;
+
+            // first try to embed as iframe block
+            const featureFlag = ctx.std.get(FeatureFlagService);
+            const isEmbedIframeEnabled = featureFlag.getFlag(
+              'enable_embed_iframe_block'
+            );
+            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);
@@ -131,7 +159,7 @@ export const builtinToolbarConfig = {
                 ? style
                 : styles.find(s => s !== 'vertical' && s !== 'cube');
 
-            const blockId = ctx.store.addBlock(
+              blockId = ctx.store.addBlock(
                 flavour,
                 {
                   url,
@@ -141,6 +169,9 @@ export const builtinToolbarConfig = {
                 parent,
                 index
               );
+            }
+
+            if (!blockId) return;
 
             ctx.store.deleteBlock(model);