fix(editor): banner of blookmark not shown in edgeless (#11796)

Close [BS-2651](https://app.graphite.dev/github/pr/toeverything/AFFiNE/11797/chore(editor)-add-feature-flag-to-embed-doc-with-alias)
### What Changes:
- Fixed banner of edgeless embed bookmark is not shown
- Add fallback bookmark creation with embed creation modal when there is not a `QuickSearchProvider` in blocksuite playground
- Add tests for embed blookmark and embed github block in edgeless

blocksuite/affine/blocks/bookmark/src/commands/insert-link-by-quick-search.ts

@@ -16,7 +16,6 @@ export const insertLinkByQuickSearchCommand: Command<
   const { std } = ctx;
   const quickSearchService = std.getOptional(QuickSearchProvider);
   if (!quickSearchService) {
-    next();
     return;
   }
 

blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts

@@ -4,7 +4,11 @@ import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { getHostName } from '@blocksuite/affine-shared/utils';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import { OpenInNewIcon } from '@blocksuite/icons/lit';
-import { BlockSelection, ShadowlessElement } from '@blocksuite/std';
+import {
+  BlockSelection,
+  isGfxBlockComponent,
+  ShadowlessElement,
+} from '@blocksuite/std';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -64,6 +68,7 @@ export class BookmarkCard extends SignalWatcher(
       error: this.error,
       [style]: true,
       selected: this.bookmark.selected$.value,
+      edgeless: isGfxBlockComponent(this.bookmark),
     });
 
     const domainName = url.match(

blocksuite/affine/blocks/bookmark/src/styles.ts

@@ -28,6 +28,7 @@ export const styles = css`
     width: calc(100% - 204px);
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
     align-self: stretch;
     gap: 4px;
     padding: 12px;
@@ -277,7 +278,7 @@ export const styles = css`
     .affine-bookmark-content {
       width: 100%;
     }
-    .affine-bookmark-banner {
+    .affine-bookmark-card:not(.edgeless) .affine-bookmark-banner {
       display: none;
     }
   }

blocksuite/affine/blocks/root/src/edgeless/components/toolbar/link/link-tool-button.ts

@@ -1,4 +1,6 @@
 import { insertLinkByQuickSearchCommand } from '@blocksuite/affine-block-bookmark';
+import { insertEmbedCard } from '@blocksuite/affine-block-embed';
+import { toggleEmbedCardCreateModal } from '@blocksuite/affine-components/embed-card-modal';
 import { LinkIcon } from '@blocksuite/affine-components/icons';
 import { TelemetryProvider } from '@blocksuite/affine-shared/services';
 import { QuickToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
@@ -16,9 +18,30 @@ export class EdgelessLinkToolButton extends QuickToolMixin(LitElement) {
   override type = 'default' as const;
 
   private _onClick() {
-    const [_, { insertedLinkType }] = this.edgeless.std.command.exec(
+    const [success, { insertedLinkType }] = this.edgeless.std.command.exec(
       insertLinkByQuickSearchCommand
     );
+
+    if (!success) {
+      // fallback to create a bookmark block with input modal
+      toggleEmbedCardCreateModal(
+        this.edgeless.host,
+        'Links',
+        'The added link will be displayed as a card view.',
+        {
+          mode: 'edgeless',
+          onSave: url => {
+            insertEmbedCard(this.edgeless.std, {
+              flavour: 'affine:bookmark',
+              targetStyle: 'vertical',
+              props: { url },
+            });
+          },
+        }
+      ).catch(console.error);
+      return;
+    }
+
     insertedLinkType
       ?.then(type => {
         const flavour = type?.flavour;

tests/blocksuite/e2e/bookmark.spec.ts

@@ -6,6 +6,7 @@ import { expect } from '@playwright/test';
 
 import {
   activeNoteInEdgeless,
+  clickView,
   copyByKeyboard,
   dragBlockToPoint,
   enterPlaygroundRoom,
@@ -15,6 +16,7 @@ import {
   initEmptyEdgelessState,
   initEmptyParagraphState,
   pasteByKeyboard,
+  pasteContent,
   pressArrowDown,
   pressArrowRight,
   pressArrowUp,
@@ -357,6 +359,21 @@ test('bookmark can be dragged from note to surface top level block', async ({
   await assertParentBlockFlavour(page, '4', 'affine:surface');
 });
 
+test('bookmark card should show banner in edgeless mode', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+
+  const url = 'https://github.com/toeverything/AFFiNE/pull/11796';
+
+  await page.locator('edgeless-link-tool-button').click();
+  await page.locator('.embed-card-modal-input').fill(url);
+  await pressEnter(page);
+
+  const banner = page.locator('.affine-bookmark-banner');
+  await expect(banner).toBeVisible();
+});
+
 test.describe('embed youtube card', () => {
   test(scoped`create youtube card by slash menu`, async ({ page }) => {
     expectConsoleMessage(page, /Unrecognized feature/, 'warning');
@@ -464,3 +481,22 @@ test.describe('embed figma card', () => {
     expect(ignoreSnapshotId(snapshot2)).toMatchSnapshot('embed-figma.json');
   });
 });
+
+test.describe('embed github card', () => {
+  test('github embed card should show banner in edgeless mode', async ({
+    page,
+  }) => {
+    await enterPlaygroundRoom(page);
+    await initEmptyEdgelessState(page);
+    await switchEditorMode(page);
+    await clickView(page, [0, 0]);
+    const url = 'https://github.com/toeverything/AFFiNE/pull/11796';
+
+    await pasteContent(page, {
+      'text/plain': url,
+    });
+
+    const banner = page.locator('.affine-embed-github-banner');
+    await expect(banner).toBeVisible();
+  });
+});