@websline/cms-view-utils 1.0.0-alpha.5 → 1.0.1

package/dist/editScroll.global.js

@@ -1 +1 @@
-(()=>{(function(){var c;if(typeof window>"u")return;let u=150,a=60,t=document.currentScript||[...document.querySelectorAll("script[data-slug]")].pop(),n=(c=t==null?void 0:t.dataset)==null?void 0:c.slug;if(!n){console.warn("[editScroll] Missing data-slug");return}let s=`preview-scroll:${n}`,r=null,l=0,i=()=>{let e=window.scrollY;e!==l&&(l=e,sessionStorage.setItem(s,String(e)))},d=()=>{clearTimeout(r),r=setTimeout(i,u)},w=()=>{let e=sessionStorage.getItem(s);if(!e)return;let o=Number(e);Number.isNaN(o)||requestAnimationFrame(()=>{window.scrollTo(0,o),setTimeout(()=>{window.scrollTo(0,o)},a)})};window.addEventListener("scroll",d,{passive:!0}),window.addEventListener("beforeunload",i),window.addEventListener("load",w)})();})();
+(()=>{(function(){var c;if(typeof window>"u")return;let a=150,d=60,e=document.currentScript||[...document.querySelectorAll("script[data-path]")].pop(),n=(c=e==null?void 0:e.dataset)==null?void 0:c.path;if(!n){console.warn("[editScroll] Missing data-path");return}let r=`preview-scroll:${n}`,s=null,i=0,l=()=>{let t=window.scrollY;t!==i&&(i=t,sessionStorage.setItem(r,String(t)))},u=()=>{clearTimeout(s),s=setTimeout(l,a)},w=()=>{let t=sessionStorage.getItem(r);if(!t)return;let o=Number(t);Number.isNaN(o)||requestAnimationFrame(()=>{window.scrollTo(0,o),setTimeout(()=>{window.scrollTo(0,o)},d)})};window.addEventListener("scroll",u,{passive:!0}),window.addEventListener("beforeunload",l),window.addEventListener("load",w)})();})();

package/dist/previewBridge.global.js

@@ -1 +1 @@
-(()=>{var e={BLOCK_ADD:"BLOCK_ADD",BLOCK_DELETE:"BLOCK_DELETE",BLOCK_EDIT:"BLOCK_EDIT",BLOCK_POSITION:"BLOCK_POSITION",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"},_=(r,L={})=>{r&&window.parent!==window&&window.parent.postMessage({type:r,payload:L},"*")};(function(){if(window.parent===window||window.__PREVIEW_BRIDGE_INITIALIZED__)return;window.__PREVIEW_BRIDGE_INITIALIZED__=!0;let r=t=>t.metaKey||t.ctrlKey||t.shiftKey,L=t=>{let n=t.target.closest("a[href]");if(!n||n.target==="_blank"||r(t))return;let o=new URL(n.href,window.location.origin);o.origin===window.location.origin&&(t.preventDefault(),t.stopPropagation(),_(e.SLUG_CHANGED,{slug:o.pathname}))};document.addEventListener("click",L,!0),_(e.SLUG_ON_LOAD,{slug:window.location.pathname}),window.addEventListener("load",()=>{_(e.IFRAME_DOM_LOADED)});let E=t=>{let n=`[data-cms-block-id="${t}"]`,o=0,i=10,O=setInterval(()=>{let a=document.querySelector(n);a&&(a.scrollIntoView({behavior:"smooth",block:"center"}),clearInterval(O)),++o>=i&&clearInterval(O)},100)};window.addEventListener("message",t=>{let{type:n,payload:o}=t.data||{};if(n&&n===e.SCROLL_TO_BLOCK){let{draftBlockUuid:i}=o||{};if(!i)return;E(i)}})})();})();
+(()=>{var r={BLOCK_ADD:"BLOCK_ADD",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",CURRENT_BLOCK_EDIT:"CURRENT_BLOCK_EDIT",SCROLL_TO_BLOCK:"SCROLL_TO_BLOCK"},_=(i,a={})=>{i&&window.parent!==window&&window.parent.postMessage({type:i,payload:a},"*")};(function(){if(window.parent===window||window.__PREVIEW_BRIDGE_INITIALIZED__)return;window.__PREVIEW_BRIDGE_INITIALIZED__=!0;let i=t=>t.metaKey||t.ctrlKey||t.shiftKey,a=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",a,!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,O=setInterval(()=>{let E=document.querySelector(n);E&&(E.scrollIntoView({behavior:"smooth",block:"start"}),clearInterval(O)),++o>=e&&clearInterval(O)},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)}})})();})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.1",
   "type": "module",
   "files": [
     "src",
@@ -19,6 +19,15 @@
     "jsonwebtoken": "^9.0.3"
   },
   "devDependencies": {
+    "@eslint/compat": "^2.0.5",
+    "@eslint/js": "^10.0.1",
+    "eslint": "^10.3.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.17.1",
+    "globals": "^17.6.0",
+    "prettier": "^3.8.3",
+    "prettier-plugin-svelte": "^3.5.1",
+    "prettier-plugin-tailwindcss": "^0.8.0",
     "tsup": "^8.5.1"
   },
   "peerDependencies": {
@@ -26,6 +35,8 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "tsup"
+    "build": "tsup",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint ."
   }
 }

package/src/components/AddBlockPlaceholder.svelte

@@ -9,11 +9,40 @@
 		textColor = "#121110",
 		iconBackgroundColor = "#FFFFFF",
 		iconColor = "#121110",
-		label = "Hier das erste Element einfügen",
-		sublabel = "Füge über den Button einen neuen Block hinzu,um mit dem Bearbeiten der Page zu beginnen.",
 		sublabelColor = "#92908D",
+		locale = "de",
+		isFirst = true,
 	} = $props();
 
+	const i18n = {
+		de: {
+			first: {
+				label: "Block hinzufügen",
+				sublabel:
+					"Füge über den Button einen neuen Block hinzu, um mit dem Bearbeiten der Page zu beginnen.",
+			},
+			additional: {
+				label: "Weiteren Block hinzufügen",
+				sublabel:
+					"Füge einen weiteren Block unterhalb der bestehenden Inhalte hinzu.",
+			},
+		},
+		en: {
+			first: {
+				label: "Add block",
+				sublabel: "Use the button to add a new block and start editing the page.",
+			},
+			additional: {
+				label: "Add another block",
+				sublabel: "Add another block below the existing content.",
+			},
+		},
+	};
+
+	const texts = $derived(
+		(i18n[locale] ?? i18n["de"])[isFirst ? "first" : "additional"],
+	);
+
 	const handleClick = () => {
 		notifyCMS(EVENTS.BLOCK_ADD);
 	};
@@ -25,7 +54,7 @@
 		style={`--block-color: ${color}; --block-hover-color: ${hoverColor}; --block-hover-border-color: ${hoverBorderColor}; --block-text: ${textColor}; --block-icon-background: ${iconBackgroundColor}; --block-icon-color: ${iconColor}; --sublabel-color: ${sublabelColor};`}
 		onclick={handleClick}>
 		<div
-			class="relative mx-auto flex max-w-md flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-[var(--block-color)] px-6 py-8 text-center transition-colors duration-300 group-hover:border-[var(--block-hover-border-color)] group-hover:bg-[var(--block-hover-color)]">
+			class="relative mx-auto flex max-w-md flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-(--block-color) px-6 py-8 text-center transition-colors duration-300 group-hover:border-(--block-hover-border-color) group-hover:bg-(--block-hover-color)">
 			<svg
 				width="24"
 				height="24"
@@ -33,11 +62,11 @@
 				fill="none"
 				xmlns="http://www.w3.org/2000/svg">
 				<path
-					class="fill-[var(--block-icon-background)]"
+					class="fill-(--block-icon-background)"
 					d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z"
 					fill="#FFFFFF" />
 				<path
-					class="stroke-[var(--block-icon-color)]"
+					class="stroke-(--block-icon-color)"
 					d="M12.0231 6.6665L12.0092 17.3332M6.66675 11.9998H17.3334"
 					stroke="#121110"
 					stroke-width="1.5"
@@ -46,12 +75,12 @@
 			</svg>
 
 			<span
-				class="text-sm text-[var(--block-text)] transition-opacity duration-300 group-hover:opacity-100">
-				{label}
+				class="text-sm text-(--block-text) transition-opacity duration-300 group-hover:opacity-100">
+				{texts.label}
 			</span>
 			<span
-				class="text-sm text-[var(--sublabel-color)] transition-opacity duration-300 group-hover:opacity-100">
-				{sublabel}
+				class="text-sm text-(--sublabel-color) transition-opacity duration-300 group-hover:opacity-100">
+				{texts.sublabel}
 			</span>
 		</div>
 	</button>

package/src/components/EditableBlock.svelte

@@ -8,6 +8,7 @@
 	import ImageText from "./skeleton/ImageText.svelte";
 
 	let {
+		barPosition,
 		block,
 		children,
 		color = "#000fff",
@@ -16,6 +17,14 @@
 		textColor = "#F1F1F2",
 	} = $props();
 
+	let calcBarPosition = $derived.by(() => {
+		if (typeof barPosition === "string") return barPosition;
+
+		if (position === 0) return "inside";
+
+		return "outside";
+	});
+
 	const debounce = (fn, delay = 150) => {
 		let timer;
 
@@ -100,6 +109,20 @@
 			window.removeEventListener("message", handler);
 		};
 	});
+
+	const isOutside = $derived(calcBarPosition === "outside");
+
+	const containerShape = $derived(
+		isOutside ? "rounded-t-lg -top-8" : "rounded-b-lg top-1.5",
+	);
+
+	const cornerEdges = $derived(
+		isOutside
+			? "before:bottom-1 before:-left-4 before:shadow-[6px_6px_0_0_var(--block-color)] " +
+					"after:bottom-1 after:-right-4 after:shadow-[-6px_6px_0_0_var(--block-color)]"
+			: "before:top-0 before:-left-4 before:shadow-[6px_-6px_0_0_var(--block-color)] " +
+					"after:top-0 after:-right-4 after:shadow-[-6px_-6px_0_0_var(--block-color)]",
+	);
 </script>
 
 <div
@@ -111,14 +134,14 @@
 	onmouseleave={handleLeave}
 	role="group">
 	<div
-		class="pointer-events-none absolute inset-0 z-20 border-6 transition-opacity duration-100"
+		class="pointer-events-none absolute inset-0 z-[9998] border-6 transition-opacity duration-100"
 		style="border-color: var(--block-color)"
 		class:opacity-100={toolbarVisible}
 		class:opacity-0={!toolbarVisible}>
 	</div>
 
 	<div
-		class="absolute top-1.5 left-1/2 z-10 flex h-9 -translate-x-1/2 items-center justify-center gap-1.5 rounded-b-lg px-3 pb-1 transition-opacity duration-100 before:absolute before:top-0 before:-left-4 before:h-4 before:w-4 before:rounded-full before:bg-transparent before:shadow-[6px_-6px_0_0_var(--block-color)] before:content-[''] after:absolute after:top-0 after:-right-4 after:h-4 after:w-4 after:rounded-full after:bg-transparent after:shadow-[-6px_-6px_0_0_var(--block-color)] after:content-['']"
+		class="absolute left-1/2 z-[9999] flex h-9 -translate-x-1/2 items-center justify-center gap-1.5 px-3 transition-opacity duration-100 before:absolute before:h-4 before:w-4 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:h-4 after:w-4 after:rounded-full after:bg-transparent after:content-[''] {containerShape} {cornerEdges}"
 		style="background: var(--block-color); color: var(--block-text);"
 		class:opacity-100={toolbarVisible}
 		class:opacity-0={!toolbarVisible}>
@@ -196,7 +219,7 @@
 			</button>
 		{/if} -->
 
-		<button
+		<!-- <button
 			aria-label="copy block"
 			class="cursor-pointer"
 			onclick={() => handleClick(CMS_ACTIONS.copy)}>
@@ -213,7 +236,7 @@
 					d="M10 4.5H22C22.2761 4.50011 22.5 4.72392 22.5 5V19C22.5 19.2761 22.2761 19.4999 22 19.5H18.5V22.999C18.5 23.2731 18.2763 23.4999 17.9932 23.5H6.00684C5.72308 23.5 5.5 23.2754 5.5 22.999L5.50293 9.00098C5.50298 8.72676 5.72665 8.5 6.00977 8.5H9.5V5C9.5 4.72386 9.72386 4.5 10 4.5ZM6.50195 10L6.5 22V22.5H17.5V9.5H6.50293L6.50195 10ZM10.5 8.5H18.5V18.5H21.5V5.5H10.5V8.5Z"
 					stroke="var(--block-text)"></path>
 			</svg>
-		</button>
+		</button> -->
 
 		<button
 			aria-label="position block"

package/src/components/PageContent.svelte

@@ -2,6 +2,8 @@
 	let { children, class: className } = $props();
 </script>
 
-<section class={`grid${className ? ` ${className}` : ""}`} data-cms-page-content>
+<section
+	class={`grid grid-cols-1${className ? ` ${className}` : ""}`}
+	data-cms-page-content>
 	{@render children?.()}
 </section>

package/src/utils/editScroll.js

@@ -6,16 +6,16 @@
 
 	const script =
 		document.currentScript ||
-		[...document.querySelectorAll("script[data-slug]")].pop();
+		[...document.querySelectorAll("script[data-path]")].pop();
 
-	const slug = script?.dataset?.slug;
+	const path = script?.dataset?.path;
 
-	if (!slug) {
-		console.warn("[editScroll] Missing data-slug");
+	if (!path) {
+		console.warn("[editScroll] Missing data-path");
 		return;
 	}
 
-	const storageKey = `preview-scroll:${slug}`;
+	const storageKey = `preview-scroll:${path}`;
 
 	let timeout = null;
 	let lastY = 0;

package/src/utils/fetchPage.js

@@ -4,20 +4,21 @@ import { buildCmsHeaders } from "./headers.js";
 import { HttpError } from "./errors.js";
 
 const fetchPage = async (context) => {
-	let { slug = "" } = context.params;
+	let { path = "" } = context.params;
+
 	const request = context.request;
 	const url = new URL(request.url);
 	const isCMSPreviewRoute = url.pathname.startsWith("/preview_");
 
 	if (isCMSPreviewRoute) {
-		slug = slug.replace(/^preview_/, "");
+		path = path.replace(/^preview_/, "");
 	}
 
 	const editorToken = url.searchParams.get("editorToken");
 	const draftUuid = resolveDraftUuidFromToken(editorToken);
 	const isCMSEditRoute = editorToken && draftUuid;
 
-	const cmsUrl = buildCmsPageUrl({ slug, draftUuid });
+	const cmsUrl = buildCmsPageUrl({ draftUuid, path });
 
 	const response = await fetch(cmsUrl, {
 		method: "GET",

package/src/utils/notify.js

@@ -5,8 +5,8 @@ const EVENTS = {
 	BLOCK_POSITION: "BLOCK_POSITION",
 	BLOCK_SHOW: "BLOCK_SHOW",
 	BLOCK_HIDE: "BLOCK_HIDE",
-	SLUG_CHANGED: "SLUG_CHANGED",
-	SLUG_ON_LOAD: "SLUG_ON_LOAD",
+	PATH_CHANGED: "PATH_CHANGED",
+	PATH_ON_LOAD: "PATH_ON_LOAD",
 	IFRAME_DOM_LOADED: "IFRAME_DOM_LOADED",
 	CURRENT_BLOCK_EDIT: "CURRENT_BLOCK_EDIT",
 	SCROLL_TO_BLOCK: "SCROLL_TO_BLOCK",

package/src/utils/previewBridge.js

@@ -21,15 +21,15 @@ import { EVENTS, notifyCMS } from "./notify.js";
 		event.preventDefault();
 		event.stopPropagation();
 
-		notifyCMS(EVENTS.SLUG_CHANGED, {
-			slug: url.pathname,
+		notifyCMS(EVENTS.PATH_CHANGED, {
+			path: url.pathname,
 		});
 	};
 
 	document.addEventListener("click", handleClick, true);
 
-	notifyCMS(EVENTS.SLUG_ON_LOAD, {
-		slug: window.location.pathname,
+	notifyCMS(EVENTS.PATH_ON_LOAD, {
+		path: window.location.pathname,
 	});
 
 	window.addEventListener("load", () => {
@@ -46,7 +46,7 @@ import { EVENTS, notifyCMS } from "./notify.js";
 			const el = document.querySelector(selector);
 
 			if (el) {
-				el.scrollIntoView({ behavior: "smooth", block: "center" });
+				el.scrollIntoView({ behavior: "smooth", block: "start" });
 				clearInterval(interval);
 			}
 

package/src/utils/urlResolver.js

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