From 75678ceca8ffb68e50c10fdc840b37b18e1cfb43 Mon Sep 17 00:00:00 2001
From: doouding <github@douding.io>
Date: Tue, 18 Feb 2025 10:24:59 +0000
Subject: [PATCH] fix: allow to drop inside the note block in edgeless mode
 (#10255)

---
 .../block-note/src/components/edgeless-note-mask.ts   |  5 ++++-
 .../affine/block-note/src/note-edgeless-block.ts      |  4 ++++
 .../src/watchers/drag-event-watcher.ts                | 11 +++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/blocksuite/affine/block-note/src/components/edgeless-note-mask.ts b/blocksuite/affine/block-note/src/components/edgeless-note-mask.ts
index e8f061a895..dbda1eefce 100644
--- a/blocksuite/affine/block-note/src/components/edgeless-note-mask.ts
+++ b/blocksuite/affine/block-note/src/components/edgeless-note-mask.ts
@@ -55,7 +55,7 @@ export class EdgelessNoteMask extends SignalWatcher(
           bottom: `${-extra}px`,
           right: `${-extra}px`,
           zIndex: '1',
-          pointerEvents: this.editing ? 'none' : 'auto',
+          pointerEvents: this.editing || this.disableMask ? 'none' : 'auto',
           borderRadius: `${
             this.model.edgeless.style.borderRadius * this.zoom
           }px`,
@@ -64,6 +64,9 @@ export class EdgelessNoteMask extends SignalWatcher(
     `;
   }
 
+  @property({ attribute: false })
+  accessor disableMask!: boolean;
+
   @property({ attribute: false })
   accessor editing!: boolean;
 
diff --git a/blocksuite/affine/block-note/src/note-edgeless-block.ts b/blocksuite/affine/block-note/src/note-edgeless-block.ts
index fa660e49b7..25b14b9f6b 100644
--- a/blocksuite/affine/block-note/src/note-edgeless-block.ts
+++ b/blocksuite/affine/block-note/src/note-edgeless-block.ts
@@ -260,6 +260,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
           .model=${this.model}
           .host=${this.host}
           .zoom=${this.gfx.viewport.zoom ?? 1}
+          .disableMask=${this.hideMask}
           .editing=${this._editing}
         ></edgeless-note-mask>
 
@@ -297,6 +298,9 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
   @state()
   private accessor _noteFullHeight = 0;
 
+  @state()
+  accessor hideMask = false;
+
   @query(`.${styles.clipContainer} > div`)
   private accessor _noteContent: HTMLElement | null = null;
 
diff --git a/blocksuite/affine/widget-drag-handle/src/watchers/drag-event-watcher.ts b/blocksuite/affine/widget-drag-handle/src/watchers/drag-event-watcher.ts
index d26b78fd31..e84da21d14 100644
--- a/blocksuite/affine/widget-drag-handle/src/watchers/drag-event-watcher.ts
+++ b/blocksuite/affine/widget-drag-handle/src/watchers/drag-event-watcher.ts
@@ -1328,6 +1328,7 @@ export class DragEventWatcher {
 
   private _makeDropTarget(view: BlockComponent) {
     const isUnderNote = this._isUnderNoteBlock(view.model);
+    const isNote = matchModels(view.model, [NoteBlockModel]);
 
     if (
       // affine:surface block can't be drop target in any modes
@@ -1372,6 +1373,16 @@ export class DragEventWatcher {
 
           return false;
         },
+        onDragEnter: () => {
+          if (isNote && 'hideMask' in view) {
+            view.hideMask = true;
+          }
+        },
+        onDragLeave: () => {
+          if (isNote && 'hideMask' in view) {
+            view.hideMask = false;
+          }
+        },
         setDropData: () => {
           return {
             modelId: view.model.id,