Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Separate drags from drops in stopEvent #2070

Merged
merged 2 commits into from
Oct 22, 2021
Merged

Separate drags from drops in stopEvent #2070

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3104ec8
Separate drags from drops in stopEvent
thatsjonsense Oct 21, 2021
e784be7
Move !isDropEvent
thatsjonsense Oct 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions packages/core/src/NodeView.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,9 @@ export class NodeView<
return false
}

const isDropEvent = event.type === 'drop'
const isInput = ['INPUT', 'BUTTON', 'SELECT', 'TEXTAREA'].includes(target.tagName)
|| target.isContentEditable
|| (target.isContentEditable && !isDropEvent)
Copy link
Contributor

Choose a reason for hiding this comment

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

Can you tell me why this is related to the isInput check?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The following line will stop any event that matches this isInput check. But I found that all drops were being classified as inputs because this check is so broad, just because they landed inside inside the content editable. This prevents ProseMirror's handleDrop from running. handleDrop is what removes the original slice after you drop. Without this change, it would always duplicate.

An alternative would be to change the line below to

    if (isInput && !isDropEvent) {
      return true
    }

Copy link
Contributor

Choose a reason for hiding this comment

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

Ah right, that isContentEditable check initially was for detecting nested editors. Maybe I have to improve that.

An alternative would be to change the line below to
if (isInput && !isDropEvent) {
return true
}

better!

And do you think this is related to #1938?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yea, I have a feeling #1938 would be solved by the change on line 169 below to always return false if it's a drop event


// any input event within node views should be ignored by ProseMirror
if (isInput) {
Expand All @@ -129,7 +130,7 @@ export class NodeView<
const isPasteEvent = event.type === 'paste'
const isCutEvent = event.type === 'cut'
const isClickEvent = event.type === 'mousedown'
const isDragEvent = event.type.startsWith('drag') || event.type === 'drop'
const isDragEvent = event.type.startsWith('drag')

// ProseMirror tries to drag selectable nodes
// even if `draggable` is set to `false`
Expand Down Expand Up @@ -165,6 +166,7 @@ export class NodeView<
// these events are handled by prosemirror
if (
isDragging
|| isDropEvent
|| isCopyEvent
|| isPasteEvent
|| isCutEvent
Expand Down