@upstart.gg/vite-plugins 0.1.4 → 0.1.6

package/src/vite-plugin-upstart-editor/runtime/click-handler.ts

@@ -1,8 +1,31 @@
-import { getCurrentMode } from "./index.js";
+import { getCurrentMode } from "./state.js";
 import { sendToParent } from "./utils.js";
 
 let isInitialized = false;
 
+const DAISY_VAR_NAMES = [
+  "base-100",
+  "base-200",
+  "base-300",
+  "base-content",
+  "primary",
+  "primary-content",
+  "secondary",
+  "secondary-content",
+  "accent",
+  "accent-content",
+  "neutral",
+  "neutral-content",
+  "info",
+  "info-content",
+  "success",
+  "success-content",
+  "warning",
+  "warning-content",
+  "error",
+  "error-content",
+];
+
 /**
  * Initialize click handler for className editing.
  */
@@ -41,6 +64,11 @@ function handleClick(event: MouseEvent): void {
     return;
   }
 
+  if (target.closest(".upstart-editor-bubble-menu")) {
+    console.info("[Upstart Editor] Click ignored: target is inside the bubble menu");
+    return;
+  }
+
   const activeLink = target.closest("a[data-upstart-editor-active]");
   const isFormControlClick = Boolean(
     (target as HTMLElement | null)?.closest("input, textarea, select, button"),
@@ -49,26 +77,39 @@ function handleClick(event: MouseEvent): void {
     event.preventDefault();
   }
 
+  // Clicks inside contenteditable (TipTap active) — still notify style panel if applicable
   if (target.closest("[contenteditable='true']")) {
-    console.info("[Upstart Editor] Click ignored: target is inside a contenteditable element");
-    return;
-  }
-
-  // Check if the click targets a datasource record (takes priority over class editing)
-  const datasourceEl = target.closest<HTMLElement>("[data-upstart-datasource][data-upstart-record-id]");
-  if (datasourceEl) {
-    event.stopPropagation();
-    sendToParent({
-      type: "datasource-item-clicked",
-      datasourceId: datasourceEl.dataset.upstartDatasource as string,
-      recordId: datasourceEl.dataset.upstartRecordId as string,
-    });
+    const editableEl = target.closest<HTMLElement>("[data-upstart-editable-text='true']");
+    if (editableEl) {
+      const classNameId =
+        editableEl.dataset.upstartClassnameId ||
+        editableEl.closest<HTMLElement>("[data-upstart-classname-id]")?.dataset.upstartClassnameId ||
+        "";
+      if (classNameId) {
+        const computedStyle = getComputedStyle(document.documentElement);
+        const themeColors: Record<string, string> = {};
+        for (const name of DAISY_VAR_NAMES) {
+          const val = computedStyle.getPropertyValue(`--color-${name}`).trim();
+          if (val) themeColors[name] = val;
+        }
+        sendToParent({
+          type: "element-clicked",
+          hash: editableEl.dataset.upstartHash ?? "",
+          componentName: editableEl.dataset.upstartComponent,
+          filePath: editableEl.dataset.upstartFile ?? "",
+          classNameId,
+          currentClassName: editableEl.className,
+          themeColors,
+          bounds: { top: 0, left: 0, width: 0, height: 0, right: 0, bottom: 0 },
+        });
+      }
+    }
+    console.info("[Upstart Editor] Click inside contenteditable: TipTap handles text editing");
     return;
   }
 
+  // Find the closest element with data-upstart-hash
   const element = target.closest<HTMLElement>("[data-upstart-hash]");
-  // const i18nKey = target.closest<HTMLElement>("[data-upstart-i18n]");
-
   if (!element) {
     console.info("[Upstart Editor] Click ignored: no ancestral element with data-upstart-hash found");
     return;
@@ -81,7 +122,39 @@ function handleClick(event: MouseEvent): void {
   const hash = element.dataset.upstartHash as string;
   const componentName = element.dataset.upstartComponent;
   const filePath = element.dataset.upstartFile ?? "";
-  const classNameId = element.dataset.upstartClassnameId ?? "";
+
+  // If this element has editable-text="true", let TipTap handle text editing
+  if (element.dataset.upstartEditableText === "true") {
+    const proseMirror = element.querySelector<HTMLElement>(".ProseMirror");
+    if (proseMirror) {
+      proseMirror.focus();
+    }
+  }
+
+  // Find classNameId on the element itself, or walk up to find it on a parent
+  let classNameId = element.dataset.upstartClassnameId ?? "";
+  let currentClassName = element.className;
+  if (!classNameId) {
+    const parentWithClassname = element.closest<HTMLElement>("[data-upstart-classname-id]");
+    if (parentWithClassname) {
+      classNameId = parentWithClassname.dataset.upstartClassnameId ?? "";
+      currentClassName = parentWithClassname.className;
+    }
+  }
+
+  // Check if this element (or a nearby ancestor) is a datasource record
+  const datasourceEl = target.closest<HTMLElement>("[data-upstart-datasource][data-upstart-record-id]");
+  const datasourceId = datasourceEl?.dataset.upstartDatasource;
+  const recordId = datasourceEl?.dataset.upstartRecordId;
+
+  // Read DaisyUI CSS custom property values from the iframe's document
+  const computedStyle = getComputedStyle(document.documentElement);
+  const themeColors: Record<string, string> = {};
+  for (const name of DAISY_VAR_NAMES) {
+    const val = computedStyle.getPropertyValue(`--color-${name}`).trim();
+    if (val) themeColors[name] = val;
+  }
+
   const rect = element.getBoundingClientRect();
 
   sendToParent({
@@ -90,7 +163,10 @@ function handleClick(event: MouseEvent): void {
     componentName,
     filePath,
     classNameId,
-    currentClassName: element.className,
+    currentClassName,
+    datasourceId,
+    recordId,
+    themeColors,
     bounds: {
       top: rect.top,
       left: rect.left,

package/src/vite-plugin-upstart-editor/runtime/hover-overlay.ts

@@ -1,8 +1,9 @@
-import { getCurrentMode } from "./index.js";
+import { getCurrentMode } from "./state.js";
 import { sendToParent } from "./utils.js";
 
 let overlay: HTMLDivElement | null = null;
 let currentTarget: HTMLElement | null = null;
+let hoveredEl: HTMLElement | null = null;
 let isInitialized = false;
 let rafId: number | null = null;
 
@@ -20,8 +21,35 @@ export function initHoverOverlay(): void {
 
   console.log("[Upstart Editor] Initializing hover overlay...");
 
+  const style = document.createElement("style");
+  style.id = "upstart-hover-edit-styles";
+  style.textContent = [
+    ":root[data-upstart-edit-mode] [data-upstart-classname-id]:not([data-upstart-editable-text='true']),",
+    ":root[data-upstart-edit-mode] [data-upstart-datasource][data-upstart-record-id]:not([data-upstart-editable-text='true']),",
+    ":root[data-upstart-edit-mode] [data-upstart-editor-active] {",
+    "  transition: outline 150ms, outline-offset 150ms;",
+    "}",
+    ":root[data-upstart-edit-mode] [data-upstart-hovered] {",
+    "  outline: 2px solid rgba(114, 112, 198, 0.6);",
+    "  outline-offset: 4px;",
+    "  cursor: pointer;",
+    "}",
+    ":root[data-upstart-edit-mode] [data-upstart-editor-active][data-upstart-hovered] {",
+    "  outline: 2px solid rgba(114, 112, 198, 0.6);",
+    "  outline-offset: 4px;",
+    "  cursor: text;",
+    "}",
+    ":root[data-upstart-edit-mode] [data-upstart-hovered-ancestor] {",
+    "  outline: 1px dashed rgba(114, 112, 198, 0.6);",
+    "  cursor: pointer;",
+    "}",
+  ].join("\n");
+  document.head.appendChild(style);
+
   document.addEventListener("mouseover", handleMouseOver);
   document.addEventListener("mouseout", handleMouseOut);
+  document.addEventListener("keydown", handleKeyChange);
+  document.addEventListener("keyup", handleKeyChange);
   window.addEventListener("scroll", scheduleOverlayUpdate, { passive: true });
   window.addEventListener("resize", scheduleOverlayUpdate, { passive: true });
 
@@ -36,6 +64,51 @@ export function hideOverlays(): void {
     overlay.style.display = "none";
     currentTarget = null;
   }
+  clearEditableHover();
+}
+
+function isEligible(el: HTMLElement): boolean {
+  if (el.dataset.upstartEditableText === "true") return false;
+  return !!(el.dataset.upstartClassnameId || (el.dataset.upstartDatasource && el.dataset.upstartRecordId));
+}
+
+function clearEditableHover(): void {
+  for (const el of document.querySelectorAll("[data-upstart-hovered],[data-upstart-hovered-ancestor]")) {
+    (el as HTMLElement).removeAttribute("data-upstart-hovered");
+    (el as HTMLElement).removeAttribute("data-upstart-hovered-ancestor");
+  }
+  hoveredEl = null;
+}
+
+function applyTextHover(el: HTMLElement): void {
+  clearEditableHover();
+  el.setAttribute("data-upstart-hovered", "");
+  hoveredEl = el;
+}
+
+function applyEditableHover(target: HTMLElement, withAncestors: boolean): void {
+  clearEditableHover();
+
+  // Find closest eligible element
+  let el: HTMLElement | null = target;
+  while (el && el !== document.documentElement) {
+    if (isEligible(el)) break;
+    el = el.parentElement;
+  }
+  if (!el || el === document.documentElement) return;
+
+  el.setAttribute("data-upstart-hovered", "");
+  hoveredEl = el;
+
+  if (withAncestors) {
+    let ancestor = el.parentElement;
+    while (ancestor && ancestor !== document.documentElement) {
+      if (isEligible(ancestor)) {
+        ancestor.setAttribute("data-upstart-hovered-ancestor", "");
+      }
+      ancestor = ancestor.parentElement;
+    }
+  }
 }
 
 function handleMouseOver(event: MouseEvent): void {
@@ -48,6 +121,18 @@ function handleMouseOver(event: MouseEvent): void {
     return;
   }
 
+  // If hovering inside an active text editor, highlight only that element
+  // and suppress the component overlay box so parents don't get hover effects.
+  const textEl = target.closest<HTMLElement>("[data-upstart-editor-active]");
+  if (textEl) {
+    applyTextHover(textEl);
+    if (overlay) overlay.style.display = "none";
+    currentTarget = null;
+    return;
+  }
+
+  applyEditableHover(target, event.metaKey || event.ctrlKey);
+
   const component = target.closest<HTMLElement>("[data-upstart-component]");
   if (!component || component.dataset.upstartEditorActive) {
     return;
@@ -59,23 +144,6 @@ function handleMouseOver(event: MouseEvent): void {
 
   currentTarget = component;
   positionOverlay(component);
-
-  const hash = component.dataset.upstartHash;
-  if (hash) {
-    const rect = component.getBoundingClientRect();
-    sendToParent({
-      type: "element-hovered",
-      hash,
-      bounds: {
-        top: rect.top,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height,
-        right: rect.right,
-        bottom: rect.bottom,
-      },
-    });
-  }
 }
 
 function handleMouseOut(event: MouseEvent): void {
@@ -98,12 +166,18 @@ function handleMouseOut(event: MouseEvent): void {
   hideOverlays();
 }
 
+function handleKeyChange(event: KeyboardEvent): void {
+  if (getCurrentMode() !== "edit" || !hoveredEl) return;
+  if (event.key !== "Meta" && event.key !== "Control") return;
+  applyEditableHover(hoveredEl, event.type === "keydown" && (event.metaKey || event.ctrlKey));
+}
+
 function createOverlay(): void {
   overlay = document.createElement("div");
   overlay.id = "upstart-hover-overlay";
   overlay.style.cssText =
-    "position: absolute; pointer-events: none; border: 2px solid #3b82f6; " +
-    "background: rgba(59, 130, 246, 0.05); border-radius: 4px; z-index: 9999; " +
+    "position: absolute; pointer-events: none; border: 2px solid rgba(114, 112, 198, 0.6); " +
+    "background: rgba(114, 112, 198, 0.05); border-radius: 4px; z-index: 9999; " +
     "transition: all 0.1s ease; display: none;";
   document.body.appendChild(overlay);
 }

package/src/vite-plugin-upstart-editor/runtime/index.ts

@@ -3,23 +3,18 @@ import { initHoverOverlay, hideOverlays } from "./hover-overlay.js";
 import { initErrorHandler } from "./error-handler.js";
 import { initTextEditor, activateAllEditors, destroyAllActiveEditors } from "./text-editor.js";
 import { sendToParent } from "./utils.js";
+import { getCurrentMode, setCurrentMode } from "./state.js";
 import type { EditorMode, UpstartParentMessage } from "./types.js";
 
-let currentMode: EditorMode = "preview";
 let isInitialized = false;
 
-/**
- * Get the current editor mode.
- */
-export function getCurrentMode(): EditorMode {
-  return currentMode;
-}
+export { getCurrentMode };
 
 /**
  * Set the current editor mode.
  */
 export function setMode(mode: EditorMode): void {
-  currentMode = mode;
+  setCurrentMode(mode);
   console.log(`[Upstart Editor] Setting mode to: ${mode}`);
   if (mode === "edit") {
     enableEditMode();
@@ -28,15 +23,42 @@ export function setMode(mode: EditorMode): void {
   }
 }
 
+export function waitForHydration(callback: () => void): void {
+  // Remix/React 18 wraps hydrateRoot in startTransition, making hydration a
+  // concurrent (low-priority) operation that can span many frames after the
+  // load event. Instead of guessing a delay, we wait for the DOM to stabilise:
+  // once 200 ms pass without any childList mutations, hydration is done.
+  const STABILITY_MS = 200;
+
+  const onReady = () => {
+    let timer: number | null = null;
+
+    const settle = () => {
+      if (timer) clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        observer.disconnect();
+        callback();
+      }, STABILITY_MS);
+    };
+
+    const observer = new MutationObserver(settle);
+    observer.observe(document.documentElement, { childList: true, subtree: true });
+
+    // Kick off the first timer (covers case where no mutations occur after load)
+    settle();
+  };
+
+  if (document.readyState === "complete") {
+    onReady();
+  } else {
+    window.addEventListener("load", onReady, { once: true });
+  }
+}
+
 /**
  * Initialize the Upstart editor runtime.
  */
 export function initUpstartEditor(): void {
-  if (typeof window === "undefined") {
-    console.warn("[Upstart Editor] Cannot initialize editor: not running in a browser environment");
-    return;
-  }
-
   if (isInitialized) {
     console.log("[Upstart Editor] Editor is already initialized");
     return;
@@ -105,16 +127,23 @@ function handleParentMessage(event: MessageEvent): void {
   if (message.type === "set-mode") {
     console.log("Setting editor mode to:", message.mode);
     setMode(message.mode);
+  } else if (message.type === "preview-classname") {
+    const el = document.querySelector<HTMLElement>(`[data-upstart-classname-id="${message.classNameId}"]`);
+    if (el) {
+      el.className = message.className;
+    }
   }
 }
 
 function enableEditMode(): void {
   console.log("[Upstart Editor] Edit mode enabled");
+  document.documentElement.setAttribute("data-upstart-edit-mode", "");
   activateAllEditors();
 }
 
 function disableEditMode(): void {
   console.log("[Upstart Editor] Preview mode enabled");
+  document.documentElement.removeAttribute("data-upstart-edit-mode");
   destroyAllActiveEditors();
   hideOverlays();
 }

package/src/vite-plugin-upstart-editor/runtime/state.ts

@@ -0,0 +1,17 @@
+import type { EditorMode } from "./types.js";
+
+let currentMode: EditorMode = "preview";
+
+/**
+ * Get the current editor mode.
+ */
+export function getCurrentMode(): EditorMode {
+  return currentMode;
+}
+
+/**
+ * Set the current editor mode (internal use only).
+ */
+export function setCurrentMode(mode: EditorMode): void {
+  currentMode = mode;
+}

package/src/vite-plugin-upstart-editor/runtime/text-editor.ts

@@ -54,52 +54,13 @@ let reactivateTimer: number | null = null;
  * Activation is deferred to avoid conflicting with React hydration.
  */
 export function initTextEditor(options: UpstartEditorOptions = {}): void {
-  if (typeof window === "undefined") {
-    console.warn("[Upstart Editor] Cannot initialize text editor: not running in a browser environment");
-    return;
-  }
-
   resolvedOptions = { ...DEFAULT_OPTIONS, ...options };
   registerKeyboardShortcuts();
 
   // Defer activation to let React finish hydrating the server-rendered HTML.
-  waitForHydration(() => {
-    injectEditorStyles();
-    // activateAllEditors();
-    startDomObserver();
-  });
-}
-
-function waitForHydration(callback: () => void): void {
-  // Remix/React 18 wraps hydrateRoot in startTransition, making hydration a
-  // concurrent (low-priority) operation that can span many frames after the
-  // load event. Instead of guessing a delay, we wait for the DOM to stabilise:
-  // once 200 ms pass without any childList mutations, hydration is done.
-  const STABILITY_MS = 200;
-
-  const onReady = () => {
-    let timer: number | null = null;
-
-    const settle = () => {
-      if (timer) clearTimeout(timer);
-      timer = window.setTimeout(() => {
-        observer.disconnect();
-        callback();
-      }, STABILITY_MS);
-    };
-
-    const observer = new MutationObserver(settle);
-    observer.observe(document.documentElement, { childList: true, subtree: true });
-
-    // Kick off the first timer (covers case where no mutations occur after load)
-    settle();
-  };
-
-  if (document.readyState === "complete") {
-    onReady();
-  } else {
-    window.addEventListener("load", onReady, { once: true });
-  }
+  injectEditorStyles();
+  // activateAllEditors();
+  startDomObserver();
 }
 
 /**
@@ -118,11 +79,6 @@ function injectEditorStyles(): void {
   style.textContent = [
     "[data-upstart-editor-active] {",
     "  cursor: text;",
-    "  transition: outline 100ms;",
-    "}",
-    "[data-upstart-editor-active]:hover {",
-    "  outline: 1px solid #7270c6;",
-    "  outline-offset: 4px;",
     "}",
     // "[data-upstart-editor-active] > *:not(.ProseMirror) {",
     // "  display: none !important;",
@@ -212,6 +168,7 @@ function createPlainTextEditor(
   options: Required<UpstartEditorOptions>,
 ): Editor {
   const content = element.textContent ?? "";
+  element.textContent = ""; // Clear the element first! (same as rich text editors)
   let hasChanged = false;
 
   const editor = new Editor({
@@ -380,6 +337,11 @@ function createInlineRichTextEditor(
 }
 
 function getEditorMode(element: HTMLElement, options: Required<UpstartEditorOptions>): TextEditorMode {
+  const modeOverride = element.dataset.upstartEditableTextMode as TextEditorMode | undefined;
+  if (modeOverride === "plain" || modeOverride === "inline-rich" || modeOverride === "block-rich") {
+    return modeOverride;
+  }
+
   const tagName = element.tagName.toLowerCase();
 
   if (options.plainTextElements.includes(tagName)) {
@@ -721,40 +683,46 @@ function wireBubbleMenu(menu: HTMLDivElement, editor: Editor): void {
     event.preventDefault();
   });
 
-  menu.addEventListener("click", (event) => {
-    const target = event.target as HTMLElement | null;
-    const command = target?.dataset.command;
-    if (!command) return;
-
-    const chain = editor.chain().focus();
-
-    switch (command) {
-      case "bold":
-        chain.toggleBold().run();
-        break;
-      case "italic":
-        chain.toggleItalic().run();
-        break;
-      case "strike":
-        chain.toggleStrike().run();
-        break;
-      case "code":
-        chain.toggleCode().run();
-        break;
-      case "heading":
-        chain.toggleHeading({ level: 1 }).run();
-        break;
-      case "blockquote":
-        chain.toggleBlockquote().run();
-        break;
-      case "bulletList":
-        chain.toggleBulletList().run();
-        break;
-      case "orderedList":
-        chain.toggleOrderedList().run();
-        break;
-    }
-  });
+  menu.addEventListener(
+    "click",
+    (event) => {
+      console.log("menu button cliked");
+      event.stopPropagation();
+      const target = event.target as HTMLElement | null;
+      const command = target?.dataset.command;
+      if (!command) return;
+
+      const chain = editor.chain().focus();
+
+      switch (command) {
+        case "bold":
+          chain.toggleBold().run();
+          break;
+        case "italic":
+          chain.toggleItalic().run();
+          break;
+        case "strike":
+          chain.toggleStrike().run();
+          break;
+        case "code":
+          chain.toggleCode().run();
+          break;
+        case "heading":
+          chain.toggleHeading({ level: 1 }).run();
+          break;
+        case "blockquote":
+          chain.toggleBlockquote().run();
+          break;
+        case "bulletList":
+          chain.toggleBulletList().run();
+          break;
+        case "orderedList":
+          chain.toggleOrderedList().run();
+          break;
+      }
+    },
+    { capture: true },
+  );
 
   const updateActiveStates = (): void => {
     const buttons = menu.querySelectorAll<HTMLButtonElement>("button[data-command]");

package/src/vite-plugin-upstart-editor/runtime/types.ts

@@ -41,8 +41,6 @@ export type EditorMessage =
   | { type: "editor-ready" }
   | { type: "editor-navigated" }
   | { type: "editor-error"; error: string }
-  | { type: "element-hovered"; hash: string; bounds: ElementBounds }
-  | { type: "datasource-item-clicked"; datasourceId: string; recordId: string }
   | {
       type: "element-clicked";
       hash: string;
@@ -50,13 +48,18 @@ export type EditorMessage =
       filePath: string;
       currentClassName: string;
       classNameId: string;
+      datasourceId?: string;
+      recordId?: string;
+      themeColors?: Record<string, string>;
       bounds: ElementBounds;
     };
 
 /**
  * Messages sent from parent to iframe.
  */
-export type ParentMessage = { type: "set-mode"; mode: EditorMode };
+export type ParentMessage =
+  | { type: "set-mode"; mode: EditorMode }
+  | { type: "preview-classname"; classNameId: string; className: string };
 
 /**
  * Message wrapper sent via postMessage from iframe.