feat(edgeless): support consistent dragging behavior

packages/blocks/src/_common/components/file-drop-manager.ts

@@ -21,7 +21,6 @@ export type onDropProps = {
 
 export type FileDropOptions = {
   flavour: string;
-  maxFileSize?: number;
   onDrop?: ({ files, targetModel, place, point }: onDropProps) => void;
 };
 
@@ -81,10 +80,6 @@ export class FileDropManager {
     return targetModel;
   }
 
-  get maxFileSize(): number {
-    return this._fileDropOptions.maxFileSize ?? 10 * 1000 * 1000; // default to 10MB
-  }
-
   onDragOver = (event: DragEvent) => {
     event.preventDefault();
 

packages/blocks/src/_common/components/rich-text/rich-text-operations.ts

@@ -22,7 +22,8 @@ import {
   focusBlockByModel,
   focusTitle,
 } from '../../../_common/utils/selection.js';
-import { type ListBlockModel, type PageBlockModel } from '../../../models.js';
+import type { ListBlockModel } from '../../../list-block/index.js';
+import type { PageBlockModel } from '../../../page-block/index.js';
 import type { ExtendedModel } from '../../types.js';
 
 /**

packages/blocks/src/_common/embed-block-helper/embed-block-element.ts

@@ -1,27 +1,39 @@
 import type { BlockService } from '@blocksuite/block-std';
+import { assertExists } from '@blocksuite/global/utils';
 import { BlockElement } from '@blocksuite/lit';
 import type { BaseBlockModel } from '@blocksuite/store';
 import type { TemplateResult } from 'lit';
-import { html } from 'lit';
+import { html, render } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import type { DragHandleOption } from '../../page-block/widgets/drag-handle/config.js';
+import { AffineDragHandleWidget } from '../../page-block/widgets/drag-handle/drag-handle.js';
+import {
+  captureEventTarget,
+  convertDragPreviewDocToEdgeless,
+  convertDragPreviewEdgelessToDoc,
+} from '../../page-block/widgets/drag-handle/utils.js';
 import { Bound } from '../../surface-block/index.js';
 import type { EdgelessSelectableProps } from '../edgeless/mixin/index.js';
+import { type BlockModels, matchFlavours } from '../utils/index.js';
 
 export class EmbedBlockElement<
   Model extends
     BaseBlockModel<EdgelessSelectableProps> = BaseBlockModel<EdgelessSelectableProps>,
   Service extends BlockService = BlockService,
   WidgetName extends string = string,
 > extends BlockElement<Model, Service, WidgetName> {
-  protected get _isInSurface() {
-    const parent = this.host.querySelector('affine-edgeless-page');
-    return !!parent;
+  protected _isInSurface = false;
+
+  protected _width = 400;
+  protected _height = 200;
+
+  get isInSurface() {
+    return this._isInSurface;
   }
 
   get surface() {
     if (!this._isInSurface) return null;
-
     return this.host.querySelector('affine-surface');
   }
 
@@ -48,4 +60,98 @@ export class EmbedBlockElement<
       </div>
     `;
   };
+
+  private _dragHandleOption: DragHandleOption = {
+    flavour: /affine:embed-*/,
+    edgeless: true,
+    onDragStart: ({ state, startDragging, anchorBlockPath }) => {
+      if (!anchorBlockPath) return false;
+      const anchorComponent = this.std.view.viewFromPath(
+        'block',
+        anchorBlockPath
+      );
+      if (
+        !anchorComponent ||
+        !matchFlavours(anchorComponent.model, [
+          this.flavour as keyof BlockModels,
+        ])
+      )
+        return false;
+
+      const blockComponent = anchorComponent as this;
+      const isInSurface = blockComponent.isInSurface;
+      if (!isInSurface) {
+        this.host.selection.setGroup('block', [
+          this.host.selection.getInstance('block', {
+            path: blockComponent.path,
+          }),
+        ]);
+        startDragging([blockComponent], state);
+        return true;
+      }
+
+      const element = captureEventTarget(state.raw.target);
+      const insideDragHandle = !!element?.closest('affine-drag-handle-widget');
+      if (!insideDragHandle) return false;
+
+      const embedPortal = blockComponent.closest(
+        '.edgeless-block-portal-embed'
+      );
+      assertExists(embedPortal);
+      const dragPreviewEl = embedPortal.cloneNode() as HTMLElement;
+      dragPreviewEl.style.transform = '';
+      render(
+        blockComponent.host.renderModel(blockComponent.model),
+        dragPreviewEl
+      );
+
+      startDragging([blockComponent], state, dragPreviewEl);
+      return true;
+    },
+    onDragEnd: props => {
+      const { state, draggingElements } = props;
+      if (
+        draggingElements.length !== 1 ||
+        !matchFlavours(draggingElements[0].model, [
+          this.flavour as keyof BlockModels,
+        ])
+      )
+        return false;
+
+      const blockComponent = draggingElements[0] as this;
+      const isInSurface = blockComponent.isInSurface;
+      const target = captureEventTarget(state.raw.target);
+      const isTargetEdgelessContainer =
+        target?.classList.contains('edgeless') &&
+        target?.classList.contains('affine-block-children-container');
+
+      if (isInSurface) {
+        return convertDragPreviewEdgelessToDoc({
+          blockComponent,
+          ...props,
+        });
+      } else if (isTargetEdgelessContainer) {
+        return convertDragPreviewDocToEdgeless({
+          blockComponent,
+          cssSelector: '.embed-block-container',
+          width: this._width,
+          height: this._height,
+          ...props,
+        });
+      }
+
+      return false;
+    },
+  };
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    const parent = this.host.page.getParent(this.model);
+    this._isInSurface = parent?.flavour === 'affine:surface';
+
+    this.disposables.add(
+      AffineDragHandleWidget.registerOption(this._dragHandleOption)
+    );
+  }
 }

packages/blocks/src/_common/utils/query.ts

@@ -411,6 +411,10 @@ function isEdgelessChildNote({ classList }: Element) {
   return classList.contains('edgeless-block-portal-note');
 }
 
+function isEdgelessChildImage({ classList }: Element) {
+  return classList.contains('edgeless-block-portal-image');
+}
+
 /**
  * Returns the closest block element by a point in the rect.
  *
@@ -701,6 +705,16 @@ export function getHoveringNote(point: Point) {
   );
 }
 
+/**
+ * Get hovering top level image with given a point in edgeless mode.
+ */
+export function getHoveringImage(point: Point) {
+  return (
+    document.elementsFromPoint(point.x, point.y).find(isEdgelessChildImage) ||
+    null
+  );
+}
+
 /**
  * Gets the table of the database.
  */

packages/blocks/src/_legacy/clipboard/utils/commons.ts

@@ -49,7 +49,7 @@ async function generateClipboardInfo(
     childrenJson.push(json);
   }
 
-  const service = await getService(model.flavour);
+  const service = getService(model.flavour);
 
   const html = await service.block2html(model, {
     childText: childrenHtml.join(''),

packages/blocks/src/_legacy/service/legacy-services/bookmark-service.ts

@@ -40,6 +40,7 @@ export class BookmarkBlockService extends BaseService<BookmarkBlockModel> {
   </figure>
 `;
   }
+
   override block2Text(block: BookmarkBlockModel): string {
     return block.url;
   }

packages/blocks/src/attachment-block/attachment-block.ts

@@ -135,8 +135,8 @@ export class AttachmentBlockComponent extends BlockElement<AttachmentBlockModel>
     this._disposables.add(
       AffineDragHandleWidget.registerOption({
         flavour: AttachmentBlockSchema.model.flavour,
-        onDragStart: (state, startDragging) => {
-          // Check if start dragging from the image block
+        onDragStart: ({ state, startDragging }) => {
+          // Check if start dragging from the attachment block
           const target = captureEventTarget(state.raw.target);
           const attachmentBlock = target?.closest('affine-attachment');
           if (!attachmentBlock) return false;

packages/blocks/src/attachment-block/attachment-service.ts

@@ -4,8 +4,6 @@ import {
   FileDropManager,
   type FileDropOptions,
 } from '../_common/components/file-drop-manager.js';
-import { toast } from '../_common/components/toast.js';
-import { humanFileSize } from '../_common/utils/math.js';
 import { matchFlavours } from '../_common/utils/model.js';
 import type { AttachmentBlockModel } from './attachment-model.js';
 import { addSiblingAttachmentBlock } from './utils.js';
@@ -15,7 +13,6 @@ export class AttachmentService extends BlockService<AttachmentBlockModel> {
 
   private _fileDropOptions: FileDropOptions = {
     flavour: this.flavour,
-    maxFileSize: this.maxFileSize,
     onDrop: async ({ files, targetModel, place }) => {
       if (!files.length || !targetModel) return false;
       if (matchFlavours(targetModel, ['affine:surface'])) return false;
@@ -25,22 +22,8 @@ export class AttachmentService extends BlockService<AttachmentBlockModel> {
         file => !file.type.startsWith('image/')
       );
 
-      const isSizeExceeded = attachmentFiles.some(
-        file => file.size > this.maxFileSize
-      );
-      if (isSizeExceeded) {
-        toast(
-          `You can only upload files less than ${humanFileSize(
-            this.maxFileSize,
-            true,
-            0
-          )}`
-        );
-        return true;
-      }
-
       attachmentFiles.forEach(file =>
-        addSiblingAttachmentBlock(file, targetModel, this.maxFileSize, place)
+        addSiblingAttachmentBlock(file, this.maxFileSize, targetModel, place)
       );
       return true;
     },

packages/blocks/src/attachment-block/utils.ts

@@ -169,8 +169,8 @@ export async function uploadBlobForAttachment(
  */
 export async function addSiblingAttachmentBlock(
   file: File,
-  model: BaseBlockModel,
   maxFileSize: number,
+  model: BaseBlockModel,
   place: 'before' | 'after' = 'after'
 ): Promise<string | null> {
   if (file.size > maxFileSize) {