@upstart.gg/vite-plugins 0.0.139

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

@@ -0,0 +1,401 @@
+import { Editor } from "@tiptap/core";
+import type { Extension } from "@tiptap/core";
+import { BubbleMenu } from "@tiptap/extension-bubble-menu";
+import Placeholder from "@tiptap/extension-placeholder";
+import StarterKit from "@tiptap/starter-kit";
+import { getCurrentMode } from "./index.js";
+import { sendToParent } from "./utils.js";
+import type { EditorInstance, UpstartEditorOptions } from "./types.js";
+
+const DEFAULT_OPTIONS: Required<UpstartEditorOptions> = {
+  richTextElements: ["p", "div", "article", "section"],
+  plainTextElements: ["button", "a", "span", "h1", "h2", "h3", "h4", "h5", "h6", "label"],
+  bubbleMenu: true,
+  placeholder: "Start typing...",
+  autoSaveDelay: 1000,
+};
+
+const activeEditors = new Map<string, EditorInstance>();
+const saveTimeouts = new Map<string, number>();
+const styleCache = new WeakMap<
+  HTMLElement,
+  { outline: string; outlineOffset: string; cursor: string; transition: string }
+>();
+let isInitialized = false;
+let shortcutsRegistered = false;
+
+/**
+ * Initialize TipTap text editing for elements marked as editable.
+ */
+export function initTextEditor(options: UpstartEditorOptions = {}): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  if (isInitialized) {
+    return;
+  }
+
+  try {
+    const resolvedOptions = { ...DEFAULT_OPTIONS, ...options };
+    const editables = document.querySelectorAll<HTMLElement>('[data-upstart-editable-text="true"]');
+
+    editables.forEach((element) => setupEditableElement(element, resolvedOptions));
+
+    registerKeyboardShortcuts();
+    isInitialized = true;
+
+    console.log("[Upstart Editor] Text editor initialized");
+  } catch (error) {
+    console.error("[Upstart Editor] Failed to initialize text editor:", error);
+    sendToParent({
+      type: "editor-error",
+      error: error instanceof Error ? error.message : "Unknown error",
+    });
+  }
+}
+
+/**
+ * Destroy all active editors.
+ */
+export function destroyAllActiveEditors(): void {
+  for (const hash of activeEditors.keys()) {
+    destroyEditor(hash);
+  }
+}
+
+function setupEditableElement(element: HTMLElement, options: Required<UpstartEditorOptions>): void {
+  const hash = getEditableHash(element);
+  if (!hash) {
+    return;
+  }
+
+  cacheStyles(element);
+  element.style.transition = "outline 0.15s ease";
+
+  element.addEventListener("dblclick", (event) => {
+    if (getCurrentMode() !== "edit") {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (activeEditors.has(hash)) {
+      return;
+    }
+
+    activateEditor(element, hash, options);
+  });
+
+  element.addEventListener("mouseenter", () => {
+    if (getCurrentMode() !== "edit") {
+      return;
+    }
+
+    if (!activeEditors.has(hash)) {
+      applyHoverStyles(element);
+    }
+  });
+
+  element.addEventListener("mouseleave", () => {
+    if (!activeEditors.has(hash)) {
+      restoreStyles(element);
+    }
+  });
+}
+
+function activateEditor(element: HTMLElement, hash: string, options: Required<UpstartEditorOptions>): void {
+  const isRichText = shouldUseRichText(element, options);
+  const editor = isRichText
+    ? createRichTextEditor(element, hash, options)
+    : createPlainTextEditor(element, hash, options);
+
+  applyActiveStyles(element);
+  activeEditors.set(hash, { editor, element, hash });
+}
+
+function createPlainTextEditor(
+  element: HTMLElement,
+  hash: string,
+  options: Required<UpstartEditorOptions>,
+): Editor {
+  return new Editor({
+    element,
+    extensions: [
+      StarterKit.configure({
+        heading: false,
+        bold: false,
+        italic: false,
+        strike: false,
+        blockquote: false,
+        bulletList: false,
+        orderedList: false,
+        listItem: false,
+        codeBlock: false,
+        horizontalRule: false,
+      }),
+      Placeholder.configure({
+        placeholder: "Click to edit...",
+      }),
+    ],
+    content: element.textContent ?? "",
+    editorProps: {
+      attributes: {
+        class: "upstart-editor-active",
+        style: "outline: 2px solid #3b82f6; outline-offset: 2px;",
+      },
+    },
+    onUpdate: ({ editor }) => {
+      debouncedSave(hash, editor.getText(), options.autoSaveDelay);
+    },
+    onBlur: ({ editor }) => {
+      saveText(hash, editor.getText());
+      destroyEditor(hash);
+    },
+    onCreate: ({ editor }) => {
+      editor.commands.focus("end");
+    },
+  });
+}
+
+function createRichTextEditor(
+  element: HTMLElement,
+  hash: string,
+  options: Required<UpstartEditorOptions>,
+): Editor {
+  const bubbleMenuElement = createBubbleMenuElement();
+  const extensions: Extension[] = [
+    StarterKit,
+    Placeholder.configure({
+      placeholder: options.placeholder,
+    }),
+  ];
+
+  if (options.bubbleMenu) {
+    extensions.push(
+      BubbleMenu.configure({
+        element: bubbleMenuElement,
+      }),
+    );
+  }
+
+  const editor = new Editor({
+    element,
+    extensions,
+    content: element.innerHTML,
+    editorProps: {
+      attributes: {
+        class: "upstart-editor-active",
+        style: "outline: 2px solid #3b82f6; outline-offset: 2px;",
+      },
+    },
+    onUpdate: ({ editor: updatedEditor }) => {
+      debouncedSave(hash, updatedEditor.getHTML(), options.autoSaveDelay);
+    },
+    onBlur: ({ editor: updatedEditor }) => {
+      saveText(hash, updatedEditor.getHTML());
+      destroyEditor(hash);
+    },
+    onCreate: ({ editor: createdEditor }) => {
+      if (options.bubbleMenu) {
+        wireBubbleMenu(bubbleMenuElement, createdEditor);
+      }
+      createdEditor.commands.focus("end");
+    },
+  });
+
+  return editor;
+}
+
+function shouldUseRichText(element: HTMLElement, options: Required<UpstartEditorOptions>): boolean {
+  const tagName = element.tagName.toLowerCase();
+
+  if (options.plainTextElements.includes(tagName)) {
+    return false;
+  }
+
+  if (options.richTextElements.includes(tagName)) {
+    return true;
+  }
+
+  return true;
+}
+
+function debouncedSave(hash: string, content: string, delay: number): void {
+  const existingTimeout = saveTimeouts.get(hash);
+  if (existingTimeout) {
+    clearTimeout(existingTimeout);
+  }
+
+  const timeoutId = window.setTimeout(() => {
+    sendToParent({
+      type: "text-update",
+      hash,
+      newText: content,
+    });
+  }, delay);
+
+  saveTimeouts.set(hash, timeoutId);
+}
+
+function saveText(hash: string, newText: string): void {
+  try {
+    sendToParent({
+      type: "text-save",
+      hash,
+      newText,
+    });
+
+    console.log("[Upstart Editor] Text save message sent:", hash);
+  } catch (error) {
+    console.error("[Upstart Editor] Failed to send save message:", error);
+    sendToParent({
+      type: "editor-error",
+      error: error instanceof Error ? error.message : "Unknown error",
+    });
+  }
+}
+
+function destroyEditor(hash: string): void {
+  const instance = activeEditors.get(hash);
+  if (!instance) {
+    return;
+  }
+
+  instance.editor.destroy();
+  restoreStyles(instance.element);
+  activeEditors.delete(hash);
+
+  const existingTimeout = saveTimeouts.get(hash);
+  if (existingTimeout) {
+    clearTimeout(existingTimeout);
+    saveTimeouts.delete(hash);
+  }
+}
+
+function registerKeyboardShortcuts(): void {
+  if (shortcutsRegistered) {
+    return;
+  }
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      blurAllEditors();
+    }
+
+    if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+      blurAllEditors();
+    }
+  });
+
+  shortcutsRegistered = true;
+}
+
+function blurAllEditors(): void {
+  activeEditors.forEach((instance) => {
+    instance.editor.commands.blur();
+  });
+}
+
+function getEditableHash(element: HTMLElement): string | null {
+  return element.dataset.upstartHash ?? null;
+}
+
+function cacheStyles(element: HTMLElement): void {
+  if (styleCache.has(element)) {
+    return;
+  }
+
+  styleCache.set(element, {
+    outline: element.style.outline || "",
+    outlineOffset: element.style.outlineOffset || "",
+    cursor: element.style.cursor || "",
+    transition: element.style.transition || "",
+  });
+}
+
+function applyHoverStyles(element: HTMLElement): void {
+  cacheStyles(element);
+  element.style.outline = "1px dashed #3b82f6";
+  element.style.outlineOffset = "2px";
+  element.style.cursor = "text";
+}
+
+function applyActiveStyles(element: HTMLElement): void {
+  cacheStyles(element);
+  element.style.outline = "2px solid #3b82f6";
+  element.style.outlineOffset = "2px";
+  element.style.cursor = "text";
+}
+
+function restoreStyles(element: HTMLElement): void {
+  const cached = styleCache.get(element);
+  if (!cached) {
+    element.style.outline = "";
+    element.style.outlineOffset = "";
+    element.style.cursor = "";
+    element.style.transition = "";
+    return;
+  }
+
+  element.style.outline = cached.outline;
+  element.style.outlineOffset = cached.outlineOffset;
+  element.style.cursor = cached.cursor;
+  element.style.transition = cached.transition;
+}
+
+function createBubbleMenuElement(): HTMLDivElement {
+  const menu = document.createElement("div");
+  menu.className = "upstart-editor-bubble-menu";
+  menu.style.cssText =
+    "display: flex; gap: 6px; padding: 6px 8px; background: #111827; color: #ffffff; " +
+    "border-radius: 6px; font-size: 12px; box-shadow: 0 6px 16px rgba(0,0,0,0.2);";
+
+  const buttons = [
+    { label: "B", command: "bold" },
+    { label: "I", command: "italic" },
+    { label: "S", command: "strike" },
+  ];
+
+  for (const { label, command } of buttons) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = label;
+    button.dataset.command = command;
+    button.style.cssText =
+      "background: transparent; border: none; color: inherit; cursor: pointer; font-weight: 600;";
+    menu.appendChild(button);
+  }
+
+  return menu;
+}
+
+function wireBubbleMenu(menu: HTMLDivElement, editor: Editor): void {
+  menu.addEventListener("mousedown", (event) => {
+    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();
+
+    if (command === "bold") {
+      chain.toggleBold().run();
+    }
+
+    if (command === "italic") {
+      chain.toggleItalic().run();
+    }
+
+    if (command === "strike") {
+      chain.toggleStrike().run();
+    }
+  });
+}

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

@@ -0,0 +1,120 @@
+import type { Editor } from "@tiptap/core";
+
+/**
+ * Editor mode
+ */
+export type EditorMode = "preview" | "edit";
+
+/**
+ * Element bounds used for UI positioning.
+ */
+export interface ElementBounds {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+  right: number;
+  bottom: number;
+}
+
+/**
+ * Represents an active editor instance.
+ */
+export interface EditorInstance {
+  editor: Editor;
+  element: HTMLElement;
+  hash: string;
+}
+
+/**
+ * Messages sent from iframe to parent editor.
+ */
+export type EditorMessage =
+  | { type: "text-update"; hash: string; newText: string }
+  | { type: "text-save"; hash: string; newText: string }
+  | { type: "editor-ready" }
+  | { type: "editor-error"; error: string }
+  | { type: "element-hovered"; hash: string; bounds: ElementBounds }
+  | {
+      type: "element-clicked";
+      hash: string;
+      componentName: string;
+      filePath: string;
+      currentClassName: string;
+      bounds: ElementBounds;
+    };
+
+/**
+ * Messages sent from parent to iframe.
+ */
+export type ParentMessage = { type: "set-mode"; mode: EditorMode };
+
+/**
+ * Message wrapper sent via postMessage from iframe.
+ */
+export interface UpstartEditorMessage {
+  source: "upstart-editor";
+  type: EditorMessage["type"];
+  [key: string]: any;
+}
+
+/**
+ * Message wrapper sent via postMessage from parent.
+ */
+export interface UpstartParentMessage {
+  source: "upstart-editor-parent";
+  type: ParentMessage["type"];
+  [key: string]: any;
+}
+
+/**
+ * Configuration options for the Upstart Editor runtime.
+ */
+export interface UpstartEditorOptions {
+  /**
+   * Elements that should use rich text editing (with formatting).
+   * @default ['p', 'div', 'article', 'section']
+   */
+  richTextElements?: string[];
+
+  /**
+   * Elements that should use plain text editing (no formatting).
+   * @default ['button', 'a', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'label']
+   */
+  plainTextElements?: string[];
+
+  /**
+   * Enable bubble menu for text selection.
+   * @default true
+   */
+  bubbleMenu?: boolean;
+
+  /**
+   * Placeholder text for empty editors.
+   * @default 'Start typing...'
+   */
+  placeholder?: string;
+
+  /**
+   * Auto-save delay in milliseconds.
+   * @default 1000
+   */
+  autoSaveDelay?: number;
+}
+
+/**
+ * Build-time plugin options.
+ */
+export interface UpstartEditorPluginOptions {
+  /**
+   * Enable or disable the editor.
+   * @default false
+   */
+  enabled?: boolean;
+
+  /**
+   * Automatically inject editor initialization code.
+   * @default true
+   */
+  autoInject?: boolean;
+}

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

@@ -0,0 +1,34 @@
+import type { EditorMessage } from "./types";
+
+/**
+ * Send a message to the parent window.
+ */
+export function sendToParent(message: EditorMessage): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  if (window.parent === window) {
+    console.warn("[Upstart Editor] Not running in iframe, cannot send message:", message);
+    return;
+  }
+
+  window.parent.postMessage(
+    {
+      source: "upstart-editor",
+      ...message,
+    },
+    "*",
+  );
+}
+
+/**
+ * Check if running inside an iframe.
+ */
+export function isInIframe(): boolean {
+  if (typeof window === "undefined") {
+    return false;
+  }
+
+  return window.parent !== window;
+}