@contentful/experiences-visual-editor-react 1.28.1 → 1.28.2

package/dist/index.js

@@ -457,7 +457,7 @@ const builtInStyles = {
         },
         type: 'Text',
         group: 'style',
-        description: 'The horizontal alignment of the section',
+        description: 'The vertical alignment of the section',
         defaultValue: 'center',
         displayName: 'Vertical alignment',
     },
@@ -2983,34 +2983,19 @@ const useBreakpoints = (breakpoints) => {
  * and sends the DOM Rect to the client app
  */
 const sendSelectedComponentCoordinates = (instanceId) => {
-    if (!instanceId)
-        return;
-    let selectedElement = document.querySelector(`[data-cf-node-id="${instanceId}"]`);
-    let selectedAssemblyChild = undefined;
-    const [rootNodeId, nodeLocation] = instanceId.split('---');
-    if (nodeLocation) {
-        selectedAssemblyChild = selectedElement;
-        selectedElement = document.querySelector(`[data-cf-node-id="${rootNodeId}"]`);
-    }
-    // Finds the first parent that is a VisualEditorBlock
-    let parent = selectedElement?.parentElement;
-    while (parent) {
-        if (parent?.dataset?.cfNodeId) {
-            break;
-        }
-        parent = parent?.parentElement;
-    }
-    if (selectedElement) {
+    const selection = getSelectionNodes(instanceId);
+    if (selection?.target) {
         const sendUpdateSelectedComponentCoordinates = () => {
             sendMessage(OUTGOING_EVENTS.UpdateSelectedComponentCoordinates, {
-                selectedNodeCoordinates: getElementCoordinates(selectedElement),
-                selectedAssemblyChildCoordinates: selectedAssemblyChild
-                    ? getElementCoordinates(selectedAssemblyChild)
+                selectedNodeCoordinates: getElementCoordinates(selection.target),
+                selectedAssemblyChildCoordinates: selection.patternChild
+                    ? getElementCoordinates(selection.patternChild)
                     : undefined,
-                parentCoordinates: parent ? getElementCoordinates(parent) : undefined,
+                parentCoordinates: selection.parent ? getElementCoordinates(selection.parent) : undefined,
             });
         };
-        const childImage = selectedElement.querySelector('img');
+        // If the target contains an image, wait for this image to be loaded before sending the coordinates
+        const childImage = selection.target.querySelector('img');
         if (childImage) {
             const handleImageLoad = () => {
                 sendUpdateSelectedComponentCoordinates();
@@ -3021,6 +3006,37 @@ const sendSelectedComponentCoordinates = (instanceId) => {
         sendUpdateSelectedComponentCoordinates();
     }
 };
+const getSelectionNodes = (instanceId) => {
+    if (!instanceId)
+        return;
+    let selectedNode = document.querySelector(`[data-cf-node-id="${instanceId}"]`);
+    let selectedPatternChild = null;
+    let selectedParent = null;
+    // Use RegEx instead of split to match the last occurrence of '---' in the instanceId instead of the first one
+    const idMatch = instanceId.match(/(.*)---(.*)/);
+    const rootNodeId = idMatch?.[1] ?? instanceId;
+    const nodeLocation = idMatch?.[2];
+    const isNestedPattern = nodeLocation && selectedNode?.dataset?.cfNodeBlockType === ASSEMBLY_NODE_TYPE;
+    const isPatternChild = !isNestedPattern && nodeLocation;
+    if (isPatternChild) {
+        // For pattern child nodes, render the pattern itself as selected component
+        selectedPatternChild = selectedNode;
+        selectedNode = document.querySelector(`[data-cf-node-id="${rootNodeId}"]`);
+    }
+    else if (isNestedPattern) {
+        // For nested patterns, return the upper pattern as parent
+        selectedParent = document.querySelector(`[data-cf-node-id="${rootNodeId}"]`);
+    }
+    else {
+        // Find the next valid parent of the selected element
+        selectedParent = selectedNode?.parentElement ?? null;
+        // Ensure that the selection parent is a VisualEditorBlock
+        while (selectedParent && !selectedParent.dataset?.cfNodeId) {
+            selectedParent = selectedParent?.parentElement;
+        }
+    }
+    return { target: selectedNode, patternChild: selectedPatternChild, parent: selectedParent };
+};
 
 // Note: During development, the hot reloading might empty this and it
 // stays empty leading to not rendering assemblies. Ideally, this is