fix(DragHandle): prevent Vue from overriding visibility when locked

[benjamincanac]

Changes Overview

Fixed drag handle visibility not updating dynamically in Vue 3 component.

Implementation Approach

• Moved initial visibility: 'hidden' from inline styles to onMounted hook
• Removed visibility from the style object in render function
• This allows the plugin to control visibility dynamically

Testing Done

I haven't been able to test this in the Vue demo because it uses the editor.chain().focus().lockDragHandle().run() command which is not available when using the drag-handle-plugin.ts but only available in https://github.com/ueberdosis/tiptap/blob/develop/packages/extension-drag-handle/src/drag-handle.ts#L88.

I encountered this issue when using the Vue 3 DragHandle component which is why I'm using .setMeta('lockDragHandle', true) instead.

Verification Steps

1. Use the drag handle component in a Tiptap editor
2. Hover over content blocks
3. Verify the drag handle appears and disappears correctly

Additional Notes

The inline style was preventing the plugin from updating visibility. Setting it programmatically instead fixes this.

This was discovered while implementing the Editor component in Nuxt UI.

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

[changeset-bot]

🦋 Changeset detected

Latest commit: b525e79

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

This PR includes changesets to release 72 packages

Name	Type
@tiptap/extension-drag-handle-vue-3	Patch
@tiptap/core	Patch
@tiptap/extension-audio	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-drag-handle-react	Patch
@tiptap/extension-drag-handle-vue-2	Patch
@tiptap/extension-drag-handle	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-twitch	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/markdown	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

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	b525e79
🔍 Latest deploy log	https://app.netlify.com/projects/tiptap-embed/deploys/697afb19a9c7bf000898cd43
😎 Deploy Preview	https://deploy-preview-7252--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.

[Phyroks]

Is this still being worked on, or why hasn't it received a review yet?

[Phyroks]

@benjamincanac When reviewing pull requests that have already been merged, please ensure that the checklist at the top has been checked off. Failure to do so may result in delays.

[bdbch]

resolved conflicts & added a changeset. when tests run through successfully I'll merge it.

[pkg-pr-new]

Open in StackBlitz

@tiptap/extension-character-count

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

@tiptap/extension-dropcursor

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

@tiptap/extension-gapcursor

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

@tiptap/extension-focus

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

@tiptap/extension-list-item

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

@tiptap/extension-history

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

@tiptap/extension-list-keymap

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

@tiptap/extension-placeholder

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

@tiptap/extension-table-cell

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

@tiptap/extension-table-header

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

@tiptap/extension-table-row

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

@tiptap/extension-task-item

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

@tiptap/extension-task-list

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

@tiptap/core

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

@tiptap/extension-audio

npm i https://pkg.pr.new/@tiptap/extension-audio@7252

@tiptap/extension-blockquote

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

@tiptap/extension-bold

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

@tiptap/extension-bullet-list

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

@tiptap/extension-code

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

@tiptap/extension-bubble-menu

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

@tiptap/extension-collaboration

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

@tiptap/extension-code-block

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

@tiptap/extension-code-block-lowlight

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

@tiptap/extension-collaboration-caret

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

@tiptap/extension-color

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

@tiptap/extension-details

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

@tiptap/extension-document

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

@tiptap/extension-drag-handle

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

@tiptap/extension-drag-handle-react

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

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

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

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

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

@tiptap/extension-emoji

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

@tiptap/extension-floating-menu

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

@tiptap/extension-file-handler

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

@tiptap/extension-font-family

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

@tiptap/extension-hard-break

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

@tiptap/extension-heading

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

@tiptap/extension-horizontal-rule

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

@tiptap/extension-image

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

@tiptap/extension-highlight

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

@tiptap/extension-invisible-characters

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

@tiptap/extension-italic

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

@tiptap/extension-link

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

@tiptap/extension-mathematics

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

@tiptap/extension-list

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

@tiptap/extension-mention

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

@tiptap/extension-node-range

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

@tiptap/extension-ordered-list

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

@tiptap/extension-paragraph

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

@tiptap/extension-strike

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

@tiptap/extension-subscript

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

@tiptap/extension-table

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

@tiptap/extension-superscript

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

@tiptap/extension-table-of-contents

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

@tiptap/extension-text

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

@tiptap/extension-text-style

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

@tiptap/extension-text-align

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

@tiptap/extension-typography

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

@tiptap/extension-twitch

npm i https://pkg.pr.new/@tiptap/extension-twitch@7252

@tiptap/extension-underline

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

@tiptap/extension-unique-id

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

@tiptap/extension-youtube

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

@tiptap/extensions

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

@tiptap/markdown

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

@tiptap/html

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

@tiptap/react

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

@tiptap/starter-kit

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

@tiptap/pm

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

@tiptap/static-renderer

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

@tiptap/suggestion

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

@tiptap/vue-3

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

@tiptap/vue-2

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

commit: b525e79