feat(files): add drag handler for nodes

[JuliaKirschenheuter]

📝 Summary

• Resolves: Drag handle for nodes #6938

🖼️ Screenshots

🏡 After

✅ Drag handler works good in collaboration

⚠️ Existing bugs:

It is not possible to drag table:

Once any type of content is moved to the code block it is not possible to move it out anymore

Once any type of content is moved to the list (ordered or unordered) it is not possible to move it out anymore

Once list is moved to another list (ordered or unordered) it is not possible to move out first list anymore

[nimishavijay]

Looks really nice! :) Looked in the original issue and I saw that there were concerns about it being too prominent, so I have some feedback to help with that:

• use a tertiary button (so there is no background)
• use --color-maxcontrast for the icon instead of --color-main-text
• Ideally we use this standard drag icon, but I am not able to find it in the mdi library page 🤔 if it is not possible to use that, we can use this drag-vertical icon.
• If possible, we move the button a few pixels up such that it is center aligned with the text like this (in the screenshot I added a background to show the position, it should be a tertiary button)

Edit: I played around with it more and I have some more point when dragging content

Currently:

• Entire area has a --color-primary-light background
• Droppable area is exactly where the text starts and ends
• There is a 1px solid black line to indicate the exact position where the content will be dropped
• The content being dragged does not have a background

My proposal:

• Only the content that is being dragged can have a --color-primary-light background
• Droppable area extends beyond text area on the left and right by around 60 px
• Use a 4px solid --color-primary-element line to indicate drop position
• Add a background to the content being dragged (while still keeping the fade it looks really cool :) )

Let me know what you think :)

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 59.87%. Comparing base (99365e5) to head (60a2c8f).
⚠️ Report is 18 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7537      +/-   ##
==========================================
+ Coverage   53.09%   59.87%   +6.77%     
==========================================
  Files         501      500       -1     
  Lines       43134    38320    -4814     
  Branches     1141     1141              
==========================================
+ Hits        22904    22943      +39     
+ Misses      20121    15268    -4853     
  Partials      109      109              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[max-nextcloud]

I think some of the listed issues are due to the fact that the drag handle only allows dragging top level elements. If you drag an element into another element such as a list it's not a top level element anymore and therefore cannot be dragged anymore.

At first sight there seem to be two options to solve this:

1. Do not allow dragging content into other elements - only allow sorting.
2. Allow dragging subelements such as nested lists.

I don't know if 1. is feasible and it would of course reduce the usefulness of the feature - on the other hand it would also make it easier / more clear to use.

I don't know if 2. is feasible. It would be nice to be able to sort lists with this as well for example. But it's hard to destinguish if i want to drag the first list item or the entire list. I imagine there's more such questions this would raise due to the increased complexity.

[marcoambrosini]

@max-nextcloud @JuliaKirschenheuter
I think we should do both 1) and 2), as in: we should only allow sorting of blocks and sub blocks. Otherwise it gets a bit too messy.

[nimishavijay]

Looks great now! :)

[marcoambrosini]

Just checked the library and there's no easy and quick way to implement @max-nextcloud suggestion, so I suggest we create a follow up issue for those.

A couple of visual changes from my side:

• Remove background from block that is being dragged. The background change of the button is enough
• Reduce the thickness of the line that designates the drop target to 50%, I believe that would be 2px

[max-nextcloud]

Code looks good. Cypress still seems unhappy and might be related.

I played with this some and I'm happy to say it really works well. I was able to drag a table and the effect of not being able to drag something out of another element after dragging it in is to be expected as long as we only have drag handles for top level elements.

Undoing the drag and drop does not seem to work. The elements are not moved back - which would mitigate the 'I dragged something into another element and now it's stuck situation'. So maybe we can fix this (as a follow up as well).

[max-nextcloud]

found some errors in my console that seem related.

[JuliaKirschenheuter]

Hi @max-nextcloud, thanks a lot for your review!

Undoing the drag and drop does not seem to work. The elements are not moved back - which would mitigate the 'I dragged something into another element and now it's stuck situation'. So maybe we can fix this (as a follow up as well).

That works for me. Ctrl+Z as well as undo button. Could you please check again?

[JuliaKirschenheuter]

Hi @max-nextcloud

warnings, which you have mentioned are coming from third library i can't fix them and they break nothing.

[max-nextcloud]

That works for me. Ctrl+Z as well as undo button. Could you please check again?

Last time i tried it worked. I will try again and try to come up with a reproducable case - but any way that would be a follow up.

[max-nextcloud]

Code looks good. Cypress failures also happened elsewhere.
I think the errors should still be fixed - but that can happen as a follow up / in the upstream repo.