refactor(editor): use selected signal in block component

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,26 +43,28 @@ 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' ||
       this._cardStyle === 'list'
     ) {
       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;