refactor: optimize find element coords

[Aslam97]

Changes Overview

This PR includes two major improvements to the drag handle system:

1. Refactored findElementNextToCoords to use browser's native elementsFromPoint API for better performance
2. Enhanced DragHandle component (Vue 3)

Implementation Approach

findElementNextToCoords Optimization

• Replaced querySelectorAll traversal with elementsFromPoint
• Added clampToContent helper to automatically clamp coordinates to editor content bounds
• Added findClosestTopLevelBlock helper to efficiently find top-level draggable blocks

DragHandle Vue 3 Lifecycle Improvements

• Added await nextTick() in onMounted to ensure DOM is fully ready before plugin initialization
• Store plugin handle in shallowRef to access unbind method for proper cleanup
• Added null checks for root.value and editor destruction state before operations
• Call unbind() in onBeforeUnmount to properly clean up event listeners
• Added onElementDragStart and onElementDragEnd props for drag lifecycle events

Additional Notes

Performance Improvements (Chrome DevTools profiling)

findElementNextToCoords optimization results:

• Total time: 1,282.0 ms → 47.7 ms (~96% reduction, ~27x faster)
• % of execution time: 22.0% → 2.1% (~90% reduction)
• Self time: 1.2 ms → 0.3 ms (75% reduction, ~4x faster)

See performance comparison screenshots below.

BEFORE

AFTER

Other Benefits

• Accuracy: Clamps coordinates to content bounds before hit-testing
• Future-proof: If we later listen to mousemove from root/document level, coordinate clamping ensures hovering on edges always returns correct results
• Added onElementDragStart and onElementDragEnd callbacks for drag lifecycle events

Checklist

• I have created a changeset for this PR if necessary.
• My changes do not break the library.
• I have added tests where applicable.
• I have followed the project guidelines.
• I have fixed any lint issues.

Related Issues

This update addresses and fixes the following issues:

#7055
#7054
#7052
#7034
#7022
#6978
#6960
#6923
#6942

It also closes the following pull requests:

#6921
#6980
#6931

[changeset-bot]

🦋 Changeset detected

Latest commit: a68a429

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 70 packages

Name	Type
@tiptap/extension-drag-handle	Patch
@tiptap/extension-drag-handle-react	Patch
@tiptap/extension-drag-handle-vue-2	Patch
@tiptap/extension-drag-handle-vue-3	Patch
@tiptap/core	Patch
@tiptap/extension-blockquote	Patch
@tiptap/extension-bold	Patch
@tiptap/extension-bubble-menu	Patch
@tiptap/extension-bullet-list	Patch
@tiptap/extension-code-block-lowlight	Patch
@tiptap/extension-code-block	Patch
@tiptap/extension-code	Patch
@tiptap/extension-collaboration-caret	Patch
@tiptap/extension-collaboration	Patch
@tiptap/extension-color	Patch
@tiptap/extension-details	Patch
@tiptap/extension-document	Patch
@tiptap/extension-emoji	Patch
@tiptap/extension-file-handler	Patch
@tiptap/extension-floating-menu	Patch
@tiptap/extension-font-family	Patch
@tiptap/extension-hard-break	Patch
@tiptap/extension-heading	Patch
@tiptap/extension-highlight	Patch
@tiptap/extension-horizontal-rule	Patch
@tiptap/extension-image	Patch
@tiptap/extension-invisible-characters	Patch
@tiptap/extension-italic	Patch
@tiptap/extension-link	Patch
@tiptap/extension-list	Patch
@tiptap/extension-mathematics	Patch
@tiptap/extension-mention	Patch
@tiptap/extension-node-range	Patch
@tiptap/extension-ordered-list	Patch
@tiptap/extension-paragraph	Patch
@tiptap/extension-strike	Patch
@tiptap/extension-subscript	Patch
@tiptap/extension-superscript	Patch
@tiptap/extension-table-of-contents	Patch
@tiptap/extension-table	Patch
@tiptap/extension-text-align	Patch
@tiptap/extension-text-style	Patch
@tiptap/extension-text	Patch
@tiptap/extension-typography	Patch
@tiptap/extension-underline	Patch
@tiptap/extension-unique-id	Patch
@tiptap/extension-youtube	Patch
@tiptap/extensions	Patch
@tiptap/html	Patch
@tiptap/pm	Patch
@tiptap/react	Patch
@tiptap/starter-kit	Patch
@tiptap/static-renderer	Patch
@tiptap/suggestion	Patch
@tiptap/vue-2	Patch
@tiptap/vue-3	Patch
@tiptap/extension-character-count	Patch
@tiptap/extension-dropcursor	Patch
@tiptap/extension-focus	Patch
@tiptap/extension-gapcursor	Patch
@tiptap/extension-history	Patch
@tiptap/extension-list-item	Patch
@tiptap/extension-list-keymap	Patch
@tiptap/extension-placeholder	Patch
@tiptap/extension-table-cell	Patch
@tiptap/extension-table-header	Patch
@tiptap/extension-table-row	Patch
@tiptap/extension-task-item	Patch
@tiptap/extension-task-list	Patch
@tiptap/markdown	Patch

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

[netlify]

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	a68a429
🔍 Latest deploy log	https://app.netlify.com/projects/tiptap-embed/deploys/68f973b0cc66be000835fcd1
😎 Deploy Preview	https://deploy-preview-7063--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 project configuration.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[pkg-pr-new]

Open in StackBlitz

@tiptap/extension-character-count

npm i https://pkg.pr.new/@tiptap/extension-character-count@7063

@tiptap/extension-focus

npm i https://pkg.pr.new/@tiptap/extension-focus@7063

@tiptap/extension-dropcursor

npm i https://pkg.pr.new/@tiptap/extension-dropcursor@7063

@tiptap/extension-gapcursor

npm i https://pkg.pr.new/@tiptap/extension-gapcursor@7063

@tiptap/extension-history

npm i https://pkg.pr.new/@tiptap/extension-history@7063

@tiptap/extension-list-item

npm i https://pkg.pr.new/@tiptap/extension-list-item@7063

@tiptap/extension-list-keymap

npm i https://pkg.pr.new/@tiptap/extension-list-keymap@7063

@tiptap/extension-placeholder

npm i https://pkg.pr.new/@tiptap/extension-placeholder@7063

@tiptap/extension-table-cell

npm i https://pkg.pr.new/@tiptap/extension-table-cell@7063

@tiptap/extension-table-header

npm i https://pkg.pr.new/@tiptap/extension-table-header@7063

@tiptap/extension-table-row

npm i https://pkg.pr.new/@tiptap/extension-table-row@7063

@tiptap/extension-task-item

npm i https://pkg.pr.new/@tiptap/extension-task-item@7063

@tiptap/extension-task-list

npm i https://pkg.pr.new/@tiptap/extension-task-list@7063

@tiptap/extension-blockquote

npm i https://pkg.pr.new/@tiptap/extension-blockquote@7063

@tiptap/core

npm i https://pkg.pr.new/@tiptap/core@7063

@tiptap/extension-bold

npm i https://pkg.pr.new/@tiptap/extension-bold@7063

@tiptap/extension-bubble-menu

npm i https://pkg.pr.new/@tiptap/extension-bubble-menu@7063

@tiptap/extension-bullet-list

npm i https://pkg.pr.new/@tiptap/extension-bullet-list@7063

@tiptap/extension-code-block

npm i https://pkg.pr.new/@tiptap/extension-code-block@7063

@tiptap/extension-code

npm i https://pkg.pr.new/@tiptap/extension-code@7063

@tiptap/extension-code-block-lowlight

npm i https://pkg.pr.new/@tiptap/extension-code-block-lowlight@7063

@tiptap/extension-collaboration

npm i https://pkg.pr.new/@tiptap/extension-collaboration@7063

@tiptap/extension-collaboration-caret

npm i https://pkg.pr.new/@tiptap/extension-collaboration-caret@7063

@tiptap/extension-color

npm i https://pkg.pr.new/@tiptap/extension-color@7063

@tiptap/extension-details

npm i https://pkg.pr.new/@tiptap/extension-details@7063

@tiptap/extension-document

npm i https://pkg.pr.new/@tiptap/extension-document@7063

@tiptap/extension-drag-handle-react

npm i https://pkg.pr.new/@tiptap/extension-drag-handle-react@7063

@tiptap/extension-drag-handle-vue-2

npm i https://pkg.pr.new/@tiptap/extension-drag-handle-vue-2@7063

@tiptap/extension-drag-handle

npm i https://pkg.pr.new/@tiptap/extension-drag-handle@7063

@tiptap/extension-drag-handle-vue-3

npm i https://pkg.pr.new/@tiptap/extension-drag-handle-vue-3@7063

@tiptap/extension-emoji

npm i https://pkg.pr.new/@tiptap/extension-emoji@7063

@tiptap/extension-file-handler

npm i https://pkg.pr.new/@tiptap/extension-file-handler@7063

@tiptap/extension-floating-menu

npm i https://pkg.pr.new/@tiptap/extension-floating-menu@7063

@tiptap/extension-font-family

npm i https://pkg.pr.new/@tiptap/extension-font-family@7063

@tiptap/extension-hard-break

npm i https://pkg.pr.new/@tiptap/extension-hard-break@7063

@tiptap/extension-highlight

npm i https://pkg.pr.new/@tiptap/extension-highlight@7063

@tiptap/extension-heading

npm i https://pkg.pr.new/@tiptap/extension-heading@7063

@tiptap/extension-horizontal-rule

npm i https://pkg.pr.new/@tiptap/extension-horizontal-rule@7063

@tiptap/extension-image

npm i https://pkg.pr.new/@tiptap/extension-image@7063

@tiptap/extension-invisible-characters

npm i https://pkg.pr.new/@tiptap/extension-invisible-characters@7063

@tiptap/extension-italic

npm i https://pkg.pr.new/@tiptap/extension-italic@7063

@tiptap/extension-link

npm i https://pkg.pr.new/@tiptap/extension-link@7063

@tiptap/extension-list

npm i https://pkg.pr.new/@tiptap/extension-list@7063

@tiptap/extension-mention

npm i https://pkg.pr.new/@tiptap/extension-mention@7063

@tiptap/extension-mathematics

npm i https://pkg.pr.new/@tiptap/extension-mathematics@7063

@tiptap/extension-node-range

npm i https://pkg.pr.new/@tiptap/extension-node-range@7063

@tiptap/extension-ordered-list

npm i https://pkg.pr.new/@tiptap/extension-ordered-list@7063

@tiptap/extension-paragraph

npm i https://pkg.pr.new/@tiptap/extension-paragraph@7063

@tiptap/extension-strike

npm i https://pkg.pr.new/@tiptap/extension-strike@7063

@tiptap/extension-table

npm i https://pkg.pr.new/@tiptap/extension-table@7063

@tiptap/extension-subscript

npm i https://pkg.pr.new/@tiptap/extension-subscript@7063

@tiptap/extension-superscript

npm i https://pkg.pr.new/@tiptap/extension-superscript@7063

@tiptap/extension-text

npm i https://pkg.pr.new/@tiptap/extension-text@7063

@tiptap/extension-table-of-contents

npm i https://pkg.pr.new/@tiptap/extension-table-of-contents@7063

@tiptap/extension-text-align

npm i https://pkg.pr.new/@tiptap/extension-text-align@7063

@tiptap/extension-typography

npm i https://pkg.pr.new/@tiptap/extension-typography@7063

@tiptap/extension-text-style

npm i https://pkg.pr.new/@tiptap/extension-text-style@7063

@tiptap/extension-underline

npm i https://pkg.pr.new/@tiptap/extension-underline@7063

@tiptap/extension-youtube

npm i https://pkg.pr.new/@tiptap/extension-youtube@7063

@tiptap/extension-unique-id

npm i https://pkg.pr.new/@tiptap/extension-unique-id@7063

@tiptap/extensions

npm i https://pkg.pr.new/@tiptap/extensions@7063

@tiptap/html

npm i https://pkg.pr.new/@tiptap/html@7063

@tiptap/markdown

npm i https://pkg.pr.new/@tiptap/markdown@7063

@tiptap/react

npm i https://pkg.pr.new/@tiptap/react@7063

@tiptap/starter-kit

npm i https://pkg.pr.new/@tiptap/starter-kit@7063

@tiptap/pm

npm i https://pkg.pr.new/@tiptap/pm@7063

@tiptap/static-renderer

npm i https://pkg.pr.new/@tiptap/static-renderer@7063

@tiptap/suggestion

npm i https://pkg.pr.new/@tiptap/suggestion@7063

@tiptap/vue-3

npm i https://pkg.pr.new/@tiptap/vue-3@7063

@tiptap/vue-2

npm i https://pkg.pr.new/@tiptap/vue-2@7063

commit: a68a429

[Copilot]

Pull Request Overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[bdbch]

The PR looks good however I dislike that we updated the demos to much here. I guess you needed to test it with the UniqueID extension?

Could we revert the demo changes so the PR only includes changes to the actual extension for now?

[Aslam97]

The PR looks good however I dislike that we updated the demos to much here. I guess you needed to test it with the UniqueID extension?

Could we revert the demo changes so the PR only includes changes to the actual extension for now?

Updated the PR