fix: drop indicator in center peek (#10136)

blocksuite/affine/components/src/drop-indicator/drop-indicator.ts

@@ -1,6 +1,6 @@
 import type { Rect } from '@blocksuite/global/utils';
 import { css, html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 export class DropIndicator extends LitElement {
@@ -31,6 +31,7 @@ export class DropIndicator extends LitElement {
       height: `${height}px`,
       top: `${top}px`,
       left: `${left}px`,
+      zIndex: this.zIndex,
     });
 
     return html`<div class="affine-drop-indicator" style=${style}></div>`;
@@ -38,6 +39,9 @@ export class DropIndicator extends LitElement {
 
   @property({ attribute: false })
   accessor rect: Rect | null = null;
+
+  @state()
+  accessor zIndex = 2;
 }
 
 declare global {

blocksuite/affine/widget-drag-handle/src/watchers/drag-event-watcher.ts

@@ -120,8 +120,19 @@ export class DragEventWatcher {
   }
 
   private readonly _createDropIndicator = () => {
+    let topElement: HTMLElement = this.widget;
+    const body = this.widget.ownerDocument.body;
+
+    while (topElement && topElement.parentElement !== body) {
+      topElement = topElement.parentElement!;
+    }
+    const zIndex = topElement
+      ? (parseInt(window.getComputedStyle(topElement).zIndex) || 1) + 1
+      : 2;
+
     if (!this.dropIndicator) {
       this.dropIndicator = new DropIndicator();
+      this.dropIndicator.zIndex = zIndex;
       this.widget.ownerDocument.body.append(this.dropIndicator);
     }
   };
@@ -1232,7 +1243,7 @@ export class DragEventWatcher {
       onDrop: () => {
         this._cleanup();
       },
-      setDragPreview: ({ source, container }) => {
+      setDragPreview: ({ source, container, setOffset }) => {
         if (
           !source.data?.bsEntity?.modelIds.length ||
           !source.data.bsEntity.snapshot
@@ -1248,6 +1259,8 @@ export class DragEventWatcher {
           container,
           mode: this.mode ?? 'page',
         });
+
+        setOffset({ x: 0, y: 0 });
       },
       setDragData: () => {
         const { fromMode, snapshot } = this._getDraggedSnapshot();