The main changes in this PR involve replacing the deprecated `BlockServiceWatcher` with the new `LifeCycleWatcher` across multiple files. Here's a detailed breakdown:
1. **Core Architectural Change:**
- Removed `BlockServiceWatcher` class completely (deleted file)
- Migrated to `LifeCycleWatcher` as the new standard for watching component lifecycle events
2. **Key Changes in Implementation:**
- Changed from using `blockService.specSlots` events to using `view.viewUpdated` events
- Replaced `flavour` static property with `key` static property
- Updated event handling to use more specific payload type checking
3. **Major File Changes:**
- Modified multiple block components:
- Embed synced doc block
- Frame preview
- Edgeless root spec
- AI-related components (code, image, paragraph, etc.)
- Quick search service
- Edgeless clipboard
4. **Pattern of Changes:**
The migration follows a consistent pattern:
```typescript
// Old pattern
class SomeWatcher extends BlockServiceWatcher {
static override readonly flavour = 'some:flavour';
mounted() {
this.blockService.specSlots.viewConnected.on(...)
}
}
// New pattern
class SomeWatcher extends LifeCycleWatcher {
static override key = 'some-watcher';
mounted() {
const { view } = this.std;
view.viewUpdated.on(payload => {
if (payload.type !== 'block' || payload.method !== 'add') return;
// Handle event
});
}
}
```
5. **Benefits:**
- More explicit and type-safe event handling
- Cleaner architecture by removing deprecated code
- More consistent approach to lifecycle management
- Better separation of concerns
This appears to be a significant architectural improvement that modernizes the codebase by removing deprecated patterns and standardizing on a more robust lifecycle management system.
### Changed
- Added support for changing the preview offset during dragging.
- Fixed the preview rendering for embed block and surface-ref block
- Resolved an issue where the host element might be reused in certain cases, which could cause unexpected behavior
- Moved viewport-related constants and methods to a more appropriate location
### 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:
```typescript
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.
```typescript
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.
```typescript
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;
}
})
```
Saul-Mirone