@upstart.gg/vite-plugins 0.1.40 → 0.1.42

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

@@ -2,6 +2,8 @@ import { initClickHandler } from "./click-handler.js";
 import { initHoverOverlay, hideOverlays } from "./hover-overlay.js";
 import { initErrorHandler } from "./error-handler.js";
 import { initTextEditor, activateAllEditors, destroyAllActiveEditors } from "./text-editor.js";
+import { initArrayControls, refreshArrayControls, hideArrayControls } from "./array-controls.js";
+import { initFormGuard } from "./form-guard.js";
 import { sendToParent } from "./utils.js";
 import { getCurrentMode, setCurrentMode } from "./state.js";
 import type { EditorMode, UpstartParentMessage } from "./types.js";
@@ -71,19 +73,24 @@ export function initUpstartEditor(): void {
 
     window.addEventListener("message", handleParentMessage);
 
+    // Current path (pathname + search), reported to the parent so it can reload
+    // the iframe on the page being viewed instead of always the home page.
+    const currentPath = () => location.pathname + location.search;
+
     // Notify parent on SPA navigation so it can resend the current editMode
+    // and track the current page for the next reload.
     window.addEventListener("popstate", () => {
-      sendToParent({ type: "editor-navigated" });
+      sendToParent({ type: "editor-navigated", path: currentPath() });
     });
     const originalPushState = history.pushState.bind(history);
     history.pushState = (...args) => {
       originalPushState(...args);
-      sendToParent({ type: "editor-navigated" });
+      sendToParent({ type: "editor-navigated", path: currentPath() });
     };
     const originalReplaceState = history.replaceState.bind(history);
     history.replaceState = (...args) => {
       originalReplaceState(...args);
-      sendToParent({ type: "editor-navigated" });
+      sendToParent({ type: "editor-navigated", path: currentPath() });
     };
 
     // i18next integration: if the app exposes it on window.__i18next (set before hydration),
@@ -97,9 +104,11 @@ export function initUpstartEditor(): void {
     initTextEditor(getRawI18nTemplate ? { getRawI18nTemplate } : {});
     initClickHandler();
     initHoverOverlay();
+    initArrayControls();
+    initFormGuard();
     initErrorHandler();
 
-    sendToParent({ type: "editor-ready" });
+    sendToParent({ type: "editor-ready", path: currentPath() });
   } catch (error) {
     console.error("[Upstart Editor] Initialization failed:", error);
     sendToParent({
@@ -152,6 +161,11 @@ function handleParentMessage(event: MessageEvent): void {
     } else if (styleEl) {
       styleEl.textContent = "";
     }
+  } else if (message.type === "preview-image") {
+    const el = document.querySelector<HTMLImageElement>(`[data-upstart-image-id="${message.imageId}"]`);
+    if (el) {
+      el.src = message.src;
+    }
   } else if (message.type === "request-scroll-position") {
     sendToParent({ type: "scroll-position", x: window.scrollX, y: window.scrollY });
   } else if (message.type === "restore-scroll-position") {
@@ -163,6 +177,7 @@ function enableEditMode(): void {
   console.log("[Upstart Editor] Edit mode enabled");
   document.documentElement.setAttribute("data-upstart-edit-mode", "");
   activateAllEditors();
+  refreshArrayControls();
 }
 
 function disableEditMode(): void {
@@ -170,6 +185,7 @@ function disableEditMode(): void {
   document.documentElement.removeAttribute("data-upstart-edit-mode");
   destroyAllActiveEditors();
   hideOverlays();
+  hideArrayControls();
 }
 
 export { initTextEditor } from "./text-editor.js";

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

@@ -128,7 +128,11 @@ function buildI18nContent(rawTemplate: string, renderedText: string): object {
   return { type: "doc", content: [{ type: "paragraph", content: inlineNodes }] };
 }
 
-const activeEditors = new Map<string, EditorInstance>();
+// Keyed by the host DOM element, NOT by data-upstart-hash: a component rendered
+// multiple times (e.g. a TimelineItem reused 4×) emits the same source-derived
+// hash on every instance, so keying by hash would let only the first instance
+// become editable. The element is the only per-instance unique identity.
+const activeEditors = new Map<HTMLElement, EditorInstance>();
 let i18nSyncInProgress = false;
 const styleCache = new WeakMap<
   HTMLElement,
@@ -185,6 +189,14 @@ function injectEditorStyles(): void {
     "[data-upstart-editor-active] .ProseMirror:focus {",
     "  outline: none !important;",
     "}",
+    // Single-line editors (plain/direct, e.g. array-item pills) render their text
+    // inside a ProseMirror <p>, which would otherwise pick up the browser's default
+    // paragraph margin and change the element's height when edit mode activates.
+    "[data-upstart-editor-active][data-upstart-editable-text-mode='plain'] .ProseMirror p,",
+    "[data-upstart-editor-active][data-upstart-editable-text-mode='direct'] .ProseMirror p {",
+    "  margin: 0 !important;",
+    "  padding: 0 !important;",
+    "}",
   ].join("\n");
   document.head.appendChild(style);
 }
@@ -210,14 +222,14 @@ export function activateAllEditors(): void {
  */
 export function destroyAllActiveEditors(): void {
   stopDomObserver();
-  for (const hash of activeEditors.keys()) {
-    destroyEditor(hash);
+  for (const element of activeEditors.keys()) {
+    destroyEditor(element);
   }
 }
 
 function setupEditableElement(element: HTMLElement, options: Required<UpstartEditorOptions>): void {
   const hash = getEditableHash(element);
-  if (!hash || activeEditors.has(hash)) {
+  if (!hash || activeEditors.has(element)) {
     return;
   }
 
@@ -232,19 +244,19 @@ function activateEditor(element: HTMLElement, hash: string, options: Required<Up
 
   switch (mode) {
     case "direct":
-      editor = createDirectEditor(element, hash, options);
+      editor = createDirectEditor(element, options);
       break;
     case "rich-panel":
-      editor = createRichPanelEditor(element, hash, options);
+      editor = createRichPanelEditor(element, options);
       break;
     case "block-rich":
-      editor = createRichTextEditor(element, hash, options);
+      editor = createRichTextEditor(element, options);
       break;
     case "inline-rich":
-      editor = createInlineRichTextEditor(element, hash, options);
+      editor = createInlineRichTextEditor(element, options);
       break;
     case "plain":
-      editor = createPlainTextEditor(element, hash, options);
+      editor = createPlainTextEditor(element, options);
       break;
   }
 
@@ -252,14 +264,10 @@ function activateEditor(element: HTMLElement, hash: string, options: Required<Up
   element.dataset.upstartEditorActive = "true";
 
   applyActiveStyles(element);
-  activeEditors.set(hash, { editor, element, hash, mode });
+  activeEditors.set(element, { editor, element, hash, mode });
 }
 
-function createPlainTextEditor(
-  element: HTMLElement,
-  hash: string,
-  options: Required<UpstartEditorOptions>,
-): Editor {
+function createPlainTextEditor(element: HTMLElement, options: Required<UpstartEditorOptions>): Editor {
   const renderedText = element.textContent ?? "";
 
   let content: string | object = renderedText;
@@ -320,23 +328,19 @@ function createPlainTextEditor(
     onUpdate: () => {
       if (i18nSyncInProgress) return;
       hasChanged = true;
-      syncI18nSiblings(hash);
+      syncI18nSiblings(element);
     },
     onBlur: ({ editor: e }) => {
       if (!hasChanged) return;
       hasChanged = false;
-      saveText(hash, e.getText());
+      saveText(element, e.getText());
     },
   });
 
   return editor;
 }
 
-function createRichTextEditor(
-  element: HTMLElement,
-  hash: string,
-  options: Required<UpstartEditorOptions>,
-): Editor {
+function createRichTextEditor(element: HTMLElement, options: Required<UpstartEditorOptions>): Editor {
   const content = element.innerHTML;
   element.innerHTML = ""; // Clear the element first!
   let hasChanged = false;
@@ -369,12 +373,12 @@ function createRichTextEditor(
     onUpdate: () => {
       if (i18nSyncInProgress) return;
       hasChanged = true;
-      syncI18nSiblings(hash);
+      syncI18nSiblings(element);
     },
     onBlur: ({ editor: e }) => {
       if (!hasChanged) return;
       hasChanged = false;
-      saveText(hash, e.getHTML());
+      saveText(element, e.getHTML());
     },
   });
 
@@ -385,11 +389,7 @@ function createRichTextEditor(
   return editor;
 }
 
-function createInlineRichTextEditor(
-  element: HTMLElement,
-  hash: string,
-  options: Required<UpstartEditorOptions>,
-): Editor {
+function createInlineRichTextEditor(element: HTMLElement, options: Required<UpstartEditorOptions>): Editor {
   const content = element.innerHTML;
   element.innerHTML = ""; // Clear the element first!
   let hasChanged = false;
@@ -433,12 +433,12 @@ function createInlineRichTextEditor(
     onUpdate: () => {
       if (i18nSyncInProgress) return;
       hasChanged = true;
-      syncI18nSiblings(hash);
+      syncI18nSiblings(element);
     },
     onBlur: ({ editor: e }) => {
       if (!hasChanged) return;
       hasChanged = false;
-      saveText(hash, e.getHTML());
+      saveText(element, e.getHTML());
     },
   });
 
@@ -449,11 +449,7 @@ function createInlineRichTextEditor(
   return editor;
 }
 
-function createDirectEditor(
-  element: HTMLElement,
-  hash: string,
-  options: Required<UpstartEditorOptions>,
-): Editor {
+function createDirectEditor(element: HTMLElement, options: Required<UpstartEditorOptions>): Editor {
   const content = element.innerHTML;
   element.innerHTML = "";
   let hasChanged = false;
@@ -489,7 +485,7 @@ function createDirectEditor(
       if (!hasChanged) return;
       hasChanged = false;
       // Strip the outer <p> that TipTap adds when using default document schema
-      saveText(hash, e.getHTML().replace(/^<p>([\s\S]*)<\/p>$/, "$1"));
+      saveText(element, e.getHTML().replace(/^<p>([\s\S]*)<\/p>$/, "$1"));
     },
   });
 
@@ -500,11 +496,7 @@ function createDirectEditor(
   return editor;
 }
 
-function createRichPanelEditor(
-  element: HTMLElement,
-  hash: string,
-  options: Required<UpstartEditorOptions>,
-): Editor {
+function createRichPanelEditor(element: HTMLElement, options: Required<UpstartEditorOptions>): Editor {
   const content = element.innerHTML;
   element.innerHTML = "";
   let hasChanged = false;
@@ -527,7 +519,7 @@ function createRichPanelEditor(
     onBlur: ({ editor: e }) => {
       if (!hasChanged) return;
       hasChanged = false;
-      saveText(hash, e.getHTML());
+      saveText(element, e.getHTML());
     },
   });
 
@@ -567,11 +559,11 @@ function getEditorMode(element: HTMLElement, options: Required<UpstartEditorOpti
   return "block-rich";
 }
 
-function syncI18nSiblings(sourceHash: string): void {
-  console.log("[Upstart Editor] Syncing i18n siblings for", sourceHash);
-  const instance = activeEditors.get(sourceHash);
+function syncI18nSiblings(sourceElement: HTMLElement): void {
+  const instance = activeEditors.get(sourceElement);
+  console.log("[Upstart Editor] Syncing i18n siblings for", instance?.hash);
   if (!instance) {
-    console.warn("[Upstart Editor] No editor instance found for hash:", sourceHash);
+    console.warn("[Upstart Editor] No editor instance found for element:", sourceElement);
     return;
   }
 
@@ -593,12 +585,11 @@ function syncI18nSiblings(sourceHash: string): void {
     for (const sibling of siblings) {
       if (sibling === instance.element) continue;
 
-      const siblingHash = sibling.dataset.upstartHash;
-      const siblingInstance = siblingHash ? activeEditors.get(siblingHash) : null;
+      const siblingInstance = activeEditors.get(sibling);
 
       if (siblingInstance) {
         console.log(
-          `[Upstart Editor] Updating sibling editor (hash: ${siblingHash}) with new content`,
+          `[Upstart Editor] Updating sibling editor (hash: ${siblingInstance.hash}) with new content`,
           siblingInstance,
         );
         sibling.innerText = plainContent;
@@ -612,9 +603,9 @@ function syncI18nSiblings(sourceHash: string): void {
   }
 }
 
-function saveText(hash: string, newText: string): void {
+function saveText(element: HTMLElement, newText: string): void {
   try {
-    const instance = activeEditors.get(hash);
+    const instance = activeEditors.get(element);
     const dataset = instance?.element.dataset ?? {};
 
     // direct/rich-panel always go via editTextDirect; plain goes via editTextDirect when a
@@ -638,7 +629,7 @@ function saveText(hash: string, newText: string): void {
       });
     }
 
-    console.log("[Upstart Editor] Text save message sent:", hash);
+    console.log("[Upstart Editor] Text save message sent:", instance?.hash);
   } catch (error) {
     console.error("[Upstart Editor] Failed to send save message:", error);
     sendToParent({
@@ -648,8 +639,8 @@ function saveText(hash: string, newText: string): void {
   }
 }
 
-function destroyEditor(hash: string): void {
-  const instance = activeEditors.get(hash);
+function destroyEditor(element: HTMLElement): void {
+  const instance = activeEditors.get(element);
   if (!instance) {
     return;
   }
@@ -674,7 +665,7 @@ function destroyEditor(hash: string): void {
   }
 
   restoreStyles(instance.element);
-  activeEditors.delete(hash);
+  activeEditors.delete(element);
 }
 
 // ---------------------------------------------------------------------------
@@ -749,10 +740,10 @@ function scheduleReactivation(): void {
  * (e.g. React replaced the subtree during a re-render).
  */
 function cleanupOrphanedEditors(): void {
-  for (const [hash, instance] of activeEditors) {
+  for (const [element, instance] of activeEditors) {
     if (!document.contains(instance.element)) {
       instance.editor.destroy();
-      activeEditors.delete(hash);
+      activeEditors.delete(element);
     }
   }
 }

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

@@ -1,5 +1,11 @@
 import type { Editor } from "@tiptap/core";
-import type { PayloadEditText, PayloadEditTextDirect } from "~/upstart-editor-api";
+import type {
+  PayloadEditText,
+  PayloadEditTextDirect,
+  PayloadArrayItemAdd,
+  PayloadArrayItemDelete,
+  PayloadArraySet,
+} from "~/upstart-editor-api";
 
 /**
  * Editor mode
@@ -38,13 +44,31 @@ export interface EditorInstance {
   mode: TextEditorMode;
 }
 
+/**
+ * A swappable image surfaced to the inspector. `id` maps to a registry entry of
+ * type "image"; `src` is the currently rendered URL (for the thumbnail).
+ */
+export interface EditableImageRef {
+  id: string;
+  src: string;
+  alt?: string;
+}
+
 /**
  * Messages sent from iframe to parent editor.
  */
 export type EditorMessage =
-  | { type: "text-edit"; payload: PayloadEditText | PayloadEditTextDirect }
-  | { type: "editor-ready" }
-  | { type: "editor-navigated" }
+  | {
+      type: "text-edit";
+      payload:
+        | PayloadEditText
+        | PayloadEditTextDirect
+        | PayloadArrayItemAdd
+        | PayloadArrayItemDelete
+        | PayloadArraySet;
+    }
+  | { type: "editor-ready"; path?: string }
+  | { type: "editor-navigated"; path?: string }
   | { type: "scroll-position"; x: number; y: number }
   | { type: "editor-error"; error: string }
   | {
@@ -59,6 +83,8 @@ export type EditorMessage =
       themeColors?: Record<string, string>;
       bounds: ElementBounds;
       viewportWidth?: number;
+      /** Editable images found in the clicked element's nearest subtree. */
+      images?: EditableImageRef[];
     };
 
 /**
@@ -67,6 +93,7 @@ export type EditorMessage =
 export type ParentMessage =
   | { type: "set-mode"; mode: EditorMode }
   | { type: "preview-classname"; classNameId: string; className: string; previewCSS?: string }
+  | { type: "preview-image"; imageId: string; src: string }
   | { type: "request-scroll-position" }
   | { type: "restore-scroll-position"; x: number; y: number };