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

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

@@ -13,11 +13,7 @@ import {
 } from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { humanFileSize } from '@blocksuite/affine-shared/utils';
-import {
-  BlockSelection,
-  SurfaceSelection,
-  TextSelection,
-} from '@blocksuite/block-std';
+import { BlockSelection, TextSelection } from '@blocksuite/block-std';
 import { Slice } from '@blocksuite/store';
 import { flip, offset } from '@floating-ui/dom';
 import { html, nothing } from 'lit';
@@ -170,26 +166,21 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<
 
     // this is required to prevent iframe from capturing pointer events
     this.disposables.add(
-      this.std.selection.slots.changed.on(() => {
-        this._isSelected =
-          !!this.selected?.is(BlockSelection) ||
-          !!this.selected?.is(SurfaceSelection);
-
-        this._showOverlay =
-          this._isResizing || this._isDragging || !this._isSelected;
+      this.selected$.subscribe(selected => {
+        this._showOverlay = this._isResizing || this._isDragging || !selected;
       })
     );
     // this is required to prevent iframe from capturing pointer events
     this.handleEvent('dragStart', () => {
       this._isDragging = true;
       this._showOverlay =
-        this._isResizing || this._isDragging || !this._isSelected;
+        this._isResizing || this._isDragging || !this.selected$.peek();
     });
 
     this.handleEvent('dragEnd', () => {
       this._isDragging = false;
       this._showOverlay =
-        this._isResizing || this._isDragging || !this._isSelected;
+        this._isResizing || this._isDragging || !this.selected$.peek();
     });
   }
 

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;
 

blocksuite/affine/block-embed/src/common/embed-block-element.ts

@@ -9,7 +9,7 @@ import {
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
-import { BlockSelection, type BlockService } from '@blocksuite/block-std';
+import type { BlockService } from '@blocksuite/block-std';
 import type { GfxCompatibleProps } from '@blocksuite/block-std/gfx';
 import type { BlockModel } from '@blocksuite/store';
 import type { TemplateResult } from 'lit';
@@ -43,6 +43,10 @@ export class EmbedBlockComponent<
   protected embedContainerStyle: StyleInfo = {};
 
   renderEmbed = (content: () => TemplateResult) => {
+    const selected = this.selected$.value;
+    const isInEdgeless =
+      this.std.get(DocModeProvider).getEditorMode() === 'edgeless';
+
     if (
       this._cardStyle === 'horizontal' ||
       this._cardStyle === 'horizontalThin' ||
@@ -50,19 +54,17 @@ export class EmbedBlockComponent<
     ) {
       this.style.display = 'block';
 
-      const mode = this.std.get(DocModeProvider).getEditorMode();
-      if (mode === 'edgeless') {
+      if (isInEdgeless) {
         this.style.minWidth = `${EMBED_CARD_MIN_WIDTH}px`;
       }
     }
 
-    const selected = !!this.selected?.is(BlockSelection);
     return html`
       <div
         draggable="${this.blockDraggable ? 'true' : 'false'}"
         class=${classMap({
           'embed-block-container': true,
-          'selected-style': selected,
+          'selected-style': selected && !isInEdgeless,
         })}
         style=${styleMap({
           height: `${this._cardHeight}px`,

blocksuite/affine/block-embed/src/common/to-edgeless-embed-block.ts

@@ -26,8 +26,6 @@ export function toEdgelessEmbedBlock<
 
     _isResizing = false;
 
-    _isSelected = false;
-
     _showOverlay = false;
 
     override [blockComponentSymbol] = true;
@@ -68,7 +66,7 @@ export function toEdgelessEmbedBlock<
         this.edgelessSlots.elementResizeEnd.on(() => {
           this._isResizing = false;
           this._showOverlay =
-            this._isResizing || this._isDragging || !this._isSelected;
+            this._isResizing || this._isDragging || !this.selected$.peek();
         })
       );
     }

blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-block.ts

@@ -3,7 +3,7 @@ import type {
   EmbedFigmaModel,
   EmbedFigmaStyles,
 } from '@blocksuite/affine-model';
-import { BlockSelection, SurfaceSelection } from '@blocksuite/block-std';
+import { BlockSelection } from '@blocksuite/block-std';
 import { html } from 'lit';
 import { state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -76,26 +76,21 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<
 
     // this is required to prevent iframe from capturing pointer events
     this.disposables.add(
-      this.std.selection.slots.changed.on(() => {
-        this._isSelected =
-          !!this.selected?.is(BlockSelection) ||
-          !!this.selected?.is(SurfaceSelection);
-
-        this._showOverlay =
-          this._isResizing || this._isDragging || !this._isSelected;
+      this.selected$.subscribe(selected => {
+        this._showOverlay = this._isResizing || this._isDragging || !selected;
       })
     );
     // this is required to prevent iframe from capturing pointer events
     this.handleEvent('dragStart', () => {
       this._isDragging = true;
       this._showOverlay =
-        this._isResizing || this._isDragging || !this._isSelected;
+        this._isResizing || this._isDragging || !this.selected$.peek();
     });
 
     this.handleEvent('dragEnd', () => {
       this._isDragging = false;
       this._showOverlay =
-        this._isResizing || this._isDragging || !this._isSelected;
+        this._isResizing || this._isDragging || !this.selected$.peek();
     });
   }
 
@@ -109,7 +104,7 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<
         <div
           class=${classMap({
             'affine-embed-figma-block': true,
-            selected: this._isSelected,
+            selected: this.selected$.value,
           })}
           style=${styleMap({
             transform: `scale(${this._scale})`,
@@ -160,9 +155,6 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<
     );
   }
 
-  @state()
-  protected accessor _isSelected = false;
-
   @state()
   protected accessor _showOverlay = true;
 }

blocksuite/affine/block-embed/src/embed-github-block/embed-github-block.ts

@@ -4,9 +4,9 @@ import type {
   EmbedGithubStyles,
 } from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
-import { BlockSelection, SurfaceSelection } from '@blocksuite/block-std';
+import { BlockSelection } from '@blocksuite/block-std';
 import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -108,14 +108,6 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
         }
       })
     );
-
-    this.disposables.add(
-      this.selection.slots.changed.on(() => {
-        this._isSelected =
-          !!this.selected?.is(BlockSelection) ||
-          !!this.selected?.is(SurfaceSelection);
-      })
-    );
   }
 
   override renderBlock() {
@@ -170,7 +162,7 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
             'affine-embed-github-block': true,
             loading,
             [style]: true,
-            selected: this._isSelected,
+            selected: this.selected$.value,
           })}
           style=${styleMap({
             transform: `scale(${this._scale})`,
@@ -269,9 +261,6 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
     );
   }
 
-  @state()
-  private accessor _isSelected = false;
-
   @property({ attribute: false })
   accessor loading = false;
 }

blocksuite/affine/block-embed/src/embed-html-block/embed-html-block.ts

@@ -1,5 +1,5 @@
 import type { EmbedHtmlModel, EmbedHtmlStyles } from '@blocksuite/affine-model';
-import { BlockSelection, SurfaceSelection } from '@blocksuite/block-std';
+import { BlockSelection } from '@blocksuite/block-std';
 import { html } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -53,26 +53,21 @@ export class EmbedHtmlBlockComponent extends EmbedBlockComponent<EmbedHtmlModel>
 
     // this is required to prevent iframe from capturing pointer events
     this.disposables.add(
-      this.std.selection.slots.changed.on(() => {
-        this._isSelected =
-          !!this.selected?.is(BlockSelection) ||
-          !!this.selected?.is(SurfaceSelection);
-
-        this._showOverlay =
-          this._isResizing || this._isDragging || !this._isSelected;
+      this.selected$.subscribe(selected => {
+        this._showOverlay = this._isResizing || this._isDragging || !selected;
       })
     );
     // this is required to prevent iframe from capturing pointer events
     this.handleEvent('dragStart', () => {
       this._isDragging = true;
       this._showOverlay =
-        this._isResizing || this._isDragging || !this._isSelected;
+        this._isResizing || this._isDragging || !this.selected$.peek();
     });
 
     this.handleEvent('dragEnd', () => {
       this._isDragging = false;
       this._showOverlay =
-        this._isResizing || this._isDragging || !this._isSelected;
+        this._isResizing || this._isDragging || !this.selected$.peek();
     });
   }
 
@@ -96,7 +91,7 @@ export class EmbedHtmlBlockComponent extends EmbedBlockComponent<EmbedHtmlModel>
         <div
           class=${classMap({
             'affine-embed-html-block': true,
-            selected: this._isSelected,
+            selected: this.selected$.value,
           })}
           style=${styleMap(this.embedHtmlStyle)}
           @click=${this._handleClick}
@@ -136,9 +131,6 @@ export class EmbedHtmlBlockComponent extends EmbedBlockComponent<EmbedHtmlModel>
     });
   }
 
-  @state()
-  protected accessor _isSelected = false;
-
   @state()
   protected accessor _showOverlay = true;
 

blocksuite/affine/block-embed/src/embed-loom-block/embed-loom-block.ts

@@ -1,7 +1,7 @@
 import { OpenIcon } from '@blocksuite/affine-components/icons';
 import type { EmbedLoomModel, EmbedLoomStyles } from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
-import { BlockSelection, SurfaceSelection } from '@blocksuite/block-std';
+import { BlockSelection } from '@blocksuite/block-std';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -92,26 +92,21 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent<
 
     // this is required to prevent iframe from capturing pointer events
     this.disposables.add(
-      this.std.selection.slots.changed.on(() => {
-        this._isSelected =
-          !!this.selected?.is(BlockSelection) ||
-          !!this.selected?.is(SurfaceSelection);
-
-        this._showOverlay =
-          this._isResizing || this._isDragging || !this._isSelected;
+      this.selected$.subscribe(selected => {
+        this._showOverlay = this._isResizing || this._isDragging || !selected;
       })
     );
     // this is required to prevent iframe from capturing pointer events
     this.handleEvent('dragStart', () => {
       this._isDragging = true;
       this._showOverlay =
-        this._isResizing || this._isDragging || !this._isSelected;
+        this._isResizing || this._isDragging || !this.selected$.peek();
     });
 
     this.handleEvent('dragEnd', () => {
       this._isDragging = false;
       this._showOverlay =
-        this._isResizing || this._isDragging || !this._isSelected;
+        this._isResizing || this._isDragging || !this.selected$.peek();
     });
   }
 
@@ -137,7 +132,7 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent<
           class=${classMap({
             'affine-embed-loom-block': true,
             loading,
-            selected: this._isSelected,
+            selected: this.selected$.value,
           })}
           style=${styleMap({
             transform: `scale(${this._scale})`,
@@ -193,9 +188,6 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent<
     );
   }
 
-  @state()
-  protected accessor _isSelected = false;
-
   @state()
   protected accessor _showOverlay = true;
 

blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-edgeless-synced-doc-block.ts

@@ -8,7 +8,7 @@ import {
   ThemeExtensionIdentifier,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
-import { BlockSelection, BlockStdScope } from '@blocksuite/block-std';
+import { BlockStdScope } from '@blocksuite/block-std';
 import { Bound } from '@blocksuite/global/utils';
 import { html, nothing } from 'lit';
 import { choose } from 'lit/directives/choose.js';
@@ -55,7 +55,6 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
     }
     const theme = this.isPageMode ? appTheme : edgelessTheme;
 
-    const isSelected = !!this.selected?.is(BlockSelection);
     const scale = this.model.scale ?? 1;
 
     this.dataset.nestedEditor = '';
@@ -94,8 +93,8 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
             'affine-embed-synced-doc-container': true,
             [editorMode]: true,
             [theme]: true,
-            selected: isSelected,
             surface: true,
+            selected: this.selected$.value,
           })}
           @click=${this._handleClick}
           style=${containerStyleMap}

blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts

@@ -180,7 +180,6 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
       edgelessTheme = themeExtension.getEdgelessTheme(this.syncedDoc.id).value;
     }
     const theme = isPageMode ? appTheme : edgelessTheme;
-    const isSelected = !!this.selected?.is(BlockSelection);
 
     this.dataset.nestedEditor = '';
 
@@ -218,8 +217,8 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
             'affine-embed-synced-doc-container': true,
             [editorMode]: true,
             [theme]: true,
-            selected: isSelected,
             surface: false,
+            selected: this.selected$.value,
           })}
           @click=${this._handleClick}
           style=${containerStyleMap}
@@ -239,7 +238,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
           <div
             class=${classMap({
               'affine-embed-synced-doc-header-wrapper': true,
-              selected: isSelected,
+              selected: this.selected$.value,
             })}
           >
             <div class="affine-embed-synced-doc-header">

blocksuite/affine/block-embed/src/embed-youtube-block/embed-youtube-block.ts

@@ -4,7 +4,7 @@ import type {
   EmbedYoutubeStyles,
 } from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
-import { BlockSelection, SurfaceSelection } from '@blocksuite/block-std';
+import { BlockSelection } from '@blocksuite/block-std';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -95,26 +95,21 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
 
     // this is required to prevent iframe from capturing pointer events
     this.disposables.add(
-      this.std.selection.slots.changed.on(() => {
-        this._isSelected =
-          !!this.selected?.is(BlockSelection) ||
-          !!this.selected?.is(SurfaceSelection);
-
-        this._showOverlay =
-          this._isResizing || this._isDragging || !this._isSelected;
+      this.selected$.subscribe(selected => {
+        this._showOverlay = this._isResizing || this._isDragging || !selected;
       })
     );
     // this is required to prevent iframe from capturing pointer events
     this.handleEvent('dragStart', () => {
       this._isDragging = true;
       this._showOverlay =
-        this._isResizing || this._isDragging || !this._isSelected;
+        this._isResizing || this._isDragging || !this.selected$.peek();
     });
 
     this.handleEvent('dragEnd', () => {
       this._isDragging = false;
       this._showOverlay =
-        this._isResizing || this._isDragging || !this._isSelected;
+        this._isResizing || this._isDragging || !this.selected$.peek();
     });
 
     matchMedia('print').addEventListener('change', () => {
@@ -160,7 +155,7 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
           class=${classMap({
             'affine-embed-youtube-block': true,
             loading,
-            selected: this._isSelected,
+            selected: this.selected$.value,
           })}
           style=${styleMap({
             transform: `scale(${this._scale})`,
@@ -238,9 +233,6 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
     );
   }
 
-  @state()
-  protected accessor _isSelected = false;
-
   @state()
   private accessor _showImage = false;
 

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

@@ -18,7 +18,7 @@ import {
 import type { BlockComponent } from '@blocksuite/block-std';
 import { getInlineRangeProvider, TextSelection } from '@blocksuite/block-std';
 import type { InlineRangeProvider } from '@blocksuite/inline';
-import { effect, signal } from '@preact/signals-core';
+import { computed, effect, signal } from '@preact/signals-core';
 import { html, nothing, type TemplateResult } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -34,6 +34,14 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
 > {
   static override styles = paragraphBlockStyles;
 
+  focused$ = computed(() => {
+    const selection = this.std.selection.value.find(
+      selection => selection.blockId === this.model?.id
+    );
+    if (!selection) return false;
+    return selection.is(TextSelection);
+  });
+
   private readonly _composing = signal(false);
 
   private readonly _displayPlaceholder = signal(false);
@@ -121,7 +129,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
         }
         const textSelection = this.host.selection.find(TextSelection);
         const isCollapsed = textSelection?.isCollapsed() ?? false;
-        if (!this.selected || !isCollapsed) {
+        if (!this.focused$.value || !isCollapsed) {
           this._displayPlaceholder.value = false;
           return;
         }

blocksuite/affine/block-table/src/selection-controller.ts

@@ -266,11 +266,9 @@ export class SelectionController implements ReactiveController {
   }
   selected$ = computed(() => this.getSelected());
   getSelected(): TableSelectionData | undefined {
-    const selected = this.host.selected;
-
-    if (selected instanceof TableSelection) {
-      return selected.data;
-    }
-    return undefined;
+    const selection = this.host.selection.value.find(
+      selection => selection.blockId === this.host.model.id
+    );
+    return selection?.is(TableSelection) ? selection.data : undefined;
   }
 }

blocksuite/affine/components/src/block-selection/index.ts

@@ -1,7 +1,3 @@
-import {
-  type BlockComponent,
-  BlockSelection as StdBlockSelection,
-} from '@blocksuite/block-std';
 import { SignalWatcher } from '@blocksuite/global/utils';
 import { css, LitElement, type PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -50,22 +46,14 @@ export class BlockSelection extends SignalWatcher(LitElement) {
     this.style.borderWidth = `${this.borderWidth}px`;
   }
 
-  override disconnectedCallback() {
-    super.disconnectedCallback();
-    this.block = null as unknown as BlockComponent; // force gc
-  }
-
-  protected override updated(_changedProperties: PropertyValues): void {
-    super.updated(_changedProperties);
-    if (this.block) {
-      this.style.display = this.block.selected?.is(StdBlockSelection)
-        ? 'block'
-        : 'none';
+  protected override updated(changed: PropertyValues) {
+    if (changed.has('selected')) {
+      this.style.display = this.selected ? 'block' : 'none';
     }
   }
 
   @property({ attribute: false })
-  accessor block!: BlockComponent;
+  accessor selected = false;
 
   @property({ attribute: false })
   accessor borderRadius: number = 5;

blocksuite/affine/components/src/caption/captioned-block-component.ts

@@ -58,7 +58,9 @@ export class CaptionedBlockComponent<
           ></block-caption-editor>`
         : nothing}
       ${this.selectedStyle === SelectedStyle.Background
-        ? html`<affine-block-selection .block=${this}></affine-block-selection>`
+        ? html`<affine-block-selection
+            .selected=${this.selected$.value}
+          ></affine-block-selection>`
         : null}
       ${this.useZeroWidth && !this.doc.readonly
         ? html`<block-zero-width .block=${this}></block-zero-width>`

blocksuite/framework/block-std/src/view/element/block-component.ts

@@ -12,6 +12,7 @@ import { html } from 'lit/static-html.js';
 import type { EventName, UIEventHandler } from '../../event/index.js';
 import type { BlockService } from '../../extension/index.js';
 import type { BlockStdScope } from '../../scope/index.js';
+import { BlockSelection } from '../../selection/index.js';
 import { PropTypes, requiredProperties } from '../decorators/index.js';
 import {
   blockComponentSymbol,
@@ -35,16 +36,12 @@ export class BlockComponent<
   @consume({ context: stdContext })
   accessor std!: BlockStdScope;
 
-  private readonly _selected = computed(() => {
-    const selection = this.std.selection.value.find(selection => {
-      return selection.blockId === this.model?.id;
-    });
-
-    if (!selection) {
-      return null;
-    }
-
-    return selection;
+  selected$ = computed(() => {
+    const selection = this.std.selection.value.find(
+      selection => selection.blockId === this.model?.id
+    );
+    if (!selection) return false;
+    return selection.is(BlockSelection);
   });
 
   [blockComponentSymbol] = true;
@@ -141,10 +138,6 @@ export class BlockComponent<
     return rootComponent ?? null;
   }
 
-  get selected() {
-    return this._selected.value;
-  }
-
   get selection() {
     return this.host.selection;
   }

blocksuite/framework/block-std/src/view/element/gfx-block-component.ts

@@ -1,10 +1,12 @@
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import { Bound } from '@blocksuite/global/utils';
+import { computed } from '@preact/signals-core';
 import { nothing } from 'lit';
 
 import type { BlockService } from '../../extension/index.js';
 import { GfxControllerIdentifier } from '../../gfx/identifiers.js';
 import type { GfxBlockElementModel } from '../../gfx/index.js';
+import { SurfaceSelection } from '../../selection/index.js';
 import { BlockComponent } from './block-component.js';
 
 export function isGfxBlockComponent(
@@ -137,6 +139,14 @@ export function toGfxBlockComponent<
   return class extends CustomBlock {
     [GfxElementSymbol] = true;
 
+    override selected$ = computed(() => {
+      const selection = this.std.selection.value.find(
+        selection => selection.blockId === this.model?.id
+      );
+      if (!selection) return false;
+      return selection.is(SurfaceSelection);
+    });
+
     get gfx() {
       return this.std.get(GfxControllerIdentifier);
     }