@websline/cms-view-utils 0.25.0 → 1.0.0-alpha.0

package/src/utils/editScroll.js

@@ -0,0 +1,55 @@
+(function () {
+	if (typeof window === "undefined") return;
+
+	const DEBOUNCE_MS = 150;
+	const RESTORE_DELAY = 60;
+
+	const script =
+		document.currentScript ||
+		[...document.querySelectorAll("script[data-slug]")].pop();
+
+	const slug = script?.dataset?.slug;
+
+	if (!slug) {
+		console.warn("[editScroll] Missing data-slug");
+		return;
+	}
+
+	const storageKey = `preview-scroll:${slug}`;
+
+	let timeout = null;
+	let lastY = 0;
+
+	const saveScroll = () => {
+		const y = window.scrollY;
+		if (y === lastY) return;
+
+		lastY = y;
+		sessionStorage.setItem(storageKey, String(y));
+	};
+
+	const onScroll = () => {
+		clearTimeout(timeout);
+		timeout = setTimeout(saveScroll, DEBOUNCE_MS);
+	};
+
+	const restoreScroll = () => {
+		const raw = sessionStorage.getItem(storageKey);
+		if (!raw) return;
+
+		const y = Number(raw);
+		if (Number.isNaN(y)) return;
+
+		requestAnimationFrame(() => {
+			window.scrollTo(0, y);
+
+			setTimeout(() => {
+				window.scrollTo(0, y);
+			}, RESTORE_DELAY);
+		});
+	};
+
+	window.addEventListener("scroll", onScroll, { passive: true });
+	window.addEventListener("beforeunload", saveScroll);
+	window.addEventListener("load", restoreScroll);
+})();

package/src/utils/editorToken.js

@@ -0,0 +1,24 @@
+import jwt from "jsonwebtoken";
+import { HttpError } from "./errors.js";
+
+const resolveDraftUuidFromToken = (editorToken) => {
+	if (!editorToken) return undefined;
+
+	try {
+		const payload = jwt.verify(editorToken, import.meta.env.CMS_EDITOR_JWT_SECRET);
+
+		if (payload.type !== "editor") {
+			throw new HttpError(401, "Invalid token type");
+		}
+
+		if (!payload.draftUuid) {
+			throw new HttpError(401, "Draft UUID missing in token");
+		}
+
+		return payload.draftUuid;
+	} catch {
+		throw new HttpError(401, "Invalid or expired editor token");
+	}
+};
+
+export { resolveDraftUuidFromToken };

package/src/utils/errors.js

@@ -0,0 +1,10 @@
+class HttpError extends Error {
+	constructor(status, message) {
+		super(message);
+		this.name = "HttpError";
+		this.status = status;
+		this.statusCode = status;
+	}
+}
+
+export { HttpError };

package/src/utils/fetchPage.js

@@ -0,0 +1,51 @@
+import { resolveDraftUuidFromToken } from "./editorToken.js";
+import { buildCmsPageUrl } from "./urlResolver.js";
+import { buildCmsHeaders } from "./headers.js";
+import { HttpError } from "./errors.js";
+
+const fetchPage = async (context) => {
+	let { slug = "" } = context.params;
+	const request = context.request;
+	const url = new URL(request.url);
+	const isCMSPreviewRoute = url.pathname.startsWith("/preview_");
+
+	if (isCMSPreviewRoute) {
+		slug = slug.replace(/^preview_/, "");
+	}
+
+	const editorToken = url.searchParams.get("editorToken");
+	const draftUuid = resolveDraftUuidFromToken(editorToken);
+	const isCMSEditRoute = editorToken && draftUuid;
+
+	const cmsUrl = buildCmsPageUrl({ slug, draftUuid });
+
+	const response = await fetch(cmsUrl, {
+		method: "GET",
+		headers: buildCmsHeaders(request),
+	});
+
+	if (response.status === 404) {
+		throw new HttpError(404, "Not Found");
+	}
+
+	if (!response.ok) {
+		throw new HttpError(response.status, "CMS Error");
+	}
+
+	const data = await response.json();
+
+	context.locals.content = data?.content ?? [];
+	context.locals.navigation = data?.navigation ?? {};
+	context.locals.page = data?.page ?? {};
+	context.locals.seo = data?.seo ?? {};
+	context.locals._cmsRaw = data;
+
+	if (isCMSPreviewRoute) {
+		context.locals._preview = true;
+	}
+	if (isCMSEditRoute) {
+		context.locals._edit = true;
+	}
+};
+
+export { fetchPage };

package/src/utils/headers.js

@@ -0,0 +1,9 @@
+const buildCmsHeaders = (request) => ({
+	"accept-language": request.headers.get("accept-language") ?? "",
+	"cms-tenant": import.meta.env.CMS_TENANT,
+	"cms-token": import.meta.env.CMS_TOKEN,
+	"user-agent": request.headers.get("user-agent") ?? "",
+	referer: request.headers.get("referer") ?? "",
+});
+
+export { buildCmsHeaders };

package/src/utils/notify.js

@@ -0,0 +1,27 @@
+const EVENTS = {
+	BLOCK_ADD: "BLOCK_ADD",
+	BLOCK_DELETE: "BLOCK_DELETE",
+	BLOCK_EDIT: "BLOCK_EDIT",
+	BLOCK_SHOW: "BLOCK_SHOW",
+	BLOCK_HIDE: "BLOCK_HIDE",
+	SLUG_CHANGED: "SLUG_CHANGED",
+	SLUG_ON_LOAD: "SLUG_ON_LOAD",
+	IFRAME_DOM_LOADED: "IFRAME_DOM_LOADED",
+	CURRENT_BLOCK_EDIT: "CURRENT_BLOCK_EDIT",
+	SCROLL_TO_BLOCK: "SCROLL_TO_BLOCK",
+};
+
+const notifyCMS = (type, payload = {}) => {
+	if (!type) return;
+	if (window.parent === window) return;
+
+	window.parent.postMessage(
+		{
+			type,
+			payload,
+		},
+		"*",
+	);
+};
+
+export { EVENTS, notifyCMS };

package/src/utils/previewBridge.js

@@ -0,0 +1,71 @@
+import { EVENTS, notifyCMS } from "./notify.js";
+
+(function () {
+	if (window.parent === window) return;
+	if (window.__PREVIEW_BRIDGE_INITIALIZED__) return;
+
+	window.__PREVIEW_BRIDGE_INITIALIZED__ = true;
+
+	const isModifiedClick = (event) => event.metaKey || event.ctrlKey || event.shiftKey;
+
+	const handleClick = (event) => {
+		const link = event.target.closest("a[href]");
+
+		if (!link) return;
+		if (link.target === "_blank") return;
+		if (isModifiedClick(event)) return;
+
+		const url = new URL(link.href, window.location.origin);
+		if (url.origin !== window.location.origin) return;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		notifyCMS(EVENTS.SLUG_CHANGED, {
+			slug: url.pathname,
+		});
+	};
+
+	document.addEventListener("click", handleClick, true);
+
+	notifyCMS(EVENTS.SLUG_ON_LOAD, {
+		slug: window.location.pathname,
+	});
+
+	window.addEventListener("load", () => {
+		notifyCMS(EVENTS.IFRAME_DOM_LOADED);
+	});
+
+	const scrollToId = (id) => {
+		const selector = `[data-cms-block-id="${id}"]`;
+
+		let tries = 0;
+		const max = 10;
+
+		const interval = setInterval(() => {
+			const el = document.querySelector(selector);
+
+			if (el) {
+				el.scrollIntoView({ behavior: "smooth", block: "center" });
+				clearInterval(interval);
+			}
+
+			if (++tries >= max) {
+				clearInterval(interval);
+			}
+		}, 100);
+	};
+
+	window.addEventListener("message", (event) => {
+		const { type, payload } = event.data || {};
+
+		if (!type) return;
+
+		if (type === EVENTS.SCROLL_TO_BLOCK) {
+			const { draftBlockUuid } = payload || {};
+			if (!draftBlockUuid) return;
+
+			scrollToId(draftBlockUuid);
+		}
+	});
+})();

package/src/utils/urlResolver.js

@@ -0,0 +1,13 @@
+const buildCmsPageUrl = ({ slug, draftUuid }) => {
+	const base = import.meta.env.CMS_URL;
+
+	if (draftUuid) {
+		return `${base}/api/public/pages/preview/${draftUuid}`;
+	}
+
+	const normalizedSlug = slug.startsWith("/") ? slug : `/${slug}`;
+
+	return `${base}/api/public/pages${normalizedSlug}`;
+};
+
+export { buildCmsPageUrl };

package/src/components/Block.astro

@@ -1,26 +0,0 @@
----
-const editToken = Astro.url.searchParams.get("edit_token") || null;
-const isPreviewMode = editToken !== null && editToken !== "";
-
-const { class: classes, style } = Astro.props;
----
-
-{
-	isPreviewMode ? (
-		<div class={classes} data-edit-block {style}>
-			<div data-edit-block-menu>
-				<div data-edit-block-item data-edit-block-item-edit>
-					Bearbeiten...
-				</div>
-				<div data-edit-block-item data-edit-block-item-delete>
-					Löschen...
-				</div>
-			</div>
-			<slot />
-		</div>
-	) : (
-		<div class={classes} {style}>
-			<slot />
-		</div>
-	)
-}

package/src/components/PageRenderer.astro

@@ -1,39 +0,0 @@
----
-import { fetchPageData } from "../data/pageData";
-
-const { locale, slug } = Astro.params;
-const editToken = Astro.url.searchParams.get("edit_token") || null;
-const isPreviewMode = editToken !== null && editToken !== "";
-
-await fetchPageData({ editToken, locals: Astro.locals, locale, slug });
----
-
-<slot />
-
-{
-	isPreviewMode && (
-		<>
-			<link
-				href="https://fonts.googleapis.com/css2?family=Ancizar+Sans:ital,wght@0,100..1000;1,100..1000&display=swap"
-				rel="stylesheet"
-			/>
-			<link
-				rel="stylesheet"
-				href="https://unpkg.com/@websline/cms-view-utils@latest/src/styles/drag-drop-blocks.css"
-			/>
-		</>
-	)
-}
-{isPreviewMode && <script type="module">
-	import IframeDragHandler from "https://unpkg.com/@websline/cms-view-utils@latest/src/utils/iframeDragHandler.js";
-	import {
-		disableLinks,
-		enableEditBlocks,
-		insertDropZones,
-	} from "https://unpkg.com/@websline/cms-view-utils@latest/src/utils/dragDropUtils.js";
-
-	new IframeDragHandler();
-	insertDropZones();
-	disableLinks();
-	enableEditBlocks();
-</script>}

package/src/data/index.js

@@ -1 +0,0 @@
-export * from "./pageData";

package/src/data/pageData.js

@@ -1,44 +0,0 @@
-const fetchPageData = async ({ editToken, locals, locale, slug }) => {
-	const API_BASE = import.meta.env.PUBLIC_API_URL?.replace(/\/+$/, ""); // Remove trailing slashes
-	if (!API_BASE) throw new Error("PUBLIC_API_URL ist nicht gesetzt.");
-
-	const key = `__pageData__${locale}__${slug}`;
-
-	if (!locals[key]) {
-		let url = `${API_BASE}/${locale}/pages/${slug}`;
-
-		if (editToken) {
-			url += `?edit_token=${editToken}`;
-		}
-		const res = await fetch(url);
-
-		if (!res.ok) {
-			throw new Error(
-				`Fehler beim Abrufen der Seite: ${res.status} ${res.statusText}`
-			);
-		}
-
-		locals[key] = await res.json();
-	}
-
-	locals.__currentPageKey = key;
-	return locals[key];
-};
-
-const getPageData = (locals) => {
-	const key = locals?.__currentPageKey;
-
-	if (!key) {
-		throw new Error("locals fehlt");
-	}
-
-	if (!key || !locals[key]) {
-		throw new Error(
-			"getPageData() wurde aufgerufen, bevor fetchPageData() ausgeführt wurde."
-		);
-	}
-
-	return locals[key];
-};
-
-export { fetchPageData, getPageData };

package/src/index.js

@@ -1,4 +0,0 @@
-export { default as Block } from "./components/Block.astro";
-export { default as PageRenderer } from "./components/PageRenderer.astro";
-export * from "./data";
-export * from "./utils";

package/src/styles/drag-drop-blocks.css

@@ -1,64 +0,0 @@
-[data-drop-zone] {
-	height: 0px;
-	margin-left: auto;
-	margin-right: auto;
-	max-width: min(1440px, calc(100% - 48px));
-	transition: all 0.2s ease-in-out;
-	width: 100%;
-}
-[data-drop-zone].highlight {
-	border: 1.5px dashed var(--cms-drop-zone-border, #1168af);
-	height: 60px;
-	margin-top: 24px;
-	margin-bottom: 24px;
-}
-[data-drop-zone].highlight:hover {
-	background-color: var(--cms-drop-zone-background, rgba(17, 104, 175, 0.5));
-}
-
-[data-edit-block] {
-	min-height: 40px;
-	position: relative;
-	user-select: none;
-}
-[data-edit-block-hover] {
-	&:after {
-		background: var(--cms-edit-block-background, #5aaff48c);
-		border-radius: 8px;
-		bottom: 0;
-		content: "";
-		display: block;
-		left: 0;
-		pointer-events: none;
-		position: absolute;
-		right: 0;
-		top: 0;
-		z-index: 1;
-	}
-}
-[data-edit-block-hover] > [data-edit-block-menu] {
-	display: flex;
-}
-[data-edit-block-menu] {
-	background: var(--cms-edit-block-menu-bg, #1168af);
-	border-radius: 4px;
-	display: none;
-	left: 0;
-	overflow: hidden;
-	position: absolute;
-	top: -5px;
-	transform: translate(0, -100%);
-}
-[data-edit-block-item] {
-	color: var(--cms-edit-block-menu-color, #fff);
-	cursor: pointer;
-	font-family: "Ancizar Sans", sans-serif;
-	font-size: 14px;
-	font-weight: 400;
-	padding: 8px;
-
-	&:hover {
-		background: var(--cms-edit-block-menu-bg-hover, #0d5d9e);
-		color: var(--cms-edit-block-menu-color-hover, #fff);
-	}
-}

package/src/utils/dragDropUtils.js

@@ -1,67 +0,0 @@
-const insertDropZones = (blockAreaSelector = "[data-block-area]") => {
-	const blockArea = document.querySelector(blockAreaSelector);
-	if (!blockArea) return;
-
-	const children = Array.from(blockArea.children);
-	let lastIndex = 0;
-
-	children.forEach((child) => {
-		const dropZone = document.createElement("div");
-		dropZone.setAttribute("data-drop-zone", "");
-		dropZone.setAttribute("data-drop-zone-index", lastIndex.toString());
-		blockArea.insertBefore(dropZone, child);
-
-		lastIndex++;
-	});
-
-	const finalDropZone = document.createElement("div");
-	finalDropZone.setAttribute("data-drop-zone", "");
-	finalDropZone.setAttribute("data-drop-zone-index", lastIndex.toString());
-	blockArea.appendChild(finalDropZone);
-};
-
-const disableLinks = () => {
-	const hrefs = document.querySelectorAll("a");
-
-	hrefs.forEach((a) => {
-		a.addEventListener("click", (e) => {
-			alert("Vorschau-Modus: Links sind deaktiviert.");
-			e.preventDefault();
-		});
-	});
-};
-
-const enableEditBlocks = () => {
-	const editBlocks = document.querySelectorAll("[data-edit-block]");
-	let activeBlock = null;
-	let timeoutId;
-
-	editBlocks.forEach((el) => {
-		el.addEventListener("mouseover", () => {
-			if (document.body.classList.contains("cms-editor-is-dragging")) {
-				return;
-			}
-
-			clearTimeout(timeoutId);
-
-			if (activeBlock && activeBlock !== el) {
-				activeBlock.removeAttribute("data-edit-block-hover");
-			}
-
-			activeBlock = el;
-			el.setAttribute("data-edit-block-hover", "");
-		});
-
-		el.addEventListener("mouseout", () => {
-			timeoutId = setTimeout(() => {
-				el.removeAttribute("data-edit-block-hover");
-
-				if (activeBlock === el) {
-					activeBlock = null;
-				}
-			}, 150);
-		});
-	});
-};
-
-export { disableLinks, enableEditBlocks, insertDropZones };