refactor: rewrite blocksuite dnd

[doouding]

Changed

• Refactored BlockSuite drag-and-drop using @atlaskit/pragmatic-drag-and-drop/element/adapter.
• Updated block dragging to use the new drag-and-drop infrastructure.

BlockSuite DND API

Access the BlockSuite drag-and-drop API via std.dnd. This is a lightweight wrapper around pragmatic-drag-and-drop, offering convenient generic types and more intuitive option names.

Drag payload structure

There's some constrain about drag payload. The whole drag payload looks like this:

type DragPayload = {
  entity: {
    type: string
  },
  from: {
    at: 'blocksuite',
    docId: string
  }
}

• The from field is auto-generated—no need for manual handling.
• The entity field is customizable, but it must include a type.

All drag-and-drop methods accept a generic type for entity, ensuring more accurate payloads in event handlers.

type BlockEntity = {
  type: 'blocks',
  blockIds: string[]
}

dnd.draggable<BlockEntity>({
  element: someElement,
  setDragData: () => {
    // the return type must satisfy the generic type
    // in this case, it's BlockEntity
    return {
      type: 'blocks',
      blockIds: []
    }
  }
});

dnd.monitor<BlockEntity>({
  // the arguments is same for other event handler
  onDrag({ source }) {
    // the type of this is BlockEntity
    source.data.entity
  }
})

Drop payload

When hover on droppable target. You can set drop payload as well. All drag-and-drop methods accept a second generic type for drop payload.

The drop payload is customizable. Additionally, the DND system will add an edge field to the final payload object, indicating the nearest edge of the drop target relative to the current drag position.

type DropPayload = {
  blockId: string;
}

dnd.dropTarget<BlockEntity, DropPayload>({
  getData() {
    // the type should be DropPayload
    return {
      blockId: 'someId'
    }
  }
});

dnd.monitor<BlockEntity, DropPayload>({
  // drag over on drop target
  onDrag({ location }) {
    const target = location.current.dropTargets[0];

    // the type is DropPayload
    target.data;
    // retrieve the nearest edge of the drop target relative to the current drop position.
    target.data.edge;
  }
})

[doouding]

• feat(core): add new bs dnd adapter #9717
• refactor: rewrite blocksuite dnd #9595 👈 (View in Graphite)
• canary

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• merge - adds this PR to the back of the merge queue
• hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[codecov]

Codecov Report

Attention: Patch coverage is 45.74468% with 153 lines in your changes missing coverage. Please review.

Project coverage is 52.99%. Comparing base (3828144) to head (9971719).
Report is 1 commits behind head on canary.

Files with missing lines	Patch %	Lines
...get-drag-handle/src/watchers/drag-event-watcher.ts	46.41%	112 Missing ⚠️
...uite/affine/shared/src/utils/dom/point-to-block.ts	7.14%	13 Missing ⚠️
blocksuite/affine/widget-drag-handle/src/utils.ts	25.00%	9 Missing ⚠️
...ite/framework/block-std/src/extension/dnd/index.ts	59.09%	8 Missing and 1 partial ⚠️
blocksuite/framework/store/src/schema/schema.ts	20.00%	4 Missing ⚠️
...components/src/drag-indicator/file-drop-manager.ts	66.66%	2 Missing ⚠️
...e/framework/block-std/src/event/control/pointer.ts	33.33%	2 Missing ⚠️
...idget-drag-handle/src/components/drop-indicator.ts	0.00%	1 Missing ⚠️
...drag-handle/src/watchers/keyboard-event-watcher.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           canary    #9595      +/-   ##
==========================================
+ Coverage   52.91%   52.99%   +0.08%     
==========================================
  Files        2198     2199       +1     
  Lines       99030    99038       +8     
  Branches    16825    16828       +3     
==========================================
+ Hits        52401    52489      +88     
+ Misses      45222    45144      -78     
+ Partials     1407     1405       -2     

Flag	Coverage Δ
server-test	78.14% <ø> (+0.05%)	⬆️
unittest	32.25% <24.11%> (+0.08%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[graphite-app]

Merge activity

• Jan 16, 3:49 AM EST: Graphite disabled "merge when ready" on this PR due to: a merge conflict with the target branch; resolve the conflict and try again..
• Jan 16, 7:36 AM EST: A user added this pull request to the Graphite merge queue.
• Jan 16, 7:51 AM EST: A user merged this pull request with the Graphite merge queue.

[Saul-Mirone]

LGTM

[sentry-io]

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

• ‼️ BlockSuiteError: This doc is missing surface block in edgeless. /magic-link View Issue

_{Did you find this useful? React with a 👍 or 👎}