feat(EditorDragHandle): pass tiptap props, custom middleware, fix onNodeChange emit #5960

solidprinciples · 2026-01-27T23:12:15Z

❓ Type of change

📖 Documentation (updates to the documentation or readme)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality)
✨ New feature (a non-breaking change that adds functionality)
🧹 Chore (updates to the build process or auxiliary tools and libraries)
⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

While working with the editor, I noticed that nested drag handle options are documented but weren’t being explicitly passed through. This PR updates the implementation to correctly pick up the nested drag handle options exposed by TipTap’s DragHandleProps type.

It also includes a small nit fix to omit the same keys from the button props, since they aren’t used there.

This change fixes and enables nested drag handles.

I ran into this while trying to get nesting working locally and realized it was a straightforward fix worth contributing.

📝 Checklist

I have linked an issue or discussion.
I have updated the documentation accordingly.

…d 'nestedOptions', omit the same from button props

coderabbitai · 2026-01-27T23:14:35Z

📝 Walkthrough

Walkthrough

The pull request modifies the EditorDragHandle component to emit a new hover event when valid nodes are detected, updates property forwarding to include nested and nestedOptions in the drag handle props while omitting them from button props, and changes click event handling from direct binding to slot-provided callbacks. Additionally, the changes extend the FloatingUIOptions type definition with an optional custom Middleware array property and update the buildFloatingUIMiddleware utility function to inject custom middleware supplied through options.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main changes: enabling nested drag handle props, adding custom middleware support, and fixing the onNodeChange emit behavior.
Description check	✅ Passed	The description is related to the changeset, explaining the motivation for forwarding nested props and mentioning it as a bug fix.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2026-01-27T23:21:46Z

npm i https://pkg.pr.new/@nuxt/ui@5960

commit: 5b6e015

…e onClick

solidprinciples · 2026-01-28T05:30:45Z

@benjamincanac - noticed a few bugs/things that didn't quite align with documentation.

Here's a small concise PR for the fixes:

nested, nestedOptions weren't passed - omitted these from buttons - so it now supports nesting!
emit @node-change is documented as emitting on hover, but was only emitted onClick - fixed!
onClick is not impacted - so no breaking changes!

😄 first contribution, long time user of nuxt ui ❤️ - custom middleware seemed simple enough, and opens doors for flexibility. If its not robust enough, I can revert it.

benjamincanac

When building the Editor I did try to store the current node and send it inside the nodeChange even like you did but for a reason I never understood this breaks the drag handle completely, I even tried to pass it inside default slot props but didn't work either. My guess is the node.toJSON() object is just too big.

You can try in the playground and see it no longer displays when hovering elements.

solidprinciples · 2026-01-28T10:33:56Z

When building the Editor I did try to store the current node and send it inside the nodeChange even like you did but for a reason I never understood this breaks the drag handle completely, I even tried to pass it inside default slot props but didn't work either. My guess is the node.toJSON() object is just too big.

You can try in the playground and see it no longer displays when hovering elements.

Interestingly enough - nodeChanged works - is this a prop/event collision in vue? It would unfortunately constitute a breaking change, but that did get it functional in playground - debug prints before/after emits for proof:

Thoughts? Right there with you on don't understand why - even why this fix works, seemingly. Good that it's only ~1 month old, so a minor breaking fix to a small (early) set of users. :)

Nobody even flagged these as issues/features, just helping out where I can!

solidprinciples · 2026-01-28T10:52:29Z

For performance impact - it does look optimized under the hood - only called when actually changing - not retriggering on mouse movement.

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/runtime/components/EditorDragHandle.vue`:
- Around line 42-44: The emit was renamed from nodeChange to nodeChanged,
breaking consumers who used `@node-change`; update the API docs and changelog to
document this breaking change and provide a migration note (replace `@node-change`
with `@node-changed`), and ensure the type/interface EditorDragHandleEmits and any
usages of nodeChange in EditorDragHandle.vue and elsewhere are updated to
nodeChanged so templates and listeners reflect the new event name.

coderabbitai · 2026-01-28T10:59:14Z

src/runtime/components/EditorDragHandle.vue

 export interface EditorDragHandleEmits {
-  nodeChange: [{ node: JSONContent, pos: number }]
+  nodeChanged: [{ node: JSONContent, pos: number }]
 }


⚠️ Potential issue | 🟡 Minor

Breaking change: emit renamed from nodeChange to nodeChanged.

This rename changes the event from @node-change to @node-changed in Vue templates. While this aligns with Vue's naming convention for past-tense events (indicating something has happened), it's a breaking change for existing consumers.

Ensure the changelog documents this breaking change for users migrating from the previous API.

🤖 Prompt for AI Agents

In `@src/runtime/components/EditorDragHandle.vue` around lines 42 - 44, The emit was renamed from nodeChange to nodeChanged, breaking consumers who used `@node-change`; update the API docs and changelog to document this breaking change and provide a migration note (replace `@node-change` with `@node-changed`), and ensure the type/interface EditorDragHandleEmits and any usages of nodeChange in EditorDragHandle.vue and elsewhere are updated to nodeChanged so templates and listeners reflect the new event name.

benjamincanac · 2026-01-28T11:12:24Z

@solidprinciples We can't introduce a breaking change like this unfortunately, what are you trying to solve here? The @node-change event is used for this example: https://ui.nuxt.com/docs/components/editor-drag-handle#with-dropdown-menu so it's fine to trigger it on click in my opinion.

solidprinciples · 2026-01-28T11:15:30Z

Looking to be able to track currently selected node by the handle upon hover.

benjamincanac · 2026-01-28T14:28:13Z

What about adding a new hover event? 🤔

diff --git a/src/runtime/components/EditorDragHandle.vue b/src/runtime/components/EditorDragHandle.vue
index 2c1824881..862cc47b9 100644
--- a/src/runtime/components/EditorDragHandle.vue
+++ b/src/runtime/components/EditorDragHandle.vue
@@ -40,6 +40,10 @@ export interface EditorDragHandleSlots {
 
 export interface EditorDragHandleEmits {
   nodeChange: [{ node: JSONContent, pos: number }]
+  /**
+   * Emitted when the hovered node changes.
+   */
+  hover: [{ node: JSONContent, pos: number }]
 }
 </script>
 
@@ -114,6 +118,13 @@ const currentNodePos = ref<number | null>()
 
 function onNodeChange({ pos }: { pos: number }) {
   currentNodePos.value = pos
+
+  if (!props.editor || pos < 0) return
+
+  const node = props.editor.state.doc.nodeAt(pos)
+  if (node) {
+    emit('hover', { node: node.toJSON(), pos })
+  }
 }
 
 function onClick() {

…de target

solidprinciples · 2026-01-28T16:37:30Z

@benjamincanac - reverted earlier changes around @node-change -> @node-changed, added @hover emit - works as expected. Was able to get an example working to save the value externally. Whipping up a semi-useful example. 👍

coderabbitai

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/runtime/components/EditorDragHandle.vue (1)
154-164: Default handle no longer triggers onClick.

After removing the root @click, the fallback <UButton> isn’t wired to onClick, so nodeChange will never fire for the default slot. Please bind the handler in the fallback content to avoid a regression.
🛠️ Suggested fix
       <UButton
         v-bind="{
           ...buttonProps,
           icon: props.icon || appConfig.ui.icons.drag,
           ...$attrs
         }"
         data-slot="handle"
         :class="ui.handle({ class: [props.ui?.handle, props.class] })"
         :ui="transformUI(ui, props.ui)"
+        `@click`="onClick"
       />

solidprinciples · 2026-01-28T17:06:14Z

@benjamincanac hmm. same issue - I've at least diagnosed it down to this:

no external parent state modifications: renders fine (console.log, etc)
external parent state (setting ref, emit, etc): breaks rendering

Haven't seen anything on tiptap's repo :(

solidprinciples · 2026-01-28T17:31:37Z

@benjamincanac - https://github.com/solidprinciples/tiptap-draghandle-state-update-bug/tree/bug/drag-handle

Tiptap bug - same thing happens in their extension demo. Investigating to see feasibility of fixing upstream.

solidprinciples · 2026-01-28T18:51:57Z

@benjamincanac fixed in tip-tap - small one-liner in ueberdosis/tiptap#7472

👍 - seems like the DragHandle is re-rendering and re-applying visibility: hidden in these cases.

fix(EditorDragHandle): update props forwarding to include 'nested' an…

343da96

…d 'nestedOptions', omit the same from button props

solidprinciples requested a review from benjamincanac as a code owner January 27, 2026 23:12

github-actions bot added the v4 #4488 label Jan 27, 2026

vercel bot deployed to Preview – ui January 27, 2026 23:21 View deployment

solidprinciples changed the title ~~fix(EditorDragHandle): update props forwarding to include 'nested' and 'nestedOptions', omit these from button props~~ fix(editor): forward nested props and omit from button Jan 28, 2026

feat(editor): add custom middleware support to FloatingUIOptions

1fc21a8

vercel bot deployed to Preview – ui January 28, 2026 00:39 View deployment

solidprinciples changed the title ~~fix(editor): forward nested props and omit from button~~ fix(EditorDragHandle): pass nested option props, add custom middleware Jan 28, 2026

solidprinciples changed the title ~~fix(EditorDragHandle): pass nested option props, add custom middleware~~ fix(EditorDragHandle): pass nested + nestedOptions, add custom middleware Jan 28, 2026

solidprinciples changed the title ~~fix(EditorDragHandle): pass nested + nestedOptions, add custom middleware~~ feat(EditorDragHandle): pass nested props, custom middleware, fix onNodeChange Jan 28, 2026

solidprinciples added 2 commits January 27, 2026 19:57

docs(editor): Add typedocs custom middleware array

0a4d48f

fix(EditorDragHandle): align nodeChange to intended behavior, preserv…

bb9ac64

…e onClick

solidprinciples changed the title ~~feat(EditorDragHandle): pass nested props, custom middleware, fix onNodeChange~~ feat(EditorDragHandle): pass tiptap props, custom middleware, fix onNodeChange emit Jan 28, 2026

vercel bot deployed to Preview – ui January 28, 2026 05:35 View deployment

benjamincanac reviewed Jan 28, 2026

View reviewed changes

fix(editor): rename emit to nodeChanged to resolve rendering issue

478603b

fix(editor): use updated emit

5b6e015

coderabbitai bot reviewed Jan 28, 2026

View reviewed changes

vercel bot deployed to Preview – ui January 28, 2026 11:06 View deployment

feat(EditorDragHandle): add @hover emit for when drag handles move no…

c619804

…de target

coderabbitai bot reviewed Jan 28, 2026

View reviewed changes

vercel bot deployed to Preview – ui January 28, 2026 16:46 View deployment

solidprinciples mentioned this pull request Jan 28, 2026

fix(drag-handle): vue3 external state re-rendering bug #7471 ueberdosis/tiptap#7472

Open

5 tasks

feat(EditorDragHandle): pass tiptap props, custom middleware, fix onNodeChange emit #5960

Are you sure you want to change the base?

feat(EditorDragHandle): pass tiptap props, custom middleware, fix onNodeChange emit #5960

Conversation

solidprinciples commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❓ Type of change

📚 Description

📝 Checklist

Uh oh!

coderabbitai bot commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Uh oh!

pkg-pr-new bot commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

solidprinciples commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

benjamincanac left a comment

Choose a reason for hiding this comment

Uh oh!

solidprinciples commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

solidprinciples commented Jan 28, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

benjamincanac commented Jan 28, 2026

Uh oh!

solidprinciples commented Jan 28, 2026

Uh oh!

benjamincanac commented Jan 28, 2026

Uh oh!

solidprinciples commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

solidprinciples commented Jan 28, 2026

Uh oh!

solidprinciples commented Jan 28, 2026

Uh oh!

solidprinciples commented Jan 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

solidprinciples commented Jan 27, 2026 •

edited

Loading

coderabbitai bot commented Jan 27, 2026 •

edited

Loading

pkg-pr-new bot commented Jan 27, 2026 •

edited

Loading

solidprinciples commented Jan 28, 2026 •

edited

Loading

solidprinciples commented Jan 28, 2026 •

edited

Loading

solidprinciples commented Jan 28, 2026 •

edited

Loading