@contentful/experiences-visual-editor-react 0.0.1-alpha.2 → 0.0.1-dev-20240304T2318-9808cfc.0

package/dist/index.js

@@ -21,6 +21,7 @@ const INCOMING_EVENTS$1 = {
     ComponentDragCanceled: 'componentDragCanceled',
     ComponentDragStarted: 'componentDragStarted',
     ComponentDragEnded: 'componentDragEnded',
+    ComponentMoveEnded: 'componentMoveEnded',
     CanvasResized: 'canvasResized',
     SelectComponent: 'selectComponent',
     HoverComponent: 'hoverComponent',
@@ -38,6 +39,7 @@ const INCOMING_EVENTS$1 = {
     AssembliesAdded: 'assembliesAdded',
     AssembliesRegistered: 'assembliesRegistered',
     InitEditor: 'initEditor',
+    MouseMove: 'mouseMove',
 };
 const CONTENTFUL_COMPONENTS$1 = {
     section: {
@@ -1493,6 +1495,8 @@ const OUTGOING_EVENTS = {
     UpdateHoveredComponentCoordinates: 'updateHoveredComponentCoordinates',
     CanvasScroll: 'canvasScrolling',
     CanvasError: 'canvasError',
+    ComponentMoveStarted: 'componentMoveStarted',
+    ComponentMoveEnded: 'componentMoveEnded',
     OutsideCanvasClick: 'outsideCanvasClick',
 };
 const INCOMING_EVENTS = {
@@ -1502,6 +1506,7 @@ const INCOMING_EVENTS = {
     ComponentDragCanceled: 'componentDragCanceled',
     ComponentDragStarted: 'componentDragStarted',
     ComponentDragEnded: 'componentDragEnded',
+    ComponentMoveEnded: 'componentMoveEnded',
     CanvasResized: 'canvasResized',
     SelectComponent: 'selectComponent',
     HoverComponent: 'hoverComponent',
@@ -1519,6 +1524,7 @@ const INCOMING_EVENTS = {
     AssembliesAdded: 'assembliesAdded',
     AssembliesRegistered: 'assembliesRegistered',
     InitEditor: 'initEditor',
+    MouseMove: 'mouseMove',
 };
 const INTERNAL_EVENTS = {
     ComponentsRegistered: 'cfComponentsRegistered',
@@ -3136,7 +3142,7 @@ const EditorBlockClone = ({ node: rawNode, resolveDesignValue, snapshot, provide
     return (React.createElement("div", { ref: provided?.innerRef, ...wrapperProps, ...provided?.draggableProps, ...provided?.dragHandleProps, className: classNames(styles$3.DraggableComponent, wrapperProps.className, {
             [styles$3.isAssemblyBlock]: isAssemblyBlock,
             [styles$3.isDragging]: snapshot?.isDragging,
-        }), style: getStyle$1(provided?.draggableProps.style, snapshot) }, elementToRender()));
+        }), "data-ctfl-dragging-element": true, style: getStyle$1(provided?.draggableProps.style, snapshot) }, elementToRender()));
 };
 
 function DropzoneClone({ node, zoneId, resolveDesignValue, className, WrapperComponent = 'div', renderDropzone, ...rest }) {
@@ -3492,6 +3498,23 @@ function simulateMouseEvent(coordX, coordY, eventName = 'mousemove') {
     const event = new MouseEvent(eventName, options);
     element.dispatchEvent(event);
 }
+function simulateComponentMove(coordX, coordY, selector, eventName = 'mousemove') {
+    const element = document.querySelector(selector);
+    const options = {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+        pageX: 0,
+        pageY: 0,
+        clientX: coordX - DRAGGABLE_WIDTH / 2,
+        clientY: coordY - DRAGGABLE_HEIGHT / 2 - window.scrollY,
+    };
+    if (!element) {
+        return;
+    }
+    const event = new MouseEvent(eventName, options);
+    element.dispatchEvent(event);
+}
 
 function useEditorSubscriber() {
     const entityStore = useEntityStore((state) => state.entityStore);
@@ -3760,6 +3783,16 @@ function useEditorSubscriber() {
                     sendSelectedComponentCoordinates(nodeId);
                     break;
                 }
+                case INCOMING_EVENTS.MouseMove: {
+                    const { mouseX, mouseY } = payload;
+                    simulateComponentMove(mouseX, mouseY, '[data-ctfl-dragging-element]');
+                    break;
+                }
+                case INCOMING_EVENTS.ComponentMoveEnded: {
+                    const { mouseX, mouseY } = payload;
+                    simulateComponentMove(mouseX, mouseY, '[data-ctfl-dragging-element]', 'mouseup');
+                    break;
+                }
                 default:
                     console.error(`[experiences-sdk-react::onMessage] Logic error, unsupported eventType: [${eventData.eventType}]`);
             }
@@ -3984,13 +4017,16 @@ const DNDProvider = ({ children }) => {
     const selectedNodeId = useEditorStore((state) => state.selectedNodeId);
     const prevSelectedNodeId = useRef(null);
     const isTestRun = typeof window !== 'undefined' && Object.prototype.hasOwnProperty.call(window, 'Cypress');
-    const dragStart = () => {
+    const dragStart = ({ source }) => {
         prevSelectedNodeId.current = selectedNodeId;
         //Unselect the current node when dragging and remove the outline
         setSelectedNodeId('');
         sendMessage(OUTGOING_EVENTS.ComponentSelected, {
             nodeId: '',
         });
+        if (source.droppableId !== COMPONENT_LIST_ID) {
+            sendMessage(OUTGOING_EVENTS.ComponentMoveStarted);
+        }
     };
     const beforeCapture = () => {
         setDraggingOnCanvas(true);
@@ -4028,6 +4064,7 @@ const DNDProvider = ({ children }) => {
         }
         // If a node was previously selected prior to dragging, re-select it
         setSelectedNodeId(dropResult.draggableId);
+        sendMessage(OUTGOING_EVENTS.ComponentMoveEnded);
         sendMessage(OUTGOING_EVENTS.ComponentSelected, {
             nodeId: dropResult.draggableId,
         });