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

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;