@upstart.gg/vite-plugins 0.1.29 → 0.1.31

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

@@ -16,6 +16,47 @@ const InlineDocument = Node.create({
   content: "inline*",
 });
 
+/**
+ * An atomic inline node that represents an i18n template variable like {{year}}.
+ * It is displayed as a grayed non-editable chip showing the resolved value.
+ * renderText() returns {{varName}} so getText() serialises back to the raw template.
+ */
+const TemplateVariable = Node.create({
+  name: "templateVariable",
+  group: "inline",
+  inline: true,
+  atom: true,
+
+  addAttributes() {
+    return {
+      varName: { default: "" },
+      value: { default: "" },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: "span[data-tpl-var]" }];
+  },
+
+  renderHTML({ node }) {
+    return [
+      "span",
+      {
+        "data-tpl-var": node.attrs.varName,
+        contenteditable: "false",
+        style:
+          "opacity:0.5;background:rgba(0,0,0,0.08);border-radius:3px;padding:0 3px;" +
+          "font-family:monospace;font-size:0.875em;cursor:default;user-select:none;",
+      },
+      node.attrs.value || `{{${node.attrs.varName}}}`,
+    ];
+  },
+
+  renderText({ node }) {
+    return `{{${node.attrs.varName}}}`;
+  },
+});
+
 /**
  * Remaps Enter to insert a <br> (hard break) instead of creating a new paragraph.
  * Used in inline-rich mode where block nodes are not allowed.
@@ -36,8 +77,57 @@ const DEFAULT_OPTIONS: Required<UpstartEditorOptions> = {
   bubbleMenu: true,
   placeholder: "Start typing...",
   autoSaveDelay: 1000,
+  getRawI18nTemplate: () => undefined,
 };
 
+/**
+ * Parse a raw i18n template (e.g. "Copyright {{year}}") together with the
+ * already-rendered text (e.g. "Copyright 2026") and produce a TipTap JSON
+ * document where variable tokens become TemplateVariable nodes.
+ */
+function buildI18nContent(rawTemplate: string, renderedText: string): object {
+  const VAR_RE = /\{\{(\w+)\}\}/g;
+  type Segment = { type: "text"; text: string } | { type: "var"; varName: string };
+  const segments: Segment[] = [];
+
+  let lastIndex = 0;
+  let m: RegExpExecArray | null;
+  while ((m = VAR_RE.exec(rawTemplate)) !== null) {
+    if (m.index > lastIndex) segments.push({ type: "text", text: rawTemplate.slice(lastIndex, m.index) });
+    segments.push({ type: "var", varName: m[1] });
+    lastIndex = m.index + m[0].length;
+  }
+  if (lastIndex < rawTemplate.length) segments.push({ type: "text", text: rawTemplate.slice(lastIndex) });
+
+  // Build a regex over the rendered text to capture variable values
+  const escRe = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const regexParts = segments.map((s) => (s.type === "text" ? escRe(s.text) : "(.+?)"));
+  const fullRegex = new RegExp("^" + regexParts.join("") + "$");
+  const varSegments = segments.filter((s): s is Extract<Segment, { type: "var" }> => s.type === "var");
+
+  const varValues: Record<string, string> = {};
+  const match = renderedText.match(fullRegex);
+  if (match) {
+    varSegments.forEach((seg, i) => {
+      varValues[seg.varName] = match[i + 1] ?? `{{${seg.varName}}}`;
+    });
+  } else {
+    varSegments.forEach((seg) => {
+      varValues[seg.varName] = `{{${seg.varName}}}`;
+    });
+  }
+
+  const inlineNodes = segments
+    .map((s) =>
+      s.type === "text"
+        ? { type: "text", text: s.text }
+        : { type: "templateVariable", attrs: { varName: s.varName, value: varValues[s.varName] } },
+    )
+    .filter((n) => n.type !== "text" || (n as any).text !== "");
+
+  return { type: "doc", content: [{ type: "paragraph", content: inlineNodes }] };
+}
+
 const activeEditors = new Map<string, EditorInstance>();
 let i18nSyncInProgress = false;
 const styleCache = new WeakMap<
@@ -103,18 +193,16 @@ function injectEditorStyles(): void {
  * Activate editors on all editable elements. Safe to call multiple times.
  */
 export function activateAllEditors(): void {
-  try {
-    cleanupOrphanedEditors();
-    const editables = document.querySelectorAll<HTMLElement>('[data-upstart-editable-text="true"]');
-    editables.forEach((element) => setupEditableElement(element, resolvedOptions));
-    console.log("[Upstart Editor] Text editors activated");
-  } catch (error) {
-    console.error("[Upstart Editor] Failed to activate text editors:", error);
-    sendToParent({
-      type: "editor-error",
-      error: error instanceof Error ? error.message : "Unknown error",
-    });
-  }
+  cleanupOrphanedEditors();
+  const editables = document.querySelectorAll<HTMLElement>('[data-upstart-editable-text="true"]');
+  editables.forEach((element) => {
+    try {
+      setupEditableElement(element, resolvedOptions);
+    } catch (error) {
+      console.error("[Upstart Editor] Failed to activate element:", element.dataset.upstartHash, error);
+    }
+  });
+  console.log("[Upstart Editor] Text editors activated");
 }
 
 /**
@@ -141,7 +229,14 @@ function activateEditor(element: HTMLElement, hash: string, options: Required<Up
   const mode = getEditorMode(element, options);
 
   let editor: Editor;
+
   switch (mode) {
+    case "direct":
+      editor = createDirectEditor(element, hash, options);
+      break;
+    case "rich-panel":
+      editor = createRichPanelEditor(element, hash, options);
+      break;
     case "block-rich":
       editor = createRichTextEditor(element, hash, options);
       break;
@@ -153,8 +248,6 @@ function activateEditor(element: HTMLElement, hash: string, options: Required<Up
       break;
   }
 
-  // Restore text rendering on ProseMirror (overrides inherited font-size: 0 etc.)
-
   // Mark element — triggers CSS rules that hide original content
   element.dataset.upstartEditorActive = "true";
 
@@ -167,16 +260,42 @@ function createPlainTextEditor(
   hash: string,
   options: Required<UpstartEditorOptions>,
 ): Editor {
-  const content = element.textContent ?? "";
-  element.textContent = ""; // Clear the element first! (same as rich text editors)
+  const renderedText = element.textContent ?? "";
+
+  let content: string | object = renderedText;
+  const extraExtensions: ReturnType<typeof Node.create>[] = [];
+
+  // Mixed-text: JSXText + expression chips (e.g. © {year} Some text)
+  const mixedTemplate = element.dataset.upstartMixedTemplate;
+  if (mixedTemplate) {
+    content = buildI18nContent(mixedTemplate, renderedText);
+    extraExtensions.push(TemplateVariable);
+  } else {
+    // Check for i18n template variables (e.g. data-i18n-values="year,month")
+    const i18nValueKeys = element.dataset.i18nValues?.split(",").filter(Boolean) ?? [];
+    if (i18nValueKeys.length > 0) {
+      const i18nAttr = element.dataset.upstartI18n;
+      if (i18nAttr) {
+        const colonIdx = i18nAttr.indexOf(":");
+        const namespace = colonIdx >= 0 ? i18nAttr.slice(0, colonIdx) : "translation";
+        const key = colonIdx >= 0 ? i18nAttr.slice(colonIdx + 1) : i18nAttr;
+        const rawTemplate = options.getRawI18nTemplate(namespace, key);
+        if (rawTemplate) {
+          content = buildI18nContent(rawTemplate, renderedText);
+          extraExtensions.push(TemplateVariable);
+        }
+      }
+    }
+  }
+
+  element.textContent = "";
   let hasChanged = false;
 
   const editor = new Editor({
     element,
     extensions: [
-      InlineDocument,
+      ...extraExtensions,
       StarterKit.configure({
-        document: false,
         heading: false,
         bold: false,
         italic: false,
@@ -198,11 +317,9 @@ function createPlainTextEditor(
         class: "upstart-editor-active",
       },
     },
-    onUpdate: ({ editor: e }) => {
+    onUpdate: () => {
       if (i18nSyncInProgress) return;
       hasChanged = true;
-      // const content = e.getText();
-      // debouncedSave(hash, content, options.autoSaveDelay);
       syncI18nSiblings(hash);
     },
     onBlur: ({ editor: e }) => {
@@ -249,11 +366,9 @@ function createRichTextEditor(
         class: "upstart-editor-active",
       },
     },
-    onUpdate: ({ editor: e }) => {
+    onUpdate: () => {
       if (i18nSyncInProgress) return;
       hasChanged = true;
-      // const content = e.getHTML();
-      // debouncedSave(hash, content, options.autoSaveDelay);
       syncI18nSiblings(hash);
     },
     onBlur: ({ editor: e }) => {
@@ -315,11 +430,9 @@ function createInlineRichTextEditor(
         class: "upstart-editor-active",
       },
     },
-    onUpdate: ({ editor: e }) => {
+    onUpdate: () => {
       if (i18nSyncInProgress) return;
       hasChanged = true;
-      // const content = e.getHTML();
-      // debouncedSave(hash, content, options.autoSaveDelay);
       syncI18nSiblings(hash);
     },
     onBlur: ({ editor: e }) => {
@@ -336,9 +449,104 @@ function createInlineRichTextEditor(
   return editor;
 }
 
+function createDirectEditor(
+  element: HTMLElement,
+  hash: string,
+  options: Required<UpstartEditorOptions>,
+): Editor {
+  const content = element.innerHTML;
+  element.innerHTML = "";
+  let hasChanged = false;
+
+  const bubbleMenuElement = createBubbleMenuElement("inline");
+  const extensions: (Extension | ReturnType<typeof Node.create>)[] = [
+    EnterHardBreak,
+    StarterKit.configure({
+      heading: false,
+      blockquote: false,
+      bulletList: false,
+      orderedList: false,
+      listItem: false,
+      codeBlock: false,
+      horizontalRule: false,
+    }),
+    Placeholder.configure({ placeholder: "Click to edit..." }),
+  ];
+
+  if (options.bubbleMenu) {
+    extensions.push(BubbleMenu.configure({ element: bubbleMenuElement }));
+  }
+
+  const editor = new Editor({
+    element,
+    extensions,
+    content,
+    editorProps: { attributes: { class: "upstart-editor-active" } },
+    onUpdate: () => {
+      hasChanged = true;
+    },
+    onBlur: ({ editor: e }) => {
+      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"));
+    },
+  });
+
+  if (options.bubbleMenu) {
+    wireBubbleMenu(bubbleMenuElement, editor);
+  }
+
+  return editor;
+}
+
+function createRichPanelEditor(
+  element: HTMLElement,
+  hash: string,
+  options: Required<UpstartEditorOptions>,
+): Editor {
+  const content = element.innerHTML;
+  element.innerHTML = "";
+  let hasChanged = false;
+
+  const bubbleMenuElement = createBubbleMenuElement("inline");
+  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,
+    editorProps: { attributes: { class: "upstart-editor-active" } },
+    onUpdate: () => {
+      hasChanged = true;
+    },
+    onBlur: ({ editor: e }) => {
+      if (!hasChanged) return;
+      hasChanged = false;
+      saveText(hash, e.getHTML());
+    },
+  });
+
+  if (options.bubbleMenu) {
+    wireBubbleMenu(bubbleMenuElement, editor);
+  }
+
+  return editor;
+}
+
 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") {
+  if (
+    modeOverride === "plain" ||
+    modeOverride === "inline-rich" ||
+    modeOverride === "block-rich" ||
+    modeOverride === "direct" ||
+    modeOverride === "rich-panel"
+  ) {
     return modeOverride;
   }
 
@@ -408,17 +616,27 @@ function saveText(hash: string, newText: string): void {
   try {
     const instance = activeEditors.get(hash);
     const dataset = instance?.element.dataset ?? {};
-    const [namespace, key] = dataset.upstartI18n?.split(":") ?? [];
-    sendToParent({
-      type: "text-edit",
-      payload: {
-        action: "editText",
-        content: newText,
-        namespace,
-        key,
-        language: document.documentElement.lang,
-      },
-    });
+
+    // direct/rich-panel always go via editTextDirect; plain goes via editTextDirect when a
+    // registry id is present (mixed-text), and via editText (i18n) otherwise.
+    if (instance?.mode === "direct" || instance?.mode === "rich-panel" || dataset.upstartId) {
+      sendToParent({
+        type: "text-edit",
+        payload: { action: "editTextDirect", id: dataset.upstartId!, content: newText },
+      });
+    } else {
+      const [namespace, key] = dataset.upstartI18n?.split(":") ?? [];
+      sendToParent({
+        type: "text-edit",
+        payload: {
+          action: "editText",
+          content: newText,
+          namespace,
+          key,
+          language: document.documentElement.lang,
+        },
+      });
+    }
 
     console.log("[Upstart Editor] Text save message sent:", hash);
   } catch (error) {
@@ -436,7 +654,8 @@ function destroyEditor(hash: string): void {
     return;
   }
 
-  const finalContent = instance.mode === "plain" ? instance.editor.getText() : instance.editor.getHTML();
+  const isPlainMode = instance.mode === "plain";
+  const finalContent = isPlainMode ? instance.editor.getText() : instance.editor.getHTML();
 
   instance.editor.destroy();
 
@@ -448,7 +667,7 @@ function destroyEditor(hash: string): void {
   delete instance.element.dataset.upstartEditorActive;
 
   // Update element content with the final edited text
-  if (instance.mode === "plain") {
+  if (isPlainMode) {
     instance.element.textContent = finalContent;
   } else {
     instance.element.innerHTML = finalContent;

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

@@ -1,5 +1,5 @@
 import type { Editor } from "@tiptap/core";
-import type { PayloadEditText } from "~/upstart-editor-api";
+import type { PayloadEditText, PayloadEditTextDirect } from "~/upstart-editor-api";
 
 /**
  * Editor mode
@@ -8,8 +8,13 @@ export type EditorMode = "preview" | "edit";
 
 /**
  * Text editor mode: determines schema constraints and bubble menu options.
+ * - block-rich: inline TipTap rich text (block-level elements: p, div, article…)
+ * - inline-rich: inline TipTap rich text constrained to inline nodes (spans, headings…)
+ * - plain: inline TipTap plain text, no formatting
+ * - direct: inline TipTap plain text, saved directly into the TSX source
+ * - rich-panel: inline TipTap rich text with bubble menu (block-level, like block-rich)
  */
-export type TextEditorMode = "block-rich" | "inline-rich" | "plain";
+export type TextEditorMode = "block-rich" | "inline-rich" | "plain" | "direct" | "rich-panel";
 
 /**
  * Element bounds used for UI positioning.
@@ -37,7 +42,7 @@ export interface EditorInstance {
  * Messages sent from iframe to parent editor.
  */
 export type EditorMessage =
-  | { type: "text-edit"; payload: PayloadEditText }
+  | { type: "text-edit"; payload: PayloadEditText | PayloadEditTextDirect }
   | { type: "editor-ready" }
   | { type: "editor-navigated" }
   | { type: "scroll-position"; x: number; y: number }
@@ -53,6 +58,7 @@ export type EditorMessage =
       recordId?: string;
       themeColors?: Record<string, string>;
       bounds: ElementBounds;
+      viewportWidth?: number;
     };
 
 /**
@@ -60,7 +66,7 @@ export type EditorMessage =
  */
 export type ParentMessage =
   | { type: "set-mode"; mode: EditorMode }
-  | { type: "preview-classname"; classNameId: string; className: string }
+  | { type: "preview-classname"; classNameId: string; className: string; previewCSS?: string }
   | { type: "request-scroll-position" }
   | { type: "restore-scroll-position"; x: number; y: number };
 
@@ -122,6 +128,13 @@ export interface UpstartEditorOptions {
    * @default 1000
    */
   autoSaveDelay?: number;
+
+  /**
+   * Callback to retrieve the raw (un-interpolated) i18n template string for a given
+   * namespace + key, e.g. "Copyright {{year}}". Used to render template variables as
+   * non-editable atoms inside i18n text editors.
+   */
+  getRawI18nTemplate?: (namespace: string, key: string) => string | undefined;
 }
 
 /**

package/src/vite-plugin-upstart-theme.ts

@@ -77,7 +77,10 @@ function generateFontsCSS(
   const families = Array.from(allFonts.values()).map((font) => {
     const name = font.family.replace(/ /g, "+");
     if (font.weights && font.weights.length > 1 && font.weights[0] !== font.weights.at(-1)) {
-      return `family=${name}:wght@${font.weights[0]}..${font.weights.at(-1)}`;
+      // Take min weight and max weight
+      const minWeight = Math.min(...font.weights);
+      const maxWeight = Math.max(...font.weights);
+      return `family=${name}:wght@${minWeight}..${maxWeight}`;
     }
     return `family=${name}`;
   });

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

@@ -1 +0,0 @@
-{"version":3,"file":"state.d.ts","names":[],"sources":["../../../../src/vite-plugin-upstart-editor/runtime/state.ts"],"mappings":";;;;;AAOA;iBAAgB,cAAA,CAAA,GAAkB,UAAA"}

package/dist/src/vite-plugin-upstart-editor/runtime/state.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"state.js","names":[],"sources":["../../../../src/vite-plugin-upstart-editor/runtime/state.ts"],"sourcesContent":["import type { EditorMode } from \"./types.js\";\n\nlet currentMode: EditorMode = \"preview\";\n\n/**\n * Get the current editor mode.\n */\nexport function getCurrentMode(): EditorMode {\n  return currentMode;\n}\n\n/**\n * Set the current editor mode (internal use only).\n */\nexport function setCurrentMode(mode: EditorMode): void {\n  currentMode = mode;\n}\n"],"mappings":";AAEA,IAAI,cAA0B;;;;AAK9B,SAAgB,iBAA6B;AAC3C,QAAO;;;;;AAMT,SAAgB,eAAe,MAAwB;AACrD,eAAc"}