@base44-preview/vite-plugin 0.2.25-pr.36.792e85b → 0.2.26-pr.42.7e00d38

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

@@ -11,6 +11,15 @@ export function setupVisualEditAgent() {
   let selectedOverlays: HTMLDivElement[] = [];
   let currentHighlightedElements: Element[] = [];
   let selectedElementId: string | null = null;
+  let currentEditingElement: HTMLElement | null = null;
+  let debouncedSendTimeout: ReturnType<typeof setTimeout> | null = null;
+  let isInlineEditExperimentEnabled = false;
+
+  const INLINE_EDIT_DEBOUNCE_MS = 500;
+  const REPOSITION_DELAY_MS = 50;
+
+  // WeakMap to track AbortControllers for each element's input listener
+  const listenerAbortControllers = new WeakMap<HTMLElement, AbortController>();
 
   // Create overlay element
   const createOverlay = (isSelected = false): HTMLDivElement => {
@@ -69,6 +78,258 @@ export function setupVisualEditAgent() {
     }
   };
 
+  // --- Inline editing utilities ---
+
+  const injectFocusOutlineCSS = () => {
+    const existingStyle = document.getElementById("visual-edit-focus-styles");
+    if (existingStyle) return;
+
+    const style = document.createElement("style");
+    style.id = "visual-edit-focus-styles";
+    style.textContent = `
+      [data-selected="true"][contenteditable="true"]:focus {
+        outline: none !important;
+      }
+    `;
+    document.head.appendChild(style);
+  };
+
+  const removeFocusOutlineCSS = () => {
+    const style = document.getElementById("visual-edit-focus-styles");
+    if (style) {
+      style.remove();
+    }
+  };
+
+  const selectText = (element: HTMLElement) => {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  };
+
+  const isEditableTextElement = (element: Element): boolean => {
+    if (!(element instanceof HTMLElement)) {
+      return false;
+    }
+
+    const allowedTags = [
+      "div", "p", "h1", "h2", "h3", "h4", "h5", "h6",
+      "span", "li", "td", "a", "button", "label",
+    ];
+    if (!allowedTags.includes(element.tagName.toLowerCase())) {
+      return false;
+    }
+
+    const textContent = element.textContent?.trim() || "";
+    if (textContent.length === 0) {
+      return false;
+    }
+
+    if (element.querySelector("img, video, canvas, svg") !== null) {
+      return false;
+    }
+
+    if (element.children.length > 0) {
+      return false;
+    }
+
+    if (element.dataset.dynamicContent === "true") {
+      return false;
+    }
+
+    return true;
+  };
+
+  const shouldEnterInlineEditingMode = (element: Element): boolean => {
+    if (!(element instanceof HTMLElement) || element.dataset.selected !== "true") {
+      return false;
+    }
+    return isEditableTextElement(element);
+  };
+
+  const handleInputEvent = function (this: HTMLElement) {
+    onTextInputChange(this);
+  };
+
+  const enterInlineEditingMode = (element: HTMLElement) => {
+    injectFocusOutlineCSS();
+
+    element.dataset.originalTextContent = element.textContent || "";
+    element.dataset.originalCursor = element.style.cursor;
+
+    element.contentEditable = "true";
+
+    const abortController = new AbortController();
+    listenerAbortControllers.set(element, abortController);
+    element.addEventListener("input", handleInputEvent, { signal: abortController.signal });
+
+    element.style.cursor = "text";
+    selectText(element);
+
+    setTimeout(() => {
+      element.focus();
+    }, 0);
+  };
+
+  const clearInlineEditingMode = (element: HTMLElement) => {
+    const abortController = listenerAbortControllers.get(element);
+    if (abortController) {
+      abortController.abort();
+      listenerAbortControllers.delete(element);
+    }
+
+    if (!element.isConnected) {
+      return;
+    }
+
+    removeFocusOutlineCSS();
+    element.contentEditable = "false";
+    delete element.dataset.originalTextContent;
+
+    if (element.dataset.originalCursor !== undefined) {
+      element.style.cursor = element.dataset.originalCursor;
+      delete element.dataset.originalCursor;
+    }
+  };
+
+  const repositionSelectedOverlays = () => {
+    if (selectedElementId) {
+      const elements = findElementsById(selectedElementId);
+      selectedOverlays.forEach((overlay, index) => {
+        if (index < elements.length) {
+          positionOverlay(overlay, elements[index]!);
+        }
+      });
+    }
+  };
+
+  const handleEnterInlineEditingMode = (element: HTMLElement) => {
+    currentEditingElement = element;
+
+    selectedOverlays.forEach((overlay) => {
+      overlay.style.display = "none";
+    });
+
+    enterInlineEditingMode(element);
+
+    window.parent.postMessage(
+      {
+        type: "content-editing-started",
+        visualSelectorId: selectedElementId,
+      },
+      "*"
+    );
+  };
+
+  const handleClearInlineEditingMode = () => {
+    if (!currentEditingElement) return;
+
+    if (debouncedSendTimeout) {
+      clearTimeout(debouncedSendTimeout);
+      debouncedSendTimeout = null;
+    }
+
+    const element = currentEditingElement;
+    clearInlineEditingMode(element);
+
+    selectedOverlays.forEach((overlay) => {
+      overlay.style.display = "";
+    });
+
+    repositionSelectedOverlays();
+
+    window.parent.postMessage(
+      {
+        type: "content-editing-ended",
+        visualSelectorId: selectedElementId,
+      },
+      "*"
+    );
+
+    currentEditingElement = null;
+  };
+
+  const reportInlineEdit = (element: HTMLElement) => {
+    const originalContent = element.dataset.originalTextContent;
+    const newContent = element.textContent;
+
+    const svgElement = element as unknown as SVGElement;
+    const elementInfo = {
+      tagName: element.tagName,
+      classes:
+        (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||
+        element.className ||
+        "",
+      visualSelectorId: selectedElementId,
+      content: newContent,
+      dataSourceLocation: element.dataset.sourceLocation,
+      isDynamicContent: element.dataset.dynamicContent === "true",
+      linenumber: element.dataset.linenumber,
+      filename: element.dataset.filename,
+      position: (() => {
+        const rect = element.getBoundingClientRect();
+        return {
+          top: rect.top,
+          left: rect.left,
+          right: rect.right,
+          bottom: rect.bottom,
+          width: rect.width,
+          height: rect.height,
+          centerX: rect.left + rect.width / 2,
+          centerY: rect.top + rect.height / 2,
+        };
+      })(),
+    };
+
+    window.parent.postMessage(
+      {
+        type: "inline-edit",
+        elementInfo,
+        originalContent,
+        newContent,
+      },
+      "*"
+    );
+
+    element.dataset.originalTextContent = newContent || "";
+  };
+
+  const debouncedSendInlineEditMessage = (element: HTMLElement) => {
+    if (debouncedSendTimeout) {
+      clearTimeout(debouncedSendTimeout);
+    }
+
+    debouncedSendTimeout = setTimeout(() => {
+      reportInlineEdit(element);
+    }, INLINE_EDIT_DEBOUNCE_MS);
+  };
+
+  const onTextInputChange = (element: HTMLElement) => {
+    repositionSelectedOverlays();
+    debouncedSendInlineEditMessage(element);
+  };
+
+  const clearSelection = () => {
+    if (selectedElementId) {
+      const elements = findElementsById(selectedElementId);
+      elements.forEach((el) => {
+        if (el instanceof HTMLElement) {
+          delete el.dataset.selected;
+        }
+      });
+    }
+
+    selectedOverlays.forEach((overlay) => {
+      if (overlay && overlay.parentNode) {
+        overlay.remove();
+      }
+    });
+    selectedOverlays = [];
+    selectedElementId = null;
+  };
+
   // Clear hover overlays
   const clearHoverOverlays = () => {
     hoverOverlays.forEach((overlay) => {
@@ -154,6 +415,9 @@ export function setupVisualEditAgent() {
   const handleMouseOver = (e: MouseEvent) => {
     if (!isVisualEditMode || isPopoverDragging) return;
 
+    // Skip hover effects when inline editing
+    if (currentEditingElement) return;
+
     const target = e.target as Element;
 
     // Prevent hover effects when a dropdown is open
@@ -221,6 +485,20 @@ export function setupVisualEditAgent() {
     // Let layer dropdown clicks pass through without interference
     if (target.closest(`[${LAYER_DROPDOWN_ATTR}]`)) return;
 
+    // Allow normal editing when clicking inside a contentEditable element
+    if (isInlineEditExperimentEnabled && target instanceof HTMLElement && target.contentEditable === "true") {
+      return;
+    }
+
+    // If currently editing, clicking outside should exit editing mode
+    if (currentEditingElement) {
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      handleClearInlineEditingMode();
+      return;
+    }
+
     // Close dropdowns when clicking anywhere in iframe if a dropdown is open
     if (isDropdownOpen) {
       e.preventDefault();
@@ -249,14 +527,45 @@ export function setupVisualEditAgent() {
       return;
     }
 
+    const htmlElement = element as HTMLElement;
+    const visualSelectorId = getElementSelectorId(element);
+
+    // Check if this element is already selected (second click scenario)
+    const isAlreadySelected =
+      selectedElementId === visualSelectorId &&
+      htmlElement.dataset.selected === "true";
+
+    if (isAlreadySelected) {
+      if (isInlineEditExperimentEnabled && shouldEnterInlineEditingMode(htmlElement)) {
+        handleEnterInlineEditingMode(htmlElement);
+        return;
+      }
+    }
+
+    // Select the element, mark for inline editing, and attach layer dropdown
+    if (currentEditingElement) {
+      handleClearInlineEditingMode();
+    }
+
+    if (isInlineEditExperimentEnabled) {
+      const elements = findElementsById(visualSelectorId);
+      elements.forEach((el) => {
+        if (el instanceof HTMLElement) {
+          el.dataset.selected = "true";
+        }
+      });
+    }
+
     const selectedOverlay = selectElement(element);
     layerController.attachToOverlay(selectedOverlay, element);
   };
 
-  // Clear the current selection
-  const clearSelection = () => {
-    clearSelectedOverlays();
-    selectedElementId = null;
+  // Unselect the current element
+  const unselectElement = () => {
+    if (currentEditingElement) {
+      handleClearInlineEditingMode();
+    }
+    clearSelection();
   };
 
   const updateElementClassesAndReposition = (visualSelectorId: string, classes: string) => {
@@ -288,7 +597,7 @@ export function setupVisualEditAgent() {
           });
         }
       }
-    }, 50);
+    }, REPOSITION_DELAY_MS);
   };
 
   // Update element attribute by visual selector ID
@@ -311,7 +620,7 @@ export function setupVisualEditAgent() {
           }
         });
       }
-    }, 50);
+    }, REPOSITION_DELAY_MS);
   };
 
   // Update element content by visual selector ID
@@ -334,7 +643,7 @@ export function setupVisualEditAgent() {
           }
         });
       }
-    }, 50);
+    }, REPOSITION_DELAY_MS);
   };
 
   // --- Layer dropdown controller ---
@@ -356,12 +665,15 @@ export function setupVisualEditAgent() {
     isVisualEditMode = isEnabled;
 
     if (!isEnabled) {
+      if (currentEditingElement) {
+        handleClearInlineEditingMode();
+      }
+      clearSelection();
       layerController.cleanup();
       clearHoverOverlays();
       clearSelectedOverlays();
 
       currentHighlightedElements = [];
-      selectedElementId = null;
       document.body.style.cursor = "default";
 
       document.removeEventListener("mouseover", handleMouseOver);
@@ -422,6 +734,9 @@ export function setupVisualEditAgent() {
     switch (message.type) {
       case "toggle-visual-edit-mode":
         toggleVisualEditMode(message.data.enabled);
+        if (message.data.specs?.newInlineEditEnabled !== undefined) {
+          isInlineEditExperimentEnabled = message.data.specs.newInlineEditEnabled;
+        }
         break;
 
       case "update-classes":
@@ -459,7 +774,7 @@ export function setupVisualEditAgent() {
         break;
 
       case "unselect-element":
-        clearSelection();
+        unselectElement();
         break;
 
       case "refresh-page":
@@ -537,6 +852,50 @@ export function setupVisualEditAgent() {
         }
         break;
 
+      case "toggle-inline-edit-mode":
+        if (!isInlineEditExperimentEnabled) break;
+        if (!message.data || !message.data.dataSourceLocation) break;
+
+        {
+          const elements = findElementsById(message.data.dataSourceLocation);
+          if (elements.length === 0 || !(elements[0] instanceof HTMLElement)) break;
+
+          const element = elements[0];
+
+          if (message.data.inlineEditingMode) {
+            if (shouldEnterInlineEditingMode(element)) {
+              // Select the element first if not already selected
+              if (selectedElementId !== message.data.dataSourceLocation) {
+                if (currentEditingElement) {
+                  handleClearInlineEditingMode();
+                }
+                clearSelection();
+
+                elements.forEach((el) => {
+                  if (el instanceof HTMLElement) {
+                    el.dataset.selected = "true";
+                  }
+                });
+
+                elements.forEach((el) => {
+                  const overlay = createOverlay(true);
+                  document.body.appendChild(overlay);
+                  selectedOverlays.push(overlay);
+                  positionOverlay(overlay, el, true);
+                });
+
+                selectedElementId = message.data.dataSourceLocation;
+              }
+              handleEnterInlineEditingMode(element);
+            }
+          } else {
+            if (currentEditingElement === element) {
+              handleClearInlineEditingMode();
+            }
+          }
+        }
+        break;
+
       default:
         break;
     }
@@ -601,7 +960,7 @@ export function setupVisualEditAgent() {
     });
 
     if (needsUpdate) {
-      setTimeout(handleResize, 50);
+      setTimeout(handleResize, REPOSITION_DELAY_MS);
     }
   });