@websline/cms-view-utils 1.14.0 → 1.15.0

package/dist/previewBridge.global.js

@@ -1 +1 @@
-(()=>{var r={BLOCK_ADD:"BLOCK_ADD",BLOCK_COMMENT:"BLOCK_COMMENT",BLOCK_DELETE:"BLOCK_DELETE",BLOCK_EDIT:"BLOCK_EDIT",BLOCK_POSITION:"BLOCK_POSITION",BLOCK_SHOW:"BLOCK_SHOW",BLOCK_HIDE:"BLOCK_HIDE",PATH_CHANGED:"PATH_CHANGED",PATH_ON_LOAD:"PATH_ON_LOAD",IFRAME_DOM_LOADED:"IFRAME_DOM_LOADED",COMMENT_COUNTS:"COMMENT_COUNTS",CURRENT_BLOCK_EDIT:"CURRENT_BLOCK_EDIT",SCROLL_TO_BLOCK:"SCROLL_TO_BLOCK"},_=(i,O={})=>{i&&window.parent!==window&&window.parent.postMessage({type:i,payload:O},"*")};(function(){if(window.parent===window||window.__PREVIEW_BRIDGE_INITIALIZED__)return;window.__PREVIEW_BRIDGE_INITIALIZED__=!0;let i=t=>t.metaKey||t.ctrlKey||t.shiftKey,O=t=>{let n=t.target.closest("a[href]");if(!n||n.target==="_blank"||i(t))return;let o=new URL(n.href,window.location.origin);o.origin===window.location.origin&&(t.preventDefault(),t.stopPropagation(),_(r.PATH_CHANGED,{path:o.pathname}))};document.addEventListener("click",O,!0),_(r.PATH_ON_LOAD,{path:window.location.pathname}),window.addEventListener("load",()=>{_(r.IFRAME_DOM_LOADED)});let L=t=>{let n=`[data-cms-block-id="${t}"]`,o=0,e=10,a=setInterval(()=>{let E=document.querySelector(n);E&&(E.scrollIntoView({behavior:"smooth",block:"start"}),clearInterval(a)),++o>=e&&clearInterval(a)},100)};window.addEventListener("message",t=>{let{type:n,payload:o}=t.data||{};if(n&&n===r.SCROLL_TO_BLOCK){let{draftBlockUuid:e}=o||{};if(!e)return;L(e)}})})();})();
+(()=>{var _={BLOCK_ADD:"BLOCK_ADD",BLOCK_COMMENT:"BLOCK_COMMENT",BLOCK_DELETE:"BLOCK_DELETE",BLOCK_EDIT:"BLOCK_EDIT",BLOCK_POSITION:"BLOCK_POSITION",BLOCK_SHOW:"BLOCK_SHOW",BLOCK_HIDE:"BLOCK_HIDE",PATH_CHANGED:"PATH_CHANGED",PATH_ON_LOAD:"PATH_ON_LOAD",IFRAME_DOM_LOADED:"IFRAME_DOM_LOADED",COMMENT_COUNTS:"COMMENT_COUNTS",CONTENT_READY:"CONTENT_READY",CONTENT_CHANGED:"CONTENT_CHANGED",CONTENT_PREVIEW:"CONTENT_PREVIEW",CONTENT_APPLIED:"CONTENT_APPLIED",CONTENT_FAILED:"CONTENT_FAILED",CURRENT_BLOCK_EDIT:"CURRENT_BLOCK_EDIT",SCROLL_TO_BLOCK:"SCROLL_TO_BLOCK"},r=(o,i={})=>{o&&window.parent!==window&&window.parent.postMessage({type:o,payload:i},"*")};(function(){if(window.parent===window||window.__PREVIEW_BRIDGE_INITIALIZED__)return;window.__PREVIEW_BRIDGE_INITIALIZED__=!0;let o=t=>t.metaKey||t.ctrlKey||t.shiftKey,i=t=>{let n=t.target.closest("a[href]");if(!n||n.target==="_blank"||o(t))return;let E=new URL(n.href,window.location.origin);E.origin===window.location.origin&&(t.preventDefault(),t.stopPropagation(),r(_.PATH_CHANGED,{path:E.pathname}))};document.addEventListener("click",i,!0),r(_.PATH_ON_LOAD,{path:window.location.pathname}),window.addEventListener("load",()=>{r(_.IFRAME_DOM_LOADED)});let C=t=>{let n=`[data-cms-block-id="${t}"]`,E=0,O=10,e=setInterval(()=>{let T=document.querySelector(n);T&&(T.scrollIntoView({behavior:"smooth",block:"start"}),clearInterval(e)),++E>=O&&clearInterval(e)},100)};window.addEventListener("message",t=>{let{type:n,payload:E}=t.data||{};if(n&&n===_.SCROLL_TO_BLOCK){let{draftBlockUuid:O}=E||{};if(!O)return;C(O)}})})();})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "type": "module",
   "files": [
     "src",

package/src/blocks/registry.js

@@ -0,0 +1,34 @@
+/**
+ * Props for one block, or null for an unknown block type. Blocks without data are
+ * normalized here so every mapper in a site's registry can read `data`
+ * unconditionally.
+ */
+const resolveBlockProps = (registry, block, context = {}) => {
+	const entry = registry?.[block?.identifier];
+
+	if (!entry) return null;
+
+	return entry.props({ ...block, data: block?.data ?? {} }, context);
+};
+
+/**
+ * A registry entry declares `hydrate` to say the block has to run client-side on the
+ * live site. Astro resolves a client directive at build time and needs its component
+ * by name, so the directive itself can only live in the site's live renderer — a
+ * component read from a registry cannot carry one.
+ *
+ * Call this where the by-name lines end: reaching it means the block declared
+ * hydration that nobody wired, which would render server-only and lose its client
+ * behaviour without a single error. Loud while developing, silent in production.
+ */
+const assertHydrationWired = (block, entry) => {
+	if (!import.meta.env.DEV) return;
+	if (!entry?.hydrate) return;
+
+	throw new Error(
+		`Block "${block?.identifier}" declares hydrate: "${entry.hydrate}" but has no line ` +
+			"in the site's live renderer, so it would render server-only.",
+	);
+};
+
+export { assertHydrationWired, resolveBlockProps };

package/src/cms/fetchPage.js

@@ -60,6 +60,8 @@ const fetchPage = async (context) => {
 	}
 	if (isCMSEditRoute) {
 		context.locals._edit = true;
+		// The editor's client-side renderer reloads the draft through the CMS proxy.
+		context.locals._draftUuid = draftUuid;
 	}
 };
 

package/src/components/BlockEditList.svelte

@@ -0,0 +1,50 @@
+<script>
+	import AddBlockPlaceholder from "./AddBlockPlaceholder.svelte";
+	import BlockEditSlot from "./BlockEditSlot.svelte";
+	import { createEditorContent } from "../editor/editorContent.svelte.js";
+	import { resolveBlockProps } from "../blocks/registry.js";
+
+	let {
+		autoTranslate = false,
+		cmsLocale = "de",
+		content = [],
+		draftUuid,
+		locale = "de",
+		placeholderClass = "",
+		registry = {},
+		spacingValues,
+	} = $props();
+
+	// Server-rendered on first paint, then this island owns the list: the CMS signals
+	// a change, the store reloads the blocks, and only what actually differs is
+	// re-rendered. No page reload, no block swapped as HTML.
+	//
+	// Seeding from the props once is the point — Astro hands them over at hydration and
+	// never changes them again.
+	// svelte-ignore state_referenced_locally
+	const editorContent = createEditorContent(content, { draftUuid });
+
+	let blocks = $derived(editorContent.blocks);
+</script>
+
+{#each blocks as block, position (block.uuid)}
+	{@const entry = registry[block.identifier]}
+
+	<BlockEditSlot
+		{autoTranslate}
+		{block}
+		component={entry?.component}
+		locale={cmsLocale}
+		{position}
+		props={resolveBlockProps(registry, block, { locale })}
+		schema={entry?.schema}
+		{spacingValues} />
+{/each}
+
+<div class={`mt-10 flex w-full items-center justify-center px-4 ${placeholderClass}`}>
+	<AddBlockPlaceholder
+		disabled={autoTranslate}
+		class="w-full"
+		countBlockItems={blocks.length}
+		locale={cmsLocale} />
+</div>

package/src/components/BlockEditSlot.svelte

@@ -0,0 +1,47 @@
+<script>
+	import BlockWrapper from "./BlockWrapper.svelte";
+	import EditableBlock from "./EditableBlock.svelte";
+	import { isValid } from "../editor/blockValidation.js";
+
+	let {
+		autoTranslate = false,
+		block,
+		component: Component,
+		locale = "de",
+		position,
+		props,
+		schema,
+		spacingValues,
+	} = $props();
+
+	// A block without a schema cannot be checked — child-block types have none. A type the
+	// site does not know is marked invalid, so the author sees it without its data.
+	let isValidBlock = $derived(
+		Component ? (schema ? isValid(schema, block) : true) : false,
+	);
+
+	const labels = {
+		de: { failed: "Block konnte nicht dargestellt werden" },
+		en: { failed: "Block could not be rendered" },
+	};
+
+	let t = $derived(labels[locale] ?? labels.de);
+</script>
+
+<BlockWrapper {block} {spacingValues}>
+	<EditableBlock {autoTranslate} {block} {isValidBlock} {locale} {position}>
+		{#if Component}
+			<!-- The editor re-renders on every change, so one throwing block must not take
+			     the rest of the list with it. -->
+			<svelte:boundary onerror={(error) => console.error(block?.identifier, error)}>
+				<Component {...props ?? {}} />
+
+				{#snippet failed(error)}
+					<div class="mx-auto flex max-w-300 justify-center text-[#ff8b8b]">
+						{t.failed}: {error?.message ?? error}
+					</div>
+				{/snippet}
+			</svelte:boundary>
+		{/if}
+	</EditableBlock>
+</BlockWrapper>

package/src/components/BlockSlot.astro

@@ -0,0 +1,17 @@
+---
+import BlockWrapper from "./BlockWrapper.svelte";
+import { isValid } from "../editor/blockValidation.js";
+
+const { block, schema, spacingValues } = Astro.props;
+
+// A block without a schema cannot be checked — child-block types have none.
+const isValidBlock = schema ? isValid(schema, block) : true;
+---
+
+{
+	isValidBlock && (
+		<BlockWrapper {block} {spacingValues}>
+			<slot />
+		</BlockWrapper>
+	)
+}

package/src/components/Picture.svelte

@@ -16,7 +16,9 @@
 	const buildSrcset = (source) =>
 		source.url2x ? `${source.url} 1x, ${source.url2x} 2x` : source.url;
 
-	const data = (() => {
+	// Derived, not computed once: in the editor this component keeps its instance
+	// while the block's image changes underneath it.
+	const data = $derived.by(() => {
 		if (!image || !image.formats) {
 			return {
 				resolved: [],
@@ -75,7 +77,7 @@
 		const alt = image.alt ?? image.title ?? "";
 
 		return { resolved, fallbackFormat, fallbackSrc, alt };
-	})();
+	});
 </script>
 
 {#if data.resolved.length}

package/src/editor/editorContent.svelte.js

@@ -0,0 +1,168 @@
+import { EVENTS, notifyCMS } from "./notify.js";
+
+const fetchDraftContent = async (draftUuid) => {
+	const response = await fetch(`/api/cms/api/public/pages/preview/${draftUuid}`);
+
+	if (!response.ok) {
+		throw new Error(`Draft content request failed: ${response.status}`);
+	}
+
+	const data = await response.json();
+
+	return Array.isArray(data?.content) ? data.content : [];
+};
+
+const patchKey = ({ draftBlockUuid, itemUuid, identifier }) =>
+	`${draftBlockUuid}|${itemUuid ?? ""}|${identifier}`;
+
+const sameValue = (a, b) => JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+
+/**
+ * Only primitive values are patched live. Structured fields — media, filters,
+ * dynamic content — reach the block fully resolved by the CMS; patching them from
+ * authoring data would render the block wrong or fail its schema, so they wait for
+ * the authoritative reload.
+ */
+const isLivePatchable = (current, next) =>
+	typeof next !== "object" && (current == null || typeof current !== "object");
+
+const withData = (entity, identifier, value) => ({
+	...entity,
+	data: { ...(entity.data ?? {}), [identifier]: value },
+});
+
+/** Repeater items nest arbitrarily deep, so the item is searched by uuid. */
+const patchItem = (items, itemUuid, identifier, value) =>
+	(items ?? []).map((item) => {
+		if (item?.uuid === itemUuid) return withData(item, identifier, value);
+		if (!item?.blocks?.length) return item;
+
+		return { ...item, blocks: patchItem(item.blocks, itemUuid, identifier, value) };
+	});
+
+const applyPatch = (blocks, patch) =>
+	blocks.map((block) => {
+		if (block?.uuid !== patch.draftBlockUuid) return block;
+
+		if (!patch.itemUuid) return withData(block, patch.identifier, patch.value);
+
+		return {
+			...block,
+			blocks: patchItem(block.blocks, patch.itemUuid, patch.identifier, patch.value),
+		};
+	});
+
+const readValue = (blocks, patch) => {
+	const block = blocks.find((entry) => entry?.uuid === patch.draftBlockUuid);
+
+	if (!block) return undefined;
+	if (!patch.itemUuid) return block.data?.[patch.identifier];
+
+	const find = (items) => {
+		for (const item of items ?? []) {
+			if (item?.uuid === patch.itemUuid) return item;
+
+			const nested = find(item?.blocks);
+			if (nested) return nested;
+		}
+	};
+
+	return find(block.blocks)?.data?.[patch.identifier];
+};
+
+/**
+ * Owns the block list while the editor is open.
+ *
+ * Two channels feed it. Every keystroke arrives as a preview patch and is applied
+ * without touching the network, so typing shows up immediately. The CMS writes to the
+ * database on its own delay and only then signals a change; the blocks are reloaded
+ * from the CMS, which keeps dynamic content server-resolved.
+ *
+ * A reload can answer with text older than what the user has typed since, so pending
+ * patches are re-applied on top of it. A patch is released once the CMS reports that it
+ * has persisted exactly that value: from then on the server's answer wins, including
+ * the rewrites it does on the way — internal links, sanitizing, headline levels.
+ *
+ * Call this during component setup; it installs its own message listener.
+ */
+const createEditorContent = (initialBlocks, { draftUuid } = {}) => {
+	let blocks = $state([...(initialBlocks ?? [])]);
+	let latestRequest = 0;
+	const pendingPatches = new Map();
+
+	/**
+	 * The write that just landed carries what was typed last, so that patch has done
+	 * its job. A newer keystroke keeps its own patch — its write is still pending.
+	 */
+	const release = (persisted) => {
+		if (!persisted?.draftBlockUuid || !persisted?.identifier) return;
+
+		const key = patchKey(persisted);
+
+		if (sameValue(pendingPatches.get(key)?.value, persisted.value)) {
+			pendingPatches.delete(key);
+		}
+	};
+
+	const settle = (next) => {
+		for (const patch of pendingPatches.values()) {
+			next = applyPatch(next, patch);
+		}
+
+		return next;
+	};
+
+	const reload = async (persisted) => {
+		if (!draftUuid) return;
+
+		release(persisted);
+
+		const request = ++latestRequest;
+
+		try {
+			const next = await fetchDraftContent(draftUuid);
+
+			// A newer signal already sent its own request — that answer wins.
+			if (request !== latestRequest) return;
+
+			blocks = settle(next);
+			notifyCMS(EVENTS.CONTENT_APPLIED);
+		} catch {
+			notifyCMS(EVENTS.CONTENT_FAILED);
+		}
+	};
+
+	const preview = (patch) => {
+		if (!patch?.draftBlockUuid || !patch?.identifier) return;
+		if (!isLivePatchable(readValue(blocks, patch), patch.value)) return;
+
+		pendingPatches.set(patchKey(patch), patch);
+		blocks = applyPatch(blocks, patch);
+	};
+
+	const handleMessage = (event) => {
+		const { type, payload } = event.data || {};
+
+		if (type === EVENTS.CONTENT_CHANGED) reload(payload?.persisted);
+		if (type === EVENTS.CONTENT_PREVIEW) preview(payload);
+	};
+
+	$effect(() => {
+		window.addEventListener("message", handleMessage);
+
+		// Tells the CMS that this preview renders the block list itself, so it can send
+		// changes as a signal. A website that has not been rebuilt yet never says this
+		// and keeps getting a full reload.
+		notifyCMS(EVENTS.CONTENT_READY);
+
+		return () => window.removeEventListener("message", handleMessage);
+	});
+
+	return {
+		get blocks() {
+			return blocks;
+		},
+	};
+};
+
+export { createEditorContent };

package/src/editor/editorProps.js

@@ -0,0 +1,14 @@
+/**
+ * The props the editor island needs, read from the CMS-owned locals. Which local
+ * carries what stays here: a site that reads the wrong one gets a preview that
+ * silently stops updating.
+ */
+const editorProps = (locals = {}) => ({
+	autoTranslate: locals.page?.autoTranslate,
+	cmsLocale: locals._cmsLocale,
+	content: locals.content,
+	draftUuid: locals._draftUuid,
+	locale: locals.page?.locale,
+});
+
+export { editorProps };

package/src/editor/notify.js

@@ -10,6 +10,11 @@ const EVENTS = {
 	PATH_ON_LOAD: "PATH_ON_LOAD",
 	IFRAME_DOM_LOADED: "IFRAME_DOM_LOADED",
 	COMMENT_COUNTS: "COMMENT_COUNTS",
+	CONTENT_READY: "CONTENT_READY",
+	CONTENT_CHANGED: "CONTENT_CHANGED",
+	CONTENT_PREVIEW: "CONTENT_PREVIEW",
+	CONTENT_APPLIED: "CONTENT_APPLIED",
+	CONTENT_FAILED: "CONTENT_FAILED",
 	CURRENT_BLOCK_EDIT: "CURRENT_BLOCK_EDIT",
 	SCROLL_TO_BLOCK: "SCROLL_TO_BLOCK",
 };

package/src/index.js

@@ -1,4 +1,7 @@
 export { isValid } from "./editor/blockValidation.js";
+export { assertHydrationWired, resolveBlockProps } from "./blocks/registry.js";
+export { editorProps } from "./editor/editorProps.js";
+export { createEditorContent } from "./editor/editorContent.svelte.js";
 export { fetchSimilarRooms } from "./client/fetchSimilarRooms.js";
 export { fetchSimilarPackages } from "./client/fetchSimilarPackages.js";
 export { fetchFaqs } from "./client/fetchFaqs.js";
@@ -22,6 +25,9 @@ export { createFormTexts } from "./forms/formTexts.js";
 export { FORM_CONTROLS } from "./forms/formControls.js";
 
 export { default as AddBlockPlaceholder } from "./components/AddBlockPlaceholder.svelte";
+export { default as BlockEditList } from "./components/BlockEditList.svelte";
+export { default as BlockEditSlot } from "./components/BlockEditSlot.svelte";
+export { default as BlockSlot } from "./components/BlockSlot.astro";
 export { default as BlockWrapper } from "./components/BlockWrapper.svelte";
 export { default as EditableBlock } from "./components/EditableBlock.svelte";
 export { default as PageContent } from "./components/PageContent.svelte";