@base44-preview/vite-plugin 1.0.4-pr.60.4be3ea6 → 1.0.4-pr.61.ce93e3f

package/src/injections/visual-edit-agent.ts

@@ -15,6 +15,7 @@ export function setupVisualEditAgent() {
   let currentHighlightedElements: Element[] = [];
   let selectedElementId: string | null = null;
   let selectedElement: Element | null = null;
+  let newInlineEditEnabled = false;
 
   // Create overlay element
   const createOverlay = (isSelected = false): HTMLDivElement => {
@@ -126,7 +127,7 @@ export function setupVisualEditAgent() {
 
   const TEXT_TAGS = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'a', 'label'];
 
-  const notifyElementSelected = (element: Element, clickX?: number, clickY?: number) => {
+  const notifyElementSelected = (element: Element) => {
     const htmlElement = element as HTMLElement;
     const rect = element.getBoundingClientRect();
     const svgElement = element as SVGElement;
@@ -142,38 +143,19 @@ export function setupVisualEditAgent() {
     const itemFieldEl = htmlElement.closest("[data-collection-item-field]") as HTMLElement | null;
     const itemIdEl = htmlElement.closest("[data-collection-item-id]") as HTMLElement | null;
 
-    // Detect if the user clicked on a wrapper that contains an <img>.
-    // When an <img> is found underneath, report tagName 'IMG' and pass the
-    // img's own data-source-location so update-attribute targets it directly.
-    let reportedTagName = element.tagName;
-    let imgSourceLocation: string | undefined;
-    let attributes = collectAllowedAttributes(element, ALLOWED_ATTRIBUTES);
-
-    if (element.tagName === 'IMG') {
-      // Direct <img> click — attributes already has src from collectAllowedAttributes
-    } else if (clickX != null && clickY != null) {
-      // Wrapper click — check if an <img> is at the click point
-      const pointerStyle = document.getElementById('freeze-pointer-events') as HTMLStyleElement | null;
-      if (pointerStyle) (pointerStyle as any).disabled = true;
-      const elementsAtPoint = document.elementsFromPoint(clickX, clickY);
-      if (pointerStyle) (pointerStyle as any).disabled = false;
-
-      const imgEl = elementsAtPoint.find(el => el.tagName === 'IMG') as HTMLImageElement | undefined;
-      if (imgEl) {
-        reportedTagName = 'IMG';
-        imgSourceLocation = (imgEl as HTMLElement).dataset?.sourceLocation || undefined;
-        attributes = { src: imgEl.src || '' };
-      }
-    }
+    const visualSelectorId = getElementSelectorId(element);
+    const siblings = findElementsById(visualSelectorId || null);
+    const instanceIndex = newInlineEditEnabled ? siblings.indexOf(element) : 0;
+    const siblingCount = newInlineEditEnabled ? siblings.length : 1;
 
     window.parent.postMessage({
       type: "element-selected",
-      tagName: reportedTagName,
+      tagName: element.tagName,
       classes:
         (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||
         element.className ||
         "",
-      visualSelectorId: getElementSelectorId(element),
+      visualSelectorId,
       content: isTextElement ? htmlElement.innerText : undefined,
       dataSourceLocation: htmlElement.dataset.sourceLocation,
       isDynamicContent: htmlElement.dataset.dynamicContent === "true",
@@ -189,8 +171,7 @@ export function setupVisualEditAgent() {
         centerX: rect.left + rect.width / 2,
         centerY: rect.top + rect.height / 2,
       },
-      attributes,
-      imgSourceLocation,
+      attributes: collectAllowedAttributes(element, ALLOWED_ATTRIBUTES),
       isTextElement,
       staticArrayName,
       staticArrayIndex,
@@ -198,17 +179,20 @@ export function setupVisualEditAgent() {
       collectionId: collectionEl?.dataset?.collectionId || null,
       collectionItemField: itemFieldEl?.dataset?.collectionItemField || null,
       collectionItemId: itemIdEl?.dataset?.collectionItemId || null,
+      instanceIndex,
+      siblingCount,
     }, "*");
   };
 
   // Select an element: create overlays, update state, notify parent
-  const selectElement = (element: Element, clickX?: number, clickY?: number): HTMLDivElement | undefined => {
+  const selectElement = (element: Element): HTMLDivElement | undefined => {
     const visualSelectorId = getElementSelectorId(element);
 
     clearSelectedOverlays();
 
     const elements = findElementsById(visualSelectorId || null);
-    elements.forEach((el) => {
+    const overlayTargets = newInlineEditEnabled ? [element] : elements;
+    overlayTargets.forEach((el) => {
       const overlay = createOverlay(true);
       document.body.appendChild(overlay);
       selectedOverlays.push(overlay);
@@ -218,7 +202,7 @@ export function setupVisualEditAgent() {
     selectedElementId = visualSelectorId || null;
     selectedElement = element;
     clearHoverOverlays();
-    notifyElementSelected(element, clickX, clickY);
+    notifyElementSelected(element);
 
     return selectedOverlays[0];
   };
@@ -340,7 +324,7 @@ export function setupVisualEditAgent() {
       inlineEdit.markElementsSelected(findElementsById(visualSelectorId));
     }
 
-    const selectedOverlay = selectElement(element, e.clientX, e.clientY);
+    const selectedOverlay = selectElement(element);
     layerController.attachToOverlay(selectedOverlay, element);
   };
 
@@ -349,10 +333,12 @@ export function setupVisualEditAgent() {
     clearSelection();
   };
 
-  const updateElementClassesAndReposition = (visualSelectorId: string, classes: string) => {
-    const elements = findElementsById(visualSelectorId);
-    if (elements.length === 0) return;
+  const updateElementClassesAndReposition = (visualSelectorId: string, classes: string, instanceIndex?: number | null) => {
+    const allElements = findElementsById(visualSelectorId);
+    if (allElements.length === 0) return;
+    if (instanceIndex != null && instanceIndex >= allElements.length) return;
 
+    const elements = instanceIndex != null ? [allElements[instanceIndex]!] : allElements;
     updateElementClasses(elements, classes);
 
     // Use a small delay to allow the browser to recalculate layout before repositioning
@@ -385,11 +371,14 @@ export function setupVisualEditAgent() {
   const updateElementAttributeAndReposition = (
     visualSelectorId: string,
     attribute: string,
-    value: string
+    value: string,
+    instanceIndex?: number | null
   ) => {
-    const elements = findElementsById(visualSelectorId);
-    if (elements.length === 0) return;
+    const allElements = findElementsById(visualSelectorId);
+    if (allElements.length === 0) return;
+    if (instanceIndex != null && instanceIndex >= allElements.length) return;
 
+    const elements = instanceIndex != null ? [allElements[instanceIndex]!] : allElements;
     updateElementAttribute(elements, attribute, value);
 
     // Reposition overlays after attribute change (e.g. image src swap can affect layout)
@@ -404,17 +393,24 @@ export function setupVisualEditAgent() {
     }, REPOSITION_DELAY_MS);
   };
 
-  const updateElementContent = (visualSelectorId: string, content: string, arrIndex?: number) => {
-    let elements = findElementsById(visualSelectorId);
+  const updateElementContent = (visualSelectorId: string, content: string, arrIndex?: number, instanceIndex?: number | null) => {
+    const allElements = findElementsById(visualSelectorId);
 
-    if (elements.length === 0) {
+    if (allElements.length === 0) {
       return;
     }
 
-    if (arrIndex != null) {
-      elements = elements.filter(
+    if (instanceIndex != null && instanceIndex >= allElements.length) return;
+
+    let elements: Element[];
+    if (instanceIndex != null) {
+      elements = [allElements[instanceIndex]!];
+    } else if (arrIndex != null) {
+      elements = allElements.filter(
         (el) => (el as HTMLElement).dataset.arrIndex === String(arrIndex)
       );
+    } else {
+      elements = allElements;
     }
 
     elements.forEach((element) => {
@@ -518,6 +514,7 @@ export function setupVisualEditAgent() {
         toggleVisualEditMode(message.data.enabled);
         if (message.data.specs?.newInlineEditEnabled !== undefined) {
           inlineEdit.enabled = message.data.specs.newInlineEditEnabled;
+          newInlineEditEnabled = message.data.specs.newInlineEditEnabled;
         }
         break;
 
@@ -525,7 +522,8 @@ export function setupVisualEditAgent() {
         if (message.data && message.data.classes !== undefined) {
           updateElementClassesAndReposition(
             message.data.visualSelectorId,
-            message.data.classes
+            message.data.classes,
+            message.data.instanceIndex
           );
         } else {
           console.warn(
@@ -545,7 +543,8 @@ export function setupVisualEditAgent() {
           updateElementAttributeAndReposition(
             message.data.visualSelectorId,
             message.data.attribute,
-            message.data.value
+            message.data.value,
+            message.data.instanceIndex
           );
         } else {
           console.warn(
@@ -568,7 +567,8 @@ export function setupVisualEditAgent() {
           updateElementContent(
             message.data.visualSelectorId,
             message.data.content,
-            message.data.arrIndex
+            message.data.arrIndex,
+            message.data.instanceIndex
           );
         } else {
           console.warn(