Fix : React DND broken when used within a NodeViewWrapper

[tej1562]

Drag event doesn't work on components wrapped inside a NodeViewWrapper.

Please describe your changes

Currently, drag events are explicitly prevented on NodeView. This is also applied to NodeView children due to event propagation, thus preventing drag events on the components inside NodeView. This PR adds a check to ensure drag events are only prevented on the NodeView parent.

How did you accomplish your changes

Added event target check to ensure drag prevention on NodeView doesn't propagate to child components.

    if (!isDraggable && isSelectable && isDragEvent && event.target === this.dom) {
      event.preventDefault()
    }

    if (isDraggable && isDragEvent && !isDragging && event.target === this.dom) {
      event.preventDefault()
      return false
    }

How have you tested your changes

Created a NodeView with a react dnd component using NodeViewWrapper. Drag works as expected on the react dnd component.

How can we verify your changes

Create a NodeView with draggable component and check if component can be dragged.

Remarks

[add any additional remarks here]

Checklist

• The changes are not breaking the editor
• Added tests where possible
• Followed the guidelines
• Fixed linting issues

Related issues

#5018

[netlify]

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	185c1b4
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/660ab5afa4a13a0009dbeed4
😎 Deploy Preview	https://deploy-preview-5023--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[bdbch]

Since you check for this.dom - would that break something if I drag a child node of my prosemirror node that is not supposed to be draggable?

[bdbch]

Sorry, misclicked there!

[tej1562]

The drag on child node won't affect the drag behaviour of parent node. Here, this.dom refers to dom element representing the parent NodeView and it's drag behaviour only depends on the draggable property. If draggable is set to false on the NodeView, then it remains undraggable but child nodes within NodeView can still be dragged.