Skip to content

UniqueID extension not properly working with drag-and-drop #7581

@remusris

Description

@remusris

Affected Packages

UniqueID extension

Version(s)

3.20.1

Bug Description

When you drag and drop a node, upon dropping the node the uniqueID is lost for both the node that is being dropped and the node of the position that is being swapped with.

This is the package
https://github.com/ueberdosis/tiptap/tree/develop/packages/extension-unique-id

For context it is not working with the default drag-and-drop package from tiptap. This is not a custom drag-and-drop implementation, it is using this library below.
https://github.com/ueberdosis/tiptap/tree/develop/packages/extension-drag-handle-react

Commenting out this code below seems to fix the issue

/* event.dataTransfer?.effectAllowed === 'copyMove' ||
                event.dataTransfer?.effectAllowed === 'copy' */

Inside of

props: {
          // `handleDOMEvents` is called before `transformPasted`
          // so we can do some checks before
          handleDOMEvents: {
            // only create new ids for dropped content
            // or dropped content while holding `alt`
            // or content is dragged from another editor
            drop: (view, event) => {
              if (
                dragSourceElement !== view.dom.parentElement
                // seems to be creating new ids when dropping content
                /* event.dataTransfer?.effectAllowed === 'copyMove' ||
                event.dataTransfer?.effectAllowed === 'copy' */
              ) {
                dragSourceElement = null
                transformPasted = true
              }

              return false
            },
            // always create new ids on pasted content
            paste: () => {
              transformPasted = true

              return false
            },
          },

in the unique-id.ts file https://github.com/ueberdosis/tiptap/blob/develop/packages/extension-unique-id/src/unique-id.ts

I made a url to demonstrate this
https://tiptap-unique-id-drag-and-drop-bug.vercel.app/

Below is the link to the repo
https://github.com/remusris/tiptap-unique-id-drag-and-drop-bug

Below is a video to capture this
https://github.com/user-attachments/assets/e2e1cd23-79e9-4050-b34c-a06ee163f846

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

When dragging and dropping the node ID should stay consistent, however by default the uniqueID extension from tiptap is not doing that

Additional Context (Optional)

Recording of this below
https://github.com/user-attachments/assets/5e634e57-1a0c-4d57-b5c5-c5c23ce2a076

Dependency Updates

  • Yes, I've updated all my dependencies.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Open SourceThe issue or pull reuqest is related to the open source packages of Tiptap.

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions