fix: Enable cross-editor drag and drop functionality (#6690) #6835
Conversation
🦋 Changeset detectedLatest commit: 5730a4a The changes in this PR will be included in the next version bump. This PR includes changesets to release 70 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for tiptap-embed ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
|
||
| if (dragFromOtherEditor?.isEditable) { | ||
| // setTimeout to avoid the wrong content after drop, timeout arg can't be empty or 0 | ||
| setTimeout(() => { |
There was a problem hiding this comment.
this deletion may occur for multiple times (once per rule plugin)
that is the cause of #6690 issue i think
| // in @tiptap/extension-drag-handle-react, @tiptap/extension-drag-handle-vue-2,3, the element is hidden by default | ||
| // Add a default style to avoid the element being visible when only @tiptap/extension-drag-handle is added | ||
| element.style.visibility = 'hidden' | ||
| element.style.position = 'absolute' |
There was a problem hiding this comment.
If user use @tiptap/extension-drag-handle without "-react" or "-vue",
handle marker is always shown, so i add default style
|
Hello @msokh , I'm thrilled that someone is finally fixing this issue. I'm working on another third-party plugin, "tiptap-extension-global-drag-handle," and after solving many other problems, I'm ultimately stuck on dragging tables. It's been a real headache. I was wondering, is your solution applicable to tables? |
|
Hi @aten0724 , I recorded a video and confirmed that the solution works properly with tables as well. Could you please confirm if this behavior matches what you were expecting for table dragging? table_behavior_compressed.mov |
Yes, that's excellent! This is exactly the effect I was looking for. I'm really looking forward to your pull request going live. |
msokh
force-pushed
the
fix/cross-editor-dnd
branch
2 times, most recently
from
2242000 to
37261f6
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR enables cross-editor drag and drop functionality for Tiptap editors, allowing content to be seamlessly moved between multiple editor instances. The implementation moves cross-editor logic from PasteRule.ts to dragHandler.ts to prevent duplicate deletion execution and improve encapsulation.
Key changes:
- Moved cross-editor drag logic from PasteRule.ts to dragHandler.ts for better organization and single execution per operation
- Enhanced content serialization using view.serializeForClipboard() for better preservation during transfers
- Added getEditor() helper function to find target editors from DOM elements using editor instance detection
Reviewed Changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/extension-drag-handle/src/helpers/getEditor.ts | New helper function to find editor instances from DOM elements |
| packages/extension-drag-handle/src/helpers/dragHandler.ts | Enhanced drag handling with cross-editor support and improved content serialization |
| packages/extension-drag-handle/src/drag-handle.ts | Added default styling to prevent visibility issues |
| packages/core/src/PasteRule.ts | Removed cross-editor logic that was moved to dragHandler.ts |
| demos/src/Experiments/GlobalDragHandle/Vue/index.vue | Complete rewrite of Vue demo with improved styling and dual editor setup |
| demos/src/Experiments/GlobalDragHandle/Vue/index.spec.js | New Cypress tests for Vue demo functionality |
| demos/src/Experiments/GlobalDragHandle/Vue/DragHandle.js | Removed custom drag handle implementation |
| demos/src/Experiments/GlobalDragHandle/React/styles.scss | New comprehensive styling for React demo |
| demos/src/Experiments/GlobalDragHandle/React/index.tsx | New React demo implementation with dual editors |
| demos/src/Experiments/GlobalDragHandle/React/index.spec.js | New Cypress tests for React demo |
| .changeset/friendly-crabs-stare.md | Changeset documenting the new cross-editor functionality |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| if (!selection.empty) { | ||
| dragEditor.commands.deleteRange(selection) |
There was a problem hiding this comment.
The condition checks !selection.empty but then calls deleteRange(selection) which expects a range object with from and to properties. This should be dragEditor.commands.deleteRange({ from: selection.from, to: selection.to }) to match the expected API signature.
| if (!selection.empty) { | |
| dragEditor.commands.deleteRange(selection) | |
| dragEditor.commands.deleteRange({ from: selection.from, to: selection.to }) |
msokh
force-pushed
the
fix/cross-editor-dnd
branch
from
37261f6 to
d9deeb0
Compare
- Add support for dragging content between multiple editor instances - Improve content preservation using serializeForClipboard - Add smart deletion control based on source editor's editable state - Update React, Vue 2, and Vue 3 drag handle components - Add comprehensive demos and tests for cross-editor functionality This enhancement allows users to seamlessly move content between different Tiptap editor instances, making it easier to build applications with multiple interconnected editors.
msokh
force-pushed
the
fix/cross-editor-dnd
branch
from
61325af to
5730a4a
Compare
2 participants
Changes Overview
This PR fixes support for drag and drop between multiple Tiptap editor instances (#6690).
Implementation Approach
Moved cross-editor logic from PasteRule.ts to dragHandler.ts:
Testing Done
Verification Steps
Additional Notes
2025-08-18_16.30.06_compressed.mp4
Checklist
Related Issues