@base44-preview/vite-plugin 0.2.22-pr.36.d652cb1 → 0.2.22-pr.37.1da8402

package/src/injections/visual-edit-agent/capabilities/inline-editing/core.ts

@@ -0,0 +1,120 @@
+import { injectFocusOutlineCSS, removeFocusOutlineCSS } from "./styles.js";
+import { selectText, isEditableTextElement } from "./validation.js";
+
+/**
+ * Callback function type for handling text input changes
+ */
+type OnTextInputChange = (element: HTMLElement) => void;
+
+/**
+ * Global callback that gets triggered on every input event
+ * This is set by the visual-edit-agent and includes both updatePosition and reportInlineEdit
+ */
+let onTextInputChangeCallback: OnTextInputChange | null = null;
+
+/**
+ * Set the callback function that will be called on text input changes
+ */
+export function setInlineEditCallback(callback: OnTextInputChange | null): void {
+  onTextInputChangeCallback = callback;
+}
+
+/**
+ * WeakMap to track AbortControllers for each element's input listener.
+ * Using WeakMap ensures no memory leaks — when an element is garbage collected,
+ * its entry is automatically removed.
+ */
+const listenerAbortControllers = new WeakMap<HTMLElement, AbortController>();
+
+/**
+ * Internal handler for the native input event
+ */
+function handleInputEvent(this: HTMLElement, e: Event): void {
+  if (onTextInputChangeCallback) {
+    onTextInputChangeCallback(this);
+  }
+}
+
+/**
+ * Check if an element should enter inline editing mode
+ * Called when user clicks on an already-selected element
+ */
+export function shouldEnterInlineEditingMode(element: Element): boolean {
+  // Must have data-selected="true"
+  if (!(element instanceof HTMLElement) || element.dataset.selected !== "true") {
+    return false;
+  }
+
+  // Must pass all editability checks
+  if (!isEditableTextElement(element)) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Enable contentEditable mode on an element
+ * Follows the exact flow from inlineEdit.md
+ */
+export function enterInlineEditingMode(element: HTMLElement): void {
+  // Inject CSS to suppress focus outline
+  injectFocusOutlineCSS();
+
+  // Store original state
+  element.dataset.originalTextContent = element.textContent || "";
+  element.dataset.originalCursor = element.style.cursor;
+
+  // Enable contentEditable
+  element.contentEditable = "true";
+
+  // Create an AbortController to manage the input listener lifecycle
+  const abortController = new AbortController();
+  listenerAbortControllers.set(element, abortController);
+
+  // Add input event listener with AbortSignal for automatic cleanup
+  element.addEventListener("input", handleInputEvent, { signal: abortController.signal });
+
+  // Set cursor to text
+  element.style.cursor = "text";
+
+  // Select all text
+  selectText(element);
+
+  // Focus after render
+  setTimeout(() => {
+    element.focus();
+  }, 0);
+}
+
+/**
+ * Disable contentEditable mode on an element
+ * Reverses everything done by enterInlineEditingMode
+ */
+export function clearInlineEditingMode(element: HTMLElement): void {
+  // Abort the input event listener using the stored AbortController
+  const abortController = listenerAbortControllers.get(element);
+  if (abortController) {
+    abortController.abort();
+    listenerAbortControllers.delete(element);
+  }
+
+  // If element was removed from DOM before cleanup, skip DOM operations
+  if (!element.isConnected) {
+    return;
+  }
+
+  removeFocusOutlineCSS();
+
+  // Disable contentEditable
+  element.contentEditable = "false";
+
+  // Remove stored original text content
+  delete element.dataset.originalTextContent;
+
+  // Restore original cursor
+  if (element.dataset.originalCursor !== undefined) {
+    element.style.cursor = element.dataset.originalCursor;
+    delete element.dataset.originalCursor;
+  }
+}

package/src/injections/visual-edit-agent/capabilities/inline-editing/index.ts

@@ -0,0 +1,10 @@
+export {
+  enterInlineEditingMode,
+  clearInlineEditingMode,
+  shouldEnterInlineEditingMode,
+  setInlineEditCallback,
+} from "./core.js";
+
+export { injectFocusOutlineCSS, removeFocusOutlineCSS } from "./styles.js";
+
+export { isEditableTextElement, selectText } from "./validation.js";

package/src/injections/visual-edit-agent/capabilities/inline-editing/styles.ts

@@ -0,0 +1,26 @@
+/**
+ * Inject CSS to suppress the browser's default focus outline on contentEditable elements
+ */
+export function injectFocusOutlineCSS(): void {
+  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);
+}
+
+/**
+ * Remove the injected focus outline CSS
+ */
+export function removeFocusOutlineCSS(): void {
+  const style = document.getElementById("visual-edit-focus-styles");
+  if (style) {
+    style.remove();
+  }
+}

package/src/injections/visual-edit-agent/capabilities/inline-editing/validation.ts

@@ -0,0 +1,67 @@
+/**
+ * Select all text content in an element using the Selection API
+ */
+export function selectText(element: HTMLElement): void {
+  const range = document.createRange();
+  range.selectNodeContents(element);
+  const selection = window.getSelection();
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+}
+
+/**
+ * Check if an element is an editable text element
+ * Based on the eligibility rules from inlineEdit.md (non-dynamic only)
+ */
+export function isEditableTextElement(element: Element): boolean {
+  // Must be an HTMLElement
+  if (!(element instanceof HTMLElement)) {
+    return false;
+  }
+
+  // Must be an allowed tag
+  const allowedTags = [
+    "div",
+    "p",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "span",
+    "li",
+    "td",
+    "a",
+    "button",
+    "label",
+  ];
+  if (!allowedTags.includes(element.tagName.toLowerCase())) {
+    return false;
+  }
+
+  // Must have text content
+  const textContent = element.textContent?.trim() || "";
+  if (textContent.length === 0) {
+    return false;
+  }
+
+  // Must NOT contain img, video, canvas, or svg
+  const hasMediaElements =
+    element.querySelector("img, video, canvas, svg") !== null;
+  if (hasMediaElements) {
+    return false;
+  }
+
+  // Must NOT have complex children (must be a leaf text node or simple container)
+  if (element.children.length > 0) {
+    return false;
+  }
+
+  // Must NOT be dynamic content
+  if (element.dataset.dynamicContent === "true") {
+    return false;
+  }
+
+  return true;
+}

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

@@ -0,0 +1,9 @@
+export const INLINE_EDIT_DEBOUNCE_MS = 500;
+export const OVERLAY_TRANSITION = "all 0.1s ease-in-out";
+export const OVERLAY_Z_INDEX = "9999";
+export const SELECTED_BORDER_COLOR = "#2563EB";
+export const HOVER_BORDER_COLOR = "#95a5fc";
+export const HOVER_BACKGROUND_COLOR = "rgba(99, 102, 241, 0.05)";
+export const LABEL_TOP_OFFSET = "-27px";
+export const LABEL_LEFT_OFFSET = "-2px";
+export const REPOSITION_DELAY_MS = 50;

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

@@ -0,0 +1,135 @@
+import type { AgentState } from "../state/agent-state.js";
+import { OutgoingMessageType } from "./messages/types.js";
+import { findElementsById } from "../../utils.js";
+import { createOverlay, positionOverlay, clearSelection } from "../ui/overlay.js";
+import { clearHoverOverlays } from "./hover-handlers.js";
+import { shouldEnterInlineEditingMode } from "../capabilities/inline-editing/index.js";
+import { handleClearInlineEditingMode, handleEnterInlineEditingMode } from "./inline-edit-handlers.js";
+import { getElementPosition, getElementClasses } from "../utils/dom-utils.js";
+
+/**
+ * Handle element selection (first click)
+ */
+export function handleElementSelection(
+  state: AgentState,
+  element: Element,
+  visualSelectorId: string | null
+): void {
+  if (state.currentEditingElement) {
+    handleClearInlineEditingMode(state);
+  }
+  clearSelection(state);
+
+  // Find all elements with the same ID
+  const elements = findElementsById(visualSelectorId);
+
+  if (state.isInlineEditExperimentEnabled) {
+    elements.forEach((el) => {
+      if (el instanceof HTMLElement) {
+        el.dataset.selected = "true";
+      }
+    });
+  }
+
+  // Create selected overlays for all matching elements
+  elements.forEach((el) => {
+    const overlay = createOverlay(true);
+    document.body.appendChild(overlay);
+    state.selectedOverlays.push(overlay);
+    positionOverlay(overlay, el, true, state.isVisualEditMode);
+  });
+
+  state.selectedElementId = visualSelectorId;
+
+  // Clear hover overlays
+  clearHoverOverlays(state);
+
+  // Send message to parent window with element info
+  const htmlElement = element as HTMLElement;
+  const elementData = {
+    type: OutgoingMessageType.ELEMENT_SELECTED,
+    tagName: element.tagName,
+    classes: getElementClasses(element),
+    visualSelectorId: visualSelectorId,
+    content: htmlElement.innerText,
+    dataSourceLocation: htmlElement.dataset.sourceLocation,
+    isDynamicContent: htmlElement.dataset.dynamicContent === "true",
+    linenumber: htmlElement.dataset.linenumber,
+    filename: htmlElement.dataset.filename,
+    position: getElementPosition(element.getBoundingClientRect()),
+  };
+  window.parent.postMessage(elementData, "*");
+}
+
+/**
+ * Handle element click
+ */
+export function handleElementClick(state: AgentState, e: MouseEvent): void {
+  if (!state.isVisualEditMode) return;
+
+  const target = e.target as Element;
+
+  // Bail out early if clicking on a contentEditable element (allow normal editing)
+  if (state.isInlineEditExperimentEnabled && target instanceof HTMLElement && target.contentEditable === "true") {
+    return;
+  }
+
+  // If currently editing, clicking outside should exit editing mode
+  if (state.currentEditingElement) {
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    handleClearInlineEditingMode(state);
+    return;
+  }
+
+  // Close dropdowns when clicking anywhere in iframe if a dropdown is open
+  if (state.isDropdownOpen) {
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+
+    window.parent.postMessage({ type: OutgoingMessageType.CLOSE_DROPDOWNS }, "*");
+    return;
+  }
+
+  // Prevent clicking on SVG path elements
+  if (target.tagName.toLowerCase() === "path") {
+    return;
+  }
+
+  // Prevent default behavior immediately when in visual edit mode
+  e.preventDefault();
+  e.stopPropagation();
+  e.stopImmediatePropagation();
+
+  // Support both data-source-location and data-visual-selector-id
+  const element = target.closest(
+    "[data-source-location], [data-visual-selector-id]"
+  );
+  if (!element) {
+    return;
+  }
+
+  const htmlElement = element as HTMLElement;
+  const visualSelectorId =
+    htmlElement.dataset.sourceLocation ||
+    htmlElement.dataset.visualSelectorId;
+
+  // Check if this element is already selected (second click scenario)
+  const isAlreadySelected =
+    state.selectedElementId === visualSelectorId &&
+    htmlElement.dataset.selected === "true";
+
+  if (isAlreadySelected) {
+    // Second click on already-selected element: check if it should enter inline editing
+    // Only if the experiment is enabled
+    if (state.isInlineEditExperimentEnabled && shouldEnterInlineEditingMode(htmlElement)) {
+      handleEnterInlineEditingMode(state, htmlElement);
+      return;
+    }
+  }
+
+  // First click: select the element
+  handleElementSelection(state, element, visualSelectorId || null);
+}

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

@@ -0,0 +1,78 @@
+import type { AgentState } from "../state/agent-state.js";
+import { findElementsById } from "../../utils.js";
+import { createOverlay, positionOverlay, clearOverlays } from "../ui/overlay.js";
+
+/**
+ * Clear hover overlays
+ */
+export function clearHoverOverlays(state: AgentState): void {
+  clearOverlays(state.hoverOverlays);
+  state.hoverOverlays = [];
+  state.currentHighlightedElements = [];
+}
+
+/**
+ * Handle mouse over event
+ */
+export function handleMouseOver(state: AgentState, e: MouseEvent): void {
+  if (!state.isVisualEditMode || state.isPopoverDragging || state.currentEditingElement) return;
+
+  const target = e.target as Element;
+
+  // Prevent hover effects when a dropdown is open
+  if (state.isDropdownOpen) {
+    clearHoverOverlays(state);
+    return;
+  }
+
+  // Prevent hover effects on SVG path elements
+  if (target.tagName.toLowerCase() === "path") {
+    clearHoverOverlays(state);
+    return;
+  }
+
+  // Support both data-source-location and data-visual-selector-id
+  const element = target.closest(
+    "[data-source-location], [data-visual-selector-id]"
+  );
+  if (!element) {
+    clearHoverOverlays(state);
+    return;
+  }
+
+  // Prefer data-source-location, fallback to data-visual-selector-id
+  const htmlElement = element as HTMLElement;
+  const selectorId =
+    htmlElement.dataset.sourceLocation ||
+    htmlElement.dataset.visualSelectorId;
+
+  // Skip if this element is already selected
+  if (state.selectedElementId === selectorId) {
+    clearHoverOverlays(state);
+    return;
+  }
+
+  // Find all elements with the same ID
+  const elements = findElementsById(selectorId || null);
+
+  // Clear previous hover overlays
+  clearHoverOverlays(state);
+
+  // Create overlays for all matching elements
+  elements.forEach((el) => {
+    const overlay = createOverlay(false);
+    document.body.appendChild(overlay);
+    state.hoverOverlays.push(overlay);
+    positionOverlay(overlay, el, false, state.isVisualEditMode);
+  });
+
+  state.currentHighlightedElements = elements;
+}
+
+/**
+ * Handle mouse out event
+ */
+export function handleMouseOut(state: AgentState): void {
+  if (state.isPopoverDragging || state.currentEditingElement) return;
+  clearHoverOverlays(state);
+}

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

@@ -0,0 +1,141 @@
+import type { AgentState } from "../state/agent-state.js";
+import { OutgoingMessageType } from "./messages/types.js";
+import { repositionSelectedOverlays } from "../ui/overlay.js";
+import {
+  enterInlineEditingMode,
+  clearInlineEditingMode,
+  setInlineEditCallback,
+} from "../capabilities/inline-editing/index.js";
+import { INLINE_EDIT_DEBOUNCE_MS } from "../constants.js";
+import { getElementPosition, getElementClasses } from "../utils/dom-utils.js";
+
+/**
+ * Enter inline editing mode
+ */
+export function handleEnterInlineEditingMode(state: AgentState, element: HTMLElement): void {
+  state.currentEditingElement = element;
+
+  // Hide overlays during editing
+  state.selectedOverlays.forEach((overlay) => {
+    overlay.style.display = "none";
+  });
+
+  // Enter inline editing mode (from capabilities/inline-editing)
+  enterInlineEditingMode(element);
+
+  // Notify parent
+  window.parent.postMessage(
+    {
+      type: OutgoingMessageType.CONTENT_EDITING_STARTED,
+      visualSelectorId: state.selectedElementId,
+    },
+    "*"
+  );
+}
+
+/**
+ * Clear inline editing mode
+ */
+export function handleClearInlineEditingMode(state: AgentState): void {
+  if (!state.currentEditingElement) return;
+
+  // Cancel any pending debounced edit — originalTextContent will be deleted below
+  if (state.debouncedSendTimeout) {
+    clearTimeout(state.debouncedSendTimeout);
+    state.debouncedSendTimeout = null;
+  }
+
+  const element = state.currentEditingElement;
+
+  // Clear inline editing mode (from capabilities/inline-editing)
+  clearInlineEditingMode(element);
+
+  // Show overlays again
+  state.selectedOverlays.forEach((overlay) => {
+    overlay.style.display = "";
+  });
+
+  repositionSelectedOverlays(state);
+
+  // Notify parent that editing ended
+  window.parent.postMessage(
+    {
+      type: OutgoingMessageType.CONTENT_EDITING_ENDED,
+      visualSelectorId: state.selectedElementId,
+    },
+    "*"
+  );
+
+  state.currentEditingElement = null;
+}
+
+/**
+ * Report inline edit to parent
+ */
+function reportInlineEdit(state: AgentState, element: HTMLElement): void {
+  const originalContent = element.dataset.originalTextContent;
+  const newContent = element.textContent;
+
+  const elementInfo = {
+    tagName: element.tagName,
+    classes: getElementClasses(element),
+    visualSelectorId: state.selectedElementId,
+    content: newContent,
+    dataSourceLocation: element.dataset.sourceLocation,
+    isDynamicContent: element.dataset.dynamicContent === "true",
+    linenumber: element.dataset.linenumber,
+    filename: element.dataset.filename,
+    position: getElementPosition(element.getBoundingClientRect()),
+  };
+
+  // Send inline edit message
+  window.parent.postMessage(
+    {
+      type: OutgoingMessageType.INLINE_EDIT,
+      elementInfo,
+      originalContent,
+      newContent,
+    },
+    "*"
+  );
+
+  // Update baseline for next edit
+  element.dataset.originalTextContent = newContent || "";
+}
+
+/**
+ * Debounced function to send inline edit messages
+ * 
+ * Intentionally overwrites the previous timeout on each keystroke — this is the
+ * correct debounce behavior. We only send ONE message 500ms after the user stops
+ * typing, containing the final text. Intermediate keystrokes are not sent to avoid
+ * flooding the parent with dozens of messages per second.
+ */
+function debouncedSendInlineEditMessage(state: AgentState, element: HTMLElement): void {
+  // Clear any existing timeout
+  if (state.debouncedSendTimeout) {
+    clearTimeout(state.debouncedSendTimeout);
+  }
+
+  // Set new timeout
+  state.debouncedSendTimeout = setTimeout(() => {
+    reportInlineEdit(state, element);
+  }, INLINE_EDIT_DEBOUNCE_MS);
+}
+
+/**
+ * Callback for text input changes (combines updatePosition and reportInlineEdit)
+ */
+function createTextInputChangeCallback(state: AgentState) {
+  return (element: HTMLElement) => {
+    repositionSelectedOverlays(state);
+    debouncedSendInlineEditMessage(state, element);
+  };
+}
+
+/**
+ * Setup inline edit callback
+ */
+export function setupInlineEditCallback(state: AgentState): void {
+  setInlineEditCallback(createTextInputChangeCallback(state));
+}