Handling Drag and Drop in ProseMirror: Issue with Safari on Mac

1

When implementing drag-and-drop functionality in ProseMirror using the handleDOMEvents plugin, I encountered an issue specific to Safari on macOS. The same code works perfectly in other browsers like Chrome, Firefox, and Edge but fails in Safari.

The Problem Debugging revealed that the resolvedPos.depth value differs in Safari compared to other browsers during the drop event. This discrepancy causes the logic to fail when comparing parent nodes (parentNode.eq(startParentNode)), even though the drag-and-drop functionality behaves consistently in other environments.

Here’s the code snippet

drop(view, event) {
    if (!editor.isEditable) {
        event.preventDefault();
        return true;
    }

    const pos = view.posAtCoords({ left: event.clientX, top: event.clientY });
    if (!startEvent || !editor.isActive("tabsContainer")) { 
        return false;
    }
    
    const startPos = view.posAtCoords({ left: startEvent?.clientX ?? 0, top: startEvent?.clientY ?? 0 });
    if (pos && startPos && startEvent) {
        // Resolve the position to get a ResolvedPos object
        const resolvedPos = view.state.doc.resolve(pos.pos);
        const startResolvedPos = view.state.doc.resolve(startPos.pos);
        const parentDepth = resolvedPos.depth;
        const startParentDepth = startResolvedPos.depth;
        const parentNode = resolvedPos.node(parentDepth);
        const startParentNode = startResolvedPos.node(startParentDepth);

        if (parentNode.eq(startParentNode)) {
            startEvent = null;
            // Proceed with the drop logic
            return false; // Allow the drop
        }
    }
    
    event.preventDefault();
    startEvent = null;
    return true; // Prevent the drop
}