Fix duplicated content and other bugs related to drag and drop handling #4238
Conversation
🦋 Changeset detectedLatest commit: 3827dfc The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
| !readOnly && | ||
| !state.isComposing && | ||
| !state.isUpdatingSelection && | ||
| !state.isDraggingInternally |
There was a problem hiding this comment.
Noticed issues in Firefox when trying to reconcile the selection while dragging
| Editor.isVoid(editor, node) || | ||
| Editor.void(editor, { at: path, voids: true }) |
There was a problem hiding this comment.
Not sure why Editor.void doesn't check the current path, seems it only checks above the current path which is a bit counter-intuitive, so we also need to also if the node at the current path is void.
| if ( | ||
| !HAS_BEFORE_INPUT_SUPPORT || | ||
| (!IS_SAFARI && event.dataTransfer.files.length > 0) | ||
| ) { | ||
| event.preventDefault() | ||
| const range = ReactEditor.findEventRange(editor, event) | ||
| const data = event.dataTransfer | ||
| Transforms.select(editor, range) | ||
| ReactEditor.insertData(editor, data) |
There was a problem hiding this comment.
This logic should run on all browsers, not just the ones that don't have beforeinput support. Deferring to beforeinput causes most of the text-insertion related bugs that this PR fixes. This change is aligned with how copy paste is handled in Slate.
clauderic
force-pushed
the
drag-and-drop-fixes
branch
from
c3fca0e to
3827dfc
Compare
|
Thanks @clauderic! |
…ng (ianstormtaylor#4238) * Fix drag and drop logic * Add changeset
Description
This PR fixes a number of different issues that happen today with drag and drop.
It's loosely based off of this abandonned PR: #3562
Issue
Fixes:
#4222
#3522
#3137
#2076
Examples
Simple.drag.and.drop.-.Before.mp4
Simple.drag.and.drop.-.After.mp4
Complex.example.-.Before.mp4
Complex.example.-.After.mp4
Void.nodes.-.Before.mp4
Void.nodes.-.After.mp4
Dragging.between.editors.mp4
Context
The main things this PR does:
insertFragmentand callpreventDefault()in thedropevent rather than letting thebeforeinputevent go through. This strategy works consistently across all browsers and would also work with other input reconciliation strategies once Android support lands.Checks
yarn test.yarn lint. (Fix errors withyarn fix.)yarn start.)yarn changeset add.)