@websline/cms-view-utils 1.5.3 → 1.7.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 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)}})})();})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "1.5.3",
+  "version": "1.7.0",
   "type": "module",
   "files": [
     "src",
@@ -21,10 +21,10 @@
   "devDependencies": {
     "@eslint/compat": "^2.1.0",
     "@eslint/js": "^10.0.1",
-    "eslint": "^10.7.0",
+    "eslint": "^10.8.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.22.0",
-    "globals": "^17.7.0",
+    "globals": "^17.10.0",
     "prettier": "^3.9.6",
     "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.1",

package/src/client/fetchFaqs.js

@@ -1,4 +1,4 @@
-const fetchFaqs = async ({ excludeId, limit, locale, tags }) => {
+const fetchFaqs = async ({ excludeId, limit, locale, tags, groups }) => {
 	const params = new URLSearchParams();
 
 	if (excludeId != null && excludeId !== "") {
@@ -17,6 +17,14 @@ const fetchFaqs = async ({ excludeId, limit, locale, tags }) => {
 		}
 	}
 
+	if (Array.isArray(groups)) {
+		for (const group of groups) {
+			if (group != null && group !== "") {
+				params.append("groups", group);
+			}
+		}
+	}
+
 	const query = params.toString();
 	const url = `/api/cms/api/public/abm-faqs/${locale}${query ? `?${query}` : ""}`;
 

package/src/components/EditableBlock.svelte

@@ -49,6 +49,12 @@
 				if (autoTranslate) return;
 				notifyCMS(EVENTS.BLOCK_ADD, { position });
 				break;
+			case CMS_ACTIONS.comment:
+				notifyCMS(EVENTS.BLOCK_COMMENT, {
+					blockIdentifier: block.identifier,
+					draftBlockUuid: block.uuid,
+				});
+				break;
 			case CMS_ACTIONS.delete:
 				if (isSynced) return;
 				notifyCMS(EVENTS.BLOCK_DELETE, {
@@ -126,20 +132,36 @@
 		isHovered = true;
 	}, 50);
 
+	let commentCount = $state(0);
+	// Off for users without the comment read permission; the CMS says so in the same
+	// message as the counts.
+	let commentsEnabled = $state(true);
+
 	const handler = (event) => {
 		const { type, payload } = event.data || {};
-		if (type !== EVENTS.CURRENT_BLOCK_EDIT) return;
 
-		const { draftBlockUuid } = payload || {};
+		if (type === EVENTS.CURRENT_BLOCK_EDIT) {
+			isActive = payload?.draftBlockUuid === block.uuid;
+			return;
+		}
 
-		isActive = draftBlockUuid === block.uuid;
+		// The counts arrive from the CMS: this iframe has no session for its API.
+		if (type === EVENTS.COMMENT_COUNTS) {
+			commentCount = payload?.counts?.[block.uuid] ?? 0;
+			commentsEnabled = payload?.enabled !== false;
+		}
 	};
 
 	let isOutside = $derived(calcBarPosition === "outside");
 
 	let containerShape = $derived.by(() => {
-		if (isOutside) return "absolute rounded-t-lg -top-8";
-		return `rounded-b-lg top-1.5 ${isSticky === "full" ? "fixed" : "absolute"}`;
+		// Both orientations have to read as the same bar, and the block's 6px frame
+		// counts: pointing up the bar overlaps it by 4px, pointing down it starts
+		// below it. 40px up (offset by the same 4px) and 36px down therefore end up
+		// equally tall — 42px including the line — and the 4px bottom padding mirrors
+		// the icon inset: 4px towards the line, 8px towards the rounded edge.
+		if (isOutside) return "absolute h-10 rounded-t-lg -top-9";
+		return `h-9 rounded-b-lg pb-1 top-1.5 ${isSticky === "full" ? "fixed" : "absolute"}`;
 	});
 
 	let cornerEdges = $derived(
@@ -150,13 +172,16 @@
 					"after:top-0 after:-right-4 after:shadow-[-6px_-6px_0_0_var(--block-color)]",
 	);
 
+	// 34px from the icon in both directions, which lands 2px off the bar either way.
 	let tooltipClasses = $derived(
-		`tooltip absolute ${isOutside ? "-top-8" : "top-8"} bg-[var(--block-color)] leading-none text-xs p-1.5 rounded left-1/2 -translate-x-1/2 whitespace-nowrap transition-opacity duration-150`,
+		`tooltip absolute ${isOutside ? "-top-8.5" : "top-8.5"} bg-[var(--block-color)] leading-none text-xs p-1.5 rounded left-1/2 -translate-x-1/2 whitespace-nowrap transition-opacity duration-150`,
 	);
 
 	const labels = {
 		de: {
 			add: "Hinzufügen",
+			comment: "Kommentare",
+			commentAria: "Kommentare des Blocks",
 			position: "Anordnen",
 			delete: "Löschen",
 			edit: "Bearbeiten",
@@ -167,6 +192,8 @@
 		},
 		en: {
 			add: "Add",
+			comment: "Comments",
+			commentAria: "Comments of the block",
 			position: "Arrange",
 			delete: "Delete",
 			edit: "Edit",
@@ -210,14 +237,14 @@
 	{/if}
 
 	<div
-		class="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}"
+		class="left-1/2 z-9999 flex -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}>
 		<button
 			aria-label={t.addAria}
 			class={[
-				"cursor-pointer",
+				"relative cursor-pointer",
 				(autoTranslate || isSynced) && "pointer-events-none opacity-40",
 			]}
 			onmouseenter={() => showTooltip("add")}
@@ -322,7 +349,7 @@
 		<button
 			aria-label={t.positionAria}
 			class={[
-				"cursor-pointer",
+				"relative cursor-pointer",
 				(autoTranslate || isSynced) && "pointer-events-none opacity-40",
 			]}
 			onmouseenter={() => showTooltip("position")}
@@ -352,7 +379,10 @@
 
 		<button
 			aria-label={t.deleteAria}
-			class={["cursor-pointer", isSynced && "pointer-events-none opacity-40"]}
+			class={[
+				"relative cursor-pointer",
+				isSynced && "pointer-events-none opacity-40",
+			]}
 			onmouseenter={() => showTooltip("delete")}
 			onmouseleave={hideTooltip}
 			onclick={(event) => handleClick(event, CMS_ACTIONS.delete)}>
@@ -378,6 +408,39 @@
 			</div>
 		</button>
 
+		{#if commentsEnabled}
+			<button
+				aria-label={t.commentAria}
+				class="relative flex cursor-pointer items-center gap-1"
+				onmouseenter={() => showTooltip("comment")}
+				onmouseleave={hideTooltip}
+				onclick={(event) => handleClick(event, CMS_ACTIONS.comment)}>
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg">
+					<path
+						d="M6.99997 9H16M6.99997 13H16M6.99997 17H12M22 12C22 17.5229 17.5229 22 12 22C9.01327 22 2 22 2 22C2 22 2 14.5361 2 12C2 6.47715 6.47717 2 12 2C17.5229 2 22 6.47715 22 12Z"
+						stroke="var(--block-text)"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round" />
+				</svg>
+				{#if commentCount > 0}
+					<span class="text-xs leading-none tabular-nums">{commentCount}</span>
+				{/if}
+				<div
+					class={tooltipClasses}
+					class:opacity-0={activeTooltip !== "comment"}
+					class:opacity-100={activeTooltip === "comment"}
+					class:pointer-events-none={activeTooltip !== "comment"}>
+					{t.comment}
+				</div>
+			</button>
+		{/if}
+
 		<button
 			aria-label={t.editAria}
 			class="relative cursor-pointer"

package/src/editor/cmsActions.js

@@ -1,5 +1,6 @@
 const CMS_ACTIONS = {
 	add: "add-block",
+	comment: "comment-block",
 	copy: "copy-block",
 	delete: "delete-block",
 	edit: "edit-block",

package/src/editor/notify.js

@@ -1,5 +1,6 @@
 const EVENTS = {
 	BLOCK_ADD: "BLOCK_ADD",
+	BLOCK_COMMENT: "BLOCK_COMMENT",
 	BLOCK_DELETE: "BLOCK_DELETE",
 	BLOCK_EDIT: "BLOCK_EDIT",
 	BLOCK_POSITION: "BLOCK_POSITION",
@@ -8,6 +9,7 @@ const EVENTS = {
 	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",
 };