Add the ability to abort adding a component

The component insert should be cancelled at least by pressing Esc-key or by dropping within the admin. UI (i.e. sidebars or the top bar). There might be other interactions but we could start with these.

Here are issues on sortable js library: https://github.com/SortableJS/Sortable/issues?q=esc+

@traviscarden @lauriii : I would like to pick up this issue. I did some debugging and found out a way to prevent adding component by pressing Esc or dropping it in an invalid zone. When you have time, could you review my change?

Thanks!

UX wise this seems like a nice improvement! I asked review from @jessebaker on the solution.

Thanks @jessebaker for reviewing my work. I scanned through the source code of Sortable library, I saw the property "originalEvent" is assigned to event object by using the function Object.defineProperty(), and originalEvent is not an official property of SortableEvent. After googling a while, this is what I came up with

    if ('originalEvent' in ev) {
        const originalEvent: DragEvent = ev.originalEvent as DragEvent;
        // dataTransfer.dropEffect will be 'none' if the dragend event is fired by hitting escape or releasing mouse on
        // an invalid drop area. If it's 'none', remove the dropped item from the DOM and don't call updateData.
        if (originalEvent.dataTransfer?.dropEffect !== 'none') {
          updateData(ev, false);
        } else {
          ev.item.remove();
        }
      }

Thank you!! This is great

Automatically closed - issue fixed for 2 weeks with no activity.