AFFiNE-Mirror/blocksuite/affine/block-image/src/image-service.ts

import { FileDropConfigExtension } from '@blocksuite/affine-components/drop-indicator';
import { ImageBlockSchema, MAX_IMAGE_WIDTH } from '@blocksuite/affine-model';
import {
  FileSizeLimitService,
  TelemetryProvider,
} from '@blocksuite/affine-shared/services';
import {
  isInsideEdgelessEditor,
  matchFlavours,
} from '@blocksuite/affine-shared/utils';
import { BlockService } from '@blocksuite/block-std';
import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';

import { addImages, addSiblingImageBlock } from './utils.js';

export class ImageBlockService extends BlockService {
  static override readonly flavour = ImageBlockSchema.model.flavour;
}

export const ImageDropOption = FileDropConfigExtension({
  flavour: ImageBlockSchema.model.flavour,
  onDrop: ({ files, targetModel, placement, point, std }) => {
    const imageFiles = files.filter(file => file.type.startsWith('image/'));
    if (!imageFiles.length) return false;

    const maxFileSize = std.store.get(FileSizeLimitService).maxFileSize;

    if (targetModel && !matchFlavours(targetModel, ['affine:surface'])) {
      addSiblingImageBlock(
        std.host,
        imageFiles,
        maxFileSize,
        targetModel,
        placement
      );
      return true;
    }

    if (isInsideEdgelessEditor(std.host)) {
      const gfx = std.get(GfxControllerIdentifier);
      point = gfx.viewport.toViewCoordFromClientCoord(point);
      addImages(std, files, { point, maxWidth: MAX_IMAGE_WIDTH }).catch(
        console.error
      );

      std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
        control: 'canvas:drop',
        page: 'whiteboard editor',
        module: 'toolbar',
        segment: 'toolbar',
        type: 'image',
      });
      return true;
    }

    return false;
  },
});