fix(editor): add hoverable container for image and surface-ref (#11458)

Closes: [BS-3012](https://linear.app/affine-design/issue/BS-3012/hover-yuan素时冲突)

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;
 

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;