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

blocksuite/affine/components/src/block-selection/index.ts

@@ -1,7 +1,3 @@
-import {
-  type BlockComponent,
-  BlockSelection as StdBlockSelection,
-} from '@blocksuite/block-std';
 import { SignalWatcher } from '@blocksuite/global/utils';
 import { css, LitElement, type PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -50,22 +46,14 @@ export class BlockSelection extends SignalWatcher(LitElement) {
     this.style.borderWidth = `${this.borderWidth}px`;
   }
 
-  override disconnectedCallback() {
-    super.disconnectedCallback();
-    this.block = null as unknown as BlockComponent; // force gc
-  }
-
-  protected override updated(_changedProperties: PropertyValues): void {
-    super.updated(_changedProperties);
-    if (this.block) {
-      this.style.display = this.block.selected?.is(StdBlockSelection)
-        ? 'block'
-        : 'none';
+  protected override updated(changed: PropertyValues) {
+    if (changed.has('selected')) {
+      this.style.display = this.selected ? 'block' : 'none';
     }
   }
 
   @property({ attribute: false })
-  accessor block!: BlockComponent;
+  accessor selected = false;
 
   @property({ attribute: false })
   accessor borderRadius: number = 5;

blocksuite/affine/components/src/caption/captioned-block-component.ts

@@ -58,7 +58,9 @@ export class CaptionedBlockComponent<
           ></block-caption-editor>`
         : nothing}
       ${this.selectedStyle === SelectedStyle.Background
-        ? html`<affine-block-selection .block=${this}></affine-block-selection>`
+        ? html`<affine-block-selection
+            .selected=${this.selected$.value}
+          ></affine-block-selection>`
         : null}
       ${this.useZeroWidth && !this.doc.readonly
         ? html`<block-zero-width .block=${this}></block-zero-width>`