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

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);
     }