@upstart.gg/vite-plugins 0.1.69 → 0.1.70

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

@@ -0,0 +1,77 @@
+/**
+ * User-facing labels of the editor runtime. The runtime runs inside the previewed site,
+ * which has no access to the dashboard's i18n catalogs: the editor sends the translated
+ * labels through a `set-labels` message once the runtime is ready, and everything the
+ * runtime renders reads them lazily via {@link getLabels}. English is the fallback.
+ */
+export interface RuntimeLabels {
+  newItem: string;
+  keepItem: string;
+  removeItem: string;
+  addItem: string;
+  applyChanges: string;
+  dragToReorder: string;
+  clickToEdit: string;
+  startTyping: string;
+  recoveryTitle: string;
+  recoveryText: string;
+  refresh: string;
+  formGuard: string;
+  bold: string;
+  italic: string;
+  strikethrough: string;
+  inlineCode: string;
+  heading: string;
+  blockquote: string;
+  bulletList: string;
+  orderedList: string;
+}
+
+export const DEFAULT_LABELS: Readonly<RuntimeLabels> = Object.freeze({
+  newItem: "New item",
+  keepItem: "Keep item",
+  removeItem: "Remove item",
+  addItem: "Add item",
+  applyChanges: "Apply changes",
+  dragToReorder: "Drag to reorder",
+  clickToEdit: "Click to edit...",
+  startTyping: "Start typing...",
+  recoveryTitle: "The preview needs a refresh",
+  recoveryText: "Your changes are saved. Refresh the preview to keep editing.",
+  refresh: "Refresh",
+  formGuard: "This action isn’t available in the editor preview",
+  bold: "Bold",
+  italic: "Italic",
+  strikethrough: "Strikethrough",
+  inlineCode: "Inline Code",
+  heading: "Heading",
+  blockquote: "Blockquote",
+  bulletList: "Bullet List",
+  orderedList: "Ordered List",
+});
+
+let labels: RuntimeLabels = { ...DEFAULT_LABELS };
+
+/** Current labels (translated once the editor sent them, English before that). */
+export function getLabels(): Readonly<RuntimeLabels> {
+  return labels;
+}
+
+/**
+ * Override labels with the ones received from the editor. Unknown keys and non-string
+ * values are ignored so a malformed message can never blank a control.
+ */
+export function setLabels(input: unknown): void {
+  if (typeof input !== "object" || input === null) return;
+  const next: RuntimeLabels = { ...labels };
+  for (const key of Object.keys(DEFAULT_LABELS) as (keyof RuntimeLabels)[]) {
+    const value = (input as Record<string, unknown>)[key];
+    if (typeof value === "string" && value.length > 0) next[key] = value;
+  }
+  labels = next;
+}
+
+/** Back to the English defaults (used by tests). */
+export function resetLabels(): void {
+  labels = { ...DEFAULT_LABELS };
+}

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

@@ -4,6 +4,7 @@ import Placeholder from "@tiptap/extension-placeholder";
 import StarterKit from "@tiptap/starter-kit";
 import { sendToParent } from "./utils.js";
 import type { EditorInstance, TextEditorMode, UpstartEditorOptions } from "./types.js";
+import { getLabels, type RuntimeLabels } from "./labels.js";
 
 /**
  * Custom Document node for inline elements (e.g. <a>, <span>, headings).
@@ -247,6 +248,11 @@ const styleCache = new WeakMap<
   { outline: string; outlineOffset: string; cursor: string; transition: string }
 >();
 let resolvedOptions: Required<UpstartEditorOptions> = DEFAULT_OPTIONS;
+
+/** The site may override the placeholder; the default one follows the editor's language. */
+function placeholderFor(options: Required<UpstartEditorOptions>): string {
+  return options.placeholder === DEFAULT_OPTIONS.placeholder ? getLabels().startTyping : options.placeholder;
+}
 let shortcutsRegistered = false;
 let domObserver: MutationObserver | null = null;
 let reactivateTimer: number | null = null;
@@ -443,7 +449,7 @@ function createPlainTextEditor(element: HTMLElement, options: Required<UpstartEd
         horizontalRule: false,
       }),
       Placeholder.configure({
-        placeholder: "Click to edit...",
+        placeholder: getLabels().clickToEdit,
       }),
     ],
     content,
@@ -476,7 +482,7 @@ function createRichTextEditor(element: HTMLElement, options: Required<UpstartEdi
   const extensions: Extension[] = [
     StarterKit,
     Placeholder.configure({
-      placeholder: options.placeholder,
+      placeholder: placeholderFor(options),
     }),
   ];
 
@@ -536,7 +542,7 @@ function createInlineRichTextEditor(element: HTMLElement, options: Required<Upst
       horizontalRule: false,
     }),
     Placeholder.configure({
-      placeholder: "Click to edit...",
+      placeholder: getLabels().clickToEdit,
     }),
   ];
 
@@ -593,7 +599,7 @@ function createDirectEditor(element: HTMLElement, options: Required<UpstartEdito
       codeBlock: false,
       horizontalRule: false,
     }),
-    Placeholder.configure({ placeholder: "Click to edit..." }),
+    Placeholder.configure({ placeholder: getLabels().clickToEdit }),
   ];
 
   if (options.bubbleMenu) {
@@ -629,7 +635,10 @@ function createRichPanelEditor(element: HTMLElement, options: Required<UpstartEd
   let hasChanged = false;
 
   const bubbleMenuElement = createBubbleMenuElement("inline");
-  const extensions: Extension[] = [StarterKit, Placeholder.configure({ placeholder: options.placeholder })];
+  const extensions: Extension[] = [
+    StarterKit,
+    Placeholder.configure({ placeholder: placeholderFor(options) }),
+  ];
 
   if (options.bubbleMenu) {
     extensions.push(BubbleMenu.configure({ element: bubbleMenuElement }));
@@ -958,20 +967,20 @@ function restoreStyles(element: HTMLElement): void {
   element.style.transition = cached.transition;
 }
 
-const BUBBLE_MENU_GROUPS: { command: string; icon: string; title: string }[][] = [
+const BUBBLE_MENU_GROUPS: { command: string; icon: string; label: keyof RuntimeLabels }[][] = [
   [
-    { command: "bold", icon: "format-bold", title: "Bold" },
-    { command: "italic", icon: "format-italic", title: "Italic" },
-    { command: "strike", icon: "format-strikethrough", title: "Strikethrough" },
-    { command: "code", icon: "code-tags", title: "Inline Code" },
+    { command: "bold", icon: "format-bold", label: "bold" },
+    { command: "italic", icon: "format-italic", label: "italic" },
+    { command: "strike", icon: "format-strikethrough", label: "strikethrough" },
+    { command: "code", icon: "code-tags", label: "inlineCode" },
   ],
   [
-    { command: "heading", icon: "format-header-1", title: "Heading" },
-    { command: "blockquote", icon: "format-quote-close", title: "Blockquote" },
+    { command: "heading", icon: "format-header-1", label: "heading" },
+    { command: "blockquote", icon: "format-quote-close", label: "blockquote" },
   ],
   [
-    { command: "bulletList", icon: "format-list-bulleted", title: "Bullet List" },
-    { command: "orderedList", icon: "format-list-numbered", title: "Ordered List" },
+    { command: "bulletList", icon: "format-list-bulleted", label: "bulletList" },
+    { command: "orderedList", icon: "format-list-numbered", label: "orderedList" },
   ],
 ];
 
@@ -996,7 +1005,8 @@ function createBubbleMenuElement(mode: "block" | "inline" = "block"): HTMLDivEle
       menu.appendChild(separator);
     }
 
-    for (const { command, icon, title } of group) {
+    for (const { command, icon, label } of group) {
+      const title = getLabels()[label];
       const button = document.createElement("button");
       button.type = "button";
       button.dataset.command = command;

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

@@ -6,6 +6,9 @@ import type {
   PayloadArrayItemDelete,
   PayloadArraySet,
 } from "~/upstart-editor-api";
+import type { RuntimeLabels } from "./labels.js";
+
+export type { RuntimeLabels } from "./labels.js";
 
 /**
  * Editor mode
@@ -146,7 +149,9 @@ export type ParentMessage =
   | { type: "request-scroll-position" }
   | { type: "restore-scroll-position"; x: number; y: number }
   | { type: "clear-selection" }
-  | { type: "deselect"; key: string };
+  | { type: "deselect"; key: string }
+  /** Translated labels for the controls the runtime renders (see `runtime/labels.ts`). */
+  | { type: "set-labels"; labels: Partial<RuntimeLabels> };
 
 /**
  * Message wrapper sent via postMessage from iframe.