fix(editor): dragging area gets stuck when hovering some embed blocks (#11223)

Close [BS-2778](https://linear.app/affine-design/issue/BS-2778/[bug]-选区框选-html-block-卡顿)

blocksuite/affine/blocks/block-embed/src/common/embed-block-element.ts

@@ -13,7 +13,7 @@ import { findAncestorModel } from '@blocksuite/affine-shared/utils';
 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 { computed, type ReadonlySignal, signal } from '@preact/signals-core';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { query } from 'lit/decorators.js';
@@ -31,6 +31,17 @@ export class EmbedBlockComponent<
     })
   );
 
+  readonly isDraggingOnHost$ = signal(false);
+  readonly isResizing$ = signal(false);
+  // show overlay to prevent the iframe from capturing pointer events
+  // when the block is dragging, resizing, or not selected
+  readonly showOverlay$ = computed(
+    () =>
+      this.isDraggingOnHost$.value ||
+      this.isResizing$.value ||
+      !this.selected$.value
+  );
+
   private _fetchAbortController = new AbortController();
 
   _cardStyle: EmbedCardStyle = 'horizontal';
@@ -114,6 +125,24 @@ export class EmbedBlockComponent<
       this._fetchAbortController = new AbortController();
 
     this.contentEditable = 'false';
+
+    // subscribe the editor host global dragging event
+    // to show the overlay for the dragging area or other pointer events
+    this.handleEvent(
+      'dragStart',
+      () => {
+        this.isDraggingOnHost$.value = true;
+      },
+      { global: true }
+    );
+
+    this.handleEvent(
+      'dragEnd',
+      () => {
+        this.isDraggingOnHost$.value = false;
+      },
+      { global: true }
+    );
   }
 
   override disconnectedCallback(): void {

blocksuite/affine/blocks/block-embed/src/common/to-edgeless-embed-block.ts

@@ -24,12 +24,6 @@ export function toEdgelessEmbedBlock<
   return class extends toGfxBlockComponent(block) {
     override selectedStyle$ = null;
 
-    _isDragging = false;
-
-    _isResizing = false;
-
-    _showOverlay = false;
-
     override [blockComponentSymbol] = true;
 
     override blockDraggable = false;
@@ -55,16 +49,13 @@ export function toEdgelessEmbedBlock<
 
       this._disposables.add(
         this.edgelessSlots.elementResizeStart.subscribe(() => {
-          this._isResizing = true;
-          this._showOverlay = true;
+          this.isResizing$.value = true;
         })
       );
 
       this._disposables.add(
         this.edgelessSlots.elementResizeEnd.subscribe(() => {
-          this._isResizing = false;
-          this._showOverlay =
-            this._isResizing || this._isDragging || !this.selected$.peek();
+          this.isResizing$.value = false;
         })
       );
     }