@cosmicdrift/kumiko-renderer 0.182.0 → 0.183.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.182.0",
+  "version": "0.183.0",
   "description": "Platform-agnostic React renderer for Kumiko screens. Contains the shared logic — primitives-contract, hooks, KumikoScreen, navigation & SSE abstractions — that any platform-specific renderer (web, native) composes. No DOM, no EventSource, no react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -15,8 +15,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.182.0",
-    "@cosmicdrift/kumiko-headless": "0.182.0",
+    "@cosmicdrift/kumiko-framework": "0.183.0",
+    "@cosmicdrift/kumiko-headless": "0.183.0",
     "react": "^19.2.6",
     "temporal-polyfill": "^0.3.2"
   },

package/src/app/__tests__/content-preview.test.tsx

@@ -0,0 +1,140 @@
+import { describe, expect, test } from "bun:test";
+import { render, screen } from "@testing-library/react";
+import type { ComponentType, ReactNode } from "react";
+import { type CorePrimitives, type InputProps, PrimitivesProvider } from "../../primitives";
+import { type ContentEditorProps, ContentEditorsProvider } from "../content-editors";
+import { ContentPreview, substituteVariables } from "../content-preview";
+
+const noop = (): ReactNode => null;
+const passChildren = ({ children }: { readonly children?: ReactNode }): ReactNode => children;
+
+const captureInput: ComponentType<InputProps> = (props) => {
+  if (props.kind !== "textarea") return null;
+  return (
+    <textarea data-testid="cp-textarea" value={props.value} disabled={props.disabled} readOnly />
+  );
+};
+
+const testPrimitives: CorePrimitives = {
+  Button: noop,
+  Banner: passChildren,
+  Field: passChildren,
+  Input: captureInput,
+  DataTable: noop,
+  Form: passChildren,
+  Section: passChildren,
+  Card: passChildren,
+  Grid: passChildren,
+  GridCell: passChildren,
+  Text: passChildren,
+  Heading: noop,
+  Dialog: noop,
+  Modal: noop,
+  Lightbox: noop,
+  ConfigSourceBadge: noop,
+  ConfigCascadeView: noop,
+  Link: noop,
+};
+
+function Wrapper({ children }: { readonly children: ReactNode }): ReactNode {
+  return <PrimitivesProvider value={testPrimitives}>{children}</PrimitivesProvider>;
+}
+
+describe("substituteVariables", () => {
+  test("replaces every {{name}} with its example value", () => {
+    expect(
+      substituteVariables("Hi {{customerName}}, order {{orderId}} shipped.", {
+        customerName: "Max Mustermann",
+        orderId: "A-1042",
+      }),
+    ).toBe("Hi Max Mustermann, order A-1042 shipped.");
+  });
+
+  test("a name with no example value stays as the literal placeholder", () => {
+    expect(substituteVariables("Hi {{customerName}}", {})).toBe("Hi {{customerName}}");
+  });
+
+  test("no variables in the content → content passes through unchanged", () => {
+    expect(substituteVariables("Just plain text.", { customerName: "Max" })).toBe(
+      "Just plain text.",
+    );
+  });
+});
+
+describe("ContentPreview", () => {
+  test("renders the format's registered editor read-only, with variables substituted", () => {
+    function RichEditor({ value, readOnly }: ContentEditorProps): ReactNode {
+      return (
+        <div data-testid="cp-rich" data-readonly={readOnly}>
+          {value}
+        </div>
+      );
+    }
+
+    render(
+      <ContentEditorsProvider value={{ rich: RichEditor }}>
+        <ContentPreview
+          content="Hallo {{customerName}}"
+          variables={{ customerName: "Max Mustermann" }}
+          contentFormat="rich"
+        />
+      </ContentEditorsProvider>,
+      { wrapper: Wrapper },
+    );
+
+    const el = screen.getByTestId("cp-rich");
+    expect(el.textContent).toBe("Hallo Max Mustermann");
+    expect(el.dataset["readonly"]).toBe("true");
+  });
+
+  test("no editor registered for the format → falls back to the textarea, still substituted", () => {
+    render(
+      <ContentPreview
+        content="Hi {{orderId}}"
+        variables={{ orderId: "A-1042" }}
+        contentFormat="plain"
+      />,
+      { wrapper: Wrapper },
+    );
+
+    const el = screen.getByTestId("cp-textarea") as HTMLTextAreaElement;
+    expect(el.value).toBe("Hi A-1042");
+    expect(el.disabled).toBe(true);
+  });
+
+  test("rich format: an example value with markup characters is escaped, not injected as HTML", () => {
+    function RichEditor({ value }: ContentEditorProps): ReactNode {
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: proves the substituted value is escaped, not injected — the whole point of this test.
+      return <div data-testid="cp-rich" dangerouslySetInnerHTML={{ __html: value }} />;
+    }
+
+    render(
+      <ContentEditorsProvider value={{ rich: RichEditor }}>
+        <ContentPreview
+          content="Preis: {{price}}"
+          variables={{ price: "<b>0</b> & up" }}
+          contentFormat="rich"
+        />
+      </ContentEditorsProvider>,
+      { wrapper: Wrapper },
+    );
+
+    const el = screen.getByTestId("cp-rich");
+    expect(el.querySelector("b")).toBeNull();
+    expect(el.textContent).toBe("Preis: <b>0</b> & up");
+  });
+
+  test("plain format: an example value with markup characters passes through unescaped", () => {
+    render(
+      <ContentPreview
+        content="Preis: {{price}}"
+        variables={{ price: "<b>0</b>" }}
+        contentFormat="plain"
+      />,
+      { wrapper: Wrapper },
+    );
+
+    const el = screen.getByTestId("cp-textarea") as HTMLTextAreaElement;
+    expect(el.value).toBe("Preis: <b>0</b>");
+  });
+});

package/src/app/content-preview.tsx

@@ -0,0 +1,57 @@
+// Read-only render of a content editor's format with the collection's
+// example variableSchema values substituted in for `{{name}}` — reuses the
+// same registered editor the collection edits with (readOnly), so "rich"
+// renders formatted HTML and "plain"/"markdown" render as text through the
+// exact same component, no separate render path per format.
+
+import type { ReactNode } from "react";
+import { useContentEditor } from "./content-editors";
+
+const VARIABLE_PATTERN = /\{\{\s*(\w+)\s*\}\}/g;
+
+const noop = (): void => {};
+
+/** A name with no example value (or not in the schema at all) stays as the
+ *  literal `{{name}}` placeholder — there is nothing else to show for it. */
+export function substituteVariables(
+  content: string,
+  variables: Readonly<Record<string, string>>,
+): string {
+  return content.replace(VARIABLE_PATTERN, (match, name: string) => variables[name] ?? match);
+}
+
+function escapeHtml(value: string): string {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+export type ContentPreviewProps = {
+  readonly content: string;
+  readonly variables: Readonly<Record<string, string>>;
+  readonly contentFormat?: string;
+};
+
+export function ContentPreview({
+  content,
+  variables,
+  contentFormat,
+}: ContentPreviewProps): ReactNode {
+  const Editor = useContentEditor(contentFormat);
+  // "rich" content is HTML (see ContentCollectionDefinition.contentFormat) —
+  // an example value substituted in raw could break the markup (`<`) or
+  // render as an unescaped entity (`&`). "plain"/"markdown" content is text,
+  // no escaping wanted there.
+  const safeVariables =
+    contentFormat === "rich"
+      ? Object.fromEntries(
+          Object.entries(variables).map(([name, value]) => [name, escapeHtml(value)]),
+        )
+      : variables;
+  return (
+    <Editor
+      value={substituteVariables(content, safeVariables)}
+      onChange={noop}
+      variables={[]}
+      readOnly
+    />
+  );
+}

package/src/i18n-defaults.ts

@@ -87,6 +87,14 @@ export const kumikoDefaultTranslations: TranslationsByLocale = {
 
     // ContentEditor — Variablen-Chip-Leiste (VariableChips).
     "kumiko.contentEditor.insertVariable": "{name} einfügen",
+    "kumiko.contentEditor.preview": "Vorschau",
+    "kumiko.contentEditor.editMode": "Bearbeiten",
+    "kumiko.contentEditor.bold": "Fett",
+    "kumiko.contentEditor.italic": "Kursiv",
+    "kumiko.contentEditor.heading1": "Überschrift 1",
+    "kumiko.contentEditor.heading2": "Überschrift 2",
+    "kumiko.contentEditor.bulletList": "Aufzählungsliste",
+    "kumiko.contentEditor.orderedList": "Nummerierte Liste",
 
     // Config-Cascade — Source-Badges + Cascade-Panel (ConfigCascadeView).
     "kumiko.config.source.user": "Mein Wert",
@@ -220,6 +228,14 @@ export const kumikoDefaultTranslations: TranslationsByLocale = {
     "kumiko.rowAction.failed": "Action failed",
 
     "kumiko.contentEditor.insertVariable": "Insert {name}",
+    "kumiko.contentEditor.preview": "Preview",
+    "kumiko.contentEditor.editMode": "Edit",
+    "kumiko.contentEditor.bold": "Bold",
+    "kumiko.contentEditor.italic": "Italic",
+    "kumiko.contentEditor.heading1": "Heading 1",
+    "kumiko.contentEditor.heading2": "Heading 2",
+    "kumiko.contentEditor.bulletList": "Bullet list",
+    "kumiko.contentEditor.orderedList": "Numbered list",
 
     "kumiko.config.source.user": "My value",
     "kumiko.config.source.tenant": "Tenant",

package/src/index.ts

@@ -30,6 +30,8 @@ export {
   TextareaContentEditor,
   useContentEditor,
 } from "./app/content-editors";
+export type { ContentPreviewProps } from "./app/content-preview";
+export { ContentPreview, substituteVariables } from "./app/content-preview";
 export type { CustomScreensMap, CustomScreensProviderProps } from "./app/custom-screens";
 export { CustomScreensProvider, useCustomScreenComponent } from "./app/custom-screens";
 export type { DashboardBodyProps, DashboardBodyProviderProps } from "./app/dashboard-body";