diff --git a/blocksuite/affine/block-attachment/src/attachment-block.ts b/blocksuite/affine/block-attachment/src/attachment-block.ts index f9e5130433..5e75041acc 100644 --- a/blocksuite/affine/block-attachment/src/attachment-block.ts +++ b/blocksuite/affine/block-attachment/src/attachment-block.ts @@ -234,7 +234,6 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<
${embedView diff --git a/blocksuite/affine/components/src/drag-indicator/file-drop-manager.ts b/blocksuite/affine/components/src/drag-indicator/file-drop-manager.ts index bc3de9b26e..c250037702 100644 --- a/blocksuite/affine/components/src/drag-indicator/file-drop-manager.ts +++ b/blocksuite/affine/components/src/drag-indicator/file-drop-manager.ts @@ -58,6 +58,8 @@ export class FileDropExtension extends LifeCycleWatcher { point$ = signal(null); + private _disableIndicator = false; + closestElement$ = signal(null); dropTarget$ = computed(() => { @@ -196,7 +198,9 @@ export class FileDropExtension extends LifeCycleWatcher { std.event.disposables.add( this.dropTarget$.subscribe(target => { - FileDropExtension.indicator.rect = target?.rect ?? null; + FileDropExtension.indicator.rect = this._disableIndicator + ? null + : (target?.rect ?? null); }) ); @@ -210,6 +214,17 @@ export class FileDropExtension extends LifeCycleWatcher { this.dragging$.value = false; }) ); + std.event.disposables.add( + std.dnd.monitor({ + onDragStart: () => { + this._disableIndicator = true; + }, + onDrop: () => { + this._disableIndicator = false; + }, + }) + ); + std.event.disposables.add( std.event.add('nativeDragOver', context => { const event = context.get('dndState').raw; diff --git a/blocksuite/affine/shared/src/utils/dom/point-to-block.ts b/blocksuite/affine/shared/src/utils/dom/point-to-block.ts index 6add25bf9e..0688a327f3 100644 --- a/blocksuite/affine/shared/src/utils/dom/point-to-block.ts +++ b/blocksuite/affine/shared/src/utils/dom/point-to-block.ts @@ -1,5 +1,6 @@ import { BLOCK_ID_ATTR, type BlockComponent } from '@blocksuite/block-std'; import type { Point, Rect } from '@blocksuite/global/utils'; +import type { BlockModel } from '@blocksuite/store'; import { BLOCK_CHILDREN_CONTAINER_PADDING_LEFT } from '../../consts/index.js'; import { clamp } from '../math.js'; @@ -272,18 +273,32 @@ export function getRectByBlockComponent(element: Element | BlockComponent) { * Only keep block elements of same level. */ export function getBlockComponentsExcludeSubtrees( - elements: Element[] | BlockComponent[] + elements: BlockComponent[] ): BlockComponent[] { if (elements.length <= 1) return elements as BlockComponent[]; - let parent = elements[0]; - return elements.filter((node, index) => { - if (index === 0) return true; - if (contains(parent, node)) { - return false; - } else { - parent = node; - return true; + + const getLevel = (element: BlockComponent) => { + let level = 0; + let model: BlockModel | null = element.model; + + while (model && model.role !== 'root') { + level++; + model = model.parent; } + + return level; + }; + + let topMostLevel = Number.POSITIVE_INFINITY; + const levels = elements.map(element => { + const level = getLevel(element); + + topMostLevel = Math.min(topMostLevel, level); + return level; + }); + + return elements.filter((_, index) => { + return levels[index] === topMostLevel; }) as BlockComponent[]; } diff --git a/blocksuite/affine/shared/src/utils/event.ts b/blocksuite/affine/shared/src/utils/event.ts index ce18c5f289..0439cdd536 100644 --- a/blocksuite/affine/shared/src/utils/event.ts +++ b/blocksuite/affine/shared/src/utils/event.ts @@ -180,7 +180,7 @@ export function requestConnectedFrame( * A wrapper around `requestConnectedFrame` that only calls at most once in one frame */ export function requestThrottledConnectedFrame< - T extends (...args: unknown[]) => void, + T extends (...args: any[]) => void, >(func: T, element?: HTMLElement): T { let raqId: number | undefined = undefined; let latestArgs: unknown[] = []; diff --git a/blocksuite/affine/widget-drag-handle/src/components/drop-indicator.ts b/blocksuite/affine/widget-drag-handle/src/components/drop-indicator.ts index 691357985d..1d4df7659b 100644 --- a/blocksuite/affine/widget-drag-handle/src/components/drop-indicator.ts +++ b/blocksuite/affine/widget-drag-handle/src/components/drop-indicator.ts @@ -24,13 +24,17 @@ export class DropIndicator extends LitElement { if (!this.rect) { return null; } + + const parentRect = this.parentElement!.getBoundingClientRect(); const { left, top, width, height } = this.rect; + const style = styleMap({ width: `${width}px`, height: `${height}px`, - top: `${top}px`, - left: `${left}px`, + top: `${top - parentRect.y}px`, + left: `${left - parentRect.x}px`, }); + return html`
`; } diff --git a/blocksuite/affine/widget-drag-handle/src/drag-handle.ts b/blocksuite/affine/widget-drag-handle/src/drag-handle.ts index 7c3273292d..ddfa8c5253 100644 --- a/blocksuite/affine/widget-drag-handle/src/drag-handle.ts +++ b/blocksuite/affine/widget-drag-handle/src/drag-handle.ts @@ -2,44 +2,29 @@ import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface'; import type { RootBlockModel } from '@blocksuite/affine-model'; import { DocModeProvider } from '@blocksuite/affine-shared/services'; import { - autoScroll, - calcDropTarget, - type DropPlacement, - type DropTarget, - getScrollContainer, isInsideEdgelessEditor, isInsidePageEditor, isTopLevelBlock, - matchFlavours, } from '@blocksuite/affine-shared/utils'; -import { - type BlockComponent, - type DndEventState, - WidgetComponent, -} from '@blocksuite/block-std'; +import { type BlockComponent, WidgetComponent } from '@blocksuite/block-std'; import type { GfxBlockElementModel } from '@blocksuite/block-std/gfx'; -import type { IVec } from '@blocksuite/global/utils'; -import { DisposableGroup, Point, Rect } from '@blocksuite/global/utils'; +import { + DisposableGroup, + type IVec, + type Point, + type Rect, +} from '@blocksuite/global/utils'; import { computed, type ReadonlySignal, signal } from '@preact/signals-core'; import { html } from 'lit'; import { query, state } from 'lit/decorators.js'; import { styleMap } from 'lit/directives/style-map.js'; -import type { DragPreview } from './components/drag-preview.js'; -import type { DropIndicator } from './components/drop-indicator.js'; import type { AFFINE_DRAG_HANDLE_WIDGET } from './consts.js'; import { PreviewHelper } from './helpers/preview-helper.js'; import { RectHelper } from './helpers/rect-helper.js'; import { SelectionHelper } from './helpers/selection-helper.js'; import { styles } from './styles.js'; -import { - containBlock, - containChildBlock, - getClosestBlockByPoint, - getClosestNoteBlock, - isOutOfNoteBlock, - updateDragHandleClassName, -} from './utils.js'; +import { updateDragHandleClassName } from './utils.js'; import { DragEventWatcher } from './watchers/drag-event-watcher.js'; import { EdgelessWatcher } from './watchers/edgeless-watcher.js'; import { HandleEventWatcher } from './watchers/handle-event-watcher.js'; @@ -54,90 +39,13 @@ export class AffineDragHandleWidget extends WidgetComponent { private readonly _dragEventWatcher = new DragEventWatcher(this); - private readonly _getBlockView = (blockId: string) => { - return this.host.view.getBlock(blockId); - }; - - /** - * When dragging, should update indicator position and target drop block id - */ - private readonly _getDropTarget = ( - state: DndEventState - ): DropTarget | null => { - const point = new Point(state.raw.x, state.raw.y); - const closestBlock = getClosestBlockByPoint( - this.host, - this.rootComponent, - point - ); - if (!closestBlock) return null; - - const blockId = closestBlock.model.id; - const model = closestBlock.model; - - const isDatabase = matchFlavours(model, ['affine:database']); - if (isDatabase) return null; - - // note block can only be dropped into another note block - // prevent note block from being dropped into other blocks - const isDraggedElementNote = - this.draggingElements.length === 1 && - matchFlavours(this.draggingElements[0].model, ['affine:note']); - - if (isDraggedElementNote) { - const parent = this.std.store.getParent(closestBlock.model); - if (!parent) return null; - const parentElement = this._getBlockView(parent.id); - if (!parentElement) return null; - if (!matchFlavours(parentElement.model, ['affine:note'])) return null; - } - - // Should make sure that target drop block is - // neither within the dragging elements - // nor a child-block of any dragging elements - if ( - containBlock( - this.draggingElements.map(block => block.model.id), - blockId - ) || - containChildBlock(this.draggingElements, model) - ) { - return null; - } - - const result = calcDropTarget( - point, - model, - closestBlock, - this.draggingElements, - this.scale.peek(), - isDraggedElementNote === false - ); - - if (isDraggedElementNote && result?.placement === 'in') return null; - - return result; - }; - private readonly _handleEventWatcher = new HandleEventWatcher(this); private readonly _keyboardEventWatcher = new KeyboardEventWatcher(this); private readonly _pageWatcher = new PageWatcher(this); - private readonly _removeDropIndicator = () => { - if (this.dropIndicator) { - this.dropIndicator.remove(); - this.dropIndicator = null; - } - }; - private readonly _reset = () => { - this.draggingElements = []; - this.dropBlockId = ''; - this.dropPlacement = null; - this.lastDragPointerState = null; - this.rafID = 0; this.dragging = false; this.dragHoverRect = null; @@ -147,9 +55,6 @@ export class AffineDragHandleWidget extends WidgetComponent { this.isTopLevelDragHandleVisible = false; this.pointerEventWatcher.reset(); - - this.previewHelper.removeDragPreview(); - this._removeDropIndicator(); this._resetCursor(); }; @@ -157,32 +62,6 @@ export class AffineDragHandleWidget extends WidgetComponent { document.documentElement.classList.remove('affine-drag-preview-grabbing'); }; - private readonly _resetDropTarget = () => { - this.dropBlockId = ''; - this.dropPlacement = null; - if (this.dropIndicator) this.dropIndicator.rect = null; - }; - - private readonly _updateDropTarget = (dropTarget: DropTarget | null) => { - if (!this.dropIndicator) return; - this.dropBlockId = dropTarget?.modelState.model.id ?? ''; - this.dropPlacement = dropTarget?.placement ?? null; - if (dropTarget?.rect) { - const offsetParentRect = - this.dragHandleContainerOffsetParent.getBoundingClientRect(); - let { left, top } = dropTarget.rect; - left -= offsetParentRect.left; - top -= offsetParentRect.top; - - const { width, height } = dropTarget.rect; - - const rect = Rect.fromLWTH(left, width, top, height); - this.dropIndicator.rect = rect; - } else { - this.dropIndicator.rect = dropTarget?.rect ?? null; - } - }; - anchorBlockId = signal(null); anchorBlockComponent = computed(() => { @@ -213,15 +92,7 @@ export class AffineDragHandleWidget extends WidgetComponent { this.rectHelper.getDraggingAreaRect ); - draggingElements: BlockComponent[] = []; - - dragPreview: DragPreview | null = null; - - dropBlockId = ''; - - dropIndicator: DropIndicator | null = null; - - dropPlacement: DropPlacement | null = null; + lastDragPoint: Point | null = null; edgelessWatcher = new EdgelessWatcher(this); @@ -268,74 +139,18 @@ export class AffineDragHandleWidget extends WidgetComponent { isTopLevelDragHandleVisible = false; - lastDragPointerState: DndEventState | null = null; - noteScale = signal(1); pointerEventWatcher = new PointerEventWatcher(this); previewHelper = new PreviewHelper(this); - rafID = 0; - scale = signal(1); scaleInNote = computed(() => this.scale.value * this.noteScale.value); selectionHelper = new SelectionHelper(this); - updateDropIndicator = ( - state: DndEventState, - shouldAutoScroll: boolean = false - ) => { - const point = new Point(state.raw.x, state.raw.y); - const closestNoteBlock = getClosestNoteBlock( - this.host, - this.rootComponent, - point - ); - if ( - !closestNoteBlock || - isOutOfNoteBlock(this.host, closestNoteBlock, point, this.scale.peek()) - ) { - this._resetDropTarget(); - } else { - const dropTarget = this._getDropTarget(state); - this._updateDropTarget(dropTarget); - } - - this.lastDragPointerState = state; - if (this.mode === 'page') { - if (!shouldAutoScroll) return; - - const scrollContainer = getScrollContainer(this.rootComponent); - const result = autoScroll(scrollContainer, state.raw.y); - if (!result) { - this.clearRaf(); - return; - } - this.rafID = requestAnimationFrame(() => - this.updateDropIndicator(state, true) - ); - } else { - this.clearRaf(); - } - }; - - updateDropIndicatorOnScroll = () => { - if ( - !this.dragging || - this.draggingElements.length === 0 || - !this.lastDragPointerState - ) - return; - - const state = this.lastDragPointerState; - this.rafID = requestAnimationFrame(() => - this.updateDropIndicator(state, false) - ); - }; - get dragHandleContainerOffsetParent() { return this.dragHandleContainer.parentElement!; } @@ -348,13 +163,6 @@ export class AffineDragHandleWidget extends WidgetComponent { return this.block; } - clearRaf() { - if (this.rafID) { - cancelAnimationFrame(this.rafID); - this.rafID = 0; - } - } - override connectedCallback() { super.connectedCallback(); diff --git a/blocksuite/affine/widget-drag-handle/src/helpers/preview-helper.ts b/blocksuite/affine/widget-drag-handle/src/helpers/preview-helper.ts index 3962a8114a..02101c2663 100644 --- a/blocksuite/affine/widget-drag-handle/src/helpers/preview-helper.ts +++ b/blocksuite/affine/widget-drag-handle/src/helpers/preview-helper.ts @@ -61,10 +61,6 @@ export class PreviewHelper { dragPreviewEl?: HTMLElement, dragPreviewOffset?: Point ): DragPreview => { - if (this.widget.dragPreview) { - this.widget.dragPreview.remove(); - } - let dragPreview: DragPreview; if (dragPreviewEl) { dragPreview = new DragPreview(dragPreviewOffset); @@ -107,12 +103,5 @@ export class PreviewHelper { return dragPreview; }; - removeDragPreview = () => { - if (this.widget.dragPreview) { - this.widget.dragPreview.remove(); - this.widget.dragPreview = null; - } - }; - constructor(readonly widget: AffineDragHandleWidget) {} } diff --git a/blocksuite/affine/widget-drag-handle/src/utils.ts b/blocksuite/affine/widget-drag-handle/src/utils.ts index 3f6f605103..e1e5b2043d 100644 --- a/blocksuite/affine/widget-drag-handle/src/utils.ts +++ b/blocksuite/affine/widget-drag-handle/src/utils.ts @@ -11,7 +11,12 @@ import { } from '@blocksuite/affine-shared/utils'; import type { BlockComponent, EditorHost } from '@blocksuite/block-std'; import { Point, Rect } from '@blocksuite/global/utils'; -import type { BaseSelection, BlockModel } from '@blocksuite/store'; +import type { + BaseSelection, + BlockModel, + BlockSnapshot, + SliceSnapshot, +} from '@blocksuite/store'; import { DRAG_HANDLE_CONTAINER_HEIGHT, @@ -70,6 +75,25 @@ export const containBlock = (blockIDs: string[], targetID: string) => { return blockIDs.some(blockID => blockID === targetID); }; +export const extractIdsFromSnapshot = (snapshot: SliceSnapshot) => { + const ids: string[] = []; + const extractFromBlock = (block: BlockSnapshot) => { + ids.push(block.id); + + if (block.children) { + for (const child of block.children) { + extractFromBlock(child); + } + } + }; + + for (const block of snapshot.content) { + extractFromBlock(block); + } + + return ids; +}; + // TODO: this is a hack, need to find a better way export const insideDatabaseTable = (element: Element) => { return !!element.closest('.affine-database-block-table'); @@ -118,6 +142,10 @@ export const isOutOfNoteBlock = ( : true; }; +export const getParentNoteBlock = (blockComponent: BlockComponent) => { + return blockComponent.closest('affine-note') ?? null; +}; + export const getClosestNoteBlock = ( editorHost: EditorHost, rootComponent: BlockComponent, diff --git a/blocksuite/affine/widget-drag-handle/src/watchers/drag-event-watcher.ts b/blocksuite/affine/widget-drag-handle/src/watchers/drag-event-watcher.ts index 8f719649bc..b74902f341 100644 --- a/blocksuite/affine/widget-drag-handle/src/watchers/drag-event-watcher.ts +++ b/blocksuite/affine/widget-drag-handle/src/watchers/drag-event-watcher.ts @@ -5,43 +5,77 @@ import { } from '@blocksuite/affine-block-surface'; import type { EmbedCardStyle, NoteBlockModel } from '@blocksuite/affine-model'; import { + BLOCK_CHILDREN_CONTAINER_PADDING_LEFT, EMBED_CARD_HEIGHT, EMBED_CARD_WIDTH, } from '@blocksuite/affine-shared/consts'; import { - DndApiExtensionIdentifier, DocModeProvider, TelemetryProvider, } from '@blocksuite/affine-shared/services'; import { - calcDropTarget, captureEventTarget, - type DropTarget, + type DropTarget as DropResult, getBlockComponentsExcludeSubtrees, - getClosestBlockComponentByPoint, + getRectByBlockComponent, + getScrollContainer, matchFlavours, + SpecProvider, } from '@blocksuite/affine-shared/utils'; import { type BlockComponent, BlockSelection, - type DndEventState, + BlockStdScope, + type DragFromBlockSuite, + type DragPayload, + type DropPayload, isGfxBlockComponent, - type UIEventHandler, - type UIEventStateContext, } from '@blocksuite/block-std'; import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx'; -import { Bound, Point } from '@blocksuite/global/utils'; +import { Bound, last, Point, Rect } from '@blocksuite/global/utils'; import { Slice, type SliceSnapshot } from '@blocksuite/store'; import { DropIndicator } from '../components/drop-indicator.js'; -import { AFFINE_DRAG_HANDLE_WIDGET } from '../consts.js'; import type { AffineDragHandleWidget } from '../drag-handle.js'; import { newIdCrossDoc } from '../middleware/new-id-cross-doc.js'; import { reorderList } from '../middleware/reorder-list'; import { surfaceRefToEmbed } from '../middleware/surface-ref-to-embed.js'; -import { containBlock, includeTextSelection } from '../utils.js'; +import { + containBlock, + extractIdsFromSnapshot, + getParentNoteBlock, + includeTextSelection, + isOutOfNoteBlock, +} from '../utils.js'; +export type DragBlockEntity = { + type: 'blocks'; + snapshot?: SliceSnapshot; + modelIds: string[]; +}; + +export type DragBlockPayload = DragPayload; + +declare module '@blocksuite/block-std' { + interface DNDEntity { + blocks: DragBlockPayload; + } +} export class DragEventWatcher { + dropIndicator: null | DropIndicator = null; + + get host() { + return this.widget.host; + } + + get mode() { + return this.widget.mode; + } + + get std() { + return this.widget.std; + } + private get _gfx() { return this.widget.std.get(GfxControllerIdentifier); } @@ -72,137 +106,193 @@ export class DragEventWatcher { }; private readonly _createDropIndicator = () => { - if (!this.widget.dropIndicator) { - this.widget.dropIndicator = new DropIndicator(); - this.widget.rootComponent.append(this.widget.dropIndicator); + if (!this.dropIndicator) { + this.dropIndicator = new DropIndicator(); + this.widget.ownerDocument.body.append(this.dropIndicator); + } + }; + + private readonly _clearDropIndicator = () => { + if (this.dropIndicator) { + this.dropIndicator.remove(); + this.dropIndicator = null; } }; private readonly _cleanup = () => { - this.widget.previewHelper.removeDragPreview(); - this.widget.clearRaf(); + this._clearDropIndicator(); this.widget.hide(true); - this._std.selection.setGroup('gfx', []); + this.std.selection.setGroup('gfx', []); }; - private readonly _dragEndHandler: UIEventHandler = () => { - this._cleanup(); - }; - - private readonly _dragMoveHandler: UIEventHandler = ctx => { - if ( - this.widget.isHoverDragHandleVisible || - this.widget.isTopLevelDragHandleVisible - ) { - this.widget.hide(); - } - - if (!this.widget.dragging || this.widget.draggingElements.length === 0) { - return false; - } - - ctx.get('defaultState').event.preventDefault(); - const state = ctx.get('dndState'); - - // call default drag move handler if no option return true - return this._onDragMove(state); + private readonly _onDragMove = ( + point: Point, + payload: DragBlockPayload, + dropPayload: DropPayload, + block: BlockComponent + ) => { + this._createDropIndicator(); + this._updateDropIndicator(point, payload, dropPayload, block); }; /** - * When start dragging, should set dragging elements and create drag preview + * When dragging, should update indicator position and target drop block id */ - private readonly _dragStartHandler: UIEventHandler = ctx => { - const state = ctx.get('dndState'); - // If not click left button to start dragging, should do nothing - const { button } = state.raw; - if (button !== 0) { - return false; + private readonly _getDropResult = ( + dropBlock: BlockComponent, + dragPayload: DragBlockPayload, + dropPayload: DropPayload + ): DropResult | null => { + const model = dropBlock.model; + + const snapshot = dragPayload?.bsEntity?.snapshot; + if ( + !snapshot || + snapshot.content.length === 0 || + !dragPayload?.from || + matchFlavours(model, ['affine:database']) + ) + return null; + + const isDropOnNoteBlock = matchFlavours(model, ['affine:note']); + + const edge = dropPayload.edge; + const scale = this.widget.scale.peek(); + let result: DropResult; + + if (edge === 'right' && matchFlavours(dropBlock.model, ['affine:list'])) { + const domRect = getRectByBlockComponent(dropBlock); + const placement = 'in'; + 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 placement = + isDropOnNoteBlock && + this.widget.doc.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, + rect: domRect, + element: dropBlock, + }, + }; } - return this._onDragStart(state); + return result; }; - private readonly _dropHandler = (context: UIEventStateContext) => { - const raw = context.get('dndState').raw; - const fileLength = raw.dataTransfer?.files.length ?? 0; - // If drop files, should let file drop extension handle it - if (fileLength > 0) { - return; + 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); } - this._onDrop(context); - this._cleanup(); }; - private readonly _onDragMove = (state: DndEventState) => { - this.widget.clearRaf(); - - this.widget.rafID = requestAnimationFrame(() => { - this.widget.edgelessWatcher.updateDragPreviewPosition(state); - this.widget.updateDropIndicator(state, true); - }); - return true; + private readonly _resetDropResult = () => { + if (this.dropIndicator) this.dropIndicator.rect = null; }; - private readonly _onDragStart = (state: DndEventState) => { - // Get current hover block element by path - const hoverBlock = this.widget.anchorBlockComponent.peek(); - if (!hoverBlock) return false; + private readonly _updateDropResult = (dropResult: DropResult | null) => { + if (!this.dropIndicator) return; - const element = captureEventTarget(state.raw.target); - const dragByHandle = !!element?.closest(AFFINE_DRAG_HANDLE_WIDGET); + 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 _getDraggedBlock = (draggedBlock: BlockComponent) => { + return this._selectAndSetDraggingBlock(draggedBlock); + }; + + private readonly _selectAndSetDraggingBlock = ( + hoveredBlock: BlockComponent + ) => { + this.std.selection.setGroup('note', [ + this.std.selection.create(BlockSelection, { + blockId: hoveredBlock.blockId, + }), + ]); + + return { + models: [hoveredBlock.model], + snapshot: this._toSnapshot([hoveredBlock]), + }; + }; + + private readonly _getSnapshotFromHoveredBlocks = () => { + const hoverBlock = this.widget.anchorBlockComponent.peek()!; const isInSurface = isGfxBlockComponent(hoverBlock); - if (isInSurface && dragByHandle) { - this._startDragging([hoverBlock], state); - return true; + if (isInSurface) { + return { + models: [hoverBlock.model], + snapshot: this._toSnapshot([hoverBlock]), + }; } - const selectBlockAndStartDragging = () => { - this._std.selection.setGroup('note', [ - this._std.selection.create(BlockSelection, { - blockId: hoverBlock.blockId, - }), - ]); - this._startDragging([hoverBlock], state); - }; - - if (this.widget.draggingElements.length === 0) { - const dragByBlock = - hoverBlock.contains(element) && !hoverBlock.model.text; - - const canDragByBlock = - matchFlavours(hoverBlock.model, [ - 'affine:attachment', - 'affine:bookmark', - ]) || hoverBlock.model.flavour.startsWith('affine:embed-'); - - if (!isInSurface && dragByBlock && canDragByBlock) { - selectBlockAndStartDragging(); - return true; - } - } - - // Should only start dragging when pointer down on drag handle - // And current mouse button is left button - if (!dragByHandle) { - this.widget.hide(); - return false; - } - - if (this.widget.draggingElements.length === 1 && !isInSurface) { - selectBlockAndStartDragging(); - return true; - } - - if (!this.widget.isHoverDragHandleVisible) return false; - 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; + const rangeManager = this.std.range; + if (nativeSelection && nativeSelection.rangeCount > 0 && rangeManager) { const range = nativeSelection.getRangeAt(0); const blocks = rangeManager.getSelectedBlockComponentsByRange(range, { @@ -224,10 +314,7 @@ export class DragEventWatcher { this.widget.anchorBlockId.peek()! ) ) { - const block = this.widget.anchorBlockComponent.peek(); - if (block) { - this.widget.selectionHelper.setSelectedBlocks([block]); - } + this.widget.selectionHelper.setSelectedBlocks([hoverBlock]); } const collapsedBlock: BlockComponent[] = []; @@ -258,58 +345,73 @@ export class DragEventWatcher { blocks ) as BlockComponent[]; - if (blocksExcludingChildren.length === 0) return false; - - this._startDragging(blocksExcludingChildren, state); - this.widget.hide(); - return true; + return { + models: blocksExcludingChildren.map(block => block.model), + snapshot: this._toSnapshot(blocksExcludingChildren), + }; }; - private readonly _onDrop = (context: UIEventStateContext) => { - const state = context.get('dndState'); + private readonly _onDrop = ( + dropBlock: BlockComponent, + dragPayload: DragBlockPayload, + dropPayload: DropPayload, + point: Point + ) => { + const result = this._getDropResult(dropBlock, dragPayload, dropPayload); + const snapshot = dragPayload?.bsEntity?.snapshot; - const event = state.raw; - event.preventDefault(); + if (!result || !snapshot || snapshot.content.length === 0) return; - const { clientX, clientY } = event; - const point = new Point(clientX, clientY); - const element = getClosestBlockComponentByPoint(point.clone()); - if (!element) { - const target = captureEventTarget(event.target); - const isEdgelessContainer = - target?.classList.contains('edgeless-container'); - if (!isEdgelessContainer) return; - - // drop to edgeless container - this._onDropOnEdgelessCanvas(context); - return; + { + const isEdgelessContainer = dropBlock.closest('.edgeless-container'); + if (isEdgelessContainer) { + // drop to edgeless container + this._onDropOnEdgelessCanvas( + dropBlock, + dragPayload, + dropPayload, + point + ); + return; + } } - const model = element.model; - const parent = this._std.store.getParent(model.id); + + const model = result.modelState.model; + const parent = + result.placement === 'in' ? model : this.std.store.getParent(model); + if (!parent) return; if (matchFlavours(parent, ['affine:surface'])) { return; } - const target: DropTarget | null = calcDropTarget(point, model, element); - if (!target) return; const index = - parent.children.indexOf(model) + (target.placement === 'before' ? 0 : 1); + result.placement === 'in' + ? 0 + : parent.children.indexOf(model) + + (result.placement === 'before' ? 0 : 1); if (matchFlavours(parent, ['affine:note'])) { - const snapshot = this._deserializeSnapshot(state); - if (snapshot) { - const [first] = snapshot.content; - if (first.flavour === 'affine:note') { - if (parent.id !== first.id) { - this._onDropNoteOnNote(snapshot, parent.id, index); - } - return; + const [first] = snapshot.content; + if (first.flavour === 'affine:note') { + if (parent.id !== first.id) { + this._onDropNoteOnNote(snapshot, parent.id, index); } + return; } } - this._deserializeData(state, parent.id, index).catch(console.error); + if ( + (dragPayload.from?.docId === this.widget.doc.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; + } + + this._dropToModel(snapshot, parent.id, index).catch(console.error); }; private readonly _onDropNoteOnNote = ( @@ -320,7 +422,7 @@ export class DragEventWatcher { const [first] = snapshot.content; const id = first.id; - const std = this._std; + const std = this.std; const job = this._getJob(); const snapshotWithoutNote = { ...snapshot, @@ -337,13 +439,18 @@ export class DragEventWatcher { .catch(console.error); }; - private readonly _onDropOnEdgelessCanvas = (context: UIEventStateContext) => { - const state = context.get('dndState'); - // If drop a note, should do nothing - const snapshot = this._deserializeSnapshot(state); + private readonly _onDropOnEdgelessCanvas = ( + dropBlock: BlockComponent, + dragPayload: DragBlockPayload, + dropPayload: DropPayload, + point: Point + ) => { const surfaceBlockModel = getSurfaceBlock(this.widget.doc); + const result = this._getDropResult(dropBlock, dragPayload, dropPayload); - if (!snapshot || !surfaceBlockModel) { + const snapshot = dragPayload?.bsEntity?.snapshot; + + if (!result || !snapshot || !surfaceBlockModel) { return; } @@ -360,7 +467,7 @@ export class DragEventWatcher { first.props.width = width; first.props.height = height; - const std = this._std; + const std = this.std; const job = this._getJob(); job .snapshotToSlice(snapshot, std.store, surfaceBlockModel.id) @@ -376,8 +483,8 @@ export class DragEventWatcher { const height = EMBED_CARD_HEIGHT[style]; const newBound = this._computeEdgelessBound( - state.raw.clientX, - state.raw.clientY, + point.x, + point.y, width, height ); @@ -397,8 +504,8 @@ export class DragEventWatcher { const height = Number(first.props.height || 100) * noteScale; const newBound = this._computeEdgelessBound( - state.raw.clientX, - state.raw.clientY, + point.x, + point.y, width, height ); @@ -409,10 +516,11 @@ export class DragEventWatcher { } } - const { left: viewportLeft, top: viewportTop } = this._gfx.viewport; const newNoteId = addNoteAtPoint( - this._std, - new Point(state.raw.x - viewportLeft, state.raw.y - viewportTop), + this.std, + Point.from( + this._gfx.viewport.toModelCoordFromClientCoord([point.x, point.y]) + ), { scale: this.widget.noteScale.peek(), } @@ -433,49 +541,32 @@ export class DragEventWatcher { }, }); - this._deserializeData(state, newNoteId).catch(console.error); + this._dropToModel(snapshot, newNoteId).catch(console.error); }; - private readonly _startDragging = ( - blocks: BlockComponent[], - state: DndEventState, - dragPreviewEl?: HTMLElement, - dragPreviewOffset?: Point - ) => { - if (!blocks.length) { - return; - } - - this.widget.draggingElements = blocks; - - this.widget.dragPreview = this.widget.previewHelper.createDragPreview( - blocks, - state, - dragPreviewEl, - dragPreviewOffset - ); - + private readonly _toSnapshot = (blocks: BlockComponent[]) => { const slice = Slice.fromModels( - this._std.store, + this.std.store, blocks.map(block => block.model) ); + const job = this._getJob(); - this.widget.dragging = true; - this._createDropIndicator(); - this.widget.hide(); - this._serializeData(slice, state); + const snapshot = job.sliceToSnapshot(slice); + if (!snapshot) return; + + return snapshot; }; private readonly _trackLinkedDocCreated = (id: string) => { - const isNewBlock = !this._std.store.hasBlock(id); + const isNewBlock = !this.std.store.hasBlock(id); if (!isNewBlock) { return; } const mode = - this._std.getOptional(DocModeProvider)?.getEditorMode() ?? 'page'; + this.std.getOptional(DocModeProvider)?.getEditorMode() ?? 'page'; - const telemetryService = this._std.getOptional(TelemetryProvider); + const telemetryService = this.std.getOptional(TelemetryProvider); telemetryService?.track('LinkedDocCreated', { control: `drop on ${mode}`, module: 'drag and drop', @@ -484,67 +575,38 @@ export class DragEventWatcher { }); }; - private get _dndAPI() { - return this._std.get(DndApiExtensionIdentifier); - } - - private get _std() { - return this.widget.std; - } - constructor(readonly widget: AffineDragHandleWidget) {} - private async _deserializeData( - state: DndEventState, + private async _dropToModel( + snapshot: SliceSnapshot, parent?: string, index?: number ) { try { - const dataTransfer = state.raw.dataTransfer; - if (!dataTransfer) throw new Error('No data transfer'); - - const std = this._std; + const std = this.std; const job = this._getJob(); - const snapshot = this._deserializeSnapshot(state); - if (snapshot) { - if (snapshot.content.length === 1) { - const [first] = snapshot.content; - if (first.flavour === 'affine:embed-linked-doc') { - this._trackLinkedDocCreated(first.id); - } + 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; } - - return null; - } catch { - return null; - } - } - - private _deserializeSnapshot(state: DndEventState) { - try { - const dataTransfer = state.raw.dataTransfer; - if (!dataTransfer) throw new Error('No data transfer'); - const data = dataTransfer.getData(this._dndAPI.mimeType); - const snapshot = this._dndAPI.decodeSnapshot(data); - - return snapshot; + // use snapshot + const slice = await job.snapshotToSlice( + snapshot, + std.store, + parent, + index + ); + return slice; } catch { return null; } } private _getJob() { - const std = this._std; + const std = this.std; return std.getTransformer([ newIdCrossDoc(std), reorderList(std), @@ -552,17 +614,8 @@ export class DragEventWatcher { ]); } - private _serializeData(slice: Slice, state: DndEventState) { - const dataTransfer = state.raw.dataTransfer; - if (!dataTransfer) return; - - const job = this._getJob(); - - const snapshot = job.sliceToSnapshot(slice); - if (!snapshot) return; - - const data = this._dndAPI.encodeSnapshot(snapshot); - dataTransfer.setData(this._dndAPI.mimeType, data); + private _isDropOnCurrentEditor(std?: BlockStdScope) { + return std === this.std; } watch() { @@ -591,17 +644,247 @@ export class DragEventWatcher { return; }); - this.widget.handleEvent('nativeDragStart', this._dragStartHandler, { - global: true, + + const widget = this.widget; + const std = this.std; + const disposables = widget.disposables; + const scrollable = getScrollContainer(this.host); + + disposables.add( + std.dnd.draggable({ + element: this.widget, + canDrag: () => { + const hoverBlock = this.widget.anchorBlockComponent.peek(); + return hoverBlock ? true : false; + }, + onDragStart: () => { + this.widget.dragging = true; + }, + onDrop: () => { + this._cleanup(); + }, + setDragPreview: ({ source, container }) => { + if (!source.data?.bsEntity?.modelIds.length) { + return; + } + + const query = widget.previewHelper['_calculateQuery']( + source.data?.bsEntity?.modelIds as string[] + ); + const store = widget.doc.doc.getStore({ query }); + const previewSpec = + SpecProvider.getInstance().getSpec('page:preview'); + const previewStd = new BlockStdScope({ + store, + extensions: previewSpec.value, + }); + const previewTemplate = previewStd.render(); + const noteBlock = this.widget.host.querySelector('affine-note'); + + container.style.width = `${noteBlock?.offsetWidth ?? noteBlock?.clientWidth ?? 500}px`; + container.append(previewTemplate); + }, + setDragData: () => { + const { snapshot } = this._getSnapshotFromHoveredBlocks(); + + return { + type: 'blocks', + modelIds: snapshot ? extractIdsFromSnapshot(snapshot) : [], + snapshot, + }; + }, + }) + ); + + if (scrollable) { + disposables.add( + std.dnd.autoScroll({ + element: scrollable, + canScroll: ({ source }) => { + return source.data?.bsEntity?.type === 'blocks'; + }, + }) + ); + } + + // used to handle drag move and drop + disposables.add( + std.dnd.monitor({ + 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 + ); + }, + }) + ); + + let dropTargetCleanUps: Map void)[]> = new Map(); + const makeBlockComponentDropTarget = (view: BlockComponent) => { + if (view.model.role !== 'content' && view.model.role !== 'hub') { + return; + } + + const cleanups: (() => void)[] = []; + + cleanups.push( + std.dnd.dropTarget< + DragBlockEntity, + { + modelId: string; + } + >({ + element: view, + getIsSticky: () => true, + canDrop: ({ source }) => { + if (source.data.bsEntity?.type === 'blocks') { + return ( + source.data.from?.docId !== widget.doc.id || + source.data.bsEntity.modelIds.every(id => id !== view.model.id) + ); + } + + return false; + }, + setDropData: () => { + return { + modelId: view.model.id, + }; + }, + }) + ); + + if (matchFlavours(view.model, ['affine:attachment', 'affine:bookmark'])) { + cleanups.push( + std.dnd.draggable({ + element: view, + canDrag: () => { + return !isGfxBlockComponent(view); + }, + onDragStart: () => { + this.widget.dragging = true; + }, + onDrop: () => { + this._cleanup(); + }, + setDragPreview: ({ source, container }) => { + if (!source.data?.bsEntity?.modelIds.length) { + return; + } + + const query = widget.previewHelper['_calculateQuery']( + source.data?.bsEntity?.modelIds as string[] + ); + const store = widget.doc.doc.getStore({ query }); + const previewSpec = + SpecProvider.getInstance().getSpec('page:preview'); + const previewStd = new BlockStdScope({ + store, + extensions: previewSpec.value, + }); + const previewTemplate = previewStd.render(); + + container.style.width = `${std.host.clientWidth || std.host.offsetWidth || 500}px`; + container.append(previewTemplate); + }, + setDragData: () => { + const { snapshot } = this._getDraggedBlock(view); + + return { + type: 'blocks', + modelIds: snapshot ? extractIdsFromSnapshot(snapshot) : [], + snapshot, + }; + }, + }) + ); + } + + dropTargetCleanUps.set(view.model.id, cleanups); + }; + + disposables.add( + std.view.viewUpdated.on(payload => { + if (payload.type === 'add') { + makeBlockComponentDropTarget(payload.view); + } else if ( + payload.type === 'delete' && + dropTargetCleanUps.has(payload.id) + ) { + dropTargetCleanUps.get(payload.id)!.forEach(clean => clean()); + dropTargetCleanUps.delete(payload.id); + } + }) + ); + + std.view.views.forEach(block => { + makeBlockComponentDropTarget(block); }); - this.widget.handleEvent('nativeDragMove', this._dragMoveHandler, { - global: true, - }); - this.widget.handleEvent('nativeDragEnd', this._dragEndHandler, { - global: true, - }); - this.widget.handleEvent('nativeDrop', this._dropHandler, { - global: true, + + disposables.add(() => { + dropTargetCleanUps.forEach(cleanUps => cleanUps.forEach(fn => fn())); + dropTargetCleanUps.clear(); }); } } diff --git a/blocksuite/affine/widget-drag-handle/src/watchers/edgeless-watcher.ts b/blocksuite/affine/widget-drag-handle/src/watchers/edgeless-watcher.ts index 8981fb4e42..12bb8be12d 100644 --- a/blocksuite/affine/widget-drag-handle/src/watchers/edgeless-watcher.ts +++ b/blocksuite/affine/widget-drag-handle/src/watchers/edgeless-watcher.ts @@ -6,7 +6,6 @@ import { getSelectedRect, isTopLevelBlock, } from '@blocksuite/affine-shared/utils'; -import type { DndEventState } from '@blocksuite/block-std'; import { GfxControllerIdentifier, type GfxToolsFullOptionValue, @@ -44,7 +43,6 @@ export class EdgelessWatcher { }) => { if (this.widget.scale.peek() !== zoom) { this.widget.scale.value = zoom; - this._updateDragPreviewOnViewportUpdate(); } if ( @@ -52,7 +50,6 @@ export class EdgelessWatcher { this.widget.center[1] !== center[1] ) { this.widget.center = [...center]; - this.widget.updateDropIndicatorOnScroll(); } if (this.widget.isTopLevelDragHandleVisible) { @@ -112,12 +109,6 @@ export class EdgelessWatcher { this.widget.dragHoverRect = this.hoverAreaRectTopLevelBlock; }; - private readonly _updateDragPreviewOnViewportUpdate = () => { - if (this.widget.dragPreview && this.widget.lastDragPointerState) { - this.updateDragPreviewPosition(this.widget.lastDragPointerState); - } - }; - checkTopLevelBlockSelection = () => { if (!this.widget.isConnected) return; @@ -147,24 +138,6 @@ export class EdgelessWatcher { this._showDragHandleOnTopLevelBlocks().catch(console.error); }; - updateDragPreviewPosition = (state: DndEventState) => { - if (!this.widget.dragPreview) return; - - const offsetParentRect = - this.widget.dragHandleContainerOffsetParent.getBoundingClientRect(); - - const dragPreviewOffset = this.widget.dragPreview.offset; - - const posX = state.raw.x - dragPreviewOffset.x - offsetParentRect.left; - - const posY = state.raw.y - dragPreviewOffset.y - offsetParentRect.top; - - this.widget.dragPreview.style.transform = `translate(${posX}px, ${posY}px) scale(${this.widget.scaleInNote.peek()})`; - - const altKey = state.raw.altKey; - this.widget.dragPreview.style.opacity = altKey ? '1' : '0.5'; - }; - get hoverAreaRectTopLevelBlock() { const area = this.hoverAreaTopLevelBlock; if (!area) return null; diff --git a/blocksuite/affine/widget-drag-handle/src/watchers/keyboard-event-watcher.ts b/blocksuite/affine/widget-drag-handle/src/watchers/keyboard-event-watcher.ts index 2507fd91f8..80ab9b1278 100644 --- a/blocksuite/affine/widget-drag-handle/src/watchers/keyboard-event-watcher.ts +++ b/blocksuite/affine/widget-drag-handle/src/watchers/keyboard-event-watcher.ts @@ -4,7 +4,7 @@ import type { AffineDragHandleWidget } from '../drag-handle.js'; export class KeyboardEventWatcher { private readonly _keyboardHandler: UIEventHandler = ctx => { - if (!this.widget.dragging || !this.widget.dragPreview) { + if (!this.widget.dragging) { return; } @@ -12,9 +12,6 @@ export class KeyboardEventWatcher { const event = state.event as KeyboardEvent; event.preventDefault(); event.stopPropagation(); - - const altKey = event.key === 'Alt' && event.altKey; - this.widget.dragPreview.style.opacity = altKey ? '1' : '0.5'; }; constructor(readonly widget: AffineDragHandleWidget) {} diff --git a/blocksuite/affine/widget-drag-handle/src/watchers/page-watcher.ts b/blocksuite/affine/widget-drag-handle/src/watchers/page-watcher.ts index 8d287b36fe..761e41069d 100644 --- a/blocksuite/affine/widget-drag-handle/src/watchers/page-watcher.ts +++ b/blocksuite/affine/widget-drag-handle/src/watchers/page-watcher.ts @@ -1,5 +1,4 @@ import { PageViewportService } from '@blocksuite/affine-shared/services'; -import { getScrollContainer } from '@blocksuite/affine-shared/utils'; import type { AffineDragHandleWidget } from '../drag-handle.js'; @@ -12,7 +11,6 @@ export class PageWatcher { watch() { const { disposables } = this.widget; - const scrollContainer = getScrollContainer(this.widget.rootComponent); disposables.add( this.widget.doc.slots.blockUpdated.on(() => this.widget.hide()) @@ -21,16 +19,7 @@ export class PageWatcher { disposables.add( this.pageViewportService.on(() => { this.widget.hide(); - if (this.widget.dropIndicator) { - this.widget.dropIndicator.rect = null; - } }) ); - - disposables.addFromEvent( - scrollContainer, - 'scrollend', - this.widget.updateDropIndicatorOnScroll - ); } } diff --git a/blocksuite/framework/block-std/package.json b/blocksuite/framework/block-std/package.json index 1fd3b66733..3dabc211d7 100644 --- a/blocksuite/framework/block-std/package.json +++ b/blocksuite/framework/block-std/package.json @@ -14,6 +14,9 @@ "author": "toeverything", "license": "MIT", "dependencies": { + "@atlaskit/pragmatic-drag-and-drop": "^1.4.0", + "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0", + "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3", "@blocksuite/global": "workspace:*", "@blocksuite/inline": "workspace:*", "@blocksuite/store": "workspace:*", diff --git a/blocksuite/framework/block-std/src/event/control/pointer.ts b/blocksuite/framework/block-std/src/event/control/pointer.ts index 53c67a4275..c4200e3b20 100644 --- a/blocksuite/framework/block-std/src/event/control/pointer.ts +++ b/blocksuite/framework/block-std/src/event/control/pointer.ts @@ -368,6 +368,17 @@ class DragController extends PointerControllerBase { disposables.addFromEvent(host, 'pointerdown', this._down); this._applyScribblePatch(); + disposables.add( + host.std.dnd.monitor({ + onDragStart: () => { + this._nativeDragging = true; + }, + onDrop: () => { + this._nativeDragging = false; + }, + }) + ); + disposables.addFromEvent(host, 'dragstart', this._nativeDragStart); disposables.addFromEvent(host, 'dragend', this._nativeDragEnd); disposables.addFromEvent(host, 'drag', this._nativeDragMove); diff --git a/blocksuite/framework/block-std/src/extension/dnd/index.ts b/blocksuite/framework/block-std/src/extension/dnd/index.ts new file mode 100644 index 0000000000..bdd8a3ef55 --- /dev/null +++ b/blocksuite/framework/block-std/src/extension/dnd/index.ts @@ -0,0 +1,317 @@ +import { + draggable, + dropTargetForElements, + type ElementGetFeedbackArgs, + monitorForElements, +} from '@atlaskit/pragmatic-drag-and-drop/element/adapter'; +import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview'; +import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview'; +import type { DropTargetRecord } from '@atlaskit/pragmatic-drag-and-drop/types'; +import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element'; +import { + attachClosestEdge, + type Edge, + extractClosestEdge, +} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge'; +import type { ServiceIdentifier } from '@blocksuite/global/di'; + +import { LifeCycleWatcherIdentifier } from '../../identifier.js'; +import { LifeCycleWatcher } from '../lifecycle-watcher.js'; +import type { + ElementDragEventBaseArgs, + ElementDragEventMap, + ElementDropEventMap, + ElementDropTargetFeedbackArgs, + ElementMonitorFeedbackArgs, + OriginalAutoScrollOption, + OriginalDraggableOption, + OriginalDropTargetOption, + OriginalMonitorOption, +} from './types.js'; + +export type DragEntity = { type: string }; + +export type DragFrom = { at: string }; + +export type DragFromBlockSuite = { + at: 'blocksuite-editor'; + docId: string; +}; + +export type DragPayload< + E extends DragEntity = DragEntity, + F extends DragFrom = DragFromBlockSuite, +> = { + bsEntity?: E; + from?: F; +}; + +export type DropPayload = { + edge?: Edge; +} & T; + +export type DropEdge = Edge; + +export interface DNDEntity { + basic: DragEntity; +} + +export type DraggableOption< + PayloadEntity extends DragEntity, + PayloadFrom extends DragFrom, + DropPayload extends {}, +> = Pick & { + /** + * Set drag data for the draggable element. + * @see {@link ElementGetFeedbackArgs} for callback arguments + * @param callback - callback to set drag + */ + setDragData?: (args: ElementGetFeedbackArgs) => PayloadEntity; + + /** + * Set external drag data for the draggable element. + * @param callback - callback to set external drag data + * @see {@link ElementGetFeedbackArgs} for callback arguments + */ + setExternalDragData?: ( + args: ElementGetFeedbackArgs + ) => ReturnType< + Required['getInitialDataForExternal'] + >; + + /** + * Set custom drag preview for the draggable element. + * + * `setDragPreview` is a function that will be called with a `container` element and other drag data as parameter when the drag preview is generating. + * Append the custom element to the `container` which will be used to generate the preview. Once the drag preview is generated, the + * `container` element and its children will be removed automatically. + * + * If you want to completely disable the drag preview, just set `setDragPreview` to `false`. + * + * @example + * dnd.draggable{ + * // ... + * setDragPreview: ({ container }) => { + * const preview = document.createElement('div'); + * preview.style.width = '100px'; + * preview.style.height = '100px'; + * preview.style.backgroundColor = 'red'; + * preview.innerText = 'Custom Drag Preview'; + * container.appendChild(preview); + * } + * } + * + * @param callback - callback to set custom drag preview + * @returns + */ + setDragPreview?: + | false + | (( + options: ElementDragEventBaseArgs< + DragPayload + > & { + /** + * Allows you to use the native `setDragImage` function if you want + * Although, we recommend using alternative techniques (see element adapter docs) + */ + nativeSetDragImage: DataTransfer['setDragImage'] | null; + container: HTMLElement; + } + ) => void); +} & ElementDragEventMap, DropPayload>; + +export type DropTargetOption< + PayloadEntity extends DragEntity, + PayloadFrom extends DragFrom, + DropPayload extends {}, +> = { + /** + * {@link OriginalDropTargetOption.element} + */ + element: HTMLElement; + + /** + * Allow drop position for the drop target. + */ + allowDropPosition?: Edge[]; + + /** + * {@link OriginalDropTargetOption.getDropEffect} + */ + getDropEffect?: ( + args: ElementDropTargetFeedbackArgs> + ) => DropTargetRecord['dropEffect']; + + /** + * {@link OriginalDropTargetOption.canDrop} + */ + canDrop?: ( + args: ElementDropTargetFeedbackArgs> + ) => boolean; + + /** + * {@link OriginalDropTargetOption.getData} + */ + setDropData?: ( + args: ElementDropTargetFeedbackArgs> + ) => DropPayload; + + /** + * {@link OriginalDropTargetOption.getIsSticky} + */ + getIsSticky?: ( + args: ElementDropTargetFeedbackArgs> + ) => boolean; +} & ElementDropEventMap, DropPayload>; + +export type MonitorOption< + PayloadEntity extends DragEntity, + PayloadFrom extends DragFrom, + DropPayload extends {}, +> = { + /** + * {@link OriginalMonitorOption.canMonitor} + */ + canMonitor?: ( + args: ElementMonitorFeedbackArgs> + ) => boolean; +} & ElementDragEventMap, DropPayload>; + +export type AutoScroll< + PayloadEntity extends DragEntity, + PayloadFrom extends DragFrom, +> = { + element: HTMLElement; + canScroll?: ( + args: ElementDragEventBaseArgs> + ) => void; + getAllowedAxis?: ( + args: ElementDragEventBaseArgs> + ) => ReturnType['getAllowedAxis']>; + getConfiguration?: ( + args: ElementDragEventBaseArgs> + ) => ReturnType['getConfiguration']>; +}; + +export const DndExtensionIdentifier = LifeCycleWatcherIdentifier( + 'DndController' +) as ServiceIdentifier; + +export class DndController extends LifeCycleWatcher { + static override key = 'DndController'; + + /** + * Make an element draggable. + */ + draggable< + PayloadEntity extends DragEntity = DragEntity, + DropData extends {} = {}, + >( + args: DraggableOption< + PayloadEntity, + DragFromBlockSuite, + DropPayload + > + ) { + const { + setDragData, + setExternalDragData, + setDragPreview, + element, + dragHandle, + ...rest + } = args; + + return draggable({ + ...(rest as Partial), + element, + dragHandle, + onGenerateDragPreview: options => { + if (setDragPreview) { + setCustomNativeDragPreview({ + render: renderOption => { + setDragPreview({ + ...options, + ...renderOption, + }); + }, + nativeSetDragImage: options.nativeSetDragImage, + }); + } else if (setDragPreview === false) { + disableNativeDragPreview({ + nativeSetDragImage: options.nativeSetDragImage, + }); + } + }, + getInitialData: options => { + const bsEntity = setDragData?.(options) ?? {}; + + return { + bsEntity, + from: { + at: 'blocksuite-editor', + docId: this.std.store.doc.id, + }, + }; + }, + getInitialDataForExternal: setExternalDragData + ? options => { + return setExternalDragData?.(options); + } + : undefined, + }); + } + + /** + * Make an element a drop target. + */ + dropTarget< + PayloadEntity extends DragEntity = DragEntity, + DropData extends {} = {}, + PayloadFrom extends DragFrom = DragFromBlockSuite, + >(args: DropTargetOption>) { + const { + element, + setDropData, + allowDropPosition = ['bottom', 'left', 'top', 'right'], + ...rest + } = args; + + return dropTargetForElements({ + element, + getData: options => { + const data = setDropData?.(options) ?? {}; + const edge = extractClosestEdge( + attachClosestEdge(data, { + element: options.element, + input: options.input, + allowedEdges: allowDropPosition, + }) + ); + + return edge + ? { + ...data, + edge, + } + : data; + }, + ...(rest as Partial), + }); + } + + monitor< + PayloadEntity extends DragEntity = DragEntity, + DropData extends {} = {}, + PayloadFrom extends DragFrom = DragFromBlockSuite, + >(args: MonitorOption>) { + return monitorForElements(args as OriginalMonitorOption); + } + + autoScroll< + PayloadEntity extends DragEntity = DragEntity, + PayloadFrom extends DragFrom = DragFromBlockSuite, + >(options: AutoScroll) { + return autoScrollForElements(options as OriginalAutoScrollOption); + } +} diff --git a/blocksuite/framework/block-std/src/extension/dnd/types.ts b/blocksuite/framework/block-std/src/extension/dnd/types.ts new file mode 100644 index 0000000000..04f2794fd4 --- /dev/null +++ b/blocksuite/framework/block-std/src/extension/dnd/types.ts @@ -0,0 +1,118 @@ +import type { + draggable, + dropTargetForElements, + ElementDropTargetGetFeedbackArgs, + ElementMonitorGetFeedbackArgs, + monitorForElements, +} from '@atlaskit/pragmatic-drag-and-drop/element/adapter'; +import type { + DragLocation, + // oxlint-disable-next-line no-unused-vars + DragLocationHistory, + DropTargetRecord, + ElementDragType, +} from '@atlaskit/pragmatic-drag-and-drop/types'; +import type { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element'; + +export type ElementDragEventBaseArgs = { + /** + * {@link DragLocationHistory} of the drag + */ + location: { + /** + * {@link DragLocationHistory.initial} + */ + initial: DragLocationWithPayload; + /** + * {@link DragLocationHistory.current} + */ + current: DragLocationWithPayload; + /** + * {@link DragLocationHistory.previous} + */ + previous: Pick, 'dropTargets'>; + }; + source: Omit & { data: Payload }; +}; + +export type DragLocationWithPayload = Omit< + DragLocation, + 'dropTargets' +> & { + dropTargets: DropTargetRecordWithPayload[]; +}; + +export type DropTargetRecordWithPayload = Omit< + DropTargetRecord, + 'data' +> & { + data: Payload; +}; + +export type ElementDragEventMap = { + onDragStart?: ( + data: ElementDragEventBaseArgs + ) => void; + onDrag?: (data: ElementDragEventBaseArgs) => void; + onDrop?: (data: ElementDragEventBaseArgs) => void; + onDropTargetChange?: ( + data: ElementDragEventBaseArgs + ) => void; +}; + +type DropTargetLocalizedData = { + self: DropTargetRecord; +}; + +export type ElementDropTargetFeedbackArgs = Omit< + ElementDropTargetGetFeedbackArgs, + 'source' +> & { + source: Omit & { data: Payload }; +}; + +export type ElementDropEventMap = { + onDragStart?: ( + data: ElementDragEventBaseArgs & + DropTargetLocalizedData + ) => void; + onDrag?: ( + data: ElementDragEventBaseArgs & + DropTargetLocalizedData + ) => void; + onDrop?: ( + data: ElementDragEventBaseArgs & + DropTargetLocalizedData + ) => void; + onDropTargetChange?: ( + data: ElementDragEventBaseArgs & + DropTargetLocalizedData + ) => void; + onDragEnter?: ( + data: ElementDragEventBaseArgs & + DropTargetLocalizedData + ) => void; + onDragLeave?: ( + data: ElementDragEventBaseArgs & + DropTargetLocalizedData + ) => void; +}; + +export type ElementMonitorFeedbackArgs = Omit< + ElementMonitorGetFeedbackArgs, + 'source' +> & { + source: Omit & { data: Payload }; +}; + +export type OriginalDraggableOption = Parameters[0]; + +export type OriginalDropTargetOption = Parameters< + typeof dropTargetForElements +>[0]; + +export type OriginalMonitorOption = Parameters[0]; + +export type OriginalAutoScrollOption = Parameters< + typeof autoScrollForElements +>[0]; diff --git a/blocksuite/framework/block-std/src/extension/index.ts b/blocksuite/framework/block-std/src/extension/index.ts index 20f94f8308..a75e97f1f2 100644 --- a/blocksuite/framework/block-std/src/extension/index.ts +++ b/blocksuite/framework/block-std/src/extension/index.ts @@ -1,6 +1,7 @@ export * from './block-view.js'; export * from './command.js'; export * from './config.js'; +export * from './dnd/index.js'; export * from './flavour.js'; export * from './keymap.js'; export * from './lifecycle-watcher.js'; diff --git a/blocksuite/framework/block-std/src/scope/block-std-scope.ts b/blocksuite/framework/block-std/src/scope/block-std-scope.ts index 20429f1081..8bb4056a2a 100644 --- a/blocksuite/framework/block-std/src/scope/block-std-scope.ts +++ b/blocksuite/framework/block-std/src/scope/block-std-scope.ts @@ -11,6 +11,7 @@ import { import { Clipboard } from '../clipboard/index.js'; import { CommandManager } from '../command/index.js'; import { UIEventDispatcher } from '../event/index.js'; +import { DndController } from '../extension/dnd/index.js'; import type { BlockService } from '../extension/index.js'; import { GfxController } from '../gfx/controller.js'; import { GfxSelectionManager } from '../gfx/selection.js'; @@ -44,6 +45,7 @@ const internalExtensions = [ GfxSelectionManager, SurfaceMiddlewareExtension, ViewManager, + DndController, ]; export class BlockStdScope { @@ -63,6 +65,10 @@ export class BlockStdScope { return this.provider.getAll(LifeCycleWatcherIdentifier); } + get dnd() { + return this.get(DndController); + } + get clipboard() { return this.get(Clipboard); } diff --git a/blocksuite/framework/block-std/src/view/view-store.ts b/blocksuite/framework/block-std/src/view/view-store.ts index d2b13f71a8..0b307bb34c 100644 --- a/blocksuite/framework/block-std/src/view/view-store.ts +++ b/blocksuite/framework/block-std/src/view/view-store.ts @@ -1,11 +1,31 @@ +import { Slot } from '@blocksuite/global/utils'; + import { LifeCycleWatcher } from '../extension/index.js'; import type { BlockComponent, WidgetComponent } from './element/index.js'; +type ViewUpdatePayload = + | { + id: string; + type: 'delete'; + view: BlockComponent; + } + | { + id: string; + type: 'add'; + view: BlockComponent; + }; + export class ViewStore extends LifeCycleWatcher { static override readonly key = 'viewStore'; private readonly _blockMap = new Map(); + viewUpdated: Slot = new Slot(); + + get views() { + return Array.from(this._blockMap.values()); + } + private readonly _fromId = ( blockId: string | undefined | null ): BlockComponent | null => { @@ -19,7 +39,12 @@ export class ViewStore extends LifeCycleWatcher { private readonly _widgetMap = new Map(); deleteBlock = (node: BlockComponent) => { - this._blockMap.delete(node.id); + this._blockMap.delete(node.model.id); + this.viewUpdated.emit({ + id: node.model.id, + type: 'delete', + view: node, + }); }; deleteWidget = (node: WidgetComponent) => { @@ -41,7 +66,15 @@ export class ViewStore extends LifeCycleWatcher { }; setBlock = (node: BlockComponent) => { + if (this._blockMap.has(node.model.id)) { + this.deleteBlock(node); + } this._blockMap.set(node.model.id, node); + this.viewUpdated.emit({ + id: node.model.id, + type: 'add', + view: node, + }); }; setWidget = (node: WidgetComponent) => { diff --git a/blocksuite/framework/store/src/schema/schema.ts b/blocksuite/framework/store/src/schema/schema.ts index 8193ebdf82..4cc41719ba 100644 --- a/blocksuite/framework/store/src/schema/schema.ts +++ b/blocksuite/framework/store/src/schema/schema.ts @@ -7,6 +7,19 @@ import { SchemaValidateError } from './error.js'; export class Schema { readonly flavourSchemaMap = new Map(); + safeValidate = ( + flavour: string, + parentFlavour?: string, + childFlavours?: string[] + ): boolean => { + try { + this.validate(flavour, parentFlavour, childFlavours); + return true; + } catch { + return false; + } + }; + validate = ( flavour: string, parentFlavour?: string, diff --git a/blocksuite/tests-legacy/custom-loader.mjs b/blocksuite/tests-legacy/custom-loader.mjs new file mode 100644 index 0000000000..9a26b3b555 --- /dev/null +++ b/blocksuite/tests-legacy/custom-loader.mjs @@ -0,0 +1,24 @@ +import { resolve as rs } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +import json from './package.json' with { type: 'json' }; + +const ROOT_PATH = rs(fileURLToPath(import.meta.url), '../../../'); + +const importsMap = json.bsImport; + +export async function resolve(specifier, context, defaultResolve) { + if (importsMap[specifier]) { + const remapped = importsMap[specifier]; + return defaultResolve( + rs(ROOT_PATH, './node_modules', remapped), + context, + defaultResolve + ); + } + return defaultResolve(specifier, context, defaultResolve); +} + +export async function load(url, context, defaultLoad) { + return defaultLoad(url, context, defaultLoad); +} diff --git a/blocksuite/tests-legacy/drag.spec.ts b/blocksuite/tests-legacy/drag.spec.ts index fe69220320..c6cc905354 100644 --- a/blocksuite/tests-legacy/drag.spec.ts +++ b/blocksuite/tests-legacy/drag.spec.ts @@ -77,7 +77,7 @@ test('move drag handle in list', async ({ page }) => { await assertRichTexts(page, ['123', '456', '789']); await dragHandleFromBlockToBlockBottomById(page, '5', '3', false); await expect(page.locator('.affine-drag-indicator')).toBeHidden(); - await assertRichTexts(page, ['789', '123', '456']); + await assertRichTexts(page, ['123', '789', '456']); }); test('move drag handle in nested block', async ({ page }) => { diff --git a/blocksuite/tests-legacy/package.json b/blocksuite/tests-legacy/package.json index b403dc4362..f8f521596d 100644 --- a/blocksuite/tests-legacy/package.json +++ b/blocksuite/tests-legacy/package.json @@ -4,7 +4,7 @@ "type": "module", "main": "index.js", "scripts": { - "test": "yarn playwright test" + "test": "NODE_OPTIONS=\"--experimental-loader ../tests-legacy/custom-loader.mjs\" yarn playwright test" }, "dependencies": { "@blocksuite/affine-components": "workspace:*", @@ -16,6 +16,13 @@ "@playwright/test": "=1.49.1", "@toeverything/theme": "^1.1.3" }, + "bsImport": { + "@atlaskit/pragmatic-drag-and-drop/element/adapter": "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js", + "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview": "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/disable-native-drag-preview.js", + "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview": "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/set-custom-native-drag-preview.js", + "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element": "@atlaskit/pragmatic-drag-and-drop-auto-scroll/dist/cjs/entry-point/element.js", + "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge": "@atlaskit/pragmatic-drag-and-drop-hitbox/dist/cjs/closest-edge.js" + }, "repository": { "type": "git", "url": "https://github.com/toeverything/blocksuite.git" diff --git a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-4-3.json b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-4-3.json index e30fa55bdf..36d763f9f8 100644 --- a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-4-3.json +++ b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-4-3.json @@ -158,29 +158,29 @@ "order": null }, "children": [] + }, + { + "type": "block", + "id": "4", + "flavour": "affine:list", + "version": 1, + "props": { + "type": "bulleted", + "text": { + "$blocksuite:internal:text$": true, + "delta": [ + { + "insert": "B" + } + ] + }, + "checked": false, + "collapsed": false, + "order": null + }, + "children": [] } ] - }, - { - "type": "block", - "id": "4", - "flavour": "affine:list", - "version": 1, - "props": { - "type": "bulleted", - "text": { - "$blocksuite:internal:text$": true, - "delta": [ - { - "insert": "B" - } - ] - }, - "checked": false, - "collapsed": false, - "order": null - }, - "children": [] } ] } diff --git a/blocksuite/tests-legacy/utils/asserts.ts b/blocksuite/tests-legacy/utils/asserts.ts index 07de81c25b..db2a51fc38 100644 --- a/blocksuite/tests-legacy/utils/asserts.ts +++ b/blocksuite/tests-legacy/utils/asserts.ts @@ -16,7 +16,6 @@ import type { EditorHost, TextSelection, } from '@blocksuite/block-std'; -import { BLOCK_ID_ATTR } from '@blocksuite/block-std'; import { assertExists } from '@blocksuite/global/utils'; import type { InlineRootElement } from '@inline/inline-editor.js'; import { expect, type Locator, type Page } from '@playwright/test'; @@ -57,6 +56,8 @@ import { currentEditorIndex } from './multiple-editor.js'; export { assertExists }; +const BLOCK_ID_ATTR = 'data-block-id'; + export const defaultStore = { meta: { pages: [ diff --git a/package.json b/package.json index 4705f6e804..ee5833c20b 100644 --- a/package.json +++ b/package.json @@ -153,7 +153,7 @@ "fs-xattr": "npm:@napi-rs/xattr@latest", "vite": "6.0.7", "decode-named-character-reference@npm:^1.0.0": "patch:decode-named-character-reference@npm%3A1.0.2#~/.yarn/patches/decode-named-character-reference-npm-1.0.2-db17a755fd.patch", - "@atlaskit/pragmatic-drag-and-drop@npm:^1.1.0": "patch:@atlaskit/pragmatic-drag-and-drop@npm%3A1.4.0#~/.yarn/patches/@atlaskit-pragmatic-drag-and-drop-npm-1.4.0-75c45f52d3.patch", + "@atlaskit/pragmatic-drag-and-drop": "patch:@atlaskit/pragmatic-drag-and-drop@npm%3A1.4.0#~/.yarn/patches/@atlaskit-pragmatic-drag-and-drop-npm-1.4.0-75c45f52d3.patch", "yjs": "patch:yjs@npm%3A13.6.21#~/.yarn/patches/yjs-npm-13.6.21-c9f1f3397c.patch" } } diff --git a/packages/frontend/component/package.json b/packages/frontend/component/package.json index 4d2ddadc4c..dd343a50ff 100644 --- a/packages/frontend/component/package.json +++ b/packages/frontend/component/package.json @@ -23,7 +23,7 @@ "@affine/electron-api": "workspace:*", "@affine/graphql": "workspace:*", "@affine/i18n": "workspace:*", - "@atlaskit/pragmatic-drag-and-drop": "patch:@atlaskit/pragmatic-drag-and-drop@npm%3A1.4.0#~/.yarn/patches/@atlaskit-pragmatic-drag-and-drop-npm-1.4.0-75c45f52d3.patch", + "@atlaskit/pragmatic-drag-and-drop": "^1.4.0", "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3", "@blocksuite/icons": "2.2.2", "@emotion/react": "^11.14.0", diff --git a/tests/affine-local/e2e/drag-page.spec.ts b/tests/affine-local/e2e/drag-page.spec.ts index 961ced37f3..79edcdae63 100644 --- a/tests/affine-local/e2e/drag-page.spec.ts +++ b/tests/affine-local/e2e/drag-page.spec.ts @@ -243,7 +243,7 @@ test('drag a page link in editor to favourites', async ({ page }) => { ); }); -test('drag a page card block to another page', async ({ page }) => { +test.skip('drag a page card block to another page', async ({ page }) => { await clickNewPageButton(page); await page.waitForTimeout(500); await page.keyboard.press('Enter'); @@ -293,7 +293,7 @@ test('drag a page card block to another page', async ({ page }) => { ); }); -test('drag a favourite page into blocksuite', async ({ page }) => { +test.skip('drag a favourite page into blocksuite', async ({ page }) => { await clickNewPageButton(page, 'hi from page'); await page.getByTestId('pin-button').click(); const pageId = getCurrentDocIdFromUrl(page); diff --git a/tests/kit/src/utils/editor.ts b/tests/kit/src/utils/editor.ts index 28cebc8fa5..27ecd596ee 100644 --- a/tests/kit/src/utils/editor.ts +++ b/tests/kit/src/utils/editor.ts @@ -1,12 +1,11 @@ import type { AffineEditorContainer } from '@blocksuite/affine/presets'; -import { - AFFINE_FORMAT_BAR_WIDGET, - EDGELESS_ELEMENT_TOOLBAR_WIDGET, - EDGELESS_TOOLBAR_WIDGET, -} from '@blocksuite/blocks'; import type { IVec, XYWH } from '@blocksuite/global/utils'; import { expect, type Locator, type Page } from '@playwright/test'; +const AFFINE_FORMAT_BAR_WIDGET = 'affine-format-bar-widget'; +const EDGELESS_ELEMENT_TOOLBAR_WIDGET = 'edgeless-element-toolbar-widget'; +const EDGELESS_TOOLBAR_WIDGET = 'edgeless-toolbar-widget'; + export function locateModeSwitchButton( page: Page, mode: 'page' | 'edgeless', diff --git a/yarn.lock b/yarn.lock index 8422c554f6..59ea587542 100644 --- a/yarn.lock +++ b/yarn.lock @@ -270,7 +270,7 @@ __metadata: "@affine/electron-api": "workspace:*" "@affine/graphql": "workspace:*" "@affine/i18n": "workspace:*" - "@atlaskit/pragmatic-drag-and-drop": "patch:@atlaskit/pragmatic-drag-and-drop@npm%3A1.4.0#~/.yarn/patches/@atlaskit-pragmatic-drag-and-drop-npm-1.4.0-75c45f52d3.patch" + "@atlaskit/pragmatic-drag-and-drop": "npm:^1.4.0" "@atlaskit/pragmatic-drag-and-drop-hitbox": "npm:^1.0.3" "@blocksuite/affine": "workspace:*" "@blocksuite/icons": "npm:2.2.2" @@ -1217,6 +1217,16 @@ __metadata: languageName: node linkType: hard +"@atlaskit/pragmatic-drag-and-drop-auto-scroll@npm:^2.1.0": + version: 2.1.0 + resolution: "@atlaskit/pragmatic-drag-and-drop-auto-scroll@npm:2.1.0" + dependencies: + "@atlaskit/pragmatic-drag-and-drop": "npm:^1.4.0" + "@babel/runtime": "npm:^7.0.0" + checksum: 10/a137947d240b01414c8235d9b3a5c949456ef3877488abdbfa92c491631ade10dd7fd6b3dc5ca31077617067c44dd1e90b1f6d1049b71d05d7064db92bc7810b + languageName: node + linkType: hard + "@atlaskit/pragmatic-drag-and-drop-hitbox@npm:^1.0.3": version: 1.0.3 resolution: "@atlaskit/pragmatic-drag-and-drop-hitbox@npm:1.0.3" @@ -3833,6 +3843,9 @@ __metadata: version: 0.0.0-use.local resolution: "@blocksuite/block-std@workspace:blocksuite/framework/block-std" dependencies: + "@atlaskit/pragmatic-drag-and-drop": "npm:^1.4.0" + "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "npm:^2.1.0" + "@atlaskit/pragmatic-drag-and-drop-hitbox": "npm:^1.0.3" "@blocksuite/global": "workspace:*" "@blocksuite/inline": "workspace:*" "@blocksuite/store": "workspace:*"