@base44/vite-plugin 0.2.26 → 0.2.27

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

@@ -0,0 +1,245 @@
+import type { InlineEditHost, InlineEditController } from "./types.js";
+import {
+  injectFocusOutlineCSS,
+  removeFocusOutlineCSS,
+  selectText,
+  shouldEnterInlineEditingMode,
+} from "./dom-utils.js";
+
+const DEBOUNCE_MS = 500;
+
+export function createInlineEditController(
+  host: InlineEditHost
+): InlineEditController {
+  let currentEditingElement: HTMLElement | null = null;
+  let debouncedSendTimeout: ReturnType<typeof setTimeout> | null = null;
+  let enabled = false;
+  const listenerAbortControllers = new WeakMap<HTMLElement, AbortController>();
+
+  // --- Private helpers ---
+
+  const repositionOverlays = () => {
+    const selectedId = host.getSelectedElementId();
+    if (!selectedId) return;
+    const elements = host.findElementsById(selectedId);
+    const overlays = host.getSelectedOverlays();
+    overlays.forEach((overlay, i) => {
+      if (i < elements.length && elements[i]) {
+        host.positionOverlay(overlay, elements[i]);
+      }
+    });
+  };
+
+  const reportEdit = (element: HTMLElement) => {
+    const originalContent = element.dataset.originalTextContent;
+    const newContent = element.textContent;
+
+    const svgElement = element as unknown as SVGElement;
+    const rect = element.getBoundingClientRect();
+
+    window.parent.postMessage(
+      {
+        type: "inline-edit",
+        elementInfo: {
+          tagName: element.tagName,
+          classes:
+            (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||
+            element.className ||
+            "",
+          visualSelectorId: host.getSelectedElementId(),
+          content: newContent,
+          dataSourceLocation: element.dataset.sourceLocation,
+          isDynamicContent: element.dataset.dynamicContent === "true",
+          linenumber: element.dataset.linenumber,
+          filename: element.dataset.filename,
+          position: {
+            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,
+          },
+        },
+        originalContent,
+        newContent,
+      },
+      "*"
+    );
+
+    element.dataset.originalTextContent = newContent || "";
+  };
+
+  const debouncedReport = (element: HTMLElement) => {
+    if (debouncedSendTimeout) clearTimeout(debouncedSendTimeout);
+    debouncedSendTimeout = setTimeout(() => reportEdit(element), DEBOUNCE_MS);
+  };
+
+  const onTextInput = (element: HTMLElement) => {
+    repositionOverlays();
+    debouncedReport(element);
+  };
+
+  const handleInputEvent = function (this: HTMLElement) {
+    onTextInput(this);
+  };
+
+  const makeEditable = (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(() => {
+      if (element.isConnected) {
+        element.focus();
+      }
+    }, 0);
+  };
+
+  const makeNonEditable = (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;
+    }
+  };
+
+  // --- Public API ---
+
+  return {
+    get enabled() {
+      return enabled;
+    },
+    set enabled(value: boolean) {
+      enabled = value;
+    },
+
+    isEditing() {
+      return currentEditingElement !== null;
+    },
+
+    getCurrentElement() {
+      return currentEditingElement;
+    },
+
+    canEdit(element: Element) {
+      return shouldEnterInlineEditingMode(element);
+    },
+
+    startEditing(element: HTMLElement) {
+      currentEditingElement = element;
+
+      host.getSelectedOverlays().forEach((o) => {
+        o.style.display = "none";
+      });
+
+      makeEditable(element);
+
+      window.parent.postMessage(
+        {
+          type: "content-editing-started",
+          visualSelectorId: host.getSelectedElementId(),
+        },
+        "*"
+      );
+    },
+
+    stopEditing() {
+      if (!currentEditingElement) return;
+
+      if (debouncedSendTimeout) {
+        clearTimeout(debouncedSendTimeout);
+        debouncedSendTimeout = null;
+      }
+
+      const element = currentEditingElement;
+      makeNonEditable(element);
+
+      host.getSelectedOverlays().forEach((o) => {
+        o.style.display = "";
+      });
+
+      repositionOverlays();
+
+      window.parent.postMessage(
+        {
+          type: "content-editing-ended",
+          visualSelectorId: host.getSelectedElementId(),
+        },
+        "*"
+      );
+
+      currentEditingElement = null;
+    },
+
+    markElementsSelected(elements: Element[]) {
+      elements.forEach((el) => {
+        if (el instanceof HTMLElement) {
+          el.dataset.selected = "true";
+        }
+      });
+    },
+
+    clearSelectedMarks(elementId: string | null) {
+      if (!elementId) return;
+      host.findElementsById(elementId).forEach((el) => {
+        if (el instanceof HTMLElement) {
+          delete el.dataset.selected;
+        }
+      });
+    },
+
+    handleToggleMessage(data: { dataSourceLocation: string; inlineEditingMode: boolean }) {
+      if (!enabled) return;
+
+      const elements = host.findElementsById(data.dataSourceLocation);
+      if (elements.length === 0 || !(elements[0] instanceof HTMLElement)) return;
+
+      const element = elements[0];
+
+      if (data.inlineEditingMode) {
+        if (!shouldEnterInlineEditingMode(element)) return;
+
+        // Select the element first if not already selected
+        if (host.getSelectedElementId() !== data.dataSourceLocation) {
+          this.stopEditing();
+          host.clearSelection();
+          this.markElementsSelected(elements);
+          host.createSelectionOverlays(elements, data.dataSourceLocation);
+        }
+        this.startEditing(element);
+      } else {
+        if (currentEditingElement === element) {
+          this.stopEditing();
+        }
+      }
+    },
+
+    cleanup() {
+      this.stopEditing();
+    },
+  };
+}

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)
@@ -12,6 +13,8 @@ export function setupVisualEditAgent() {
   let currentHighlightedElements: Element[] = [];
   let selectedElementId: string | null = null;
 
+  const REPOSITION_DELAY_MS = 50;
+
   // Create overlay element
   const createOverlay = (isSelected = false): HTMLDivElement => {
     const overlay = document.createElement("div");
@@ -69,6 +72,34 @@ export function setupVisualEditAgent() {
     }
   };
 
+  // --- 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) => {
+        const overlay = createOverlay(true);
+        document.body.appendChild(overlay);
+        selectedOverlays.push(overlay);
+        positionOverlay(overlay, el, true);
+      });
+      selectedElementId = elementId;
+    },
+  });
+
+  const clearSelection = () => {
+    inlineEdit.clearSelectedMarks(selectedElementId);
+    clearSelectedOverlays();
+    selectedElementId = null;
+  };
+
   // Clear hover overlays
   const clearHoverOverlays = () => {
     hoverOverlays.forEach((overlay) => {
@@ -152,7 +183,8 @@ export function setupVisualEditAgent() {
 
   // Handle mouse over event
   const handleMouseOver = (e: MouseEvent) => {
-    if (!isVisualEditMode || isPopoverDragging) return;
+    if (!isVisualEditMode || isPopoverDragging || inlineEdit.isEditing()) return;
+
 
     const target = e.target as Element;
 
@@ -221,6 +253,21 @@ export function setupVisualEditAgent() {
     // Let layer dropdown clicks pass through without interference
     if (target.closest(`[${LAYER_DROPDOWN_ATTR}]`)) return;
 
+    // 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;
+    }
+
+    // Clicking outside the editable element exits inline editing mode.
+    if (inlineEdit.isEditing()) {
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      inlineEdit.stopEditing();
+      return;
+    }
+
     // Close dropdowns when clicking anywhere in iframe if a dropdown is open
     if (isDropdownOpen) {
       e.preventDefault();
@@ -249,14 +296,31 @@ export function setupVisualEditAgent() {
       return;
     }
 
+    const htmlElement = element as HTMLElement;
+    const visualSelectorId = getElementSelectorId(element);
+
+    const isAlreadySelected =
+      selectedElementId === visualSelectorId &&
+      htmlElement.dataset.selected === "true";
+
+    if (isAlreadySelected && inlineEdit.enabled && inlineEdit.canEdit(htmlElement)) {
+      inlineEdit.startEditing(htmlElement);
+      return;
+    }
+
+    inlineEdit.stopEditing();
+
+    if (inlineEdit.enabled) {
+      inlineEdit.markElementsSelected(findElementsById(visualSelectorId));
+    }
+
     const selectedOverlay = selectElement(element);
     layerController.attachToOverlay(selectedOverlay, element);
   };
 
-  // Clear the current selection
-  const clearSelection = () => {
-    clearSelectedOverlays();
-    selectedElementId = null;
+  const unselectElement = () => {
+    inlineEdit.stopEditing();
+    clearSelection();
   };
 
   const updateElementClassesAndReposition = (visualSelectorId: string, classes: string) => {
@@ -288,7 +352,7 @@ export function setupVisualEditAgent() {
           });
         }
       }
-    }, 50);
+    }, REPOSITION_DELAY_MS);
   };
 
   // Update element attribute by visual selector ID
@@ -311,7 +375,7 @@ export function setupVisualEditAgent() {
           }
         });
       }
-    }, 50);
+    }, REPOSITION_DELAY_MS);
   };
 
   // Update element content by visual selector ID
@@ -334,7 +398,7 @@ export function setupVisualEditAgent() {
           }
         });
       }
-    }, 50);
+    }, REPOSITION_DELAY_MS);
   };
 
   // --- Layer dropdown controller ---
@@ -356,12 +420,12 @@ export function setupVisualEditAgent() {
     isVisualEditMode = isEnabled;
 
     if (!isEnabled) {
+      inlineEdit.stopEditing();
+      clearSelection();
       layerController.cleanup();
       clearHoverOverlays();
-      clearSelectedOverlays();
 
       currentHighlightedElements = [];
-      selectedElementId = null;
       document.body.style.cursor = "default";
 
       document.removeEventListener("mouseover", handleMouseOver);
@@ -422,6 +486,9 @@ export function setupVisualEditAgent() {
     switch (message.type) {
       case "toggle-visual-edit-mode":
         toggleVisualEditMode(message.data.enabled);
+        if (message.data.specs?.newInlineEditEnabled !== undefined) {
+          inlineEdit.enabled = message.data.specs.newInlineEditEnabled;
+        }
         break;
 
       case "update-classes":
@@ -459,7 +526,7 @@ export function setupVisualEditAgent() {
         break;
 
       case "unselect-element":
-        clearSelection();
+        unselectElement();
         break;
 
       case "refresh-page":
@@ -537,6 +604,12 @@ export function setupVisualEditAgent() {
         }
         break;
 
+      case "toggle-inline-edit-mode":
+        if (message.data) {
+          inlineEdit.handleToggleMessage(message.data);
+        }
+        break;
+
       default:
         break;
     }
@@ -601,7 +674,7 @@ export function setupVisualEditAgent() {
     });
 
     if (needsUpdate) {
-      setTimeout(handleResize, 50);
+      setTimeout(handleResize, REPOSITION_DELAY_MS);
     }
   });