Add a property to `PuckAPI` to identify which component is currently being dragged

[skpulipaka26]

Description

Currently, there is a flag to indicate whether a component is being dragged, but there's no way to determine which component is actually being dragged or to change its appearance accordingly. It would be useful to expose the component's information (type, and props if already dragged and dropped) to enable attaching custom behavior to this event.

Proposals

Proposal 1 – Override

Add the isDragging flag to the componentItem (soon to be renamed to drawerItem) override. This would allow you to modify the appearance of the drawer item when it's initially being dragged to be added to the canvas.

<Puck
  overrides={{
    componentItem: ({ isDragging }) => ...,
  }}
/>

Proposal 2 – Add property to PuckAPI

A more flexible approach would be to enhance the isDragging flag in the PuckAPI to include the component type and, if available, its props. This could be renamed to dragging, draggingComponent, or currentlyDragging. currentlyDragging could be better if we want to support dragging and dropping other stuff besides components in the future.

const currentlyDragging = usePuck(s => s.appState.ui.currentlyDragging);

console.log(currentlyDragging); // -> { type: "Heading", props: { ... } } or `null` if nothing is being dragged

This approach could be combined with the drawerItem override to enable conditional rendering and modify how a component looks when it is first added to the canvas.

[FedericoBonel]

Hey @skpulipaka26, I know this is a pretty old issue, but you can now check if a component is being dragged by accessing the PuckAPI and inspecting the appState.ui.isDragging flag.

Since there haven’t been any updates on this for a while, I’ll be closing it. However, let me know if this doesn’t satisfy your need or doesn’t match the expected behavior.

[domhaas]

@FedericoBonel Sorry for commenting a closed ticket. But I was wondering if it is somehow possible to find out which component is currently being dragged? That would be useful to change the component's (e.g. overlay, etc.) look.

Thanks again!

[FedericoBonel]

Hey @domhaas! No need to say sorry!

I initially thought you could combine the PuckAPI appState.ui.isDragging with selectedItem to determine if an item was being dragged and which item it was. However, selectedItem is null when you first drag a new component onto the canvas or when you start dragging it without clicking on it first.

So actually, we should probably provide an API for that. I'll reopen this issue and update it to track this.

[FedericoBonel]

Done! Let me know if you have any suggestions or preferences for how this feature should look in the API.

[domhaas]

@FedericoBonel

The simplest implementation would probably be a property with ID next to “isDragging” in the ui-store to avoid creating breaking changes.

For example: https://github.com/domhaas/puck/commit/fc4258ea897568f658483ff28b5bb3f8499d77e0

In addition, it would be practical to have something like this directly as a property in the render() function of a component. I don't know if this could lead to unnecessary re-rendering:

export type PuckContext = {
  renderDropZone: React.FC<DropZoneProps>;
  metadata: Metadata;
  isEditing: boolean;
  isDragging: boolean;
  dragRef: ((element: Element | null) => void) | null;
};