IBX-2803: Fix drag and drop after React update

[tischsoic]

JIRA: https://issues.ibexa.co/browse/IBX-2803

[micszo]

Could you provide a brief explanation? 🙂
Is the tmp const crucial?

[tischsoic]

After updating React from v17 to v18 it seems that React started to do renders asynchronously (what was mentioned e.g. here), which means that after calling render function component is not rendered immediately but after some short period of time, hence some modifications have been applied here to make d&d work in Page Builder and Form Builder.

1. The first problem was that in PB placeholder is rendered with delay so we need to delay evaluation of $to statement (equal to: document.querySelector('#page-builder-preview').contentDocument.querySelector('.droppable-placeholder')). delay function does not delay drop call and evaluation of $to. Because of this we need setTimeout to both call drop and let browser engine evaluate $to with a delay. We need dragMockTmp to pass dragMock reference to setTimeout. Block statement was added so that dragMockTmp won't pollute the global namespace.

2. In Form Builder, when drag is started the state is being updated (handleDragStartSidebarField) and we need to give React time to apply this state change thus delay(50) was added before dragOver so that when handleZoneDragOver is being called the state of the component is already updated.

3. Finally, delay(50) was added after dragOver, because otherwise drop would not be fired by dragMock (probably there is a bug in the library).