Skip to content

[Drag and Drop] Fix drag-out snapshots and copy behavior - #3424

Draft
Julia Roldi (juliaroldi) wants to merge 5 commits into
masterfrom
u/juliaroldi/drop-out-of-editor
Draft

[Drag and Drop] Fix drag-out snapshots and copy behavior#3424
Julia Roldi (juliaroldi) wants to merge 5 commits into
masterfrom
u/juliaroldi/drop-out-of-editor

Conversation

@juliaroldi

@juliaroldi Julia Roldi (juliaroldi) commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

Summary

Update DragAndDropPlugin to compare the selected content model segments between dragstart and dragend. When an internal drag removes content outside the editor, emit a contentChanged event with the new DragOutOfEditor source and take an undo snapshot; internal drops do not create the extra snapshot.

Also preserve the original selection when Ctrl or Command is held during an internal drop so the operation copies content instead of moving it.

How to test

  1. Run yarn test:fast --testPathPattern=dragAndDrop.
  2. Enable HandleDropInternalContent, select editor content, and drag it outside the editor. Verify the removal emits a DragOutOfEditor content change and Undo restores the content.
  3. Drag selected content to another position inside the editor while holding Ctrl on Windows or Command on macOS. Verify the content is copied; without the modifier, verify it is moved.

@github-actions

github-actions Bot commented Aug 3, 2026

Copy link
Copy Markdown
PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://microsoft.github.io/roosterjs/pr-preview/pr-3424/

Built to branch gh-pages at 2026-08-07 23:56 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds an undo snapshot when content is dragged out of the editor by hooking blur in DragAndDropPlugin, ensuring drag-out edits become undoable and preventing stale internal-drag state from impacting later drops.

Changes:

  • Register a blur DOM event handler in DragAndDropPlugin to takeSnapshot() when an internal drag is in progress and reset the internal drag flag.
  • Extend DragAndDropPlugin unit tests to cover blur behavior (snapshot taken/reset flag, no snapshot without internal drag, snapshot only once per drag).

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
packages/roosterjs-content-model-plugins/lib/dragAndDrop/DragAndDropPlugin.ts Adds blur handling to snapshot and reset internalDrag during drag-out scenarios.
packages/roosterjs-content-model-plugins/test/dragAndDrop/DragAndDropPluginTest.ts Adds unit tests validating snapshot/reset behavior on blur during internal drag.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +66 to +69
if (this.internalDrag) {
this.editor?.takeSnapshot();
this.internalDrag = false;
}
@JiuqingSong

Copy link
Copy Markdown
Collaborator

When drag out of editor and drop, we don't delete from editor, right? Then why do we need to take a snapshot?

@juliaroldi

Copy link
Copy Markdown
Contributor Author

When drag out of editor and drop, we don't delete from editor, right? Then why do we need to take a snapshot?

We do not delete if the content is dragged inside the same window. Ex: drag from the editor to the markdown editor, the content is deleted.

@JiuqingSong

Copy link
Copy Markdown
Collaborator

When drag out of editor and drop, we don't delete from editor, right? Then why do we need to take a snapshot?

We do not delete if the content is dragged inside the same window. Ex: drag from the editor to the markdown editor, the content is deleted.

I just tried, yes the content is deleted in that case. But it seems this is done by browser, but not by our code. This may cause some problem since our code does not know something got deleted. I think we need to explore a way that we can know drop is happening and content is being deleted, so we can delete it with our code, and take snapshot, and trigger ContentChanged event

@juliaroldi
Julia Roldi (juliaroldi) marked this pull request as draft August 5, 2026 18:31
@juliaroldi Julia Roldi (juliaroldi) changed the title [Drag and Drop] Take snapshot when content is dragged out of the editor [Drag and Drop] Fix drag-out snapshots and copy behavior Aug 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants