refactor(editor): move file drop manager to components (#9264)

blocksuite/blocks/src/root-block/edgeless/edgeless-root-spec.ts

@@ -1,3 +1,4 @@
+import { FileDropExtension } from '@blocksuite/affine-components/drag-indicator';
 import {
   DNDAPIExtension,
   DocDisplayMetaService,
@@ -98,6 +99,7 @@ const EdgelessCommonExtension: ExtensionType[] = [
   DNDAPIExtension,
   DocDisplayMetaService,
   RootBlockAdapterExtensions,
+  FileDropExtension,
 ].flat();
 
 export const EdgelessRootBlockSpec: ExtensionType[] = [

blocksuite/blocks/src/root-block/page/page-root-spec.ts

@@ -1,3 +1,4 @@
+import { FileDropExtension } from '@blocksuite/affine-components/drag-indicator';
 import {
   DNDAPIExtension,
   DocDisplayMetaService,
@@ -75,4 +76,5 @@ export const PageRootBlockSpec: ExtensionType[] = [
   DNDAPIExtension,
   DocDisplayMetaService,
   RootBlockAdapterExtensions,
+  FileDropExtension,
 ].flat();

blocksuite/blocks/src/root-block/root-service.ts

@@ -2,10 +2,6 @@ import { RootBlockSchema } from '@blocksuite/affine-model';
 import type { BlockComponent } from '@blocksuite/block-std';
 import { BlockService } from '@blocksuite/block-std';
 
-import {
-  FileDropManager,
-  type FileDropOptions,
-} from '../_common/components/file-drop-manager.js';
 import {
   HtmlTransformer,
   MarkdownTransformer,
@@ -16,12 +12,6 @@ import type { RootBlockComponent } from './types.js';
 export abstract class RootService extends BlockService {
   static override readonly flavour = RootBlockSchema.model.flavour;
 
-  private readonly _fileDropOptions: FileDropOptions = {
-    flavour: this.flavour,
-  };
-
-  readonly fileDropManager = new FileDropManager(this, this._fileDropOptions);
-
   transformers = {
     markdown: MarkdownTransformer,
     html: HtmlTransformer,
@@ -64,18 +54,6 @@ export abstract class RootService extends BlockService {
   override mounted() {
     super.mounted();
 
-    this.disposables.addFromEvent(
-      this.host,
-      'dragover',
-      this.fileDropManager.onDragOver
-    );
-
-    this.disposables.addFromEvent(
-      this.host,
-      'dragleave',
-      this.fileDropManager.onDragLeave
-    );
-
     this.disposables.add(
       this.std.event.add('pointerDown', ctx => {
         const state = ctx.get('pointerState');

blocksuite/blocks/src/root-block/widgets/drag-handle/watchers/drag-event-watcher.ts

@@ -109,6 +109,12 @@ export class DragEventWatcher {
   };
 
   private readonly _dropHandler = (context: UIEventStateContext) => {
+    const raw = context.get('dndState').raw;
+    const fileLength = raw.dataTransfer?.files.length ?? 0;
+    // If drop files, should let file drop extension handle it
+    if (fileLength > 0) {
+      return;
+    }
     this._onDrop(context);
     this._std.selection.setGroup('gfx', []);
     this.widget.clearRaf();