@cosmicdrift/kumiko-samples 0.374.0 → 0.378.0

package/packages/bundled-features/src/template-resolver/handlers/upsert-tenant.write.ts

@@ -1,5 +1,10 @@
 import { defineWriteHandler, type TenantId } from "@cosmicdrift/kumiko-framework/engine";
 import * as z from "zod";
+import {
+  refuseTemplateEdit,
+  type TemplateEditPolicy,
+  templateEditAccess,
+} from "../template-edit-policy.ts";
 import { resolveTemplateVariables } from "../template-validation.ts";
 import { upsertPayloadSchema } from "./shared.ts";
 import { writeTemplateRow } from "./template-write.ts";
@@ -9,32 +14,36 @@ import { writeTemplateRow } from "./template-write.ts";
 // via publish-Handler. SystemAdmin kann via tenantIdOverride für
 // einen anderen Tenant schreiben (typisch: Plattform-Admin-UI das
 // Tenant-Templates kuratiert).
-export const upsertTenantWrite = defineWriteHandler({
-  name: "upsert-tenant",
-  schema: upsertPayloadSchema.extend({
-    tenantIdOverride: z.string().min(1).optional(),
-    status: z.enum(["draft", "active"]).default("draft"),
-  }),
-  access: { roles: ["TenantAdmin", "SystemAdmin"] },
-  description:
-    "Creates or overwrites a tenant-scoped template override with its variable schema, landing as a draft that only publish makes live (over an active override the draft is stored beside it, the active version keeps being served until publish); it refuses a system-tenant target, which is what upsert-system is for.",
-  handler: async (event, ctx) => {
-    // @cast-boundary engine-payload — override aus Zod-parsed string,
-    // event.user.tenantId schon TenantId-branded; union als TenantId casten
-    // ist legit (override ist UUID-Format-validiert in schema).
-    const tenantId = (event.payload.tenantIdOverride ?? event.user.tenantId) as TenantId;
-    return writeTemplateRow({
-      ctx,
-      user: event.user,
-      tenantId,
-      scope: "tenant",
-      status: event.payload.status,
-      variables: resolveTemplateVariables(
-        ctx.registry,
-        event.payload.slug,
-        event.payload.variableSchema,
-      ),
-      payload: event.payload,
-    });
-  },
-});
+export function makeUpsertTenantWrite(policy: TemplateEditPolicy) {
+  return defineWriteHandler({
+    name: "upsert-tenant",
+    schema: upsertPayloadSchema.extend({
+      tenantIdOverride: z.string().min(1).optional(),
+      status: z.enum(["draft", "active"]).default("draft"),
+    }),
+    access: templateEditAccess(policy.tenantEditable),
+    description:
+      "Creates or overwrites a tenant-scoped template override with its variable schema, landing as a draft that only publish makes live (over an active override the draft is stored beside it, the active version keeps being served until publish); it refuses a system-tenant target, which is what upsert-system is for; a TenantAdmin may write it only for templates the app lists in tenantEditable, otherwise SystemAdmin only.",
+    handler: async (event, ctx) => {
+      const refused = refuseTemplateEdit(policy, event.user, event.payload);
+      if (refused !== null) return refused;
+      // @cast-boundary engine-payload — override is a zod-validated string and
+      // event.user.tenantId is already TenantId-branded; forTenant rejects the
+      // override for non-SystemAdmins.
+      const tenantId = (event.payload.tenantIdOverride ?? event.user.tenantId) as TenantId;
+      return writeTemplateRow({
+        ctx,
+        user: event.user,
+        tenantId,
+        scope: "tenant",
+        status: event.payload.status,
+        variables: resolveTemplateVariables(
+          ctx.registry,
+          event.payload.slug,
+          event.payload.variableSchema,
+        ),
+        payload: event.payload,
+      });
+    },
+  });
+}

package/packages/bundled-features/src/template-resolver/handlers/validate.query.ts

@@ -47,17 +47,19 @@ type TemplateDraftInput = {
   readonly scope: TemplateWriteScope;
 };
 
-// The dry run of the write pipeline; preview feeds on the evaluation, validate returns the response.
-export async function validateTemplateDraft(
+// Image keys the editor may reference: the system rows plus, for a tenant write, the caller's own.
+export async function knownResourceKeysFor(
   ctx: HandlerContext,
   user: SessionUser,
-  payload: TemplateDraftInput,
-) {
-  const variables = resolveTemplateVariables(ctx.registry, payload.slug, payload.variableSchema);
-  const { slug, kind, locale } = payload;
-  // The dry run must not promise what the caller's write handlers would refuse.
-  const scope: TemplateWriteScope = isSystemAdmin(user) ? payload.scope : "tenant";
-  const known = [
+  where: {
+    readonly slug: string;
+    readonly kind: string;
+    readonly scope: TemplateWriteScope;
+    readonly locale: string | undefined;
+  },
+): Promise<string[]> {
+  const { slug, kind, scope, locale } = where;
+  return [
     ...(await knownResourceKeys(ctx.db, {
       tenantId: SYSTEM_TENANT_ID,
       slug,
@@ -69,6 +71,19 @@ export async function validateTemplateDraft(
       ? await knownResourceKeys(ctx.db, { tenantId: user.tenantId, slug, kind, scope, locale })
       : []),
   ];
+}
+
+// The dry run of the write pipeline; preview feeds on the evaluation, validate returns the response.
+export async function validateTemplateDraft(
+  ctx: HandlerContext,
+  user: SessionUser,
+  payload: TemplateDraftInput,
+) {
+  const variables = resolveTemplateVariables(ctx.registry, payload.slug, payload.variableSchema);
+  const { slug, kind, locale } = payload;
+  // The dry run must not promise what the caller's write handlers would refuse.
+  const scope: TemplateWriteScope = isSystemAdmin(user) ? payload.scope : "tenant";
+  const known = await knownResourceKeysFor(ctx, user, { slug, kind, scope, locale });
   const evaluation = evaluateTemplateWrite({
     kind,
     scope,

package/packages/bundled-features/src/template-resolver/index.ts

@@ -1,3 +1,4 @@
+export { isResourceImageContentType } from "../shared/index.ts";
 export {
   createTemplateResolverApi,
   type ResolveRequest,
@@ -8,6 +9,7 @@ export {
 } from "./api.ts";
 export {
   type CompileDocumentBodyOptions,
+  collectDocumentImageVariables,
   collectDocumentResourceKeys,
   compileDocumentBodyToHandlebars,
   toResourceDataUri,
@@ -75,7 +77,7 @@ export {
   isDocumentReferenceName,
   isDocumentResourceKey,
 } from "./document-schema.ts";
-export { createTemplateResolverFeature } from "./feature.ts";
+export { createTemplateResolverFeature, type TemplateResolverOptions } from "./feature.ts";
 export type { LayoutSourceResponse, LayoutSourceRow } from "./handlers/layout-source.query.ts";
 export type {
   OverviewKindGroup,
@@ -126,6 +128,11 @@ export {
   templateResourcesTable,
 } from "./table.ts";
 export { type TemplateBundle, templateBundleSchema } from "./template-bundle.ts";
+export {
+  type TemplateEditPolicy,
+  type TenantEditableTemplate,
+  templateEditAccess,
+} from "./template-edit-policy.ts";
 export {
   isMailTemplateMeta,
   type LayoutTemplateMeta,

package/packages/bundled-features/src/template-resolver/{web/placeholder-text.ts → placeholder-text.ts}

@@ -1,6 +1,6 @@
 // @runtime client
 import type { JSONContent } from "@tiptap/core";
-import { isDocumentReferenceName } from "../document-schema.ts";
+import { isDocumentReferenceName } from "./document-schema.ts";
 
 const PLACEHOLDER_TOKEN = /\{\{([^{}]*)\}\}/g;
 

package/packages/bundled-features/src/template-resolver/qualified-names.ts

@@ -20,6 +20,7 @@ export const TemplateResolverHandlers = {
   resourceRemove: "template-resolver:write:resource-remove",
   resourceLinkPdf: "template-resolver:write:resource-link-pdf",
   sendTest: "template-resolver:write:send-test",
+  patchDraft: "template-resolver:write:patch-draft",
 } as const;
 
 export const TemplateResolverQueries = {
@@ -32,7 +33,9 @@ export const TemplateResolverQueries = {
   diffToSystem: "template-resolver:query:diff-to-system",
   validate: "template-resolver:query:validate",
   preview: "template-resolver:query:preview",
+  documentBlocks: "template-resolver:query:document-blocks",
   exportBundle: "template-resolver:query:export-bundle",
+  sendTestStatus: "template-resolver:query:send-test-status",
   // Public pair — anonymous-reachable, kind pinned to text-block.
   bySlug: "template-resolver:query:by-slug",
   byTenant: "template-resolver:query:by-tenant",
@@ -61,6 +64,7 @@ export const TemplateResolverErrors = {
   targetExists: "target_exists",
   systemResourcesNeedSystemTenant: "system_resources_need_system_tenant",
   systemOnlyTemplate: "system_only_template",
+  templateNotTenantEditable: "template_not_tenant_editable",
   bundleLocalesDiffer: "bundle_locales_differ",
   resourceTooLarge: "template_resource_too_large",
   resourceUnsupportedImage: "template_resource_unsupported_image",

package/packages/bundled-features/src/template-resolver/seeding.ts

@@ -78,6 +78,7 @@ export type SeedSystemTemplateOptions = {
    *  system admin uploaded through resource-upload. */
   readonly linkedResources?: Record<string, string>;
   readonly meta?: unknown;
+  readonly title?: string;
   readonly parentTemplateId?: string | null;
   readonly by?: SessionUser;
   readonly ifExists?: SeedIfExists;
@@ -138,7 +139,7 @@ export async function seedSystemTemplate(
     variableSchema,
     ...(linkedResources !== undefined && { linkedResources }),
     meta,
-    title: null,
+    title: opts.title ?? null,
     folder: null,
     scope: "system" as const,
     parentTemplateId,
@@ -261,6 +262,7 @@ export async function seedSystemTemplateBundle(
       contentFormat: bundle.contentFormat,
       variableSchema: bundle.variableSchema ?? {},
       meta: entry.meta,
+      ...(entry.title !== undefined ? { title: entry.title } : {}),
       ...(opts.by !== undefined ? { by: opts.by } : {}),
       ...(opts.ifExists !== undefined ? { ifExists: opts.ifExists } : {}),
     });

package/packages/bundled-features/src/template-resolver/template-bundle.ts

@@ -40,7 +40,12 @@ const bundleResourceSchema = z
 const pdfAttachmentLinkBodySchema = templatePdfAttachmentLinkSchema.omit({ kind: true });
 
 const bundleLocaleEntrySchema = z
-  .object({ body: z.string().max(200_000), meta: z.unknown().optional() })
+  .object({
+    body: z.string().max(200_000),
+    meta: z.unknown().optional(),
+    // Shown in the template overview instead of the slug; one per locale, so it is translated.
+    title: z.string().min(1).max(200).optional(),
+  })
   .strict();
 
 export const templateBundleSchema = z

package/packages/bundled-features/src/template-resolver/template-edit-policy.ts

@@ -0,0 +1,91 @@
+import { fetchOne } from "@cosmicdrift/kumiko-framework/db";
+import {
+  type HandlerContext,
+  hasAccess,
+  type RoleAccessRule,
+  type SessionUser,
+} from "@cosmicdrift/kumiko-framework/engine";
+import {
+  AccessDeniedError,
+  type WriteFailure,
+  writeFailure,
+} from "@cosmicdrift/kumiko-framework/errors";
+import type { TemplateKind } from "./constants.ts";
+import { TemplateResolverErrors } from "./qualified-names.ts";
+import { type TemplateResourceRow, templateResourcesTable } from "./table.ts";
+import { isSystemAdmin } from "./template-draft.ts";
+
+export type TenantEditableTemplate = {
+  readonly kind: TemplateKind;
+  readonly slug: string;
+  readonly access: RoleAccessRule;
+};
+
+export type TemplateEditPolicy = {
+  readonly tenantEditable: readonly TenantEditableTemplate[];
+};
+
+type EditTarget = { readonly slug: string; readonly kind: string };
+type EditUser = Pick<SessionUser, "roles">;
+
+const SYSTEM_ADMIN_ROLE = "SystemAdmin";
+
+export function templateEditAccess(entries: readonly TenantEditableTemplate[]): RoleAccessRule {
+  const roles = new Set<string>([SYSTEM_ADMIN_ROLE]);
+  for (const entry of entries) {
+    for (const role of entry.access.roles) roles.add(role);
+  }
+  return { roles: [...roles] };
+}
+
+export function mayEditTemplate(
+  policy: TemplateEditPolicy,
+  user: EditUser,
+  target: EditTarget,
+): boolean {
+  if (isSystemAdmin(user)) return true;
+  const entry = policy.tenantEditable.find(
+    (candidate) => candidate.slug === target.slug && candidate.kind === target.kind,
+  );
+  return entry !== undefined && hasAccess(user, entry.access);
+}
+
+export function refuseTemplateEdit(
+  policy: TemplateEditPolicy,
+  user: EditUser,
+  target: EditTarget,
+): WriteFailure | null {
+  if (mayEditTemplate(policy, user, target)) return null;
+  return writeFailure(
+    new AccessDeniedError({
+      i18nKey: "templateResolver.errors.templateNotTenantEditable",
+      details: { reason: TemplateResolverErrors.templateNotTenantEditable },
+    }),
+  );
+}
+
+// Fail closed: a missing row gives a non-SystemAdmin the same refusal as a locked one,
+// so the response never reveals whether an id exists. SystemAdmin keeps the 404.
+export function refuseMissingTemplate(
+  policy: TemplateEditPolicy,
+  user: EditUser,
+): WriteFailure | null {
+  return isSystemAdmin(user) ? null : refuseTemplateEdit(policy, user, { slug: "", kind: "" });
+}
+
+export async function refuseTemplateEditById(
+  db: HandlerContext["db"],
+  policy: TemplateEditPolicy,
+  user: EditUser,
+  tenantId: string,
+  templateId: string,
+): Promise<WriteFailure | null> {
+  if (isSystemAdmin(user)) return null;
+  const row = await fetchOne<TemplateResourceRow>(db, templateResourcesTable, {
+    tenantId,
+    id: templateId,
+  });
+  return row === undefined
+    ? refuseMissingTemplate(policy, user)
+    : refuseTemplateEdit(policy, user, row);
+}

package/packages/bundled-features/src/template-resolver/template-preview.ts

@@ -1,20 +1,24 @@
 import { selectMany } from "@cosmicdrift/kumiko-framework/db";
-import type {
-  HandlerContext,
-  SessionUser,
-  TemplateListVariableDef,
-  TemplateScalarVariableDef,
-  TemplateVariables,
+import {
+  type HandlerContext,
+  type SessionUser,
+  type TemplateListVariableDef,
+  type TemplateScalarVariableDef,
+  type TemplateVariableDef,
+  type TemplateVariables,
+  templateVariablesToZod,
 } from "@cosmicdrift/kumiko-framework/engine";
 import {
   type KumikoError,
   NotFoundError,
   UnprocessableError,
   ValidationError,
+  validationErrorFromZod,
 } from "@cosmicdrift/kumiko-framework/errors";
 import { fileRefsTable } from "@cosmicdrift/kumiko-framework/files";
 import { createI18n } from "@cosmicdrift/kumiko-framework/i18n";
-import { escapeHtml } from "@cosmicdrift/kumiko-headless";
+import { escapeHtml } from "@cosmicdrift/kumiko-renderer/headless";
+import * as z from "zod";
 import { createEmailAttachmentReader, createTemplateMailRenderer } from "../delivery/index.ts";
 import { fileContextForTenant } from "../file-foundation/index.ts";
 import {
@@ -117,6 +121,12 @@ function sampleList(def: TemplateListVariableDef, labelText: LabelText): Record<
   return rows;
 }
 
+function sampleValueFor(name: string, def: TemplateVariableDef, labelText: LabelText): unknown {
+  // An images variable has no sample: file ids are record data, never preview content.
+  if (def.type === "images") return [];
+  return def.type === "list" ? sampleList(def, labelText) : sampleScalar(name, def, labelText);
+}
+
 // Declared examples win; the fallbacks are deterministic so a preview never differs between calls.
 export function sampleValuesFor(
   variables: TemplateVariables,
@@ -124,8 +134,7 @@ export function sampleValuesFor(
 ): Record<string, unknown> {
   const values: Record<string, unknown> = {};
   for (const [name, def] of Object.entries(variables)) {
-    values[name] =
-      def.type === "list" ? sampleList(def, labelText) : sampleScalar(name, def, labelText);
+    values[name] = sampleValueFor(name, def, labelText);
   }
   return values;
 }
@@ -177,6 +186,8 @@ export type TemplatePreviewInput = {
   readonly content?: string | undefined;
   readonly meta?: unknown;
   readonly variableSchema: Readonly<Record<string, unknown>>;
+  /** Replaces the declared example values for the named variables. */
+  readonly variables?: Readonly<Record<string, unknown>> | undefined;
 };
 
 type ValidationResponse = Awaited<ReturnType<typeof validateTemplateDraft>>["response"];
@@ -197,6 +208,7 @@ export type TemplatePreview = {
     readonly scope: TemplateScope;
     readonly version: number;
   } | null;
+  /** The values the preview was actually rendered with: examples plus any overrides. */
   readonly sampleValues: Readonly<Record<string, unknown>>;
   readonly checks: readonly PreviewCheck[];
   readonly validation: ValidationResponse;
@@ -689,7 +701,17 @@ export async function renderTemplatePreview(
 
   const content = evaluation.content ?? "";
   const meta = parseTemplateMeta(input.kind, parseStoredJson(evaluation.metaJson));
-  const sampleValues = sampleValuesFor(validation.variables, labelTextFor(ctx, input.locale));
+  const exampleValues = sampleValuesFor(validation.variables, labelTextFor(ctx, input.locale));
+  let sampleValues = exampleValues;
+  if (input.variables !== undefined) {
+    const overrides = z.object({
+      variables: templateVariablesToZod(validation.variables).partial().strict(),
+    });
+    const checked = overrides.safeParse({ variables: input.variables });
+    if (!checked.success) return failed(validationErrorFromZod(checked.error));
+    // Original values, not the parse result: parsing would strip keys inside list rows.
+    sampleValues = { ...exampleValues, ...input.variables };
+  }
 
   if (input.kind === "document-pdf") {
     return renderDocumentPreview(ctx, user, {

package/packages/bundled-features/src/template-resolver/template-validation.ts

@@ -65,6 +65,7 @@ const scalarVariableSchema = z.discriminatedUnion("type", [
 
 const variableDefSchema = z.union([
   scalarVariableSchema,
+  z.object({ ...variableCommon, type: z.literal("images") }),
   z.object({
     ...variableCommon,
     type: z.literal("list"),
@@ -76,7 +77,7 @@ const variableDefSchema = z.union([
 // A stored variableSchema value is either a bare string (legacy "this is a text
 // variable") or a TemplateVariableDef object; anything else is not declared and
 // therefore shows up as an unknown placeholder instead of being guessed at.
-function toVariableDef(raw: unknown): TemplateVariableDef | null {
+export function toVariableDef(raw: unknown): TemplateVariableDef | null {
   if (typeof raw === "string") return { type: "text" };
   const parsed = variableDefSchema.safeParse(raw);
   return parsed.success ? parsed.data : null;
@@ -126,17 +127,24 @@ function listItemFields(
   return def?.type === "list" ? def.item : {};
 }
 
+// An images variable holds file ids: as text it would leak them, so only an images block
+// (and a condition on its presence) may name it.
 function isKnownName(
   name: string,
   scope: PlaceholderScope,
   itemFields: Readonly<Record<string, unknown>>,
+  allowImages = false,
 ): Resolution {
   const { variables } = scope;
   const root = rootName(name);
   // Declared variables and item fields are scalars: a dotted path under one never renders a value.
   if (Object.hasOwn(itemFields, name)) return { known: true, used: "" };
   if (scope.systemPlaceholders.has(root)) return { known: true, used: "" };
-  if (Object.hasOwn(variables, name)) return { known: true, used: name };
+  if (Object.hasOwn(variables, name)) {
+    return variables[name]?.type === "images" && !allowImages
+      ? { known: false, used: "" }
+      : { known: true, used: name };
+  }
   return { known: false, used: "" };
 }
 
@@ -144,8 +152,9 @@ function recordName(
   name: string,
   itemFields: Readonly<Record<string, unknown>>,
   scope: PlaceholderScope,
+  allowImages = false,
 ) {
-  const resolution = isKnownName(name, scope, itemFields);
+  const resolution = isKnownName(name, scope, itemFields, allowImages);
   if (!resolution.known) scope.unknown.add(name);
   else if (resolution.used !== "") scope.used.add(resolution.used);
 }
@@ -154,10 +163,18 @@ function enclosingEachName(element: ScanElement): string | null {
   return element.closest("tr[data-each]")?.getAttribute("data-each") ?? null;
 }
 
-const NAME_ATTRIBUTE_BY_TAG: Readonly<Record<string, string>> = {
-  span: "data-variable",
-  div: "data-steps",
-};
+function nameAttributeOf(element: ScanElement): string | undefined {
+  const tag = element.tagName.toLowerCase();
+  if (tag === "span") return "data-variable";
+  if (tag !== "div") return undefined;
+  return element.hasAttribute("data-images") ? "data-images" : "data-steps";
+}
+
+function recordImagesName(name: string, scope: PlaceholderScope): void {
+  const def = Object.hasOwn(scope.variables, name) ? scope.variables[name] : undefined;
+  if (def?.type === "images") scope.used.add(name);
+  else scope.unknown.add(name);
+}
 
 function scanRepeatRows(root: ScanElement, scope: PlaceholderScope): void {
   for (const element of Array.from(root.querySelectorAll("tr[data-each]"))) {
@@ -174,18 +191,22 @@ function scanConditions(root: ScanElement, scope: PlaceholderScope): void {
       scope.variables,
       enclosingEachName(conditionScopeElement(element)),
     );
-    recordName(element.getAttribute(DOCUMENT_CONDITION_ATTRIBUTE) ?? "", itemFields, scope);
+    recordName(element.getAttribute(DOCUMENT_CONDITION_ATTRIBUTE) ?? "", itemFields, scope, true);
   }
 }
 
 function scanReferences(root: ScanElement, scope: PlaceholderScope): void {
   for (const element of Array.from(
-    root.querySelectorAll("span[data-variable], div[data-steps], a[href], img[data-resource]"),
+    root.querySelectorAll(
+      "span[data-variable], div[data-steps], div[data-images], a[href], img[data-resource]",
+    ),
   )) {
     const itemFields = listItemFields(scope.variables, enclosingEachName(element));
     const tag = element.tagName.toLowerCase();
-    const nameAttribute = NAME_ATTRIBUTE_BY_TAG[tag];
-    if (nameAttribute !== undefined) {
+    const nameAttribute = nameAttributeOf(element);
+    if (nameAttribute === "data-images") {
+      recordImagesName(element.getAttribute(nameAttribute) ?? "", scope);
+    } else if (nameAttribute !== undefined) {
       recordName(element.getAttribute(nameAttribute) ?? "", itemFields, scope);
     } else if (tag === "a") {
       const href = element.getAttribute("href") ?? "";

package/packages/bundled-features/src/template-resolver/web/client-plugin.tsx

@@ -1,4 +1,4 @@
-import { EMPTY_VALUE_PLACEHOLDER } from "@cosmicdrift/kumiko-headless";
+import { EMPTY_VALUE_PLACEHOLDER } from "@cosmicdrift/kumiko-renderer/headless";
 // @runtime client
 // Client feature factory for the text-block content tree. Apps mount it via
 // createKumikoApp({ clientFeatures: [textBlocksClient()] }); it loads the
@@ -12,7 +12,6 @@ import { EMPTY_VALUE_PLACEHOLDER } from "@cosmicdrift/kumiko-headless";
 // (a hint that the slug exists but is empty).
 
 import { useShellUser } from "@cosmicdrift/kumiko-bundled-features/auth-email-password/web";
-import { CSRF_HEADER_NAME, readCsrfToken } from "@cosmicdrift/kumiko-dispatcher-live";
 import type {
   TargetRef,
   TreeChildrenSubscribe,
@@ -28,11 +27,12 @@ import {
   useQuery,
   useTranslation,
 } from "@cosmicdrift/kumiko-renderer";
+import { CSRF_HEADER_NAME, readCsrfToken } from "@cosmicdrift/kumiko-renderer/live";
 import {
   type ClientFeatureDefinition,
   PlainContentEditor,
   RichContentEditor,
-} from "@cosmicdrift/kumiko-renderer-web";
+} from "@cosmicdrift/kumiko-renderer/web";
 import type { ContentEditorFormat } from "@cosmicdrift/kumiko-types/nav";
 import { type FormEvent, type ReactNode, useEffect, useId, useState } from "react";
 import {

package/packages/bundled-features/src/template-resolver/web/document-editor-extensions.ts

@@ -5,6 +5,7 @@ import { Dropcursor, Gapcursor, Placeholder, UndoRedo } from "@tiptap/extensions
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import {
   DocumentButton,
+  DocumentImages,
   DocumentPageBreak,
   DocumentResource,
   DocumentSteps,
@@ -23,6 +24,7 @@ export type DocumentEditorLabels = {
   readonly pageBreak: string;
   readonly button?: string;
   readonly steps?: string;
+  readonly images?: string;
   /** Canvas block label of an image, e.g. "Image · inline". */
   readonly imageBlock?: string;
   readonly variableLabels?: Readonly<Record<string, string>>;
@@ -206,6 +208,31 @@ function createStepsView(labels: DocumentEditorLabels): NodeViewRenderer {
   };
 }
 
+// A sketch only: the photos are record data, known at render time.
+function createImagesView(labels: DocumentEditorLabels): NodeViewRenderer {
+  return ({ node }) => {
+    const dom = createElementWithClass(
+      "div",
+      "relative my-3 rounded border border-dashed border-input px-3 pb-3 pt-4",
+    );
+    dom.setAttribute(DOCUMENT_BLOCK_ATTRIBUTE, "");
+    dom.contentEditable = "false";
+    const variable = String(node.attrs["variable"]);
+    const variableLabels = labels.variableLabels ?? {};
+    const variableLabel = Object.hasOwn(variableLabels, variable)
+      ? variableLabels[variable]
+      : undefined;
+    dom.append(createBlockLabel(`${labels.images ?? "Photos"} · ${variableLabel ?? variable}`));
+    const grid = createElementWithClass("div", "grid grid-cols-2 gap-1.5");
+    grid.append(
+      createElementWithClass("div", "h-12 rounded bg-muted"),
+      createElementWithClass("div", "h-12 rounded bg-muted"),
+    );
+    dom.append(grid);
+    return { dom };
+  };
+}
+
 // Replaced by name, not appended: the schema must keep exactly one node per
 // name, and only the editor view differs from the shared document schema.
 export function createDocumentEditorExtensions(labels: DocumentEditorLabels): Extensions {
@@ -224,6 +251,8 @@ export function createDocumentEditorExtensions(labels: DocumentEditorLabels): Ex
           : extension;
       case DocumentSteps.name:
         return DocumentSteps.extend({ addNodeView: () => createStepsView(labels) });
+      case DocumentImages.name:
+        return DocumentImages.extend({ addNodeView: () => createImagesView(labels) });
       case DocumentPageBreak.name:
         return DocumentPageBreak.extend({
           addNodeView: () => createPageBreakView(labels.pageBreak),