From 363476a46cca4935c8de9e7501dafcc0221ee249 Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Thu, 3 Apr 2025 13:43:55 +0000
Subject: [PATCH] fix(editor): add hoverable container for image and
 surface-ref (#11458)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes: [BS-3012](https://linear.app/affine-design/issue/BS-3012/hover-yuan素时冲突)
---
 .../blocks/block-image/src/image-block.ts     |  7 ++-
 .../src/surface-ref-block.ts                  | 10 ++++-
 .../e2e/blocksuite/toolbar.spec.ts            | 43 ++++++++++++++++++-
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/blocksuite/affine/blocks/block-image/src/image-block.ts b/blocksuite/affine/blocks/block-image/src/image-block.ts
index ac2aae2ad4..6148397262 100644
--- a/blocksuite/affine/blocks/block-image/src/image-block.ts
+++ b/blocksuite/affine/blocks/block-image/src/image-block.ts
@@ -75,14 +75,13 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
       },
       { enterDelay: 500 }
     );
-    setReference(this);
+    setReference(this.hoverableContainer);
     this._disposables.add(dispose);
   }
 
   override connectedCallback() {
     super.connectedCallback();
 
-    this._initHover();
     this.refreshData();
     this.contentEditable = 'false';
     this._disposables.add(
@@ -104,6 +103,7 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
   override firstUpdated() {
     // lazy bindings
     this.disposables.addFromEvent(this, 'click', this._handleClick);
+    this._initHover();
   }
 
   override renderBlock() {
@@ -160,6 +160,9 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
   @query('affine-page-image')
   private accessor pageImage: ImageBlockPageComponent | null = null;
 
+  @query('.affine-image-container')
+  accessor hoverableContainer!: HTMLDivElement;
+
   @property({ attribute: false })
   accessor retryCount = 0;
 
diff --git a/blocksuite/affine/blocks/block-surface-ref/src/surface-ref-block.ts b/blocksuite/affine/blocks/block-surface-ref/src/surface-ref-block.ts
index 653c9e2a88..eadbdeb16d 100644
--- a/blocksuite/affine/blocks/block-surface-ref/src/surface-ref-block.ts
+++ b/blocksuite/affine/blocks/block-surface-ref/src/surface-ref-block.ts
@@ -376,7 +376,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
       },
       { enterDelay: 500 }
     );
-    setReference(this);
+    setReference(this.hoverableContainer);
     this._disposables.add(dispose);
   }
 
@@ -437,6 +437,11 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
     this._initViewport();
     this._initReferencedModel();
     this._initSelection();
+  }
+
+  override firstUpdated() {
+    if (!this._shouldRender) return;
+
     this._initHover();
   }
 
@@ -486,6 +491,9 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
   @state()
   private accessor _focused: boolean = false;
 
+  @query('.affine-surface-ref')
+  accessor hoverableContainer!: HTMLDivElement;
+
   @query('affine-surface-ref > block-caption-editor')
   accessor captionElement!: BlockCaptionEditor;
 
diff --git a/tests/affine-local/e2e/blocksuite/toolbar.spec.ts b/tests/affine-local/e2e/blocksuite/toolbar.spec.ts
index 83455305a7..282490fc84 100644
--- a/tests/affine-local/e2e/blocksuite/toolbar.spec.ts
+++ b/tests/affine-local/e2e/blocksuite/toolbar.spec.ts
@@ -5,7 +5,12 @@ import {
   locateToolbar,
   setEdgelessTool,
 } from '@affine-test/kit/utils/editor';
-import { selectAllByKeyboard } from '@affine-test/kit/utils/keyboard';
+import { importImage } from '@affine-test/kit/utils/image';
+import {
+  pasteByKeyboard,
+  selectAllByKeyboard,
+  writeTextToClipboard,
+} from '@affine-test/kit/utils/keyboard';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import {
   clickNewPageButton,
@@ -232,3 +237,39 @@ test('should not show inner toolbar of surface-ref in note under edgeless', asyn
 
   await expect(toolbar).toBeHidden();
 });
+
+test('should show toolbar when inline link is preceded by image or surface-ref', async ({
+  page,
+}) => {
+  await page.keyboard.press('Enter');
+
+  await importImage(page, 'affine-preview.png');
+
+  const image = page.locator('affine-image');
+  await image.click();
+
+  await page.keyboard.press('Enter');
+
+  const url = new URL(page.url());
+
+  await writeTextToClipboard(page, url.toString());
+  await pasteByKeyboard(page);
+
+  const toolbar = locateToolbar(page);
+
+  const inlineLink = page.locator('affine-reference');
+
+  await inlineLink.hover();
+  await expect(toolbar).toBeVisible();
+
+  await toolbar.hover();
+  await expect(toolbar).toBeVisible();
+
+  await image.hover();
+  await expect(toolbar).toBeVisible();
+  await expect(toolbar).toHaveAttribute('data-placement', 'inner');
+
+  await inlineLink.hover();
+  await expect(toolbar).toBeVisible();
+  await expect(toolbar).not.toHaveAttribute('data-placement', 'inner');
+});