drag and drop nodes by handle

[apresmoi]

Hello I was able to implement the feature described in #838.

To make this work I had to change 'mousedown' for 'mouseup' to open the tunes box. Also added the 'dragstart' and 'dragend' events to the settingsToggler node. While doing so, I set a serialized object containing the current block index and a flag.

Then, that object is captured on the processDrop function in dragNDrop.ts and the magic happens.

I have also added references to the blocks (dropTargetPlacement) to check if the block is being dropped at top/bottom of the target-block.

Let me know what you think. Regards

Btw, I wasn't able to override the "cursor:copy" style. I cannot find where this is being set.

[apresmoi]

I've pushed some updates to the code.

[apresmoi]

Hello @neSpecc, @gohabereg ! Could you give this a look ?

I didn't find the CONTRIBUTE.md so I just went with it and sent the PR... let me know if I should do some other process or document the development in some other way that works for you!

Regards, Juan

[apresmoi]

Thank you again for the review !

I have just addressed the all the issues. Let me know what you think @neSpecc.

[neSpecc]

Please, resolve conflicts with the next branch

[apresmoi]

I have resolved the conflicts.

[apresmoi]

Done @neSpecc. I have restored the file to it's original state in 4d4718f and then added the changes back to it in 776cb21.

Is this enough/the correct way ? Otherwise I could do a rebase 😓

[apresmoi]

Hi @neSpecc, is there any pending change on my side ?

[neSpecc]

The code looks fine but there are few design issues left:

1. Could we use the current drop target style?
2. Block Tunes toggler (drag handle) is dragging among with the mouse. Could we disable it? Or make it move only vertically among with the dragging block.
3. Could we show the preview of the dragging block?

[apresmoi]

Awesome.

1. We can go ahead and roll back those, I'll just need to add a few lines (4) to make the line to on top or at the bottom of the target block.
2. & 3. This is kind of complex because the handle and the block doesn't share a common ancestor.. Maybe I could try to use the setDragImage of the dataTransfer object to set an image.

If you approve the idea around 2 & 3 I could try to do that.

Meanwhile I'll restore the CSS lines for 1.

[apresmoi]

Something like this: https://codesandbox.io/s/dark-voice-hd8lrh?file=/src/App.tsx

[neSpecc]

Something like this: https://codesandbox.io/s/dark-voice-hd8lrh?file=/src/App.tsx

I'm not sure that we need to use 3rd party deps like dom-to-image for such a small case. And not sure that it would work correctly for all kind of blocks since they can have any markup (includind canvases, shadow dom, audio, video, etc)

[apresmoi]

Alright, I don't really see any another solution on how to set the image... I tried to create an in memory svg element with the block inside but I wasn't able to do it.

I mean, the auto-setting of that dragging image having the handle on a separate part of the DOM I think is not something that you can achieve.

[apresmoi]

Well, @neSpecc it seems like you can do it without creating an image by just setting the element to the setDragImage function: https://codesandbox.io/s/intelligent-hofstadter-k1gpyf?file=/src/App.tsx

The documentation of the function says

if a custom image is desired, the DataTransfer.setDragImage() method can be used to set the custom image to be used. The image will typically be an element but it can also be a or any other visible element.

I'll go ahead and add this to see it if works as it should.

[apresmoi]

Well, I have added some lines to place the block as a custom image when dragging the block.

Let me know what you think @neSpecc.

[neSpecc]

Works fine. There are two things left for the ideal implementation:

1. When we move block to the screen boundaries, the page should be scrolled. We have similar behaviour in our Rectangle Selection. It would be great if we will extract that logic from that module, refactor it (make a separate util), and use via drag-n-drop as well.
2. There is no ability to drag-n-drop several selected blocks. Here we need to resolve the issue that Toolbar is closed when we select several blocks, so there are atually no hande for dragging.

[neSpecc]

There is another one problem: when we finish dragging at the place, where the Block Tunes toggler will appear, the Block Tunes opens after dragend.

https://user-images.githubusercontent.com/3684889/170325338-60e30cc1-71cf-4844-b8d1-ef0abe79f5e3.mov

[apresmoi]

Alright, let me try some options and see what I can come up with.

[apresmoi]

Hi @neSpecc, I decided to go for 2. at first because I knew this would be a more aggresive change on the codebase.

I have just commited a proposal for drag&drop range/single element. I realized that I could remove the dragging pointer since it could be achieved by just using the selection pointer.

We could also remove the logic for single drop element and just handle it by the elements that are currently selected.

To achieve the "ghost image/dragging image" of the selection I had to create a temporal element with id "draggingImage", then I go over all the selected elements, clone their contents and append them inside draggingImage. The issue is that if there is any CSS that is applying in a scoped way to the contents of the editor, those styles wont be applied to the draggingImage. What we could maybe do to make this draggingImage look the same as it does in the editor, is to iterate over all the selected three and set inline styles getting the window.getComputedStyle function.

Let me know what you think !

---

If we go forward with this implementation I'll procede to handle the other two issues that you reported.

Btw, I wasn't able to reproduce the issue in the video.

[apresmoi]

Oh btw, there is something that might be of concern... When you drag&drop several elements, the editor will throw one change event for each of those elements moved.

I don't know if that is something that we can handle in some other way ? Maybe add another BlockToolAPI event like RANGE_MOVED ?

[apresmoi]

Hi @neSpecc, did you have the chance to look into the latest changes ?

[elvise]

@apresmoi great PR! What happen from mobile ?

[slaveeks]

https://user-images.githubusercontent.com/81693471/185364134-2e630948-9369-42ee-aa29-d4ef289cf665.mov

I encountered a problem where the icons disappear when the cursor is over the line

[apresmoi]

2022-08-18.12.38.44.mov I encountered a problem where the icons disappear when the cursor is over the line

Hi @slaveeks, I solved the issue by adding pointer-events: none to the caret.

[luz-arreola]

I like Juan's drag by handle feature. I'm new to editor.js and downloaded 2.25 which does not yet allow you to drag by handle. Is this something that will be implemented into editor.js?

[neSpecc]

I like Juan's drag by handle feature. I'm new to editor.js and downloaded 2.25 which does not yet allow you to drag by handle. Is this something that will be implemented into editor.js?

Yes, we're planning to include this PR to the next release. Testing and reviewing are welcomed.

[SalahAdDin]

I like Juan's drag-by-handle feature. I'm new to editor.js and downloaded 2.25 which does not yet allow you to drag by the handle. Is this something that will be implemented into editor.js?

Yes, we're planning to include this PR in the next release. Testing and reviewing are welcomed.

Do you have any ETA for this feature?

@apresmoi Did you review the requested changes?

Would this pull request replace this plugin?

[apresmoi]

All the requested changes are already done, except by the suggested drag&scroll.

I'll maybe make the changes for that over the week since I believe the group drag was approved.

[sLatzko]

Friendly reminder, this PR seems 95% complete. Would be a shame if it never gets completed. Maybe prioritizing it into the next release is feasible?

[neSpecc]

We will try to include this PR in one of the next releases.

Things left:

• Resolve conflicts
• Do something with processBlockDrop and processDragStart methods. The code looks scary.
• Test it well
• Maybe provide some e2e-tests.

[SalahAdDin]

@apresmoi Are you implementing the i18n API?