diff --git a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-idle-card.ts b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-idle-card.ts index b8df341c44..e80b1f534a 100644 --- a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-idle-card.ts +++ b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-idle-card.ts @@ -19,7 +19,6 @@ export class EmbedIframeIdleCard extends WithDisposable(LitElement) { padding: 12px; gap: 8px; border-radius: 8px; - border: 1px solid var(--affine-border-color); background-color: ${unsafeCSSVarV2('layer/background/secondary')}; .icon { diff --git a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/embed-iframe-block.ts b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/embed-iframe-block.ts index 680c6d7bcf..51b0de70d2 100644 --- a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/embed-iframe-block.ts +++ b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/embed-iframe-block.ts @@ -17,7 +17,12 @@ import { matchModels } from '@blocksuite/affine-shared/utils'; import { BlockSelection } from '@blocksuite/block-std'; import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions'; import { flip, offset, shift } from '@floating-ui/dom'; -import { computed, type ReadonlySignal, signal } from '@preact/signals-core'; +import { + computed, + effect, + type ReadonlySignal, + signal, +} from '@preact/signals-core'; import { html, nothing } from 'lit'; import { query } from 'lit/decorators.js'; import { type ClassInfo, classMap } from 'lit/directives/class-map.js'; @@ -244,7 +249,7 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent { - const selectionManager = this.host.selection; + const { selectionManager } = this; const blockSelection = selectionManager.create(BlockSelection, { blockId: this.blockId, }); @@ -256,11 +261,17 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent { @@ -328,6 +339,23 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent { + if (this.inSurface) { + return; + } + + // when the block is in idle status, use the background style + // otherwise, use the border style + if (this.status$.value === 'idle') { + this.selectedStyle = SelectedStyle.Background; + } else { + this.selectedStyle = SelectedStyle.Border; + } + }) + ); + if (!this.model.props.iframeUrl) { this.doc.withoutTransact(() => { this.refreshData().catch(console.error); @@ -415,6 +443,10 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent