@cosmicdrift/kumiko-bundled-features 0.182.0 → 0.182.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-bundled-features",
-  "version": "0.182.0",
+  "version": "0.182.1",
   "description": "Built-in features — tenant, user, auth, delivery. The stuff you'd rewrite anyway, already typed.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -121,12 +121,12 @@
     "./step-dispatcher": "./src/step-dispatcher/index.ts"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.182.0",
-    "@cosmicdrift/kumiko-framework": "0.182.0",
-    "@cosmicdrift/kumiko-headless": "0.182.0",
-    "@cosmicdrift/kumiko-renderer": "0.182.0",
-    "@cosmicdrift/kumiko-renderer-web": "0.182.0",
-    "@cosmicdrift/kumiko-types": "0.182.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.182.1",
+    "@cosmicdrift/kumiko-framework": "0.182.1",
+    "@cosmicdrift/kumiko-headless": "0.182.1",
+    "@cosmicdrift/kumiko-renderer": "0.182.1",
+    "@cosmicdrift/kumiko-renderer-web": "0.182.1",
+    "@cosmicdrift/kumiko-types": "0.182.1",
     "@mollie/api-client": "^4.5.0",
     "imapflow": "^1.3.3",
     "mailparser": "^3.9.8",

package/src/template-resolver/web/client-plugin.tsx

@@ -19,6 +19,7 @@ import type {
 } from "@cosmicdrift/kumiko-framework/engine";
 import {
   CONTENT_EDITOR_ELEMENT_ID,
+  ContentPreview,
   type FeatureSchema,
   useAppFeatures,
   useContentEditor,
@@ -224,12 +225,21 @@ function findVariableSchema(
   features: readonly FeatureSchema[],
   collectionId?: string,
 ): readonly string[] {
-  if (collectionId === undefined) return [];
+  return Object.keys(findVariableExamples(features, collectionId));
+}
+
+// Same lookup, for the example values the Preview substitutes in for
+// `{{name}}` — the values half of the same variableSchema map.
+function findVariableExamples(
+  features: readonly FeatureSchema[],
+  collectionId?: string,
+): Readonly<Record<string, string>> {
+  if (collectionId === undefined) return {};
   for (const feature of features) {
     const match = feature.contentCollections?.find((c) => c.id === collectionId);
-    if (match !== undefined) return Object.keys(match.variableSchema ?? {});
+    if (match !== undefined) return match.variableSchema ?? {};
   }
-  return [];
+  return {};
 }
 
 // Edit form: loads the current values via by-slug, lets TenantAdmin and
@@ -278,6 +288,7 @@ function TextBlockEditor({
   const features = useAppFeatures();
   const contentFormat = findContentFormat(features, collectionId);
   const variables = findVariableSchema(features, collectionId);
+  const variableExamples = findVariableExamples(features, collectionId);
   const ContentEditor = useContentEditor(contentFormat);
   const canWrite =
     user?.roles.includes("TenantAdmin") === true || user?.roles.includes("SystemAdmin") === true;
@@ -302,6 +313,7 @@ function TextBlockEditor({
 
   const [title, setTitle] = useState("");
   const [content, setContent] = useState("");
+  const [previewing, setPreviewing] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [saveError, setSaveError] = useState<string | null>(null);
   const [savedMsg, setSavedMsg] = useState<string | null>(null);
@@ -390,13 +402,34 @@ function TextBlockEditor({
           required
         />
       </Field>
-      <Field id={CONTENT_EDITOR_ELEMENT_ID} label={t("template-resolver.editor.contentLabel")}>
-        <ContentEditor
-          value={content}
-          onChange={setContent}
-          variables={variables}
-          readOnly={disabled}
-        />
+      <Field
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        label={t("template-resolver.editor.contentLabel")}
+        labelAppendix={
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            onClick={() => setPreviewing((p) => !p)}
+          >
+            {previewing ? t("kumiko.contentEditor.editMode") : t("kumiko.contentEditor.preview")}
+          </Button>
+        }
+      >
+        {previewing ? (
+          <ContentPreview
+            content={content}
+            variables={variableExamples}
+            contentFormat={contentFormat}
+          />
+        ) : (
+          <ContentEditor
+            value={content}
+            onChange={setContent}
+            variables={variables}
+            readOnly={disabled}
+          />
+        )}
       </Field>
       {saveError !== null && <Banner variant="error">{saveError}</Banner>}
       {savedMsg !== null && <Banner variant="info">{savedMsg}</Banner>}