refactor(editor): use selected signal in block component (#9849)

blocksuite/affine/block-bookmark/src/bookmark-block.ts

@@ -4,7 +4,6 @@ import {
 } from '@blocksuite/affine-components/caption';
 import type { BookmarkBlockModel } from '@blocksuite/affine-model';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
-import { BlockSelection } from '@blocksuite/block-std';
 import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -70,13 +69,16 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
   }
 
   override renderBlock() {
-    const selected = !!this.selected?.is(BlockSelection);
+    const selected = this.selected$.value;
+    const isInEdgeless =
+      this.std.get(DocModeProvider).getEditorMode() === 'edgeless';
+
     return html`
       <div
         draggable="${this.blockDraggable ? 'true' : 'false'}"
         class=${classMap({
           'affine-bookmark-container': true,
-          'selected-style': selected,
+          'selected-style': selected && !isInEdgeless,
         })}
         style=${this.containerStyleMap}
       >

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

@@ -2,15 +2,11 @@ import { getEmbedCardIcons } from '@blocksuite/affine-block-embed';
 import { WebIcon16 } from '@blocksuite/affine-components/icons';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { getHostName } from '@blocksuite/affine-shared/utils';
-import {
-  BlockSelection,
-  ShadowlessElement,
-  SurfaceSelection,
-} from '@blocksuite/block-std';
+import { BlockSelection, ShadowlessElement } from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { OpenInNewIcon } from '@blocksuite/icons/lit';
 import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
 import type { BookmarkBlockComponent } from '../bookmark-block.js';
@@ -55,14 +51,6 @@ export class BookmarkCard extends WithDisposable(ShadowlessElement) {
         .get(ThemeProvider)
         .theme$.subscribe(() => this.requestUpdate())
     );
-
-    this.disposables.add(
-      this.bookmark.selection.slots.changed.on(() => {
-        this._isSelected =
-          !!this.bookmark.selected?.is(BlockSelection) ||
-          !!this.bookmark.selected?.is(SurfaceSelection);
-      })
-    );
   }
 
   override render() {
@@ -72,7 +60,7 @@ export class BookmarkCard extends WithDisposable(ShadowlessElement) {
       loading: this.loading,
       error: this.error,
       [style]: true,
-      selected: this._isSelected,
+      selected: this.bookmark.selected$.value,
     });
 
     const domainName = url.match(
@@ -148,9 +136,6 @@ export class BookmarkCard extends WithDisposable(ShadowlessElement) {
     `;
   }
 
-  @state()
-  private accessor _isSelected = false;
-
   @property({ attribute: false })
   accessor bookmark!: BookmarkBlockComponent;