@base44-preview/vite-plugin 0.2.26-pr.42.7e00d38 → 0.2.26-pr.42.fa53c09

package/src/capabilities/inline-edit/dom-utils.ts

@@ -0,0 +1,48 @@
+const FOCUS_STYLE_ID = "visual-edit-focus-styles";
+
+const EDITABLE_TAGS = [
+  "div", "p", "h1", "h2", "h3", "h4", "h5", "h6",
+  "span", "li", "td", "a", "button", "label",
+];
+
+export const injectFocusOutlineCSS = () => {
+  if (document.getElementById(FOCUS_STYLE_ID)) return;
+
+  const style = document.createElement("style");
+  style.id = FOCUS_STYLE_ID;
+  style.textContent = `
+    [data-selected="true"][contenteditable="true"]:focus {
+      outline: none !important;
+    }
+  `;
+  document.head.appendChild(style);
+};
+
+export const removeFocusOutlineCSS = () => {
+  document.getElementById(FOCUS_STYLE_ID)?.remove();
+};
+
+export const selectText = (element: HTMLElement) => {
+  const range = document.createRange();
+  range.selectNodeContents(element);
+  const selection = window.getSelection();
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+};
+
+export const isEditableTextElement = (element: Element): boolean => {
+  if (!(element instanceof HTMLElement)) return false;
+  if (!EDITABLE_TAGS.includes(element.tagName.toLowerCase())) return false;
+  if (!element.textContent?.trim()) return false;
+  if (element.querySelector("img, video, canvas, svg")) return false;
+  if (element.children.length > 0) return false;
+  if (element.dataset.dynamicContent === "true") return false;
+  return true;
+};
+
+export const shouldEnterInlineEditingMode = (element: Element): boolean => {
+  if (!(element instanceof HTMLElement) || element.dataset.selected !== "true") {
+    return false;
+  }
+  return isEditableTextElement(element);
+};

package/src/capabilities/inline-edit/index.ts

@@ -0,0 +1,2 @@
+export { createInlineEditController } from "./controller.js";
+export type { InlineEditController, InlineEditHost } from "./types.js";

package/src/capabilities/inline-edit/types.ts

@@ -0,0 +1,30 @@
+export interface InlineEditHost {
+  findElementsById(id: string | null): Element[];
+  getSelectedElementId(): string | null;
+  getSelectedOverlays(): HTMLDivElement[];
+  positionOverlay(
+    overlay: HTMLDivElement,
+    element: Element,
+    isSelected?: boolean
+  ): void;
+  clearSelection(): void;
+  createSelectionOverlays(elements: Element[], elementId: string): void;
+}
+
+export interface ToggleInlineEditData {
+  dataSourceLocation: string;
+  inlineEditingMode: boolean;
+}
+
+export interface InlineEditController {
+  enabled: boolean;
+  isEditing(): boolean;
+  getCurrentElement(): HTMLElement | null;
+  canEdit(element: Element): boolean;
+  startEditing(element: HTMLElement): void;
+  stopEditing(): void;
+  markElementsSelected(elements: Element[]): void;
+  clearSelectedMarks(elementId: string | null): void;
+  handleToggleMessage(data: ToggleInlineEditData): void;
+  cleanup(): void;
+}

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

@@ -1,6 +1,7 @@
 import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId } from "./utils.js";
 import { createLayerController } from "./layer-dropdown/controller.js";
 import { LAYER_DROPDOWN_ATTR } from "./layer-dropdown/consts.js";
+import { createInlineEditController } from "../capabilities/inline-edit/index.js";
 
 export function setupVisualEditAgent() {
   // State variables (replacing React useState/useRef)
@@ -11,16 +12,9 @@ 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 => {
     const overlay = document.createElement("div");
@@ -78,255 +72,31 @@ 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);
+  // --- Inline edit controller ---
+  const inlineEdit = createInlineEditController({
+    findElementsById,
+    getSelectedElementId: () => selectedElementId,
+    getSelectedOverlays: () => selectedOverlays,
+    positionOverlay,
+    clearSelection: () => {
+      inlineEdit.clearSelectedMarks(selectedElementId);
+      clearSelectedOverlays();
+      selectedElementId = null;
+    },
+    createSelectionOverlays: (elements, elementId) => {
       elements.forEach((el) => {
-        if (el instanceof HTMLElement) {
-          delete el.dataset.selected;
-        }
+        const overlay = createOverlay(true);
+        document.body.appendChild(overlay);
+        selectedOverlays.push(overlay);
+        positionOverlay(overlay, el, true);
       });
-    }
+      selectedElementId = elementId;
+    },
+  });
 
-    selectedOverlays.forEach((overlay) => {
-      if (overlay && overlay.parentNode) {
-        overlay.remove();
-      }
-    });
-    selectedOverlays = [];
+  const clearSelection = () => {
+    inlineEdit.clearSelectedMarks(selectedElementId);
+    clearSelectedOverlays();
     selectedElementId = null;
   };
 
@@ -415,8 +185,7 @@ export function setupVisualEditAgent() {
   const handleMouseOver = (e: MouseEvent) => {
     if (!isVisualEditMode || isPopoverDragging) return;
 
-    // Skip hover effects when inline editing
-    if (currentEditingElement) return;
+    if (inlineEdit.isEditing()) return;
 
     const target = e.target as Element;
 
@@ -485,17 +254,18 @@ 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") {
+    // Let clicks inside the editable element pass through to the browser
+    // so the user can reposition the cursor and select text naturally.
+    if (inlineEdit.enabled && target instanceof HTMLElement && target.contentEditable === "true") {
       return;
     }
 
-    // If currently editing, clicking outside should exit editing mode
-    if (currentEditingElement) {
+    // Clicking outside the editable element exits inline editing mode.
+    if (inlineEdit.isEditing()) {
       e.preventDefault();
       e.stopPropagation();
       e.stopImmediatePropagation();
-      handleClearInlineEditingMode();
+      inlineEdit.stopEditing();
       return;
     }
 
@@ -530,41 +300,27 @@ export function setupVisualEditAgent() {
     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;
-      }
+    if (isAlreadySelected && inlineEdit.enabled && inlineEdit.canEdit(htmlElement)) {
+      inlineEdit.startEditing(htmlElement);
+      return;
     }
 
-    // Select the element, mark for inline editing, and attach layer dropdown
-    if (currentEditingElement) {
-      handleClearInlineEditingMode();
-    }
+    inlineEdit.stopEditing();
 
-    if (isInlineEditExperimentEnabled) {
-      const elements = findElementsById(visualSelectorId);
-      elements.forEach((el) => {
-        if (el instanceof HTMLElement) {
-          el.dataset.selected = "true";
-        }
-      });
+    if (inlineEdit.enabled) {
+      inlineEdit.markElementsSelected(findElementsById(visualSelectorId));
     }
 
     const selectedOverlay = selectElement(element);
     layerController.attachToOverlay(selectedOverlay, element);
   };
 
-  // Unselect the current element
   const unselectElement = () => {
-    if (currentEditingElement) {
-      handleClearInlineEditingMode();
-    }
+    inlineEdit.stopEditing();
     clearSelection();
   };
 
@@ -665,13 +421,10 @@ export function setupVisualEditAgent() {
     isVisualEditMode = isEnabled;
 
     if (!isEnabled) {
-      if (currentEditingElement) {
-        handleClearInlineEditingMode();
-      }
+      inlineEdit.stopEditing();
       clearSelection();
       layerController.cleanup();
       clearHoverOverlays();
-      clearSelectedOverlays();
 
       currentHighlightedElements = [];
       document.body.style.cursor = "default";
@@ -735,7 +488,7 @@ export function setupVisualEditAgent() {
       case "toggle-visual-edit-mode":
         toggleVisualEditMode(message.data.enabled);
         if (message.data.specs?.newInlineEditEnabled !== undefined) {
-          isInlineEditExperimentEnabled = message.data.specs.newInlineEditEnabled;
+          inlineEdit.enabled = message.data.specs.newInlineEditEnabled;
         }
         break;
 
@@ -853,46 +606,8 @@ 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();
-            }
-          }
+        if (message.data) {
+          inlineEdit.handleToggleMessage(message.data);
         }
         break;