@thebes/cadmea 1.4.0 → 1.6.0

package/dist/index/index.d.ts

@@ -128,6 +128,12 @@ interface CollectionEditProps {
    * consuming route) since `CollectionEdit` has no router access itself.
    */
   onDirtyChange?: (dirty: boolean) => void;
+  /**
+   * Fired with the current editable values on every change — wire this to a
+   * side-by-side live preview (e.g. `VisualEditingPane`'s `previewValues`).
+   * Fires on mount with the initial values too.
+   */
+  onValuesChange?: (values: Record<string, unknown>) => void;
   /**
    * Per-field custom editor widgets (issue #17), keyed by field name. When a
    * field has a widget here, it's rendered instead of the generic input for
@@ -223,6 +229,17 @@ interface VisualEditingPaneProps {
   /** Class for the iframe (size it via the consumer's layout). */
   class?: string;
   title?: string;
+  /**
+   * In-progress form values to push into the preview for as-you-type live
+   * updates. Posted to the iframe on every change; the preview page must call
+   * `mountPreviewSync` to receive them. Requires `previewTarget`.
+   */
+  previewValues?: Record<string, unknown>;
+  /** Which document `previewValues` belong to (matched by the preview). */
+  previewTarget?: {
+    collection: string;
+    id: number;
+  };
 }
 declare function VisualEditingPane(props: VisualEditingPaneProps): import("solid-js").JSX.Element;
 //#endregion

package/dist/index/index.js

@@ -1,6 +1,6 @@
 import { className, createComponent, delegateEvents, effect, insert, memo, setAttribute, setStyleProperty, template, use } from "solid-js/web";
 import { createForm } from "@tanstack/solid-form";
-import { VISUAL_EDIT_MESSAGE, validateDocument } from "@thebes/cadmus/cms";
+import { PREVIEW_VALUES_MESSAGE, VISUAL_EDIT_MESSAGE, validateDocument } from "@thebes/cadmus/cms";
 import { For, Index, Show, Suspense, createEffect, createMemo, createSignal, lazy, onCleanup, onMount } from "solid-js";
 import { createSolidTable, flexRender, getCoreRowModel } from "@tanstack/solid-table";
 //#region src/CollectionEdit.tsx
@@ -52,6 +52,7 @@ function CollectionEdit(props) {
 	const isDefaultValue = form.useStore((s) => s.isDefaultValue);
 	createEffect(() => props.onDirtyChange?.(!isDefaultValue()));
 	const formValues = form.useStore((s) => s.values);
+	createEffect(() => props.onValuesChange?.(editablePayload(formValues())));
 	function editablePayload(value) {
 		return Object.fromEntries(Object.entries(value).filter(([key]) => props.config.fields[key]?.type !== "date"));
 	}
@@ -1387,6 +1388,8 @@ function originOf(url) {
 	}
 }
 function VisualEditingPane(props) {
+	let iframe;
+	const targetOrigin = () => props.allowedOrigin ?? originOf(props.src) ?? "*";
 	onMount(() => {
 		const expected = props.allowedOrigin ?? originOf(props.src);
 		const handler = (event) => {
@@ -1397,8 +1400,24 @@ function VisualEditingPane(props) {
 		window.addEventListener("message", handler);
 		onCleanup(() => window.removeEventListener("message", handler));
 	});
+	createEffect(() => {
+		const values = props.previewValues;
+		const target = props.previewTarget;
+		const win = iframe?.contentWindow;
+		if (!values || !target || !win) return;
+		const message = {
+			type: PREVIEW_VALUES_MESSAGE,
+			collection: target.collection,
+			id: target.id,
+			values
+		};
+		win.postMessage(message, targetOrigin());
+	});
 	return (() => {
 		var _el$ = _tmpl$();
+		use((el) => {
+			iframe = el;
+		}, _el$);
 		effect((_p$) => {
 			var _v$ = props.src, _v$2 = props.title ?? "Preview", _v$3 = props.class ?? "h-full w-full border-0";
 			_v$ !== _p$.e && setAttribute(_el$, "src", _p$.e = _v$);