How to disable drop zone temporarily

[linonetwo]

I'm developing drag&drop feature of WYSIWYG editor, but when dragging block, tw always captures the drop event. Hope there can be a function like $tw.wiki.disableDropZone() when I start dragging in the editor, and I will call $tw.wiki.enableDropZone() after the drop in the editor...

2022-04-13.22.52.30.mov

Is this possible?

[saqimtiaz]

You could try to stop event propagation for all drop events in your editor. Other disable drag and drop via the config tiddler on dragstart: https://tiddlywiki.com/#Hidden%20Setting%3A%20Disable%20Drag%20and%20Drop

[saqimtiaz]

Yes this is a global configuration. You could disable it on dragstart in the editor and enable it again after dragend.

[linonetwo]

Well, that will trigger a large rerender I think. So I read through the code with drop", and found a better way to handler it without trigger rerender.

[linonetwo]

Now that I'm able to do drag&drop, I'm going to learn from your implementation of "drag image to import", and add it to the WYSIWYG editor!

[saqimtiaz]

The easiest way to do that would be to allow dragenter, dragover and drop events that have files in the dataTransfer object to propagate out of the editor, and wrap the editor with a $dropzone widget.

[saqimtiaz]

See https://github.com/Jermolene/TiddlyWiki5/blob/bc8c011eb311d136e7bb2d462db046002bc7bcae/core/modules/editor/factory.js#L305-L381

[linonetwo]

Set $tw.dragInProgress = true; to stop DropZoneWidget.prototype.handleDropEvent to catch the drop event.

You can see in

https://github.com/Jermolene/TiddlyWiki5/blob/4b8594c4a8828fac4dc03e1c121a1e955016ba23/core/modules/widgets/dropzone.js#L191-L194

it check for this, if its true, then

https://github.com/Jermolene/TiddlyWiki5/blob/4b8594c4a8828fac4dc03e1c121a1e955016ba23/core/modules/widgets/dropzone.js#L228-L231

won't run.

So we can set $tw.dragInProgress = true; in our drag start handler, and $tw.dragInProgress = false in our drop handler.