@upstart.gg/vite-plugins 0.1.60 → 0.1.61

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

@@ -57,6 +57,46 @@ const TemplateVariable = Node.create({
   },
 });
 
+/**
+ * An atomic inline node holding static text that surrounds an i18n node in the
+ * source (e.g. the " *" in `<label><Trans i18nKey="…" /> *</label>`).
+ * It stays visible and non-editable, and renderText() returns "" so getText()
+ * yields only the translation — the static part never leaks into the saved value.
+ */
+const StaticAffix = Node.create({
+  name: "staticAffix",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: false,
+
+  addAttributes() {
+    return {
+      text: { default: "" },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: "span[data-static-affix]" }];
+  },
+
+  renderHTML({ node }) {
+    return [
+      "span",
+      {
+        "data-static-affix": "",
+        contenteditable: "false",
+        style: "cursor:default;user-select:none;white-space:pre;",
+      },
+      node.attrs.text,
+    ];
+  },
+
+  renderText() {
+    return "";
+  },
+});
+
 /**
  * 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.
@@ -80,6 +120,74 @@ const DEFAULT_OPTIONS: Required<UpstartEditorOptions> = {
   getRawI18nTemplate: () => undefined,
 };
 
+/**
+ * Parse a `data-upstart-i18n` value into its namespace and key.
+ *
+ * The build-time plugin guarantees a single "namespace:key" per element (a ternary
+ * between two translations is emitted as a runtime-resolved expression), but a stale
+ * build may still carry a comma-separated list of keys. Such a value is unresolvable —
+ * we cannot tell which translation the edited text belongs to — so it is rejected
+ * instead of being saved to a mangled key.
+ */
+function parseI18nAttr(value: string | undefined): { namespace: string; key: string } | null {
+  if (!value) return null;
+  if (value.includes(",")) {
+    console.warn("[Upstart Editor] Ambiguous i18n key, refusing to save:", value);
+    return null;
+  }
+  const colonIdx = value.indexOf(":");
+  return colonIdx >= 0
+    ? { namespace: value.slice(0, colonIdx), key: value.slice(colonIdx + 1) }
+    : { namespace: "translation", key: value };
+}
+
+/**
+ * Static text emitted by the build-time plugin around a single i18n node
+ * (`data-upstart-i18n-prefix` / `data-upstart-i18n-suffix`).
+ */
+function getAffixes(element: HTMLElement): { prefix: string; suffix: string } {
+  return {
+    prefix: element.dataset.upstartI18nPrefix ?? "",
+    suffix: element.dataset.upstartI18nSuffix ?? "",
+  };
+}
+
+/** Remove the static affixes from a rendered text to get the translation alone. */
+function stripAffixes(element: HTMLElement, text: string): string {
+  const { prefix, suffix } = getAffixes(element);
+  let out = text;
+  if (prefix && out.startsWith(prefix)) out = out.slice(prefix.length);
+  if (suffix && out.endsWith(suffix)) out = out.slice(0, out.length - suffix.length);
+  return out;
+}
+
+/** Re-attach the static affixes to a translation for display purposes. */
+function applyAffixes(element: HTMLElement, text: string): string {
+  const { prefix, suffix } = getAffixes(element);
+  return `${prefix}${text}${suffix}`;
+}
+
+/**
+ * Wrap the editable inline nodes with non-editable StaticAffix nodes so the static
+ * parts stay visible while remaining outside of the edited (and saved) content.
+ */
+function buildAffixDocument(element: HTMLElement, inlineNodes: object[]): object {
+  const { prefix, suffix } = getAffixes(element);
+  const content: object[] = [...inlineNodes];
+  if (prefix) content.unshift({ type: "staticAffix", attrs: { text: prefix } });
+  if (suffix) content.push({ type: "staticAffix", attrs: { text: suffix } });
+  return { type: "doc", content: [{ type: "paragraph", content }] };
+}
+
+/** Extract the inline nodes of a single-paragraph document produced above. */
+function getInlineNodes(content: string | object): object[] {
+  if (typeof content === "string") {
+    return content ? [{ type: "text", text: content }] : [];
+  }
+  const paragraph = (content as { content?: { content?: object[] }[] }).content?.[0];
+  return paragraph?.content ?? [];
+}
+
 /**
  * Parse a raw i18n template (e.g. "Copyright {{year}}") together with the
  * already-rendered text (e.g. "Copyright 2026") and produce a TipTap JSON
@@ -268,7 +376,9 @@ function activateEditor(element: HTMLElement, hash: string, options: Required<Up
 }
 
 function createPlainTextEditor(element: HTMLElement, options: Required<UpstartEditorOptions>): Editor {
-  const renderedText = element.textContent ?? "";
+  // A label like `<Trans i18nKey="…" /> *` renders the static " *" alongside the
+  // translation: strip it so only the translation becomes editable.
+  const renderedText = stripAffixes(element, element.textContent ?? "");
 
   let content: string | object = renderedText;
   const extraExtensions: ReturnType<typeof Node.create>[] = [];
@@ -282,12 +392,9 @@ function createPlainTextEditor(element: HTMLElement, options: Required<UpstartEd
     // 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);
+      const parsed = parseI18nAttr(element.dataset.upstartI18n);
+      if (parsed) {
+        const rawTemplate = options.getRawI18nTemplate(parsed.namespace, parsed.key);
         if (rawTemplate) {
           content = buildI18nContent(rawTemplate, renderedText);
           extraExtensions.push(TemplateVariable);
@@ -296,6 +403,12 @@ function createPlainTextEditor(element: HTMLElement, options: Required<UpstartEd
     }
   }
 
+  const { prefix, suffix } = getAffixes(element);
+  if (prefix || suffix) {
+    extraExtensions.push(StaticAffix);
+    content = buildAffixDocument(element, getInlineNodes(content));
+  }
+
   element.textContent = "";
   let hasChanged = false;
 
@@ -587,15 +700,25 @@ function syncI18nSiblings(sourceElement: HTMLElement): void {
 
       const siblingInstance = activeEditors.get(sibling);
 
+      const { prefix, suffix } = getAffixes(sibling);
+      const hasAffixes = Boolean(prefix || suffix);
+
       if (siblingInstance) {
         console.log(
           `[Upstart Editor] Updating sibling editor (hash: ${siblingInstance.hash}) with new content`,
           siblingInstance,
         );
-        sibling.innerText = plainContent;
-        siblingInstance.editor.chain().selectAll().insertContent(plainContent).run();
+        if (hasAffixes) {
+          // setContent rebuilds the StaticAffix nodes, which insertContent would drop
+          siblingInstance.editor.commands.setContent(
+            buildAffixDocument(sibling, plainContent ? [{ type: "text", text: plainContent }] : []),
+          );
+        } else {
+          sibling.innerText = plainContent;
+          siblingInstance.editor.chain().selectAll().insertContent(plainContent).run();
+        }
       } else {
-        sibling.textContent = plainContent;
+        sibling.textContent = applyAffixes(sibling, plainContent);
       }
     }
   } finally {
@@ -616,14 +739,18 @@ function saveText(element: HTMLElement, newText: string): void {
         payload: { action: "editTextDirect", id: dataset.upstartId!, content: newText },
       });
     } else {
-      const [namespace, key] = dataset.upstartI18n?.split(":") ?? [];
+      const parsed = parseI18nAttr(dataset.upstartI18n);
+      if (!parsed) {
+        console.warn("[Upstart Editor] No resolvable i18n key on element, edit not saved:", element);
+        return;
+      }
       sendToParent({
         type: "text-edit",
         payload: {
           action: "editText",
           content: newText,
-          namespace,
-          key,
+          namespace: parsed.namespace,
+          key: parsed.key,
           language: document.documentElement.lang,
         },
       });
@@ -659,7 +786,7 @@ function destroyEditor(element: HTMLElement): void {
 
   // Update element content with the final edited text
   if (isPlainMode) {
-    instance.element.textContent = finalContent;
+    instance.element.textContent = applyAffixes(instance.element, finalContent);
   } else {
     instance.element.innerHTML = finalContent;
   }