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

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

@@ -0,0 +1,44 @@
+import type { Rect } from '@blocksuite/global/utils';
+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 {
+  static override styles = css`
+    .affine-drag-indicator {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: var(--affine-primary-color);
+      transition-property: width, height, transform;
+      transition-duration: 100ms;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-delay: 0s;
+      transform-origin: 0 0;
+      pointer-events: none;
+      z-index: 2;
+    }
+  `;
+
+  override render() {
+    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)`,
+    });
+    return html`<div class="affine-drag-indicator" style=${style}></div>`;
+  }
+
+  @property({ attribute: false })
+  accessor rect: Rect | null = null;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-drag-indicator': DragIndicator;
+  }
+}

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

@@ -0,0 +1,204 @@
+import {
+  calcDropTarget,
+  type DropResult,
+  getClosestBlockComponentByPoint,
+  isInsidePageEditor,
+  matchFlavours,
+} from '@blocksuite/affine-shared/utils';
+import {
+  type BlockStdScope,
+  type EditorHost,
+  type ExtensionType,
+  LifeCycleWatcher,
+} from '@blocksuite/block-std';
+import { createIdentifier } from '@blocksuite/global/di';
+import type { IVec } from '@blocksuite/global/utils';
+import { Point } from '@blocksuite/global/utils';
+import type { BlockModel } from '@blocksuite/store';
+
+import type { DragIndicator } from './index.js';
+
+export type onDropProps = {
+  std: BlockStdScope;
+  files: File[];
+  targetModel: BlockModel | null;
+  place: 'before' | 'after';
+  point: IVec;
+};
+
+export type FileDropOptions = {
+  flavour: string;
+  onDrop?: (onDropProps: onDropProps) => boolean;
+};
+
+export class FileDropExtension extends LifeCycleWatcher {
+  static override readonly key = 'FileDropExtension';
+
+  static dropResult: DropResult | null = null;
+
+  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;
+  }
+
+  onDragLeave = () => {
+    FileDropExtension.dropResult = null;
+    FileDropExtension.indicator.rect = null;
+  };
+
+  onDragOver = (event: DragEvent) => {
+    event.preventDefault();
+
+    const dataTransfer = event.dataTransfer;
+    if (!dataTransfer) return;
+
+    const effectAllowed = dataTransfer.effectAllowed;
+    if (effectAllowed === 'none') return;
+
+    const { clientX, clientY } = event;
+    const point = new Point(clientX, clientY);
+    const element = getClosestBlockComponentByPoint(point.clone());
+
+    let result: DropResult | null = null;
+    if (element) {
+      const model = element.model;
+      const parent = this.std.doc.getParent(model);
+      if (!matchFlavours(parent, ['affine:surface' as BlockSuite.Flavour])) {
+        result = calcDropTarget(point, model, element);
+      }
+    }
+    if (result) {
+      FileDropExtension.dropResult = result;
+      FileDropExtension.indicator.rect = result.rect;
+    } else {
+      FileDropExtension.dropResult = null;
+      FileDropExtension.indicator.rect = null;
+    }
+  };
+
+  get targetModel(): BlockModel | null {
+    let targetModel = FileDropExtension.dropResult?.modelState.model || null;
+
+    if (!targetModel && isInsidePageEditor(this.editorHost)) {
+      const rootModel = this.doc.root;
+      if (!rootModel) return null;
+
+      let lastNote = rootModel.children[rootModel.children.length - 1];
+      if (!lastNote || !matchFlavours(lastNote, ['affine:note'])) {
+        const newNoteId = this.doc.addBlock('affine:note', {}, rootModel.id);
+        const newNote = this.doc.getBlockById(newNoteId);
+        if (!newNote) return null;
+        lastNote = newNote;
+      }
+
+      const lastItem = lastNote.children[lastNote.children.length - 1];
+      if (lastItem) {
+        targetModel = lastItem;
+      } else {
+        const newParagraphId = this.doc.addBlock(
+          'affine:paragraph',
+          {},
+          lastNote,
+          0
+        );
+        const newParagraph = this.doc.getBlockById(newParagraphId);
+        if (!newParagraph) return null;
+        targetModel = newParagraph;
+      }
+    }
+    return targetModel;
+  }
+
+  get doc() {
+    return this.std.doc;
+  }
+
+  get editorHost(): EditorHost {
+    return this.std.host;
+  }
+
+  get type(): 'before' | 'after' {
+    return !FileDropExtension.dropResult ||
+      FileDropExtension.dropResult.type !== 'before'
+      ? 'after'
+      : 'before';
+  }
+
+  private readonly _onDrop = (event: DragEvent, options: FileDropOptions) => {
+    FileDropExtension.indicator.rect = null;
+
+    const { onDrop } = options;
+    if (!onDrop) return;
+
+    const dataTransfer = event.dataTransfer;
+    if (!dataTransfer) return;
+
+    const effectAllowed = dataTransfer.effectAllowed;
+    if (effectAllowed === 'none') return;
+
+    const droppedFiles = dataTransfer.files;
+    if (!droppedFiles || !droppedFiles.length) return;
+
+    const { targetModel, type: place } = this;
+    const { x, y } = event;
+
+    const drop = onDrop({
+      std: this.std,
+      files: [...droppedFiles],
+      targetModel,
+      place,
+      point: [x, y],
+    });
+
+    if (drop) {
+      event.preventDefault();
+    }
+    return drop;
+  };
+
+  override mounted() {
+    super.mounted();
+    const std = this.std;
+
+    std.event.add('nativeDragOver', context => {
+      const event = context.get('dndState');
+      this.onDragOver(event.raw);
+    });
+    std.event.add('nativeDragLeave', () => {
+      this.onDragLeave();
+    });
+    std.provider.getAll(FileDropConfigExtensionIdentifier).forEach(options => {
+      if (options.onDrop) {
+        std.event.add('nativeDrop', context => {
+          const event = context.get('dndState');
+          return this._onDrop(event.raw, options);
+        });
+      }
+    });
+  }
+}
+
+const FileDropConfigExtensionIdentifier = createIdentifier<FileDropOptions>(
+  'FileDropConfigExtension'
+);
+
+export const FileDropConfigExtension = (
+  options: FileDropOptions
+): ExtensionType => {
+  const identifier = FileDropConfigExtensionIdentifier(options.flavour);
+  return {
+    setup: di => {
+      di.addImpl(identifier, () => options);
+    },
+  };
+};

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

@@ -1,47 +1,12 @@
-import type { Rect } from '@blocksuite/global/utils';
-import { css, html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
+import { DragIndicator } from './drag-indicator.js';
+export {
+  FileDropConfigExtension,
+  FileDropExtension,
+  type FileDropOptions,
+  type onDropProps,
+} from './file-drop-manager.js';
 
-export class DragIndicator extends LitElement {
-  static override styles = css`
-    .affine-drag-indicator {
-      position: absolute;
-      top: 0;
-      left: 0;
-      background: var(--affine-primary-color);
-      transition-property: width, height, transform;
-      transition-duration: 100ms;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-delay: 0s;
-      transform-origin: 0 0;
-      pointer-events: none;
-      z-index: 2;
-    }
-  `;
-
-  override render() {
-    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)`,
-    });
-    return html`<div class="affine-drag-indicator" style=${style}></div>`;
-  }
-
-  @property({ attribute: false })
-  accessor rect: Rect | null = null;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'affine-drag-indicator': DragIndicator;
-  }
-}
+export { DragIndicator };
 
 export function effects() {
   customElements.define('affine-drag-indicator', DragIndicator);