From 19e9f970f4262578b1c594fc9a0d2bb6b5c3651b Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Fri, 21 Feb 2025 03:43:54 +0000
Subject: [PATCH] fix(editor): block selected style in note under edgeless
 (#10326)

Related to: https://github.com/toeverything/AFFiNE/pull/9849

Currently missing selected style in note under edgeless.
<img width="860" alt="Screenshot 2025-02-20 at 20 51 12" src="https://github.com/user-attachments/assets/77d68cfb-13d0-4e09-a567-f2a30ba72db1" />
---
 .../block-attachment/src/attachment-block.ts    |  2 --
 .../src/attachment-edgeless-block.ts            |  2 +-
 .../affine/block-bookmark/src/bookmark-block.ts | 15 +++++++++------
 .../src/bookmark-edgeless-block.ts              |  2 ++
 .../src/common/embed-block-element.ts           | 17 ++++++++++-------
 .../src/common/to-edgeless-embed-block.ts       |  2 ++
 6 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/blocksuite/affine/block-attachment/src/attachment-block.ts b/blocksuite/affine/block-attachment/src/attachment-block.ts
index aa6612d8ef..bdcb7b3579 100644
--- a/blocksuite/affine/block-attachment/src/attachment-block.ts
+++ b/blocksuite/affine/block-attachment/src/attachment-block.ts
@@ -38,8 +38,6 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
   protected _isResizing = false;
 
-  protected _isSelected = false;
-
   protected _whenHover: HoverController | null = new HoverController(
     this,
     ({ abortController }) => {
diff --git a/blocksuite/affine/block-attachment/src/attachment-edgeless-block.ts b/blocksuite/affine/block-attachment/src/attachment-edgeless-block.ts
index 0ad0736d0c..04dd3429a0 100644
--- a/blocksuite/affine/block-attachment/src/attachment-edgeless-block.ts
+++ b/blocksuite/affine/block-attachment/src/attachment-edgeless-block.ts
@@ -35,7 +35,7 @@ export class AttachmentEdgelessBlockComponent extends toGfxBlockComponent(
       this.slots.elementResizeEnd.on(() => {
         this._isResizing = false;
         this._showOverlay =
-          this._isResizing || this._isDragging || !this._isSelected;
+          this._isResizing || this._isDragging || !this.selected$.peek();
       })
     );
   }
diff --git a/blocksuite/affine/block-bookmark/src/bookmark-block.ts b/blocksuite/affine/block-bookmark/src/bookmark-block.ts
index 329d73c1b3..32eddf2a50 100644
--- a/blocksuite/affine/block-bookmark/src/bookmark-block.ts
+++ b/blocksuite/affine/block-bookmark/src/bookmark-block.ts
@@ -4,9 +4,10 @@ import {
 } from '@blocksuite/affine-components/caption';
 import type { BookmarkBlockModel } from '@blocksuite/affine-model';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
+import { computed, type ReadonlySignal } from '@preact/signals-core';
 import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+import { type ClassInfo, classMap } from 'lit/directives/class-map.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 import { refreshBookmarkUrlData } from './utils.js';
@@ -14,6 +15,12 @@ import { refreshBookmarkUrlData } from './utils.js';
 export const BOOKMARK_MIN_WIDTH = 450;
 
 export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBlockModel> {
+  selectedStyle$: ReadonlySignal<ClassInfo> | null = computed<ClassInfo>(
+    () => ({
+      'selected-style': this.selected$.value,
+    })
+  );
+
   private _fetchAbortController?: AbortController;
 
   blockDraggable = true;
@@ -69,16 +76,12 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
   }
 
   override renderBlock() {
-    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 && !isInEdgeless,
+          ...this.selectedStyle$?.value,
         })}
         style=${this.containerStyleMap}
       >
diff --git a/blocksuite/affine/block-bookmark/src/bookmark-edgeless-block.ts b/blocksuite/affine/block-bookmark/src/bookmark-edgeless-block.ts
index eb995a5b58..4542249e5c 100644
--- a/blocksuite/affine/block-bookmark/src/bookmark-edgeless-block.ts
+++ b/blocksuite/affine/block-bookmark/src/bookmark-edgeless-block.ts
@@ -10,6 +10,8 @@ import { BookmarkBlockComponent } from './bookmark-block.js';
 export class BookmarkEdgelessBlockComponent extends toGfxBlockComponent(
   BookmarkBlockComponent
 ) {
+  override selectedStyle$ = null;
+
   override blockDraggable = false;
 
   override getRenderingRect() {
diff --git a/blocksuite/affine/block-embed/src/common/embed-block-element.ts b/blocksuite/affine/block-embed/src/common/embed-block-element.ts
index fcba24bbe5..b208269acc 100644
--- a/blocksuite/affine/block-embed/src/common/embed-block-element.ts
+++ b/blocksuite/affine/block-embed/src/common/embed-block-element.ts
@@ -12,10 +12,11 @@ import { DocModeProvider } from '@blocksuite/affine-shared/services';
 import type { BlockService } from '@blocksuite/block-std';
 import type { GfxCompatibleProps } from '@blocksuite/block-std/gfx';
 import type { BlockModel } from '@blocksuite/store';
+import { computed, type ReadonlySignal } from '@preact/signals-core';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+import { type ClassInfo, classMap } from 'lit/directives/class-map.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 export class EmbedBlockComponent<
@@ -23,6 +24,12 @@ export class EmbedBlockComponent<
   Service extends BlockService = BlockService,
   WidgetName extends string = string,
 > extends CaptionedBlockComponent<Model, Service, WidgetName> {
+  selectedStyle$: ReadonlySignal<ClassInfo> | null = computed<ClassInfo>(
+    () => ({
+      'selected-style': this.selected$.value,
+    })
+  );
+
   private _fetchAbortController = new AbortController();
 
   _cardStyle: EmbedCardStyle = 'horizontal';
@@ -43,10 +50,6 @@ 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' ||
@@ -54,7 +57,7 @@ export class EmbedBlockComponent<
     ) {
       this.style.display = 'block';
 
-      if (isInEdgeless) {
+      if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
         this.style.minWidth = `${EMBED_CARD_MIN_WIDTH}px`;
       }
     }
@@ -64,7 +67,7 @@ export class EmbedBlockComponent<
         draggable="${this.blockDraggable ? 'true' : 'false'}"
         class=${classMap({
           'embed-block-container': true,
-          'selected-style': selected && !isInEdgeless,
+          ...this.selectedStyle$?.value,
         })}
         style=${styleMap({
           height: `${this._cardHeight}px`,
diff --git a/blocksuite/affine/block-embed/src/common/to-edgeless-embed-block.ts b/blocksuite/affine/block-embed/src/common/to-edgeless-embed-block.ts
index eb335ec624..2606b8fa2f 100644
--- a/blocksuite/affine/block-embed/src/common/to-edgeless-embed-block.ts
+++ b/blocksuite/affine/block-embed/src/common/to-edgeless-embed-block.ts
@@ -22,6 +22,8 @@ export function toEdgelessEmbedBlock<
   B extends typeof EmbedBlockComponent<Model, Service, WidgetName>,
 >(block: B) {
   return class extends toGfxBlockComponent(block) {
+    override selectedStyle$ = null;
+
     _isDragging = false;
 
     _isResizing = false;