chore: dnd cleanup (#9899)

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

@@ -3,14 +3,14 @@ import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-export class DragIndicator extends LitElement {
+export class DropIndicator extends LitElement {
   static override styles = css`
-    .affine-drag-indicator {
+    .affine-drop-indicator {
       position: absolute;
       top: 0;
       left: 0;
       background: var(--affine-primary-color);
-      transition-property: width, height, transform;
+      transition-property: height, transform;
       transition-duration: 100ms;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       transition-delay: 0s;
@@ -24,13 +24,16 @@ export class DragIndicator extends LitElement {
     if (!this.rect) {
       return null;
     }
+
     const { left, top, width, height } = this.rect;
     const style = styleMap({
       width: `${width}px`,
       height: `${height}px`,
-      transform: `translate(${left}px, ${top}px)`,
+      top: `${top}px`,
+      left: `${left}px`,
     });
-    return html`<div class="affine-drag-indicator" style=${style}></div>`;
+
+    return html`<div class="affine-drop-indicator" style=${style}></div>`;
   }
 
   @property({ attribute: false })
@@ -39,6 +42,6 @@ export class DragIndicator extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'affine-drag-indicator': DragIndicator;
+    'affine-drop-indicator': DropIndicator;
   }
 }

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

@@ -17,7 +17,7 @@ import { Point, throttle } from '@blocksuite/global/utils';
 import type { BlockModel, ExtensionType } from '@blocksuite/store';
 import { computed, signal } from '@preact/signals-core';
 
-import type { DragIndicator } from './drag-indicator';
+import { DropIndicator } from './drop-indicator';
 
 export type DropProps = {
   std: BlockStdScope;
@@ -39,20 +39,7 @@ export type FileDropOptions = {
 export class FileDropExtension extends LifeCycleWatcher {
   static override readonly key = 'FileDropExtension';
 
-  static get indicator() {
-    let indicator = document.querySelector<DragIndicator>(
-      'affine-drag-indicator'
-    );
-
-    if (!indicator) {
-      indicator = document.createElement(
-        'affine-drag-indicator'
-      ) as DragIndicator;
-      document.body.append(indicator);
-    }
-
-    return indicator;
-  }
+  indicator: DropIndicator = new DropIndicator();
 
   dragging$ = signal(false);
 
@@ -166,10 +153,17 @@ export class FileDropExtension extends LifeCycleWatcher {
     return this.std.host;
   }
 
+  override unmounted(): void {
+    super.unmounted();
+    this.indicator.remove();
+  }
+
   override mounted() {
     super.mounted();
     const std = this.std;
 
+    std.host.ownerDocument.body.append(this.indicator);
+
     std.event.disposables.add(
       this.point$.subscribe(
         throttle(
@@ -198,7 +192,7 @@ export class FileDropExtension extends LifeCycleWatcher {
 
     std.event.disposables.add(
       this.dropTarget$.subscribe(target => {
-        FileDropExtension.indicator.rect = this._disableIndicator
+        this.indicator.rect = this._disableIndicator
           ? null
           : (target?.rect ?? null);
       })

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

@@ -1,4 +1,4 @@
-import { DragIndicator } from './drag-indicator';
+import { DropIndicator } from './drop-indicator';
 export {
   type DropProps,
   FileDropConfigExtension,
@@ -6,8 +6,8 @@ export {
   type FileDropOptions,
 } from './file-drop-manager';
 
-export { DragIndicator };
+export { DropIndicator };
 
 export function effects() {
-  customElements.define('affine-drag-indicator', DragIndicator);
+  customElements.define('affine-drop-indicator', DropIndicator);
 }