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

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