@formicoidea/labre-core 0.23.0 → 0.23.2

package/src/_pkgs/affine-widget-drag-handle/watchers/drag-event-watcher.ts

@@ -1,1742 +1,1742 @@
-import {
-  EMBED_IFRAME_DEFAULT_HEIGHT_IN_SURFACE,
-  EMBED_IFRAME_DEFAULT_WIDTH_IN_SURFACE,
-} from '../../affine-block-embed/index.js';
-import { ParagraphBlockComponent } from '../../affine-block-paragraph/index.js';
-import { DropIndicator } from '../../affine-components/drop-indicator/index.js';
-import {
-  AttachmentBlockModel,
-  BookmarkBlockModel,
-  DatabaseBlockModel,
-  DEFAULT_NOTE_HEIGHT,
-  DEFAULT_NOTE_WIDTH,
-  type EmbedCardStyle,
-  ListBlockModel,
-  NoteBlockModel,
-  RootBlockModel,
-} from '../../affine-model/index.js';
-import { surfaceRefToEmbed } from '../../affine-shared/adapters/index.js';
-import {
-  BLOCK_CHILDREN_CONTAINER_PADDING_LEFT,
-  EMBED_CARD_HEIGHT,
-  EMBED_CARD_WIDTH,
-} from '../../affine-shared/consts/index.js';
-import {
-  DndApiExtensionIdentifier,
-  DocModeProvider,
-  EmbedIframeService,
-  TelemetryProvider,
-} from '../../affine-shared/services/index.js';
-import {
-  captureEventTarget,
-  type DropTarget as DropResult,
-  findNoteBlockModel,
-  getBlockComponentsExcludeSubtrees,
-  getRectByBlockComponent,
-  getScrollContainer,
-  matchModels,
-} from '../../affine-shared/utils/index.js';
-import {
-  Bound,
-  type IVec,
-  Point,
-  Rect,
-  type SerializedXYWH,
-} from '../../global/gfx/index.js';
-import { assertType } from '../../global/utils/index.js';
-import {
-  BlockComponent,
-  type BlockStdScope,
-  type DragFromBlockSuite,
-  type DragPayload,
-  type DropPayload,
-} from '../../std/index.js';
-import {
-  GfxBlockElementModel,
-  GfxControllerIdentifier,
-  GfxGroupLikeElementModel,
-  type GfxModel,
-  GfxPrimitiveElementModel,
-  isGfxGroupCompatibleModel,
-  isPrimitiveModel,
-  SURFACE_YMAP_UNIQ_IDENTIFIER,
-  SurfaceBlockModel,
-} from '../../std/gfx/index.js';
-import {
-  type BlockModel,
-  type BlockSnapshot,
-  internalPrimitives,
-  Slice,
-  type SliceSnapshot,
-  toDraftModel,
-} from '../../store/index.js';
-import groupBy from 'lodash-es/groupBy';
-import last from 'lodash-es/last';
-
-import type { AffineDragHandleWidget } from '../drag-handle.js';
-import { PreviewHelper } from '../helpers/preview-helper.js';
-import { gfxBlocksFilter } from '../middleware/blocks-filter.js';
-import { cardStyleUpdater } from '../middleware/card-style-updater.js';
-import { newIdCrossDoc } from '../middleware/new-id-cross-doc.js';
-import { reorderList } from '../middleware/reorder-list';
-import {
-  containBlock,
-  extractIdsFromSnapshot,
-  getParentNoteBlock,
-  getSnapshotRect,
-  includeTextSelection,
-  isOutOfNoteBlock,
-} from '../utils.js';
-
-export type DragBlockEntity = {
-  type: 'blocks';
-  /**
-   * The mode that the blocks are dragged from
-   */
-  fromMode?: 'block' | 'gfx';
-  snapshot?: SliceSnapshot;
-  modelIds: string[];
-};
-
-export type DragBlockPayload = DragPayload<DragBlockEntity, DragFromBlockSuite>;
-
-declare module '../../std/index.js' {
-  interface DNDEntity {
-    blocks: DragBlockPayload;
-  }
-}
-export class DragEventWatcher {
-  dropIndicator: null | DropIndicator = null;
-
-  previewHelper = new PreviewHelper(this.widget);
-
-  dropTargetCleanUps: Map<string, (() => void)[]> = new Map();
-
-  resetOpacityCallbacks: (() => void)[] = [];
-
-  get host() {
-    return this.widget.host;
-  }
-
-  get mode() {
-    return this.widget.mode;
-  }
-
-  get std() {
-    return this.widget.std;
-  }
-
-  get gfx() {
-    return this.widget.std.get(GfxControllerIdentifier);
-  }
-
-  private readonly _createDropIndicator = () => {
-    let topElement: HTMLElement = this.widget;
-    const body = this.widget.ownerDocument.body;
-
-    while (topElement && topElement.parentElement !== body) {
-      topElement = topElement.parentElement!;
-    }
-    const zIndex = topElement
-      ? (parseInt(window.getComputedStyle(topElement).zIndex) || 1) + 1
-      : 2;
-
-    if (!this.dropIndicator) {
-      this.dropIndicator = new DropIndicator();
-      this.dropIndicator.zIndex = zIndex;
-      this.widget.ownerDocument.body.append(this.dropIndicator);
-    }
-  };
-
-  private readonly _clearDropIndicator = () => {
-    if (this.dropIndicator) {
-      this.dropIndicator.remove();
-      this.dropIndicator = null;
-    }
-  };
-
-  private readonly _cleanup = () => {
-    this._clearDropIndicator();
-    this.widget.hide(true);
-    this.std.selection.setGroup('gfx', []);
-    this.resetOpacityCallbacks.forEach(callback => callback());
-  };
-
-  private readonly _onDragMove = (
-    point: Point,
-    payload: DragBlockPayload,
-    dropPayload: DropPayload,
-    block: BlockComponent
-  ) => {
-    this._createDropIndicator();
-    this._updateDropIndicator(point, payload, dropPayload, block);
-  };
-
-  private readonly _getFallbackInsertPlace = (block: BlockModel) => {
-    const store = this.std.store;
-    let curBlock: BlockModel | null = block;
-
-    while (curBlock) {
-      const parent = store.getParent(curBlock);
-
-      if (parent && matchModels(parent, [NoteBlockModel])) {
-        return curBlock;
-      }
-
-      curBlock = parent;
-    }
-
-    return null;
-  };
-
-  /**
-   * When dragging, should update indicator position and target drop block id
-   */
-  private readonly _getDropResult = (
-    dropBlock: BlockComponent,
-    dragPayload: DragBlockPayload,
-    dropPayload: DropPayload
-  ): DropResult | null => {
-    const dropModel = dropBlock.model;
-
-    const snapshot = dragPayload?.bsEntity?.snapshot;
-    if (
-      !snapshot ||
-      snapshot.content.length === 0 ||
-      !dragPayload?.from ||
-      matchModels(dropModel, [DatabaseBlockModel])
-    )
-      return null;
-
-    const isDropOnNoteBlock = matchModels(dropModel, [NoteBlockModel]);
-
-    const schema = this.std.store.schema;
-    const edge = dropPayload.edge;
-    const scale = this.widget.scale.peek();
-    let result: DropResult | null = null;
-
-    if (edge === 'right' && matchModels(dropModel, [ListBlockModel])) {
-      const domRect = getRectByBlockComponent(dropBlock);
-      const placement = 'in';
-
-      if (
-        snapshot.content.every(block =>
-          schema.safeValidate(block.flavour, 'affine:list')
-        )
-      ) {
-        const rect = Rect.fromLWTH(
-          domRect.left + BLOCK_CHILDREN_CONTAINER_PADDING_LEFT,
-          domRect.width - BLOCK_CHILDREN_CONTAINER_PADDING_LEFT,
-          domRect.top + domRect.height,
-          3 * scale
-        );
-
-        result = {
-          placement,
-          rect,
-          modelState: {
-            model: dropBlock.model,
-            rect: domRect,
-            element: dropBlock,
-          },
-        };
-      } else {
-        const fallbackModel = this._getFallbackInsertPlace(dropBlock.model);
-
-        if (fallbackModel) {
-          const fallbackModelView = this.std.view.getBlock(fallbackModel.id)!;
-          const domRect = fallbackModelView?.getBoundingClientRect();
-
-          result = {
-            placement: 'after',
-            rect: Rect.fromLWTH(
-              domRect.left,
-              domRect.width,
-              domRect.top + domRect.height,
-              3 * scale
-            ),
-            modelState: {
-              model: fallbackModel,
-              rect: domRect,
-              element: fallbackModelView,
-            },
-          };
-        }
-      }
-    } else {
-      const placement =
-        isDropOnNoteBlock &&
-        schema.safeValidate(snapshot.content[0].flavour, 'affine:note')
-          ? 'in'
-          : edge === 'top'
-            ? 'before'
-            : 'after';
-      const domRect = getRectByBlockComponent(dropBlock);
-      const y =
-        placement === 'after'
-          ? domRect.top + domRect.height
-          : domRect.top - 3 * scale;
-
-      result = {
-        placement,
-        rect: Rect.fromLWTH(domRect.left, domRect.width, y, 3 * scale),
-        modelState: {
-          model: dropModel,
-          rect: domRect,
-          element: dropBlock,
-        },
-      };
-    }
-
-    return result;
-  };
-
-  private readonly _updateDropIndicator = (
-    point: Point,
-    dragPayload: DragBlockPayload,
-    dropPayload: DropPayload,
-    dropBlock: BlockComponent
-  ) => {
-    const closestNoteBlock = dropBlock && getParentNoteBlock(dropBlock);
-
-    if (
-      !closestNoteBlock ||
-      isOutOfNoteBlock(
-        this.host,
-        closestNoteBlock,
-        point,
-        this.widget.scale.peek()
-      )
-    ) {
-      this._resetDropResult();
-    } else {
-      const dropResult = this._getDropResult(
-        dropBlock,
-        dragPayload,
-        dropPayload
-      );
-      this._updateDropResult(dropResult);
-    }
-  };
-
-  private readonly _resetDropResult = () => {
-    if (this.dropIndicator) this.dropIndicator.rect = null;
-  };
-
-  private readonly _updateDropResult = (dropResult: DropResult | null) => {
-    if (!this.dropIndicator) return;
-
-    if (dropResult?.rect) {
-      const { left, top, width, height } = dropResult.rect;
-      const rect = Rect.fromLWTH(left, width, top, height);
-
-      this.dropIndicator.rect = rect;
-    } else {
-      this.dropIndicator.rect = dropResult?.rect ?? null;
-    }
-  };
-
-  private readonly _getSnapshotFromSelectedGfxElms = () => {
-    const selectedElmId = this.widget.anchorBlockId.peek()!;
-    const selectedElm = this.gfx.getElementById(selectedElmId);
-
-    if (!selectedElm) {
-      return {
-        snapshot: undefined,
-      };
-    }
-
-    const getElementsInContainer = (
-      elem: GfxModel,
-      selectedElements: string[] = []
-    ) => {
-      selectedElements.push(elem.id);
-
-      if (isGfxGroupCompatibleModel(elem)) {
-        elem.childElements.forEach(child => {
-          getElementsInContainer(child, selectedElements);
-        });
-      }
-
-      return selectedElements;
-    };
-    const toSnapshotRequiredBlocks = (selectedModels: string[]) => {
-      let surfaceAdded = false;
-      const blocks: BlockModel[] = [];
-      const blocksUnderSurface: BlockModel[] = [];
-
-      selectedModels.forEach(id => {
-        const model = this.gfx.getElementById(id);
-
-        if (!model) {
-          return;
-        }
-
-        if (model instanceof GfxPrimitiveElementModel) {
-          if (surfaceAdded) return;
-          surfaceAdded = true;
-          blocks.push(this.gfx.surface!);
-        } else {
-          const parentModel = this.std.store.getParent(model);
-
-          if (matchModels(parentModel, [SurfaceBlockModel])) {
-            blocksUnderSurface.push(model);
-          } else {
-            blocks.push(model);
-          }
-        }
-      });
-
-      if (surfaceAdded) {
-        // surface children are included, so no need to add the blocksUnderSurface
-        return blocks;
-      } else {
-        return blocks.concat(blocksUnderSurface);
-      }
-    };
-
-    const selectedElements = getElementsInContainer(
-      selectedElm as GfxModel,
-      []
-    );
-    const blocksOfSnapshot = toSnapshotRequiredBlocks(selectedElements);
-
-    return {
-      snapshot: this._toSnapshot(blocksOfSnapshot, [selectedElmId]),
-    };
-  };
-
-  private readonly _getDraggedSnapshot = () => {
-    const { snapshot } =
-      this.widget.activeDragHandle === 'block'
-        ? this._getSnapshotFromHoveredBlocks()
-        : this._getSnapshotFromSelectedGfxElms();
-
-    return {
-      fromMode: this.widget.activeDragHandle!,
-      snapshot,
-    };
-  };
-
-  private readonly _getSnapshotFromHoveredBlocks = () => {
-    const hoverBlock = this.widget.anchorBlockComponent.peek()!;
-
-    let selections = this.widget.selectionHelper.selectedBlocks;
-
-    // When current selection is TextSelection
-    // Should set BlockSelection for the blocks in native range
-    if (selections.length > 0 && includeTextSelection(selections)) {
-      const nativeSelection = document.getSelection();
-      const rangeManager = this.std.range;
-
-      if (nativeSelection && nativeSelection.rangeCount > 0 && rangeManager) {
-        const range = nativeSelection.getRangeAt(0);
-        const blocks = rangeManager.getSelectedBlockComponentsByRange(range, {
-          match: el => el.model.role === 'content',
-          mode: 'highest',
-        });
-        this.widget.selectionHelper.setSelectedBlocks(blocks);
-        selections = this.widget.selectionHelper.selectedBlocks;
-      }
-    }
-
-    // When there is no selected blocks
-    // Or selected blocks not including current hover block
-    // Set current hover block as selected
-    if (
-      selections.length === 0 ||
-      !containBlock(
-        selections.map(selection => selection.blockId),
-        this.widget.anchorBlockId.peek()!
-      )
-    ) {
-      this.widget.selectionHelper.setSelectedBlocks([hoverBlock]);
-    }
-
-    const collapsedBlock: BlockComponent[] = [];
-    const blocks = this.widget.selectionHelper.selectedBlockComponents.flatMap(
-      block => {
-        // filter out collapsed siblings
-        if (collapsedBlock.includes(block)) return [];
-
-        // if block is toggled heading, should select all siblings
-        if (
-          block instanceof ParagraphBlockComponent &&
-          block.model.props.type.startsWith('h') &&
-          block.model.props.collapsed
-        ) {
-          const collapsedSiblings = block.collapsedSiblings.flatMap(
-            sibling => this.widget.host.view.getBlock(sibling.id) ?? []
-          );
-          collapsedBlock.push(...collapsedSiblings);
-          return [block, ...collapsedSiblings];
-        }
-        return [block];
-      }
-    );
-
-    // This could be skipped if we can ensure that all selected blocks are on the same level
-    // Which means not selecting parent block and child block at the same time
-    const blocksExcludingChildren = getBlockComponentsExcludeSubtrees(
-      blocks
-    ) as BlockComponent[];
-
-    return {
-      snapshot: this._toSnapshot(blocksExcludingChildren),
-    };
-  };
-
-  private readonly _onEdgelessDrop = (
-    dropBlock: BlockComponent,
-    dragPayload: DragBlockPayload,
-    dropPayload: DropPayload,
-    point: Point
-  ) => {
-    /**
-     * When drag gfx elements from edgeless editor to other editor, there's some limitation:
-     * - when drop on the place other than note block, edgeless content can't be drag and drop within the same doc
-     * - when drop on note block, handle the drop data in the same way as it in page editor,
-     *   and it will filter out the block that can't be placed under note block
-     * - drop data will be wrapped in a note block if it can't be placed under surface block or root block
-     */
-    if (matchModels(dropBlock.model, [RootBlockModel])) {
-      // can't drop edgeless content on the same doc
-      if (
-        dragPayload.bsEntity?.fromMode === 'gfx' &&
-        dragPayload.from?.docId === this.widget.store.id
-      ) {
-        return;
-      }
-
-      const surfaceBlockModel = this.gfx.surface;
-      const snapshot = dragPayload?.bsEntity?.snapshot;
-
-      if (!snapshot || !surfaceBlockModel) {
-        return;
-      }
-
-      if (dragPayload.bsEntity?.fromMode === 'gfx') {
-        this._mergeSnapshotToCurDoc(snapshot, point).catch(console.error);
-      } else {
-        this._dropAsGfxBlock(snapshot, point);
-        this.widget.selectionHelper.selection.clear(['block']);
-      }
-    } else {
-      this._onPageDrop(dropBlock, dragPayload, dropPayload, point);
-    }
-  };
-
-  private readonly _onPageDrop = (
-    dropBlock: BlockComponent,
-    dragPayload: DragBlockPayload,
-    dropPayload: DropPayload,
-    _: Point
-  ) => {
-    const result = this._getDropResult(dropBlock, dragPayload, dropPayload);
-    const snapshot = dragPayload?.bsEntity?.snapshot;
-
-    if (!result || !snapshot || snapshot.content.length === 0) return;
-
-    const store = this.std.store;
-    const schema = store.schema;
-    const model = result.modelState.model;
-    const parent =
-      result.placement === 'in' ? model : this.std.store.getParent(model)!;
-    const index =
-      result.placement === 'in'
-        ? 0
-        : parent.children.indexOf(model) +
-          (result.placement === 'before' ? 0 : 1);
-
-    if (!parent) return;
-
-    // drop on the same place, do nothing
-    if (
-      (dragPayload.from?.docId === this.widget.store.id &&
-        result.placement === 'after' &&
-        parent.children[index]?.id === snapshot.content[0].id) ||
-      (result.placement === 'before' &&
-        parent.children[index - 1]?.id === last(snapshot.content)!.id)
-    ) {
-      return;
-    }
-
-    // drop a note on other note
-    if (
-      matchModels(parent, [NoteBlockModel]) &&
-      snapshot.content.every(block => block.flavour === 'affine:note')
-    ) {
-      snapshot.content = snapshot.content.filter(
-        block =>
-          dragPayload.from?.docId !== this.widget.store.id ||
-          block.id !== parent.id
-      );
-      if (snapshot.content.length) {
-        this._onDropNoteOnNote(snapshot, parent.id, index);
-      }
-      return;
-    }
-
-    // all blocks can be safely dropped in the target parent
-    if (
-      snapshot.content.every(block =>
-        schema.safeValidate(block.flavour, parent.flavour)
-      )
-    ) {
-      this._dropToModel(snapshot, parent.id, index).catch(console.error);
-      return;
-    }
-
-    if (
-      dragPayload.bsEntity?.fromMode === 'gfx' &&
-      matchModels(parent, [NoteBlockModel])
-    ) {
-      // if the snapshot comes from the same doc, just create a surface-ref block
-      if (dragPayload.from?.docId === this.widget.store.id) {
-        let largestElem!: {
-          size: number;
-          id: string;
-          flavour: string;
-        };
-
-        const walk = (block: BlockSnapshot) => {
-          if (block.flavour === 'affine:surface') {
-            Object.values(
-              block.props.elements as Record<
-                string,
-                { id: string; xywh: SerializedXYWH; type: string }
-              >
-            ).forEach(elem => {
-              if (elem.xywh) {
-                const bound = Bound.deserialize(elem.xywh);
-                const size = bound.w * bound.h;
-                if ((largestElem?.size ?? 0) < size) {
-                  largestElem = { size, id: elem.id, flavour: elem.type };
-                }
-              }
-            });
-            block.children.forEach(walk);
-          } else {
-            if (block.props.xywh) {
-              const bound = Bound.deserialize(
-                block.props.xywh as SerializedXYWH
-              );
-              const size = bound.w * bound.h;
-              if ((largestElem?.size ?? 0) < size) {
-                largestElem = { size, id: block.id, flavour: block.flavour };
-              }
-            }
-          }
-        };
-
-        snapshot.content.forEach(walk);
-
-        if (largestElem) {
-          store.addBlock(
-            'affine:surface-ref',
-            {
-              reference: largestElem.id,
-              refFlavour: largestElem.flavour,
-            },
-            parent.id,
-            index
-          );
-        } else {
-          store.addBlock(
-            'affine:embed-linked-doc',
-            {
-              pageId: store.doc.id,
-            },
-            parent.id,
-            index
-          );
-        }
-      }
-      // otherwise, merge the snapshot into the current doc
-      // and create a surface-ref block or embed-linked-doc block
-      else {
-        this._mergeSnapshotToCurDoc(snapshot)
-          .then(idRemap => {
-            let largestElem!: {
-              size: number;
-              id: string;
-              flavour: string;
-            };
-
-            idRemap.forEach(val => {
-              const gfxElement = this.gfx.getElementById(val) as GfxModel;
-
-              if (gfxElement?.elementBound) {
-                const elemBound = gfxElement.elementBound;
-                const flavour = isPrimitiveModel(gfxElement)
-                  ? gfxElement.type
-                  : gfxElement.flavour;
-
-                largestElem =
-                  (largestElem?.size ?? 0) < elemBound.w * elemBound.h
-                    ? { size: elemBound.w * elemBound.h, id: val, flavour }
-                    : largestElem;
-              }
-            });
-
-            if (!largestElem) {
-              store.addBlock(
-                'affine:embed-linked-doc',
-                {
-                  pageId: store.doc.id,
-                },
-                parent.id,
-                index
-              );
-            } else {
-              store.addBlock(
-                'affine:surface-ref',
-                {
-                  reference: largestElem.id,
-                  refFlavour: largestElem.flavour,
-                },
-                parent.id,
-                index
-              );
-            }
-          })
-          .catch(console.error);
-      }
-    }
-  };
-
-  private readonly _onDrop = (
-    dropBlock: BlockComponent,
-    dragPayload: DragBlockPayload,
-    dropPayload: DropPayload,
-    point: Point
-  ) => {
-    this.std.store.captureSync();
-    if (this.mode === 'edgeless') {
-      this._onEdgelessDrop(dropBlock, dragPayload, dropPayload, point);
-    } else {
-      this._onPageDrop(dropBlock, dragPayload, dropPayload, point);
-    }
-  };
-
-  private readonly _onDropNoteOnNote = (
-    snapshot: SliceSnapshot,
-    parent?: string,
-    index?: number
-  ) => {
-    const [first] = snapshot.content;
-    const id = first.id;
-
-    const std = this.std;
-    const job = this._getJob();
-    const snapshotWithoutNote = {
-      ...snapshot,
-      content: first.children,
-    };
-    job
-      .snapshotToSlice(snapshotWithoutNote, std.store, parent, index)
-      .then(() => {
-        const block = std.store.getBlock(id)?.model;
-        if (block) {
-          std.store.deleteBlock(block);
-        }
-      })
-      .catch(console.error);
-  };
-
-  /**
-   * Merge the snapshot into the current existing surface model and page model.
-   * This method does the following:
-   * 1. Analyze the snapshot to build the container dependency tree
-   * 2. Merge the snapshot in the correct order to make sure all containers are created after their children
-   * @param snapshot
-   * @param point
-   */
-  private readonly _mergeSnapshotToCurDoc = async (
-    snapshot: SliceSnapshot,
-    point?: Point
-  ) => {
-    if (!point) {
-      const bound = this.gfx.elementsBound;
-      point = new Point(bound.x + bound.w, bound.y + bound.h / 2);
-    } else {
-      point = Point.from(
-        this.gfx.viewport.toModelCoordFromClientCoord([point.x, point.y])
-      );
-    }
-
-    this._rewriteSnapshotXYWH(snapshot, point);
-
-    const surface = this.gfx.surface!;
-    const root = this.std.store.root!;
-    const schema = this.std.store.schema;
-    const containerTree: Record<string, Set<string>> = { root: new Set() };
-    const idRemap = new Map<string, string>();
-    let elemMap: Record<
-      string,
-      {
-        type: string;
-        xywh?: SerializedXYWH;
-        children?: { json: Record<string, unknown> };
-      }
-    > = {};
-    const blockMap: Record<
-      string,
-      {
-        surfaceChild: boolean;
-        snapshot: BlockSnapshot;
-      }
-    > = {};
-
-    const isGroupLikeElem = (elem: { type: string }) => {
-      const constructor = surface.getConstructor(elem.type);
-      const isGroup = Object.isPrototypeOf.call(
-        GfxGroupLikeElementModel.prototype,
-        constructor.prototype
-      );
-
-      return isGroup;
-    };
-    const isGroupLikeBlock = (flavour: string) => {
-      const blockModel = schema.get(flavour)?.model.toModel?.();
-
-      return blockModel && isGfxGroupCompatibleModel(blockModel);
-    };
-
-    // walk through the snapshot to build the container dependency tree
-    const buildContainerTree = (block: BlockSnapshot) => {
-      if (block.flavour === 'affine:surface') {
-        elemMap = (block.props.elements as typeof elemMap) ?? {};
-        Object.entries(elemMap).forEach(([elemId, elem]) => {
-          if (
-            Object.values(containerTree).every(
-              childSet => !childSet.has(elemId)
-            )
-          ) {
-            containerTree['root'].add(elemId);
-          }
-
-          if (isGroupLikeElem(elem)) {
-            Object.keys(elem.children?.json ?? {}).forEach(childId => {
-              containerTree[elemId] = containerTree[elemId] ?? new Set();
-              containerTree[elemId].add(childId);
-              // if the child was already added to the root, remove it
-              containerTree['root'].delete(childId);
-            });
-            return;
-          } else if (elem.type === 'connector') {
-            assertType<{
-              type: 'connector';
-              source: { position: IVec; id?: string };
-              target: { position: IVec; id?: string };
-            }>(elem);
-
-            if (elem.source.id) {
-              containerTree[elemId] = containerTree[elemId] ?? new Set();
-              containerTree[elemId].add(elem.source.id);
-              containerTree['root'].delete(elem.source.id);
-            }
-
-            if (elem.target.id) {
-              containerTree[elemId] = containerTree[elemId] ?? new Set();
-              containerTree[elemId].add(elem.target.id);
-              containerTree['root'].delete(elem.target.id);
-            }
-          }
-        });
-
-        block.children?.forEach(buildContainerTree);
-      } else {
-        const isSurfaceChild = schema.safeValidate(
-          block.flavour,
-          'affine:surface'
-        );
-        blockMap[block.id] = {
-          surfaceChild: isSurfaceChild,
-          snapshot: block,
-        };
-
-        if (
-          Object.values(containerTree).every(
-            childSet => !childSet.has(block.id)
-          )
-        ) {
-          containerTree['root'].add(block.id);
-        }
-
-        if (isGroupLikeBlock(block.flavour)) {
-          Object.keys(block.props.childElementIds ?? {}).forEach(childId => {
-            containerTree[block.id] = containerTree[block.id] ?? new Set();
-            containerTree[block.id].add(childId);
-            // if the child was already added to the root, remove it
-            containerTree['root'].delete(childId);
-          });
-        }
-      }
-    };
-
-    snapshot.content.forEach(buildContainerTree);
-
-    const addInDependencyOrder = async (id: string) => {
-      if (containerTree[id]) {
-        for (const childId of containerTree[id]) {
-          await addInDependencyOrder(childId);
-        }
-      }
-
-      if (blockMap[id]) {
-        const { surfaceChild, snapshot: blockSnapshot } = blockMap[id];
-
-        if (isGroupLikeBlock(blockSnapshot.flavour)) {
-          Object.keys(blockSnapshot.props.childElementIds ?? {}).forEach(
-            childId => {
-              assertType<Record<string, unknown>>(
-                blockSnapshot.props.childElementIds
-              );
-
-              if (idRemap.has(childId)) {
-                const remappedId = idRemap.get(childId)!;
-                blockSnapshot.props.childElementIds[remappedId] =
-                  blockSnapshot.props.childElementIds[childId];
-                delete blockSnapshot.props.childElementIds[childId];
-              } else {
-                delete blockSnapshot.props.childElementIds[childId];
-              }
-            }
-          );
-        }
-
-        const slices = await this._dropToModel(
-          {
-            ...snapshot,
-            content: [blockSnapshot],
-          },
-          surfaceChild ? surface.id : root.id
-        );
-
-        if (slices) {
-          idRemap.set(id, slices.content[0].id);
-        }
-      } else if (elemMap[id]) {
-        const elem = elemMap[id];
-
-        Object.entries(elem).forEach(([_, val]) => {
-          if (
-            val instanceof Object &&
-            Reflect.has(val, SURFACE_YMAP_UNIQ_IDENTIFIER)
-          ) {
-            const childJson = Reflect.get(val, 'json') as Record<
-              string,
-              unknown
-            >;
-
-            Object.keys(childJson).forEach(oldChildId => {
-              if (idRemap.has(oldChildId)) {
-                const remappedId = idRemap.get(oldChildId)!;
-                const val = structuredClone(childJson[oldChildId]);
-
-                if (elem.type === 'mindmap') {
-                  assertType<{ parent?: string }>(val);
-                  if (val.parent) {
-                    val.parent = idRemap.get(val.parent);
-                  }
-                }
-                childJson[remappedId] = val;
-                delete childJson[oldChildId];
-              } else {
-                delete childJson[oldChildId];
-              }
-            });
-          }
-        });
-
-        if (elem.type === 'connector') {
-          assertType<{
-            type: 'connector';
-            source: { position: IVec; id?: string };
-            target: { position: IVec; id?: string };
-          }>(elem);
-
-          (['source', 'target'] as const).forEach(key => {
-            const endpoint = elem[key];
-            if (endpoint.id) {
-              if (idRemap.get(endpoint.id)) {
-                endpoint.id = idRemap.get(endpoint.id);
-              } else {
-                delete endpoint.id;
-              }
-            }
-          });
-        }
-
-        const newId = surface.addElement(elem);
-        idRemap.set(id, newId);
-      }
-    };
-
-    for (const id of containerTree['root']) {
-      await addInDependencyOrder(id);
-    }
-
-    return idRemap;
-  };
-
-  /**
-   * Rewrite the xywh of the snapshot to make the top left corner of the snapshot align with the point
-   * @param snapshot
-   * @param point the point in model coordinate
-   * @returns
-   */
-  private readonly _rewriteSnapshotXYWH = (
-    snapshot: SliceSnapshot,
-    point: Point,
-    ignoreOriginalPos: boolean = false
-  ) => {
-    const rect = getSnapshotRect(snapshot) ?? new Bound(0, 0, 0, 0);
-    const { x: modelX, y: modelY } = point;
-
-    const rewrite = (block: BlockSnapshot) => {
-      if (block.flavour === 'affine:surface') {
-        if (block.props.elements) {
-          Object.values(
-            block.props.elements as Record<
-              string,
-              { type: string; xywh?: SerializedXYWH }
-            >
-          ).forEach(elem => {
-            if (elem.type === 'connector') {
-              assertType<{
-                type: 'connector';
-                xywh?: SerializedXYWH;
-                source: { position: IVec; id?: string };
-                target: { position: IVec; id?: string };
-              }>(elem);
-
-              const connectorBound = elem.xywh
-                ? Bound.deserialize(elem.xywh)
-                : new Bound(0, 0, 0, 0);
-
-              delete elem.xywh;
-
-              (['source', 'target'] as const).forEach(key => {
-                const endpoint = elem[key];
-                if (!endpoint.id) {
-                  const originalPos = endpoint.position;
-
-                  elem[key] = {
-                    position: ignoreOriginalPos
-                      ? [
-                          originalPos[0] - connectorBound.x + modelX,
-                          originalPos[1] - connectorBound.y + modelY,
-                        ]
-                      : [
-                          originalPos[0] - rect.x + modelX,
-                          originalPos[1] - rect.y + modelY,
-                        ],
-                  };
-                }
-              });
-            }
-
-            if (elem.xywh) {
-              const elemBound = Bound.deserialize(elem.xywh);
-
-              if (ignoreOriginalPos) {
-                elemBound.x = modelX;
-                elemBound.y = modelY;
-                elem.xywh = elemBound.serialize();
-              } else {
-                elem.xywh = elemBound
-                  .moveDelta(-rect.x + modelX, -rect.y + modelY)
-                  .serialize();
-              }
-            }
-          });
-        }
-        block.children.forEach(rewrite);
-      } else {
-        const schema = this.std.store.schema.get(block.flavour);
-        const isGfxModel =
-          schema?.model.toModel?.() instanceof GfxBlockElementModel;
-
-        if (!isGfxModel) {
-          return;
-        }
-
-        if (!block.props.xywh) {
-          block.props.xywh =
-            schema?.model.props?.(internalPrimitives).xywh ?? '[0,0,100,100]';
-        }
-
-        const blockBound =
-          Bound.deserialize(block.props.xywh as SerializedXYWH) ??
-          new Bound(0, 0, 0, 0);
-
-        if (block.flavour === 'affine:embed-iframe') {
-          let width = EMBED_IFRAME_DEFAULT_WIDTH_IN_SURFACE;
-          let height = EMBED_IFRAME_DEFAULT_HEIGHT_IN_SURFACE;
-          if (block.props.url && typeof block.props.url === 'string') {
-            const embedIframeService = this.std.get(EmbedIframeService);
-            const options = embedIframeService.getConfig(
-              block.props.url
-            )?.options;
-            if (options) {
-              width = options.widthInSurface;
-              height = options.heightInSurface;
-            }
-          }
-          blockBound.w = width;
-          blockBound.h = height;
-        } else if (
-          block.flavour === 'affine:attachment' ||
-          block.flavour === 'affine:bookmark' ||
-          block.flavour.startsWith('affine:embed-')
-        ) {
-          const style = (block.props.style ?? 'vertical') as EmbedCardStyle;
-          block.props.style = style;
-
-          blockBound.w = EMBED_CARD_WIDTH[style];
-          blockBound.h = EMBED_CARD_HEIGHT[style];
-        }
-
-        if (block.flavour === 'affine:image') {
-          assertType<{ width: number; height: number }>(block.props);
-          blockBound.w = blockBound.w || block.props.width || 100;
-          blockBound.h = blockBound.h || block.props.height || 100;
-        }
-
-        if (ignoreOriginalPos) {
-          blockBound.x = modelX;
-          blockBound.y = modelY;
-          block.props.xywh = blockBound.serialize();
-        } else {
-          block.props.xywh = blockBound
-            .moveDelta(-rect.x + modelX, -rect.y + modelY)
-            .serialize();
-        }
-      }
-    };
-
-    snapshot.content.forEach(rewrite);
-  };
-
-  get dndExtension() {
-    return this.std.getOptional(DndApiExtensionIdentifier);
-  }
-
-  /**
-   * This method will try to drop the snapshot as gfx block directly if all blocks can be dropped as gfx block.
-   * Otherwise, it will create a linked doc to reference the original doc.
-   * @param snapshot
-   * @param point
-   */
-  private readonly _dropAsGfxBlock = (
-    snapshot: SliceSnapshot,
-    point: Point
-  ) => {
-    const store = this.widget.std.store;
-    const schema = store.schema;
-
-    point = Point.from(
-      this.gfx.viewport.toModelCoordFromClientCoord([point.x, point.y])
-    );
-
-    // check if all blocks can be dropped as gfx block
-    const groupByParent = groupBy(snapshot.content, block =>
-      schema.safeValidate(block.flavour, 'affine:surface')
-        ? 'affine:surface'
-        : schema.safeValidate(block.flavour, 'affine:page')
-          ? 'affine:page'
-          : // if the parent is not surface or page, it can't be dropped as gfx block
-            // mark it as empty
-            'empty'
-    );
-
-    // empty means all blocks can be dropped as gfx block
-    if (!groupByParent.empty?.length) {
-      // drop as children of surface or page
-
-      if (groupByParent['affine:surface']) {
-        const content = groupByParent['affine:surface'];
-        const surfaceSnapshot = {
-          ...snapshot,
-          content,
-        };
-
-        this._rewriteSnapshotXYWH(surfaceSnapshot, point, true);
-        this._dropToModel(surfaceSnapshot, this.gfx.surface!.id)
-          .then(slices => {
-            slices?.content.forEach((block, idx) => {
-              if (block.id === content[idx].id) {
-                if (block.flavour === 'affine:embed-iframe') {
-                  store.updateBlock(block.id, {
-                    xywh: content[idx].props.xywh,
-                  });
-                } else if (
-                  block.flavour === 'affine:image' ||
-                  block.flavour === 'affine:attachment' ||
-                  block.flavour === 'affine:bookmark' ||
-                  block.flavour.startsWith('affine:embed-')
-                ) {
-                  store.updateBlock(block.id, {
-                    xywh: content[idx].props.xywh,
-                    style: content[idx].props.style,
-                  });
-                }
-              }
-            });
-          })
-          .catch(console.error);
-      }
-
-      if (groupByParent['affine:page']) {
-        const content = groupByParent['affine:page'];
-        const pageSnapshot = {
-          ...snapshot,
-          content,
-        };
-
-        this._rewriteSnapshotXYWH(pageSnapshot, point, true);
-        this._dropToModel(pageSnapshot, this.widget.store.root!.id)
-          .then(slices => {
-            slices?.content.forEach((block, idx) => {
-              if (block.flavour === 'affine:embed-iframe') {
-                store.updateBlock(block.id, {
-                  xywh: content[idx].props.xywh,
-                });
-              } else if (
-                block.flavour === 'affine:attachment' ||
-                block.flavour.startsWith('affine:embed-')
-              ) {
-                store.updateBlock(block.id, {
-                  xywh: content[idx].props.xywh,
-                  style: content[idx].props.style,
-                });
-              }
-            });
-          })
-          .catch(console.error);
-      }
-    } else {
-      const dndExtApi = this.dndExtension;
-      const content = snapshot.content.filter(block =>
-        schema.safeValidate(block.flavour, 'affine:note')
-      );
-      const sourceDocId = snapshot.pageId;
-
-      if (
-        dndExtApi &&
-        this.std.store.workspace.docs.has(sourceDocId) &&
-        this.gfx.surface &&
-        snapshot.pageId !== this.std.store.doc.id
-      ) {
-        const style = 'vertical' as EmbedCardStyle;
-        const linkedDocSnapshot = dndExtApi.fromEntity({
-          docId: sourceDocId,
-          props: {
-            blockIds: content.map(block => block.id),
-            style: 'vertical',
-            xywh: new Bound(
-              point.x,
-              point.y,
-              EMBED_CARD_WIDTH[style],
-              EMBED_CARD_HEIGHT[style]
-            ).serialize(),
-          },
-        });
-
-        if (linkedDocSnapshot) {
-          this._dropToModel(linkedDocSnapshot, this.gfx.surface.id).catch(
-            console.error
-          );
-        }
-      }
-      // create note to wrap the snapshot
-      else {
-        const originalModel = store.getModelById(snapshot.content[0].id);
-        const originalNote = originalModel
-          ? findNoteBlockModel(originalModel)
-          : null;
-
-        let noteId: string;
-        if (originalNote) {
-          const placement =
-            originalNote.children[0].id === snapshot.content[0].id
-              ? 'before'
-              : 'after';
-
-          noteId = store.addSiblingBlocks(
-            originalNote,
-            [
-              {
-                flavour: 'affine:note',
-                xywh: new Bound(
-                  point.x,
-                  point.y,
-                  DEFAULT_NOTE_WIDTH,
-                  DEFAULT_NOTE_HEIGHT
-                ).serialize(),
-              },
-            ],
-            placement
-          )[0];
-        } else {
-          noteId = store.addBlock(
-            'affine:note',
-            {
-              xywh: new Bound(
-                point.x,
-                point.y,
-                DEFAULT_NOTE_WIDTH,
-                DEFAULT_NOTE_HEIGHT
-              ).serialize(),
-            },
-            this.widget.store.root!
-          );
-        }
-
-        this._dropToModel(
-          {
-            ...snapshot,
-            content,
-          },
-          noteId
-        )
-          .then(() => {
-            const telemetry = this.std.getOptional(TelemetryProvider);
-            telemetry?.track('CanvasElementAdded', {
-              page: 'whiteboard editor',
-              module: 'canvas',
-              segment: 'whiteboard',
-              control: 'canvas:drop',
-              type: 'note',
-              other: 'split-from-note',
-            });
-          })
-          .catch(console.error);
-      }
-    }
-  };
-
-  private readonly _toSnapshot = (
-    blocks: (BlockComponent | BlockModel)[],
-    selectedGfxElms?: string[]
-  ) => {
-    const slice = Slice.fromModels(
-      this.std.store,
-      blocks.map(block =>
-        toDraftModel(block instanceof BlockComponent ? block.model : block)
-      )
-    );
-    const job = this._getJob(selectedGfxElms);
-
-    const snapshot = job.sliceToSnapshot(slice);
-    if (!snapshot) return;
-
-    return snapshot;
-  };
-
-  private readonly _trackLinkedDocCreated = (id: string) => {
-    const isNewBlock = !this.std.store.hasBlock(id);
-    if (!isNewBlock) {
-      return;
-    }
-
-    const mode =
-      this.std.getOptional(DocModeProvider)?.getEditorMode() ?? 'page';
-
-    const telemetryService = this.std.getOptional(TelemetryProvider);
-    telemetryService?.track('LinkedDocCreated', {
-      control: `drop on ${mode}`,
-      module: 'drag and drop',
-      type: 'doc',
-      other: 'new doc',
-    });
-  };
-
-  private readonly _setOpacityOfDraggedBlocks = (snapshot: SliceSnapshot) => {
-    const OPACITY = 0.7;
-    const gfx = this.gfx;
-    const resetCallbacks: (() => void)[] = [];
-
-    const traverse = (block: BlockSnapshot) => {
-      if (block.flavour === 'affine:surface') {
-        block.children.forEach(traverse);
-        Object.keys(block.props.elements as Record<string, unknown>).forEach(
-          elemId => {
-            const element = gfx.getElementById(
-              elemId
-            ) as GfxPrimitiveElementModel;
-
-            if (element) {
-              const originalOpacity = element.opacity;
-              element.opacity = OPACITY;
-              resetCallbacks.push(() => {
-                element.opacity = originalOpacity;
-              });
-            }
-          }
-        );
-      } else {
-        const blockView = this.std.view.getBlock(block.id);
-
-        if (blockView) {
-          const originalOpacity = blockView.style.opacity;
-          blockView.style.opacity = `${OPACITY}`;
-          resetCallbacks.push(() => {
-            if (originalOpacity) {
-              blockView.style.opacity = originalOpacity;
-            } else {
-              blockView.style.removeProperty('opacity');
-            }
-          });
-        }
-      }
-    };
-
-    snapshot.content.forEach(traverse);
-    this.resetOpacityCallbacks = resetCallbacks;
-  };
-
-  constructor(readonly widget: AffineDragHandleWidget) {}
-
-  private async _dropToModel(
-    snapshot: SliceSnapshot,
-    parent?: string,
-    index?: number
-  ) {
-    try {
-      const std = this.std;
-      const job = this._getJob();
-
-      if (snapshot.content.length === 1) {
-        const [first] = snapshot.content;
-        if (first.flavour === 'affine:embed-linked-doc') {
-          this._trackLinkedDocCreated(first.id);
-        }
-      }
-      // use snapshot
-      const slice = await job.snapshotToSlice(
-        snapshot,
-        std.store,
-        parent,
-        index
-      );
-      return slice;
-    } catch {
-      return null;
-    }
-  }
-
-  private _getJob(selectedIds?: string[]) {
-    const std = this.std;
-    const middlewares = [
-      newIdCrossDoc(std),
-      reorderList(std),
-      surfaceRefToEmbed(std),
-      cardStyleUpdater(std),
-    ];
-
-    if (selectedIds) {
-      middlewares.push(gfxBlocksFilter(selectedIds, std));
-    }
-
-    return std.store.getTransformer(middlewares);
-  }
-
-  private _isDropOnCurrentEditor(std?: BlockStdScope) {
-    return std === this.std;
-  }
-
-  private _isUnderNoteBlock(model: BlockModel) {
-    let isUnderNote = false;
-    const store = this.std.store;
-
-    {
-      let curModel = store.getParent(model);
-
-      while (curModel) {
-        if (matchModels(curModel, [NoteBlockModel])) {
-          isUnderNote = true;
-          break;
-        }
-
-        curModel = store.getParent(curModel)!;
-      }
-    }
-
-    return isUnderNote;
-  }
-
-  private _makeDraggable(target: HTMLElement) {
-    const std = this.std;
-
-    return std.dnd.draggable<DragBlockEntity>({
-      element: target,
-      canDrag: () => (this.widget.anchorBlockId.peek() ? true : false),
-      onDragStart: () => {
-        this.widget.dragging = true;
-      },
-      onDrop: () => {
-        this._cleanup();
-      },
-      setDragPreview: ({ source, container, setOffset }) => {
-        if (
-          !source.data?.bsEntity?.modelIds.length ||
-          !source.data.bsEntity.snapshot
-        ) {
-          return;
-        }
-
-        const { snapshot, fromMode } = source.data.bsEntity;
-
-        const offset = this.previewHelper.renderDragPreview({
-          blockIds: source.data?.bsEntity?.modelIds,
-          snapshot,
-          container,
-          mode: fromMode ?? 'block',
-        });
-
-        setOffset(offset);
-      },
-      setDragData: () => {
-        const { fromMode, snapshot } = this._getDraggedSnapshot();
-
-        snapshot && this._setOpacityOfDraggedBlocks(snapshot);
-
-        return {
-          type: 'blocks',
-          fromMode,
-          modelIds: snapshot ? extractIdsFromSnapshot(snapshot) : [],
-          snapshot,
-        };
-      },
-    });
-  }
-
-  private _makeDropTarget(view: BlockComponent) {
-    const isUnderNote = this._isUnderNoteBlock(view.model);
-    const isNote = matchModels(view.model, [NoteBlockModel]);
-
-    if (
-      // affine:surface block can't be drop target in any modes
-      matchModels(view.model, [SurfaceBlockModel]) ||
-      // in page mode, blocks other than root block can be drop target
-      (this.mode === 'page' && view.model.role === 'root') ||
-      // in edgeless mode, only root and note block can be drop target
-      (this.mode === 'edgeless' &&
-        !matchModels(view.model, [NoteBlockModel]) &&
-        view.model.role !== 'root' &&
-        !isUnderNote)
-    ) {
-      return;
-    }
-
-    const widget = this.widget;
-    const cleanups: (() => void)[] = [];
-
-    cleanups.push(
-      this.std.dnd.dropTarget<
-        DragBlockEntity,
-        {
-          modelId: string;
-        }
-      >({
-        element: view,
-        getIsSticky: () => {
-          const result = this.mode === 'page' || isUnderNote;
-          return result;
-        },
-        canDrop: ({ source }) => {
-          /**
-           * general rules:
-           * 1. can't drop on the same block or its children
-           */
-          if (source.data.bsEntity?.type === 'blocks') {
-            return (
-              source.data.from?.docId !== widget.store.id ||
-              source.data.bsEntity.modelIds.every(id => id !== view.model.id)
-            );
-          }
-
-          return false;
-        },
-        onDragEnter: () => {
-          if (isNote && 'hideMask' in view) {
-            view.hideMask = true;
-          }
-        },
-        onDragLeave: () => {
-          if (isNote && 'hideMask' in view) {
-            view.hideMask = false;
-          }
-        },
-        onDrop: () => {
-          if (isNote && 'hideMask' in view) {
-            view.hideMask = false;
-          }
-        },
-        setDropData: () => {
-          return {
-            modelId: view.model.id,
-          };
-        },
-      })
-    );
-
-    if (matchModels(view.model, [AttachmentBlockModel, BookmarkBlockModel])) {
-      cleanups.push(this._makeDraggable(view));
-    }
-
-    if (this.dropTargetCleanUps.has(view.model.id)) {
-      this.dropTargetCleanUps.get(view.model.id)!.forEach(clean => clean());
-    }
-
-    this.dropTargetCleanUps.set(view.model.id, cleanups);
-  }
-
-  private _monitorBlockDrag() {
-    return this.std.dnd.monitor<DragBlockEntity>({
-      canMonitor: ({ source }) => {
-        const entity = source.data?.bsEntity;
-
-        return entity?.type === 'blocks' && !!entity.snapshot;
-      },
-      onDropTargetChange: ({ location }) => {
-        this._clearDropIndicator();
-
-        if (
-          !this._isDropOnCurrentEditor(
-            (location.current.dropTargets[0]?.element as BlockComponent)?.std
-          )
-        ) {
-          return;
-        }
-      },
-      onDrop: ({ location, source }) => {
-        this._clearDropIndicator();
-
-        if (
-          !this._isDropOnCurrentEditor(
-            (location.current.dropTargets[0]?.element as BlockComponent)?.std
-          )
-        ) {
-          return;
-        }
-
-        const target = location.current.dropTargets[0];
-        const point = new Point(
-          location.current.input.clientX,
-          location.current.input.clientY
-        );
-        const dragPayload = source.data;
-        const dropPayload = target.data;
-
-        this._onDrop(
-          target.element as BlockComponent,
-          dragPayload,
-          dropPayload,
-          point
-        );
-      },
-      onDrag: ({ location, source }) => {
-        if (
-          !this._isDropOnCurrentEditor(
-            (location.current.dropTargets[0]?.element as BlockComponent)?.std
-          ) ||
-          !location.current.dropTargets[0]
-        ) {
-          return;
-        }
-
-        const target = location.current.dropTargets[0];
-        const point = new Point(
-          location.current.input.clientX,
-          location.current.input.clientY
-        );
-        const dragPayload = source.data;
-        const dropPayload = target.data;
-
-        this._onDragMove(
-          point,
-          dragPayload,
-          dropPayload,
-          target.element as BlockComponent
-        );
-      },
-    });
-  }
-
-  watch() {
-    this.widget.handleEvent('pointerDown', ctx => {
-      const state = ctx.get('pointerState');
-      const event = state.raw;
-      const target = captureEventTarget(event.target);
-      if (!target) return;
-
-      if (this.widget.contains(target)) {
-        return true;
-      }
-
-      return;
-    });
-
-    this.widget.handleEvent('dragStart', ctx => {
-      const state = ctx.get('pointerState');
-      const event = state.raw;
-      const target = captureEventTarget(event.target);
-      if (!target) return;
-
-      if (this.widget.contains(target)) {
-        return true;
-      }
-
-      return;
-    });
-
-    const widget = this.widget;
-    const std = this.std;
-    const disposables = widget.disposables;
-    const scrollable = getScrollContainer(this.host);
-
-    if (scrollable && this.mode === 'page') {
-      disposables.add(
-        std.dnd.autoScroll<DragBlockEntity>({
-          element: scrollable,
-          canScroll: ({ source }) => {
-            return source.data?.bsEntity?.type === 'blocks';
-          },
-        })
-      );
-    }
-
-    disposables.add(this._makeDraggable(this.widget));
-
-    // used to handle drag move and drop
-    disposables.add(this._monitorBlockDrag());
-
-    disposables.add(
-      std.view.viewUpdated.subscribe(payload => {
-        if (payload.type !== 'block') {
-          return;
-        }
-        if (payload.method === 'add') {
-          this._makeDropTarget(payload.view);
-        } else if (
-          payload.method === 'delete' &&
-          this.dropTargetCleanUps.has(payload.id)
-        ) {
-          this.dropTargetCleanUps.get(payload.id)!.forEach(clean => clean());
-          this.dropTargetCleanUps.delete(payload.id);
-        }
-      })
-    );
-
-    std.view.views.forEach(block => this._makeDropTarget(block));
-
-    disposables.add(() => {
-      this.dropTargetCleanUps.forEach(cleanUps => cleanUps.forEach(fn => fn()));
-      this.dropTargetCleanUps.clear();
-    });
-  }
-}
+import {
+  EMBED_IFRAME_DEFAULT_HEIGHT_IN_SURFACE,
+  EMBED_IFRAME_DEFAULT_WIDTH_IN_SURFACE,
+} from '../../affine-block-embed/index.js';
+import { ParagraphBlockComponent } from '../../affine-block-paragraph/index.js';
+import { DropIndicator } from '../../affine-components/drop-indicator/index.js';
+import {
+  AttachmentBlockModel,
+  BookmarkBlockModel,
+  DatabaseBlockModel,
+  DEFAULT_NOTE_HEIGHT,
+  DEFAULT_NOTE_WIDTH,
+  type EmbedCardStyle,
+  ListBlockModel,
+  NoteBlockModel,
+  RootBlockModel,
+} from '../../affine-model/index.js';
+import { surfaceRefToEmbed } from '../../affine-shared/adapters/index.js';
+import {
+  BLOCK_CHILDREN_CONTAINER_PADDING_LEFT,
+  EMBED_CARD_HEIGHT,
+  EMBED_CARD_WIDTH,
+} from '../../affine-shared/consts/index.js';
+import {
+  DndApiExtensionIdentifier,
+  DocModeProvider,
+  EmbedIframeService,
+  TelemetryProvider,
+} from '../../affine-shared/services/index.js';
+import {
+  captureEventTarget,
+  type DropTarget as DropResult,
+  findNoteBlockModel,
+  getBlockComponentsExcludeSubtrees,
+  getRectByBlockComponent,
+  getScrollContainer,
+  matchModels,
+} from '../../affine-shared/utils/index.js';
+import {
+  Bound,
+  type IVec,
+  Point,
+  Rect,
+  type SerializedXYWH,
+} from '../../global/gfx/index.js';
+import { assertType } from '../../global/utils/index.js';
+import {
+  BlockComponent,
+  type BlockStdScope,
+  type DragFromBlockSuite,
+  type DragPayload,
+  type DropPayload,
+} from '../../std/index.js';
+import {
+  GfxBlockElementModel,
+  GfxControllerIdentifier,
+  GfxGroupLikeElementModel,
+  type GfxModel,
+  GfxPrimitiveElementModel,
+  isGfxGroupCompatibleModel,
+  isPrimitiveModel,
+  SURFACE_YMAP_UNIQ_IDENTIFIER,
+  SurfaceBlockModel,
+} from '../../std/gfx/index.js';
+import {
+  type BlockModel,
+  type BlockSnapshot,
+  internalPrimitives,
+  Slice,
+  type SliceSnapshot,
+  toDraftModel,
+} from '../../store/index.js';
+import groupBy from 'lodash-es/groupBy';
+import last from 'lodash-es/last';
+
+import type { AffineDragHandleWidget } from '../drag-handle.js';
+import { PreviewHelper } from '../helpers/preview-helper.js';
+import { gfxBlocksFilter } from '../middleware/blocks-filter.js';
+import { cardStyleUpdater } from '../middleware/card-style-updater.js';
+import { newIdCrossDoc } from '../middleware/new-id-cross-doc.js';
+import { reorderList } from '../middleware/reorder-list';
+import {
+  containBlock,
+  extractIdsFromSnapshot,
+  getParentNoteBlock,
+  getSnapshotRect,
+  includeTextSelection,
+  isOutOfNoteBlock,
+} from '../utils.js';
+
+export type DragBlockEntity = {
+  type: 'blocks';
+  /**
+   * The mode that the blocks are dragged from
+   */
+  fromMode?: 'block' | 'gfx';
+  snapshot?: SliceSnapshot;
+  modelIds: string[];
+};
+
+export type DragBlockPayload = DragPayload<DragBlockEntity, DragFromBlockSuite>;
+
+declare module '../../std/index.js' {
+  interface DNDEntity {
+    blocks: DragBlockPayload;
+  }
+}
+export class DragEventWatcher {
+  dropIndicator: null | DropIndicator = null;
+
+  previewHelper = new PreviewHelper(this.widget);
+
+  dropTargetCleanUps: Map<string, (() => void)[]> = new Map();
+
+  resetOpacityCallbacks: (() => void)[] = [];
+
+  get host() {
+    return this.widget.host;
+  }
+
+  get mode() {
+    return this.widget.mode;
+  }
+
+  get std() {
+    return this.widget.std;
+  }
+
+  get gfx() {
+    return this.widget.std.get(GfxControllerIdentifier);
+  }
+
+  private readonly _createDropIndicator = () => {
+    let topElement: HTMLElement = this.widget;
+    const body = this.widget.ownerDocument.body;
+
+    while (topElement && topElement.parentElement !== body) {
+      topElement = topElement.parentElement!;
+    }
+    const zIndex = topElement
+      ? (parseInt(window.getComputedStyle(topElement).zIndex) || 1) + 1
+      : 2;
+
+    if (!this.dropIndicator) {
+      this.dropIndicator = new DropIndicator();
+      this.dropIndicator.zIndex = zIndex;
+      this.widget.ownerDocument.body.append(this.dropIndicator);
+    }
+  };
+
+  private readonly _clearDropIndicator = () => {
+    if (this.dropIndicator) {
+      this.dropIndicator.remove();
+      this.dropIndicator = null;
+    }
+  };
+
+  private readonly _cleanup = () => {
+    this._clearDropIndicator();
+    this.widget.hide(true);
+    this.std.selection.setGroup('gfx', []);
+    this.resetOpacityCallbacks.forEach(callback => callback());
+  };
+
+  private readonly _onDragMove = (
+    point: Point,
+    payload: DragBlockPayload,
+    dropPayload: DropPayload,
+    block: BlockComponent
+  ) => {
+    this._createDropIndicator();
+    this._updateDropIndicator(point, payload, dropPayload, block);
+  };
+
+  private readonly _getFallbackInsertPlace = (block: BlockModel) => {
+    const store = this.std.store;
+    let curBlock: BlockModel | null = block;
+
+    while (curBlock) {
+      const parent = store.getParent(curBlock);
+
+      if (parent && matchModels(parent, [NoteBlockModel])) {
+        return curBlock;
+      }
+
+      curBlock = parent;
+    }
+
+    return null;
+  };
+
+  /**
+   * When dragging, should update indicator position and target drop block id
+   */
+  private readonly _getDropResult = (
+    dropBlock: BlockComponent,
+    dragPayload: DragBlockPayload,
+    dropPayload: DropPayload
+  ): DropResult | null => {
+    const dropModel = dropBlock.model;
+
+    const snapshot = dragPayload?.bsEntity?.snapshot;
+    if (
+      !snapshot ||
+      snapshot.content.length === 0 ||
+      !dragPayload?.from ||
+      matchModels(dropModel, [DatabaseBlockModel])
+    )
+      return null;
+
+    const isDropOnNoteBlock = matchModels(dropModel, [NoteBlockModel]);
+
+    const schema = this.std.store.schema;
+    const edge = dropPayload.edge;
+    const scale = this.widget.scale.peek();
+    let result: DropResult | null = null;
+
+    if (edge === 'right' && matchModels(dropModel, [ListBlockModel])) {
+      const domRect = getRectByBlockComponent(dropBlock);
+      const placement = 'in';
+
+      if (
+        snapshot.content.every(block =>
+          schema.safeValidate(block.flavour, 'affine:list')
+        )
+      ) {
+        const rect = Rect.fromLWTH(
+          domRect.left + BLOCK_CHILDREN_CONTAINER_PADDING_LEFT,
+          domRect.width - BLOCK_CHILDREN_CONTAINER_PADDING_LEFT,
+          domRect.top + domRect.height,
+          3 * scale
+        );
+
+        result = {
+          placement,
+          rect,
+          modelState: {
+            model: dropBlock.model,
+            rect: domRect,
+            element: dropBlock,
+          },
+        };
+      } else {
+        const fallbackModel = this._getFallbackInsertPlace(dropBlock.model);
+
+        if (fallbackModel) {
+          const fallbackModelView = this.std.view.getBlock(fallbackModel.id)!;
+          const domRect = fallbackModelView?.getBoundingClientRect();
+
+          result = {
+            placement: 'after',
+            rect: Rect.fromLWTH(
+              domRect.left,
+              domRect.width,
+              domRect.top + domRect.height,
+              3 * scale
+            ),
+            modelState: {
+              model: fallbackModel,
+              rect: domRect,
+              element: fallbackModelView,
+            },
+          };
+        }
+      }
+    } else {
+      const placement =
+        isDropOnNoteBlock &&
+        schema.safeValidate(snapshot.content[0].flavour, 'affine:note')
+          ? 'in'
+          : edge === 'top'
+            ? 'before'
+            : 'after';
+      const domRect = getRectByBlockComponent(dropBlock);
+      const y =
+        placement === 'after'
+          ? domRect.top + domRect.height
+          : domRect.top - 3 * scale;
+
+      result = {
+        placement,
+        rect: Rect.fromLWTH(domRect.left, domRect.width, y, 3 * scale),
+        modelState: {
+          model: dropModel,
+          rect: domRect,
+          element: dropBlock,
+        },
+      };
+    }
+
+    return result;
+  };
+
+  private readonly _updateDropIndicator = (
+    point: Point,
+    dragPayload: DragBlockPayload,
+    dropPayload: DropPayload,
+    dropBlock: BlockComponent
+  ) => {
+    const closestNoteBlock = dropBlock && getParentNoteBlock(dropBlock);
+
+    if (
+      !closestNoteBlock ||
+      isOutOfNoteBlock(
+        this.host,
+        closestNoteBlock,
+        point,
+        this.widget.scale.peek()
+      )
+    ) {
+      this._resetDropResult();
+    } else {
+      const dropResult = this._getDropResult(
+        dropBlock,
+        dragPayload,
+        dropPayload
+      );
+      this._updateDropResult(dropResult);
+    }
+  };
+
+  private readonly _resetDropResult = () => {
+    if (this.dropIndicator) this.dropIndicator.rect = null;
+  };
+
+  private readonly _updateDropResult = (dropResult: DropResult | null) => {
+    if (!this.dropIndicator) return;
+
+    if (dropResult?.rect) {
+      const { left, top, width, height } = dropResult.rect;
+      const rect = Rect.fromLWTH(left, width, top, height);
+
+      this.dropIndicator.rect = rect;
+    } else {
+      this.dropIndicator.rect = dropResult?.rect ?? null;
+    }
+  };
+
+  private readonly _getSnapshotFromSelectedGfxElms = () => {
+    const selectedElmId = this.widget.anchorBlockId.peek()!;
+    const selectedElm = this.gfx.getElementById(selectedElmId);
+
+    if (!selectedElm) {
+      return {
+        snapshot: undefined,
+      };
+    }
+
+    const getElementsInContainer = (
+      elem: GfxModel,
+      selectedElements: string[] = []
+    ) => {
+      selectedElements.push(elem.id);
+
+      if (isGfxGroupCompatibleModel(elem)) {
+        elem.childElements.forEach(child => {
+          getElementsInContainer(child, selectedElements);
+        });
+      }
+
+      return selectedElements;
+    };
+    const toSnapshotRequiredBlocks = (selectedModels: string[]) => {
+      let surfaceAdded = false;
+      const blocks: BlockModel[] = [];
+      const blocksUnderSurface: BlockModel[] = [];
+
+      selectedModels.forEach(id => {
+        const model = this.gfx.getElementById(id);
+
+        if (!model) {
+          return;
+        }
+
+        if (model instanceof GfxPrimitiveElementModel) {
+          if (surfaceAdded) return;
+          surfaceAdded = true;
+          blocks.push(this.gfx.surface!);
+        } else {
+          const parentModel = this.std.store.getParent(model);
+
+          if (matchModels(parentModel, [SurfaceBlockModel])) {
+            blocksUnderSurface.push(model);
+          } else {
+            blocks.push(model);
+          }
+        }
+      });
+
+      if (surfaceAdded) {
+        // surface children are included, so no need to add the blocksUnderSurface
+        return blocks;
+      } else {
+        return blocks.concat(blocksUnderSurface);
+      }
+    };
+
+    const selectedElements = getElementsInContainer(
+      selectedElm as GfxModel,
+      []
+    );
+    const blocksOfSnapshot = toSnapshotRequiredBlocks(selectedElements);
+
+    return {
+      snapshot: this._toSnapshot(blocksOfSnapshot, [selectedElmId]),
+    };
+  };
+
+  private readonly _getDraggedSnapshot = () => {
+    const { snapshot } =
+      this.widget.activeDragHandle === 'block'
+        ? this._getSnapshotFromHoveredBlocks()
+        : this._getSnapshotFromSelectedGfxElms();
+
+    return {
+      fromMode: this.widget.activeDragHandle!,
+      snapshot,
+    };
+  };
+
+  private readonly _getSnapshotFromHoveredBlocks = () => {
+    const hoverBlock = this.widget.anchorBlockComponent.peek()!;
+
+    let selections = this.widget.selectionHelper.selectedBlocks;
+
+    // When current selection is TextSelection
+    // Should set BlockSelection for the blocks in native range
+    if (selections.length > 0 && includeTextSelection(selections)) {
+      const nativeSelection = document.getSelection();
+      const rangeManager = this.std.range;
+
+      if (nativeSelection && nativeSelection.rangeCount > 0 && rangeManager) {
+        const range = nativeSelection.getRangeAt(0);
+        const blocks = rangeManager.getSelectedBlockComponentsByRange(range, {
+          match: el => el.model.role === 'content',
+          mode: 'highest',
+        });
+        this.widget.selectionHelper.setSelectedBlocks(blocks);
+        selections = this.widget.selectionHelper.selectedBlocks;
+      }
+    }
+
+    // When there is no selected blocks
+    // Or selected blocks not including current hover block
+    // Set current hover block as selected
+    if (
+      selections.length === 0 ||
+      !containBlock(
+        selections.map(selection => selection.blockId),
+        this.widget.anchorBlockId.peek()!
+      )
+    ) {
+      this.widget.selectionHelper.setSelectedBlocks([hoverBlock]);
+    }
+
+    const collapsedBlock: BlockComponent[] = [];
+    const blocks = this.widget.selectionHelper.selectedBlockComponents.flatMap(
+      block => {
+        // filter out collapsed siblings
+        if (collapsedBlock.includes(block)) return [];
+
+        // if block is toggled heading, should select all siblings
+        if (
+          block instanceof ParagraphBlockComponent &&
+          block.model.props.type.startsWith('h') &&
+          block.model.props.collapsed
+        ) {
+          const collapsedSiblings = block.collapsedSiblings.flatMap(
+            sibling => this.widget.host.view.getBlock(sibling.id) ?? []
+          );
+          collapsedBlock.push(...collapsedSiblings);
+          return [block, ...collapsedSiblings];
+        }
+        return [block];
+      }
+    );
+
+    // This could be skipped if we can ensure that all selected blocks are on the same level
+    // Which means not selecting parent block and child block at the same time
+    const blocksExcludingChildren = getBlockComponentsExcludeSubtrees(
+      blocks
+    ) as BlockComponent[];
+
+    return {
+      snapshot: this._toSnapshot(blocksExcludingChildren),
+    };
+  };
+
+  private readonly _onEdgelessDrop = (
+    dropBlock: BlockComponent,
+    dragPayload: DragBlockPayload,
+    dropPayload: DropPayload,
+    point: Point
+  ) => {
+    /**
+     * When drag gfx elements from edgeless editor to other editor, there's some limitation:
+     * - when drop on the place other than note block, edgeless content can't be drag and drop within the same doc
+     * - when drop on note block, handle the drop data in the same way as it in page editor,
+     *   and it will filter out the block that can't be placed under note block
+     * - drop data will be wrapped in a note block if it can't be placed under surface block or root block
+     */
+    if (matchModels(dropBlock.model, [RootBlockModel])) {
+      // can't drop edgeless content on the same doc
+      if (
+        dragPayload.bsEntity?.fromMode === 'gfx' &&
+        dragPayload.from?.docId === this.widget.store.id
+      ) {
+        return;
+      }
+
+      const surfaceBlockModel = this.gfx.surface;
+      const snapshot = dragPayload?.bsEntity?.snapshot;
+
+      if (!snapshot || !surfaceBlockModel) {
+        return;
+      }
+
+      if (dragPayload.bsEntity?.fromMode === 'gfx') {
+        this._mergeSnapshotToCurDoc(snapshot, point).catch(console.error);
+      } else {
+        this._dropAsGfxBlock(snapshot, point);
+        this.widget.selectionHelper.selection.clear(['block']);
+      }
+    } else {
+      this._onPageDrop(dropBlock, dragPayload, dropPayload, point);
+    }
+  };
+
+  private readonly _onPageDrop = (
+    dropBlock: BlockComponent,
+    dragPayload: DragBlockPayload,
+    dropPayload: DropPayload,
+    _: Point
+  ) => {
+    const result = this._getDropResult(dropBlock, dragPayload, dropPayload);
+    const snapshot = dragPayload?.bsEntity?.snapshot;
+
+    if (!result || !snapshot || snapshot.content.length === 0) return;
+
+    const store = this.std.store;
+    const schema = store.schema;
+    const model = result.modelState.model;
+    const parent =
+      result.placement === 'in' ? model : this.std.store.getParent(model)!;
+    const index =
+      result.placement === 'in'
+        ? 0
+        : parent.children.indexOf(model) +
+          (result.placement === 'before' ? 0 : 1);
+
+    if (!parent) return;
+
+    // drop on the same place, do nothing
+    if (
+      (dragPayload.from?.docId === this.widget.store.id &&
+        result.placement === 'after' &&
+        parent.children[index]?.id === snapshot.content[0].id) ||
+      (result.placement === 'before' &&
+        parent.children[index - 1]?.id === last(snapshot.content)!.id)
+    ) {
+      return;
+    }
+
+    // drop a note on other note
+    if (
+      matchModels(parent, [NoteBlockModel]) &&
+      snapshot.content.every(block => block.flavour === 'affine:note')
+    ) {
+      snapshot.content = snapshot.content.filter(
+        block =>
+          dragPayload.from?.docId !== this.widget.store.id ||
+          block.id !== parent.id
+      );
+      if (snapshot.content.length) {
+        this._onDropNoteOnNote(snapshot, parent.id, index);
+      }
+      return;
+    }
+
+    // all blocks can be safely dropped in the target parent
+    if (
+      snapshot.content.every(block =>
+        schema.safeValidate(block.flavour, parent.flavour)
+      )
+    ) {
+      this._dropToModel(snapshot, parent.id, index).catch(console.error);
+      return;
+    }
+
+    if (
+      dragPayload.bsEntity?.fromMode === 'gfx' &&
+      matchModels(parent, [NoteBlockModel])
+    ) {
+      // if the snapshot comes from the same doc, just create a surface-ref block
+      if (dragPayload.from?.docId === this.widget.store.id) {
+        let largestElem!: {
+          size: number;
+          id: string;
+          flavour: string;
+        };
+
+        const walk = (block: BlockSnapshot) => {
+          if (block.flavour === 'affine:surface') {
+            Object.values(
+              block.props.elements as Record<
+                string,
+                { id: string; xywh: SerializedXYWH; type: string }
+              >
+            ).forEach(elem => {
+              if (elem.xywh) {
+                const bound = Bound.deserialize(elem.xywh);
+                const size = bound.w * bound.h;
+                if ((largestElem?.size ?? 0) < size) {
+                  largestElem = { size, id: elem.id, flavour: elem.type };
+                }
+              }
+            });
+            block.children.forEach(walk);
+          } else {
+            if (block.props.xywh) {
+              const bound = Bound.deserialize(
+                block.props.xywh as SerializedXYWH
+              );
+              const size = bound.w * bound.h;
+              if ((largestElem?.size ?? 0) < size) {
+                largestElem = { size, id: block.id, flavour: block.flavour };
+              }
+            }
+          }
+        };
+
+        snapshot.content.forEach(walk);
+
+        if (largestElem) {
+          store.addBlock(
+            'affine:surface-ref',
+            {
+              reference: largestElem.id,
+              refFlavour: largestElem.flavour,
+            },
+            parent.id,
+            index
+          );
+        } else {
+          store.addBlock(
+            'affine:embed-linked-doc',
+            {
+              pageId: store.doc.id,
+            },
+            parent.id,
+            index
+          );
+        }
+      }
+      // otherwise, merge the snapshot into the current doc
+      // and create a surface-ref block or embed-linked-doc block
+      else {
+        this._mergeSnapshotToCurDoc(snapshot)
+          .then(idRemap => {
+            let largestElem!: {
+              size: number;
+              id: string;
+              flavour: string;
+            };
+
+            idRemap.forEach(val => {
+              const gfxElement = this.gfx.getElementById(val) as GfxModel;
+
+              if (gfxElement?.elementBound) {
+                const elemBound = gfxElement.elementBound;
+                const flavour = isPrimitiveModel(gfxElement)
+                  ? gfxElement.type
+                  : gfxElement.flavour;
+
+                largestElem =
+                  (largestElem?.size ?? 0) < elemBound.w * elemBound.h
+                    ? { size: elemBound.w * elemBound.h, id: val, flavour }
+                    : largestElem;
+              }
+            });
+
+            if (!largestElem) {
+              store.addBlock(
+                'affine:embed-linked-doc',
+                {
+                  pageId: store.doc.id,
+                },
+                parent.id,
+                index
+              );
+            } else {
+              store.addBlock(
+                'affine:surface-ref',
+                {
+                  reference: largestElem.id,
+                  refFlavour: largestElem.flavour,
+                },
+                parent.id,
+                index
+              );
+            }
+          })
+          .catch(console.error);
+      }
+    }
+  };
+
+  private readonly _onDrop = (
+    dropBlock: BlockComponent,
+    dragPayload: DragBlockPayload,
+    dropPayload: DropPayload,
+    point: Point
+  ) => {
+    this.std.store.captureSync();
+    if (this.mode === 'edgeless') {
+      this._onEdgelessDrop(dropBlock, dragPayload, dropPayload, point);
+    } else {
+      this._onPageDrop(dropBlock, dragPayload, dropPayload, point);
+    }
+  };
+
+  private readonly _onDropNoteOnNote = (
+    snapshot: SliceSnapshot,
+    parent?: string,
+    index?: number
+  ) => {
+    const [first] = snapshot.content;
+    const id = first.id;
+
+    const std = this.std;
+    const job = this._getJob();
+    const snapshotWithoutNote = {
+      ...snapshot,
+      content: first.children,
+    };
+    job
+      .snapshotToSlice(snapshotWithoutNote, std.store, parent, index)
+      .then(() => {
+        const block = std.store.getBlock(id)?.model;
+        if (block) {
+          std.store.deleteBlock(block);
+        }
+      })
+      .catch(console.error);
+  };
+
+  /**
+   * Merge the snapshot into the current existing surface model and page model.
+   * This method does the following:
+   * 1. Analyze the snapshot to build the container dependency tree
+   * 2. Merge the snapshot in the correct order to make sure all containers are created after their children
+   * @param snapshot
+   * @param point
+   */
+  private readonly _mergeSnapshotToCurDoc = async (
+    snapshot: SliceSnapshot,
+    point?: Point
+  ) => {
+    if (!point) {
+      const bound = this.gfx.elementsBound;
+      point = new Point(bound.x + bound.w, bound.y + bound.h / 2);
+    } else {
+      point = Point.from(
+        this.gfx.viewport.toModelCoordFromClientCoord([point.x, point.y])
+      );
+    }
+
+    this._rewriteSnapshotXYWH(snapshot, point);
+
+    const surface = this.gfx.surface!;
+    const root = this.std.store.root!;
+    const schema = this.std.store.schema;
+    const containerTree: Record<string, Set<string>> = { root: new Set() };
+    const idRemap = new Map<string, string>();
+    let elemMap: Record<
+      string,
+      {
+        type: string;
+        xywh?: SerializedXYWH;
+        children?: { json: Record<string, unknown> };
+      }
+    > = {};
+    const blockMap: Record<
+      string,
+      {
+        surfaceChild: boolean;
+        snapshot: BlockSnapshot;
+      }
+    > = {};
+
+    const isGroupLikeElem = (elem: { type: string }) => {
+      const constructor = surface.getConstructor(elem.type);
+      const isGroup = Object.isPrototypeOf.call(
+        GfxGroupLikeElementModel.prototype,
+        constructor.prototype
+      );
+
+      return isGroup;
+    };
+    const isGroupLikeBlock = (flavour: string) => {
+      const blockModel = schema.get(flavour)?.model.toModel?.();
+
+      return blockModel && isGfxGroupCompatibleModel(blockModel);
+    };
+
+    // walk through the snapshot to build the container dependency tree
+    const buildContainerTree = (block: BlockSnapshot) => {
+      if (block.flavour === 'affine:surface') {
+        elemMap = (block.props.elements as typeof elemMap) ?? {};
+        Object.entries(elemMap).forEach(([elemId, elem]) => {
+          if (
+            Object.values(containerTree).every(
+              childSet => !childSet.has(elemId)
+            )
+          ) {
+            containerTree['root'].add(elemId);
+          }
+
+          if (isGroupLikeElem(elem)) {
+            Object.keys(elem.children?.json ?? {}).forEach(childId => {
+              containerTree[elemId] = containerTree[elemId] ?? new Set();
+              containerTree[elemId].add(childId);
+              // if the child was already added to the root, remove it
+              containerTree['root'].delete(childId);
+            });
+            return;
+          } else if (elem.type === 'connector') {
+            assertType<{
+              type: 'connector';
+              source: { position: IVec; id?: string };
+              target: { position: IVec; id?: string };
+            }>(elem);
+
+            if (elem.source.id) {
+              containerTree[elemId] = containerTree[elemId] ?? new Set();
+              containerTree[elemId].add(elem.source.id);
+              containerTree['root'].delete(elem.source.id);
+            }
+
+            if (elem.target.id) {
+              containerTree[elemId] = containerTree[elemId] ?? new Set();
+              containerTree[elemId].add(elem.target.id);
+              containerTree['root'].delete(elem.target.id);
+            }
+          }
+        });
+
+        block.children?.forEach(buildContainerTree);
+      } else {
+        const isSurfaceChild = schema.safeValidate(
+          block.flavour,
+          'affine:surface'
+        );
+        blockMap[block.id] = {
+          surfaceChild: isSurfaceChild,
+          snapshot: block,
+        };
+
+        if (
+          Object.values(containerTree).every(
+            childSet => !childSet.has(block.id)
+          )
+        ) {
+          containerTree['root'].add(block.id);
+        }
+
+        if (isGroupLikeBlock(block.flavour)) {
+          Object.keys(block.props.childElementIds ?? {}).forEach(childId => {
+            containerTree[block.id] = containerTree[block.id] ?? new Set();
+            containerTree[block.id].add(childId);
+            // if the child was already added to the root, remove it
+            containerTree['root'].delete(childId);
+          });
+        }
+      }
+    };
+
+    snapshot.content.forEach(buildContainerTree);
+
+    const addInDependencyOrder = async (id: string) => {
+      if (containerTree[id]) {
+        for (const childId of containerTree[id]) {
+          await addInDependencyOrder(childId);
+        }
+      }
+
+      if (blockMap[id]) {
+        const { surfaceChild, snapshot: blockSnapshot } = blockMap[id];
+
+        if (isGroupLikeBlock(blockSnapshot.flavour)) {
+          Object.keys(blockSnapshot.props.childElementIds ?? {}).forEach(
+            childId => {
+              assertType<Record<string, unknown>>(
+                blockSnapshot.props.childElementIds
+              );
+
+              if (idRemap.has(childId)) {
+                const remappedId = idRemap.get(childId)!;
+                blockSnapshot.props.childElementIds[remappedId] =
+                  blockSnapshot.props.childElementIds[childId];
+                delete blockSnapshot.props.childElementIds[childId];
+              } else {
+                delete blockSnapshot.props.childElementIds[childId];
+              }
+            }
+          );
+        }
+
+        const slices = await this._dropToModel(
+          {
+            ...snapshot,
+            content: [blockSnapshot],
+          },
+          surfaceChild ? surface.id : root.id
+        );
+
+        if (slices) {
+          idRemap.set(id, slices.content[0].id);
+        }
+      } else if (elemMap[id]) {
+        const elem = elemMap[id];
+
+        Object.entries(elem).forEach(([_, val]) => {
+          if (
+            val instanceof Object &&
+            Reflect.has(val, SURFACE_YMAP_UNIQ_IDENTIFIER)
+          ) {
+            const childJson = Reflect.get(val, 'json') as Record<
+              string,
+              unknown
+            >;
+
+            Object.keys(childJson).forEach(oldChildId => {
+              if (idRemap.has(oldChildId)) {
+                const remappedId = idRemap.get(oldChildId)!;
+                const val = structuredClone(childJson[oldChildId]);
+
+                if (elem.type === 'mindmap') {
+                  assertType<{ parent?: string }>(val);
+                  if (val.parent) {
+                    val.parent = idRemap.get(val.parent);
+                  }
+                }
+                childJson[remappedId] = val;
+                delete childJson[oldChildId];
+              } else {
+                delete childJson[oldChildId];
+              }
+            });
+          }
+        });
+
+        if (elem.type === 'connector') {
+          assertType<{
+            type: 'connector';
+            source: { position: IVec; id?: string };
+            target: { position: IVec; id?: string };
+          }>(elem);
+
+          (['source', 'target'] as const).forEach(key => {
+            const endpoint = elem[key];
+            if (endpoint.id) {
+              if (idRemap.get(endpoint.id)) {
+                endpoint.id = idRemap.get(endpoint.id);
+              } else {
+                delete endpoint.id;
+              }
+            }
+          });
+        }
+
+        const newId = surface.addElement(elem);
+        idRemap.set(id, newId);
+      }
+    };
+
+    for (const id of containerTree['root']) {
+      await addInDependencyOrder(id);
+    }
+
+    return idRemap;
+  };
+
+  /**
+   * Rewrite the xywh of the snapshot to make the top left corner of the snapshot align with the point
+   * @param snapshot
+   * @param point the point in model coordinate
+   * @returns
+   */
+  private readonly _rewriteSnapshotXYWH = (
+    snapshot: SliceSnapshot,
+    point: Point,
+    ignoreOriginalPos: boolean = false
+  ) => {
+    const rect = getSnapshotRect(snapshot) ?? new Bound(0, 0, 0, 0);
+    const { x: modelX, y: modelY } = point;
+
+    const rewrite = (block: BlockSnapshot) => {
+      if (block.flavour === 'affine:surface') {
+        if (block.props.elements) {
+          Object.values(
+            block.props.elements as Record<
+              string,
+              { type: string; xywh?: SerializedXYWH }
+            >
+          ).forEach(elem => {
+            if (elem.type === 'connector') {
+              assertType<{
+                type: 'connector';
+                xywh?: SerializedXYWH;
+                source: { position: IVec; id?: string };
+                target: { position: IVec; id?: string };
+              }>(elem);
+
+              const connectorBound = elem.xywh
+                ? Bound.deserialize(elem.xywh)
+                : new Bound(0, 0, 0, 0);
+
+              delete elem.xywh;
+
+              (['source', 'target'] as const).forEach(key => {
+                const endpoint = elem[key];
+                if (!endpoint.id) {
+                  const originalPos = endpoint.position;
+
+                  elem[key] = {
+                    position: ignoreOriginalPos
+                      ? [
+                          originalPos[0] - connectorBound.x + modelX,
+                          originalPos[1] - connectorBound.y + modelY,
+                        ]
+                      : [
+                          originalPos[0] - rect.x + modelX,
+                          originalPos[1] - rect.y + modelY,
+                        ],
+                  };
+                }
+              });
+            }
+
+            if (elem.xywh) {
+              const elemBound = Bound.deserialize(elem.xywh);
+
+              if (ignoreOriginalPos) {
+                elemBound.x = modelX;
+                elemBound.y = modelY;
+                elem.xywh = elemBound.serialize();
+              } else {
+                elem.xywh = elemBound
+                  .moveDelta(-rect.x + modelX, -rect.y + modelY)
+                  .serialize();
+              }
+            }
+          });
+        }
+        block.children.forEach(rewrite);
+      } else {
+        const schema = this.std.store.schema.get(block.flavour);
+        const isGfxModel =
+          schema?.model.toModel?.() instanceof GfxBlockElementModel;
+
+        if (!isGfxModel) {
+          return;
+        }
+
+        if (!block.props.xywh) {
+          block.props.xywh =
+            schema?.model.props?.(internalPrimitives).xywh ?? '[0,0,100,100]';
+        }
+
+        const blockBound =
+          Bound.deserialize(block.props.xywh as SerializedXYWH) ??
+          new Bound(0, 0, 0, 0);
+
+        if (block.flavour === 'affine:embed-iframe') {
+          let width = EMBED_IFRAME_DEFAULT_WIDTH_IN_SURFACE;
+          let height = EMBED_IFRAME_DEFAULT_HEIGHT_IN_SURFACE;
+          if (block.props.url && typeof block.props.url === 'string') {
+            const embedIframeService = this.std.get(EmbedIframeService);
+            const options = embedIframeService.getConfig(
+              block.props.url
+            )?.options;
+            if (options) {
+              width = options.widthInSurface;
+              height = options.heightInSurface;
+            }
+          }
+          blockBound.w = width;
+          blockBound.h = height;
+        } else if (
+          block.flavour === 'affine:attachment' ||
+          block.flavour === 'affine:bookmark' ||
+          block.flavour.startsWith('affine:embed-')
+        ) {
+          const style = (block.props.style ?? 'vertical') as EmbedCardStyle;
+          block.props.style = style;
+
+          blockBound.w = EMBED_CARD_WIDTH[style];
+          blockBound.h = EMBED_CARD_HEIGHT[style];
+        }
+
+        if (block.flavour === 'affine:image') {
+          assertType<{ width: number; height: number }>(block.props);
+          blockBound.w = blockBound.w || block.props.width || 100;
+          blockBound.h = blockBound.h || block.props.height || 100;
+        }
+
+        if (ignoreOriginalPos) {
+          blockBound.x = modelX;
+          blockBound.y = modelY;
+          block.props.xywh = blockBound.serialize();
+        } else {
+          block.props.xywh = blockBound
+            .moveDelta(-rect.x + modelX, -rect.y + modelY)
+            .serialize();
+        }
+      }
+    };
+
+    snapshot.content.forEach(rewrite);
+  };
+
+  get dndExtension() {
+    return this.std.getOptional(DndApiExtensionIdentifier);
+  }
+
+  /**
+   * This method will try to drop the snapshot as gfx block directly if all blocks can be dropped as gfx block.
+   * Otherwise, it will create a linked doc to reference the original doc.
+   * @param snapshot
+   * @param point
+   */
+  private readonly _dropAsGfxBlock = (
+    snapshot: SliceSnapshot,
+    point: Point
+  ) => {
+    const store = this.widget.std.store;
+    const schema = store.schema;
+
+    point = Point.from(
+      this.gfx.viewport.toModelCoordFromClientCoord([point.x, point.y])
+    );
+
+    // check if all blocks can be dropped as gfx block
+    const groupByParent = groupBy(snapshot.content, block =>
+      schema.safeValidate(block.flavour, 'affine:surface')
+        ? 'affine:surface'
+        : schema.safeValidate(block.flavour, 'affine:page')
+          ? 'affine:page'
+          : // if the parent is not surface or page, it can't be dropped as gfx block
+            // mark it as empty
+            'empty'
+    );
+
+    // empty means all blocks can be dropped as gfx block
+    if (!groupByParent.empty?.length) {
+      // drop as children of surface or page
+
+      if (groupByParent['affine:surface']) {
+        const content = groupByParent['affine:surface'];
+        const surfaceSnapshot = {
+          ...snapshot,
+          content,
+        };
+
+        this._rewriteSnapshotXYWH(surfaceSnapshot, point, true);
+        this._dropToModel(surfaceSnapshot, this.gfx.surface!.id)
+          .then(slices => {
+            slices?.content.forEach((block, idx) => {
+              if (block.id === content[idx].id) {
+                if (block.flavour === 'affine:embed-iframe') {
+                  store.updateBlock(block.id, {
+                    xywh: content[idx].props.xywh,
+                  });
+                } else if (
+                  block.flavour === 'affine:image' ||
+                  block.flavour === 'affine:attachment' ||
+                  block.flavour === 'affine:bookmark' ||
+                  block.flavour.startsWith('affine:embed-')
+                ) {
+                  store.updateBlock(block.id, {
+                    xywh: content[idx].props.xywh,
+                    style: content[idx].props.style,
+                  });
+                }
+              }
+            });
+          })
+          .catch(console.error);
+      }
+
+      if (groupByParent['affine:page']) {
+        const content = groupByParent['affine:page'];
+        const pageSnapshot = {
+          ...snapshot,
+          content,
+        };
+
+        this._rewriteSnapshotXYWH(pageSnapshot, point, true);
+        this._dropToModel(pageSnapshot, this.widget.store.root!.id)
+          .then(slices => {
+            slices?.content.forEach((block, idx) => {
+              if (block.flavour === 'affine:embed-iframe') {
+                store.updateBlock(block.id, {
+                  xywh: content[idx].props.xywh,
+                });
+              } else if (
+                block.flavour === 'affine:attachment' ||
+                block.flavour.startsWith('affine:embed-')
+              ) {
+                store.updateBlock(block.id, {
+                  xywh: content[idx].props.xywh,
+                  style: content[idx].props.style,
+                });
+              }
+            });
+          })
+          .catch(console.error);
+      }
+    } else {
+      const dndExtApi = this.dndExtension;
+      const content = snapshot.content.filter(block =>
+        schema.safeValidate(block.flavour, 'affine:note')
+      );
+      const sourceDocId = snapshot.pageId;
+
+      if (
+        dndExtApi &&
+        this.std.store.workspace.docs.has(sourceDocId) &&
+        this.gfx.surface &&
+        snapshot.pageId !== this.std.store.doc.id
+      ) {
+        const style = 'vertical' as EmbedCardStyle;
+        const linkedDocSnapshot = dndExtApi.fromEntity({
+          docId: sourceDocId,
+          props: {
+            blockIds: content.map(block => block.id),
+            style: 'vertical',
+            xywh: new Bound(
+              point.x,
+              point.y,
+              EMBED_CARD_WIDTH[style],
+              EMBED_CARD_HEIGHT[style]
+            ).serialize(),
+          },
+        });
+
+        if (linkedDocSnapshot) {
+          this._dropToModel(linkedDocSnapshot, this.gfx.surface.id).catch(
+            console.error
+          );
+        }
+      }
+      // create note to wrap the snapshot
+      else {
+        const originalModel = store.getModelById(snapshot.content[0].id);
+        const originalNote = originalModel
+          ? findNoteBlockModel(originalModel)
+          : null;
+
+        let noteId: string;
+        if (originalNote) {
+          const placement =
+            originalNote.children[0].id === snapshot.content[0].id
+              ? 'before'
+              : 'after';
+
+          noteId = store.addSiblingBlocks(
+            originalNote,
+            [
+              {
+                flavour: 'affine:note',
+                xywh: new Bound(
+                  point.x,
+                  point.y,
+                  DEFAULT_NOTE_WIDTH,
+                  DEFAULT_NOTE_HEIGHT
+                ).serialize(),
+              },
+            ],
+            placement
+          )[0];
+        } else {
+          noteId = store.addBlock(
+            'affine:note',
+            {
+              xywh: new Bound(
+                point.x,
+                point.y,
+                DEFAULT_NOTE_WIDTH,
+                DEFAULT_NOTE_HEIGHT
+              ).serialize(),
+            },
+            this.widget.store.root!
+          );
+        }
+
+        this._dropToModel(
+          {
+            ...snapshot,
+            content,
+          },
+          noteId
+        )
+          .then(() => {
+            const telemetry = this.std.getOptional(TelemetryProvider);
+            telemetry?.track('CanvasElementAdded', {
+              page: 'whiteboard editor',
+              module: 'canvas',
+              segment: 'whiteboard',
+              control: 'canvas:drop',
+              type: 'note',
+              other: 'split-from-note',
+            });
+          })
+          .catch(console.error);
+      }
+    }
+  };
+
+  private readonly _toSnapshot = (
+    blocks: (BlockComponent | BlockModel)[],
+    selectedGfxElms?: string[]
+  ) => {
+    const slice = Slice.fromModels(
+      this.std.store,
+      blocks.map(block =>
+        toDraftModel(block instanceof BlockComponent ? block.model : block)
+      )
+    );
+    const job = this._getJob(selectedGfxElms);
+
+    const snapshot = job.sliceToSnapshot(slice);
+    if (!snapshot) return;
+
+    return snapshot;
+  };
+
+  private readonly _trackLinkedDocCreated = (id: string) => {
+    const isNewBlock = !this.std.store.hasBlock(id);
+    if (!isNewBlock) {
+      return;
+    }
+
+    const mode =
+      this.std.getOptional(DocModeProvider)?.getEditorMode() ?? 'page';
+
+    const telemetryService = this.std.getOptional(TelemetryProvider);
+    telemetryService?.track('LinkedDocCreated', {
+      control: `drop on ${mode}`,
+      module: 'drag and drop',
+      type: 'doc',
+      other: 'new doc',
+    });
+  };
+
+  private readonly _setOpacityOfDraggedBlocks = (snapshot: SliceSnapshot) => {
+    const OPACITY = 0.7;
+    const gfx = this.gfx;
+    const resetCallbacks: (() => void)[] = [];
+
+    const traverse = (block: BlockSnapshot) => {
+      if (block.flavour === 'affine:surface') {
+        block.children.forEach(traverse);
+        Object.keys(block.props.elements as Record<string, unknown>).forEach(
+          elemId => {
+            const element = gfx.getElementById(
+              elemId
+            ) as GfxPrimitiveElementModel;
+
+            if (element) {
+              const originalOpacity = element.opacity;
+              element.opacity = OPACITY;
+              resetCallbacks.push(() => {
+                element.opacity = originalOpacity;
+              });
+            }
+          }
+        );
+      } else {
+        const blockView = this.std.view.getBlock(block.id);
+
+        if (blockView) {
+          const originalOpacity = blockView.style.opacity;
+          blockView.style.opacity = `${OPACITY}`;
+          resetCallbacks.push(() => {
+            if (originalOpacity) {
+              blockView.style.opacity = originalOpacity;
+            } else {
+              blockView.style.removeProperty('opacity');
+            }
+          });
+        }
+      }
+    };
+
+    snapshot.content.forEach(traverse);
+    this.resetOpacityCallbacks = resetCallbacks;
+  };
+
+  constructor(readonly widget: AffineDragHandleWidget) {}
+
+  private async _dropToModel(
+    snapshot: SliceSnapshot,
+    parent?: string,
+    index?: number
+  ) {
+    try {
+      const std = this.std;
+      const job = this._getJob();
+
+      if (snapshot.content.length === 1) {
+        const [first] = snapshot.content;
+        if (first.flavour === 'affine:embed-linked-doc') {
+          this._trackLinkedDocCreated(first.id);
+        }
+      }
+      // use snapshot
+      const slice = await job.snapshotToSlice(
+        snapshot,
+        std.store,
+        parent,
+        index
+      );
+      return slice;
+    } catch {
+      return null;
+    }
+  }
+
+  private _getJob(selectedIds?: string[]) {
+    const std = this.std;
+    const middlewares = [
+      newIdCrossDoc(std),
+      reorderList(std),
+      surfaceRefToEmbed(std),
+      cardStyleUpdater(std),
+    ];
+
+    if (selectedIds) {
+      middlewares.push(gfxBlocksFilter(selectedIds, std));
+    }
+
+    return std.store.getTransformer(middlewares);
+  }
+
+  private _isDropOnCurrentEditor(std?: BlockStdScope) {
+    return std === this.std;
+  }
+
+  private _isUnderNoteBlock(model: BlockModel) {
+    let isUnderNote = false;
+    const store = this.std.store;
+
+    {
+      let curModel = store.getParent(model);
+
+      while (curModel) {
+        if (matchModels(curModel, [NoteBlockModel])) {
+          isUnderNote = true;
+          break;
+        }
+
+        curModel = store.getParent(curModel)!;
+      }
+    }
+
+    return isUnderNote;
+  }
+
+  private _makeDraggable(target: HTMLElement) {
+    const std = this.std;
+
+    return std.dnd.draggable<DragBlockEntity>({
+      element: target,
+      canDrag: () => (this.widget.anchorBlockId.peek() ? true : false),
+      onDragStart: () => {
+        this.widget.dragging = true;
+      },
+      onDrop: () => {
+        this._cleanup();
+      },
+      setDragPreview: ({ source, container, setOffset }) => {
+        if (
+          !source.data?.bsEntity?.modelIds.length ||
+          !source.data.bsEntity.snapshot
+        ) {
+          return;
+        }
+
+        const { snapshot, fromMode } = source.data.bsEntity;
+
+        const offset = this.previewHelper.renderDragPreview({
+          blockIds: source.data?.bsEntity?.modelIds,
+          snapshot,
+          container,
+          mode: fromMode ?? 'block',
+        });
+
+        setOffset(offset);
+      },
+      setDragData: () => {
+        const { fromMode, snapshot } = this._getDraggedSnapshot();
+
+        snapshot && this._setOpacityOfDraggedBlocks(snapshot);
+
+        return {
+          type: 'blocks',
+          fromMode,
+          modelIds: snapshot ? extractIdsFromSnapshot(snapshot) : [],
+          snapshot,
+        };
+      },
+    });
+  }
+
+  private _makeDropTarget(view: BlockComponent) {
+    const isUnderNote = this._isUnderNoteBlock(view.model);
+    const isNote = matchModels(view.model, [NoteBlockModel]);
+
+    if (
+      // affine:surface block can't be drop target in any modes
+      matchModels(view.model, [SurfaceBlockModel]) ||
+      // in page mode, blocks other than root block can be drop target
+      (this.mode === 'page' && view.model.role === 'root') ||
+      // in edgeless mode, only root and note block can be drop target
+      (this.mode === 'edgeless' &&
+        !matchModels(view.model, [NoteBlockModel]) &&
+        view.model.role !== 'root' &&
+        !isUnderNote)
+    ) {
+      return;
+    }
+
+    const widget = this.widget;
+    const cleanups: (() => void)[] = [];
+
+    cleanups.push(
+      this.std.dnd.dropTarget<
+        DragBlockEntity,
+        {
+          modelId: string;
+        }
+      >({
+        element: view,
+        getIsSticky: () => {
+          const result = this.mode === 'page' || isUnderNote;
+          return result;
+        },
+        canDrop: ({ source }) => {
+          /**
+           * general rules:
+           * 1. can't drop on the same block or its children
+           */
+          if (source.data.bsEntity?.type === 'blocks') {
+            return (
+              source.data.from?.docId !== widget.store.id ||
+              source.data.bsEntity.modelIds.every(id => id !== view.model.id)
+            );
+          }
+
+          return false;
+        },
+        onDragEnter: () => {
+          if (isNote && 'hideMask' in view) {
+            view.hideMask = true;
+          }
+        },
+        onDragLeave: () => {
+          if (isNote && 'hideMask' in view) {
+            view.hideMask = false;
+          }
+        },
+        onDrop: () => {
+          if (isNote && 'hideMask' in view) {
+            view.hideMask = false;
+          }
+        },
+        setDropData: () => {
+          return {
+            modelId: view.model.id,
+          };
+        },
+      })
+    );
+
+    if (matchModels(view.model, [AttachmentBlockModel, BookmarkBlockModel])) {
+      cleanups.push(this._makeDraggable(view));
+    }
+
+    if (this.dropTargetCleanUps.has(view.model.id)) {
+      this.dropTargetCleanUps.get(view.model.id)!.forEach(clean => clean());
+    }
+
+    this.dropTargetCleanUps.set(view.model.id, cleanups);
+  }
+
+  private _monitorBlockDrag() {
+    return this.std.dnd.monitor<DragBlockEntity>({
+      canMonitor: ({ source }) => {
+        const entity = source.data?.bsEntity;
+
+        return entity?.type === 'blocks' && !!entity.snapshot;
+      },
+      onDropTargetChange: ({ location }) => {
+        this._clearDropIndicator();
+
+        if (
+          !this._isDropOnCurrentEditor(
+            (location.current.dropTargets[0]?.element as BlockComponent)?.std
+          )
+        ) {
+          return;
+        }
+      },
+      onDrop: ({ location, source }) => {
+        this._clearDropIndicator();
+
+        if (
+          !this._isDropOnCurrentEditor(
+            (location.current.dropTargets[0]?.element as BlockComponent)?.std
+          )
+        ) {
+          return;
+        }
+
+        const target = location.current.dropTargets[0];
+        const point = new Point(
+          location.current.input.clientX,
+          location.current.input.clientY
+        );
+        const dragPayload = source.data;
+        const dropPayload = target.data;
+
+        this._onDrop(
+          target.element as BlockComponent,
+          dragPayload,
+          dropPayload,
+          point
+        );
+      },
+      onDrag: ({ location, source }) => {
+        if (
+          !this._isDropOnCurrentEditor(
+            (location.current.dropTargets[0]?.element as BlockComponent)?.std
+          ) ||
+          !location.current.dropTargets[0]
+        ) {
+          return;
+        }
+
+        const target = location.current.dropTargets[0];
+        const point = new Point(
+          location.current.input.clientX,
+          location.current.input.clientY
+        );
+        const dragPayload = source.data;
+        const dropPayload = target.data;
+
+        this._onDragMove(
+          point,
+          dragPayload,
+          dropPayload,
+          target.element as BlockComponent
+        );
+      },
+    });
+  }
+
+  watch() {
+    this.widget.handleEvent('pointerDown', ctx => {
+      const state = ctx.get('pointerState');
+      const event = state.raw;
+      const target = captureEventTarget(event.target);
+      if (!target) return;
+
+      if (this.widget.contains(target)) {
+        return true;
+      }
+
+      return;
+    });
+
+    this.widget.handleEvent('dragStart', ctx => {
+      const state = ctx.get('pointerState');
+      const event = state.raw;
+      const target = captureEventTarget(event.target);
+      if (!target) return;
+
+      if (this.widget.contains(target)) {
+        return true;
+      }
+
+      return;
+    });
+
+    const widget = this.widget;
+    const std = this.std;
+    const disposables = widget.disposables;
+    const scrollable = getScrollContainer(this.host);
+
+    if (scrollable && this.mode === 'page') {
+      disposables.add(
+        std.dnd.autoScroll<DragBlockEntity>({
+          element: scrollable,
+          canScroll: ({ source }) => {
+            return source.data?.bsEntity?.type === 'blocks';
+          },
+        })
+      );
+    }
+
+    disposables.add(this._makeDraggable(this.widget));
+
+    // used to handle drag move and drop
+    disposables.add(this._monitorBlockDrag());
+
+    disposables.add(
+      std.view.viewUpdated.subscribe(payload => {
+        if (payload.type !== 'block') {
+          return;
+        }
+        if (payload.method === 'add') {
+          this._makeDropTarget(payload.view);
+        } else if (
+          payload.method === 'delete' &&
+          this.dropTargetCleanUps.has(payload.id)
+        ) {
+          this.dropTargetCleanUps.get(payload.id)!.forEach(clean => clean());
+          this.dropTargetCleanUps.delete(payload.id);
+        }
+      })
+    );
+
+    std.view.views.forEach(block => this._makeDropTarget(block));
+
+    disposables.add(() => {
+      this.dropTargetCleanUps.forEach(cleanUps => cleanUps.forEach(fn => fn()));
+      this.dropTargetCleanUps.clear();
+    });
+  }
+}