@websline/cms-view-utils 1.5.0 → 1.5.2

package/dist/editScroll.global.js

@@ -1 +1 @@
-(()=>{(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)})();})();
+(()=>{var l=t=>`preview-scroll:${t}`;(function(){var s;if(typeof window>"u")return;let t=150,e=document.currentScript||[...document.querySelectorAll("script[data-path]")].pop(),r=(s=e==null?void 0:e.dataset)==null?void 0:s.path;if(!r){console.warn("[editScroll] Missing data-path");return}let c=l(r),n=null,a=0,i=()=>{let o=window.scrollY;o!==a&&(a=o,sessionStorage.setItem(c,String(o)))},p=()=>{clearTimeout(n),n=setTimeout(i,t)};window.addEventListener("scroll",p,{passive:!0})})();})();

package/dist/previewBridge.global.js

@@ -1 +1 @@
-(()=>{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)}})})();})();
+(()=>{var i={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"},s=(r,e={})=>{r&&window.parent!==window&&window.parent.postMessage({type:r,payload:e},"*")};var l=r=>`preview-scroll:${r}`,O=()=>{var r,e;return((e=(r=[...document.querySelectorAll("script[data-path]")].pop())==null?void 0:r.dataset)==null?void 0:e.path)||window.location.pathname};(function(){if(window.parent===window||window.__PREVIEW_BRIDGE_INITIALIZED__)return;window.__PREVIEW_BRIDGE_INITIALIZED__=!0;let r=t=>t.metaKey||t.ctrlKey||t.shiftKey,e=t=>{let o=t.target.closest("a[href]");if(!o||o.target==="_blank"||r(t))return;let n=new URL(o.href,window.location.origin);n.origin===window.location.origin&&(t.preventDefault(),t.stopPropagation(),s(i.PATH_CHANGED,{path:n.pathname}))};document.addEventListener("click",e,!0),s(i.PATH_ON_LOAD,{path:window.location.pathname});let E=()=>{let t=sessionStorage.getItem(l(O()));if(!t)return;let o=Number(t);Number.isNaN(o)||window.scrollTo({top:o,left:0,behavior:"instant"})};window.addEventListener("load",()=>{E(),s(i.IFRAME_DOM_LOADED)});let L=t=>{let o=`[data-cms-block-id="${t}"]`,n=0,a=10,_=setInterval(()=>{let c=document.querySelector(o);c&&(c.scrollIntoView({behavior:"smooth",block:"start"}),clearInterval(_)),++n>=a&&clearInterval(_)},100)};window.addEventListener("message",t=>{let{type:o,payload:n}=t.data||{};if(o&&o===i.SCROLL_TO_BLOCK){let{draftBlockUuid:a}=n||{};if(!a)return;L(a)}})})();})();

package/package.json

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

package/src/cms/fetchPage.js

@@ -40,6 +40,7 @@ const fetchPage = async (context) => {
 	context.locals.page = data?.page ?? {};
 	context.locals.seo = data?.seo ?? {};
 	context.locals.languageSwitcher = data?.languageSwitcher ?? [];
+	context.locals.tenant = data?.tenant ?? null;
 	context.locals._cmsRaw = data;
 
 	if (isCMSPreviewRoute) {

package/src/components/EditableBlock.svelte

@@ -126,13 +126,28 @@
 		isHovered = true;
 	}, 50);
 
+	const isRefInViewport = () => {
+		if (!ref) return true;
+
+		const { top, bottom } = ref.getBoundingClientRect();
+		const viewportHeight =
+			window.innerHeight || document.documentElement.clientHeight;
+
+		return bottom > 0 && top < viewportHeight;
+	};
+
 	const handler = (event) => {
 		const { type, payload } = event.data || {};
 		if (type !== EVENTS.CURRENT_BLOCK_EDIT) return;
 
-		const { draftBlockUuid } = payload || {};
+		const { draftBlockUuid, scroll } = payload || {};
+		const becameActive = draftBlockUuid === block.uuid;
+
+		isActive = becameActive;
 
-		isActive = draftBlockUuid === block.uuid;
+		if (becameActive && scroll && !isRefInViewport()) {
+			ref.scrollIntoView({ behavior: "smooth", block: "start" });
+		}
 	};
 
 	let isOutside = $derived(calcBarPosition === "outside");

package/src/editor/editScroll.js

@@ -1,8 +1,9 @@
+import { storageKeyForPath } from "./scrollStore.js";
+
 (function () {
 	if (typeof window === "undefined") return;
 
 	const DEBOUNCE_MS = 150;
-	const RESTORE_DELAY = 60;
 
 	const script =
 		document.currentScript ||
@@ -15,7 +16,7 @@
 		return;
 	}
 
-	const storageKey = `preview-scroll:${path}`;
+	const storageKey = storageKeyForPath(path);
 
 	let timeout = null;
 	let lastY = 0;
@@ -33,23 +34,5 @@
 		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/editor/previewBridge.js

@@ -1,4 +1,5 @@
 import { EVENTS, notifyCMS } from "./notify.js";
+import { resolveScrollPath, storageKeyForPath } from "./scrollStore.js";
 
 (function () {
 	if (window.parent === window) return;
@@ -32,7 +33,18 @@ import { EVENTS, notifyCMS } from "./notify.js";
 		path: window.location.pathname,
 	});
 
+	const restoreScroll = () => {
+		const raw = sessionStorage.getItem(storageKeyForPath(resolveScrollPath()));
+		if (!raw) return;
+
+		const y = Number(raw);
+		if (Number.isNaN(y)) return;
+
+		window.scrollTo({ top: y, left: 0, behavior: "instant" });
+	};
+
 	window.addEventListener("load", () => {
+		restoreScroll();
 		notifyCMS(EVENTS.IFRAME_DOM_LOADED);
 	});
 

package/src/editor/scrollStore.js

@@ -0,0 +1,7 @@
+const storageKeyForPath = (path) => `preview-scroll:${path}`;
+
+const resolveScrollPath = () =>
+	[...document.querySelectorAll("script[data-path]")].pop()?.dataset?.path ||
+	window.location.pathname;
+
+export { storageKeyForPath, resolveScrollPath };