TipTap toolbar button switch position if only dragging a few pixels

[bjarnef]

Which Umbraco version are you using?

16.0.0

Bug summary

If dragging TipTap toolbar buttons only a few pixels, it seems the buttons move their position.

chrome_O1T9y1z3cN.mp4

It doesn't seem to happen for last item, but e.g. first and second item.

Specifics

No response

Steps to reproduce

In configuration of TipTap toolbar options, drag the buttons a few pixels vertically.

I think it would be great to have a placeholder (or divider) of the location the button will be inserted on drop.

Expected result / actual result

No response

---

This item has been added to our backlog AB#53977

[github-actions]

Hi there @bjarnef!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

• We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
• If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
• We'll replicate the issue to ensure that the problem is as described.
• We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[nielslyngsoe]

Just sharing some thoughts:

Seems like this code is not using the Umbraco Sorter Controller. The Umbraco Sorter Controller has logic to do proper vertical and horizontal sorting.
I would recommend switching to use the Umbraco Sorter Controller for a consistent experience across the application.
The Sorter Controller can work across elements, even across tabs and windows in its later version, so it should be suitable for this case. So please consider this when someone picks up this task :-)

[tbolon]

It's the reorder feature which is broken: you can't move buttons inside the toolbar: they will always be moved at the end. If you want to reorder buttons, you will have to move them one by one until you obtain the desired layout.

[bjarnef]

@nielslyngsoe perhaps it would make sense to have the "drag handle" component here umbraco/Umbraco.UI#1118 to simplify it in CMS and a bit larger area, e.g. a drag handle on each group?

But perhaps just a handle on left e.g. so buttons inside are still sortable.

E.g. an handle on the group something similar to "card" here:
https://f36.contentful.com/components/drag-handle#examples