diff --git a/blocksuite/affine/blocks/bookmark/src/commands/insert-link-by-quick-search.ts b/blocksuite/affine/blocks/bookmark/src/commands/insert-link-by-quick-search.ts index 5b18116b1a..1c4ae99113 100644 --- a/blocksuite/affine/blocks/bookmark/src/commands/insert-link-by-quick-search.ts +++ b/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; } diff --git a/blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts b/blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts index bd8be9a7c8..a6121dd272 100644 --- a/blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts +++ b/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( diff --git a/blocksuite/affine/blocks/bookmark/src/styles.ts b/blocksuite/affine/blocks/bookmark/src/styles.ts index 24588e5b14..a7d0580ef0 100644 --- a/blocksuite/affine/blocks/bookmark/src/styles.ts +++ b/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; } } diff --git a/blocksuite/affine/blocks/root/src/edgeless/components/toolbar/link/link-tool-button.ts b/blocksuite/affine/blocks/root/src/edgeless/components/toolbar/link/link-tool-button.ts index 18f37892f6..a3f7c2653d 100644 --- a/blocksuite/affine/blocks/root/src/edgeless/components/toolbar/link/link-tool-button.ts +++ b/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; diff --git a/tests/blocksuite/e2e/bookmark.spec.ts b/tests/blocksuite/e2e/bookmark.spec.ts index 0ba1d4d968..a9e45d8d66 100644 --- a/tests/blocksuite/e2e/bookmark.spec.ts +++ b/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(); + }); +});