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

2026-02-18 14:56:59 +08:00 · 2025-01-27 02:56:10 +00:00
parent a5c8356376
commit ffd54c6620
18 changed files with 90 additions and 158 deletions
--- a/blocksuite/affine/block-embed/src/common/embed-block-element.ts
+++ b/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`,
--- a/blocksuite/affine/block-embed/src/common/to-edgeless-embed-block.ts
+++ b/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();
        })
      );
    }
--- a/blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-block.ts
+++ b/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;
 }
--- a/blocksuite/affine/block-embed/src/embed-github-block/embed-github-block.ts
+++ b/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;
 }
--- a/blocksuite/affine/block-embed/src/embed-html-block/embed-html-block.ts
+++ b/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;

--- a/blocksuite/affine/block-embed/src/embed-loom-block/embed-loom-block.ts
+++ b/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;

--- a/blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-edgeless-synced-doc-block.ts
+++ b/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}
--- a/blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts
+++ b/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">
--- a/blocksuite/affine/block-embed/src/embed-youtube-block/embed-youtube-block.ts
+++ b/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;