@websline/cms-view-utils 1.2.4 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "type": "module",
   "files": [
     "src",
@@ -21,9 +21,9 @@
   "devDependencies": {
     "@eslint/compat": "^2.1.0",
     "@eslint/js": "^10.0.1",
-    "eslint": "^10.4.0",
+    "eslint": "^10.4.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.17.1",
+    "eslint-plugin-svelte": "^3.19.0",
     "globals": "^17.6.0",
     "prettier": "^3.8.3",
     "prettier-plugin-svelte": "^3.5.2",

package/src/components/AddBlockPlaceholder.svelte

@@ -6,6 +6,7 @@
 		class: className,
 		color = "#dadad8",
 		countBlockItems = 0,
+		disabled = false,
 		hoverBorderColor = "#D1CECA",
 		hoverColor = "#E7E5E1",
 		iconBackgroundColor = "#FFFFFF",
@@ -45,6 +46,8 @@
 	);
 
 	const handleClick = () => {
+		if (disabled) return;
+
 		notifyCMS(EVENTS.BLOCK_ADD, {
 			position: countBlockItems,
 		});
@@ -53,8 +56,10 @@
 
 <div>
 	<button
+		{disabled}
 		class={tw(
-			"group relative flex min-h-32 w-full cursor-pointer items-center justify-center rounded-lg transition-all duration-300",
+			"group relative flex min-h-32 w-full items-center justify-center rounded-lg transition-all duration-300",
+			disabled ? "cursor-not-allowed opacity-40" : "cursor-pointer",
 			className,
 		)}
 		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};`}

package/src/components/EditableBlock.svelte

@@ -7,6 +7,7 @@
 	import ImageText from "./skeleton/ImageText.svelte";
 
 	let {
+		autoTranslate,
 		barPosition,
 		block,
 		children,
@@ -45,9 +46,11 @@
 
 		switch (action) {
 			case CMS_ACTIONS.add:
+				if (autoTranslate) return;
 				notifyCMS(EVENTS.BLOCK_ADD, { position });
 				break;
 			case CMS_ACTIONS.delete:
+				if (isSynced) return;
 				notifyCMS(EVENTS.BLOCK_DELETE, {
 					draftBlockUuid: block.uuid,
 				});
@@ -64,6 +67,7 @@
 				});
 				break;
 			case CMS_ACTIONS.position:
+				if (autoTranslate) return;
 				notifyCMS(EVENTS.BLOCK_POSITION, {
 					draftBlockUuid: block.uuid,
 				});
@@ -79,6 +83,7 @@
 	};
 
 	let blockVisible = $derived(block?.meta?.visibility?.enabled);
+	let isSynced = $derived(autoTranslate && block?.meta?.sync?.isSynced);
 
 	let isHovered = $state(false);
 	let isActive = $state(false);
@@ -211,7 +216,10 @@
 		class:opacity-0={!toolbarVisible}>
 		<button
 			aria-label={t.addAria}
-			class="relative cursor-pointer"
+			class={[
+				"cursor-pointer",
+				(autoTranslate || isSynced) && "pointer-events-none opacity-40",
+			]}
 			onmouseenter={() => showTooltip("add")}
 			onmouseleave={hideTooltip}
 			onclick={(event) => handleClick(event, CMS_ACTIONS.add)}>
@@ -294,7 +302,7 @@
 
 		<!-- <button
 			aria-label="copy block"
-			class="cursor-pointer"
+			class={["cursor-pointer", isSynced && "pointer-events-none opacity-40"]}
 			onclick={(event) => handleClick(event, CMS_ACTIONS.copy)}>
 			<svg
 				width="24"
@@ -313,7 +321,10 @@
 
 		<button
 			aria-label={t.positionAria}
-			class="relative cursor-pointer"
+			class={[
+				"cursor-pointer",
+				(autoTranslate || isSynced) && "pointer-events-none opacity-40",
+			]}
 			onmouseenter={() => showTooltip("position")}
 			onmouseleave={hideTooltip}
 			onclick={(event) => handleClick(event, CMS_ACTIONS.position)}>
@@ -341,7 +352,7 @@
 
 		<button
 			aria-label={t.deleteAria}
-			class="relative cursor-pointer"
+			class={["cursor-pointer", isSynced && "pointer-events-none opacity-40"]}
 			onmouseenter={() => showTooltip("delete")}
 			onmouseleave={hideTooltip}
 			onclick={(event) => handleClick(event, CMS_ACTIONS.delete)}>

package/src/middleware/withRequestFilter.js

@@ -14,7 +14,8 @@ const withRequestFilter = (options = {}) => {
 		const { request, url } = context;
 		const accept = request.headers.get("accept") || "";
 
-		const isHtmlRequest = accept.includes("text/html");
+		const isHtmlRequest =
+			accept === "" || accept.includes("text/html") || accept.includes("*/*");
 		const isAstroInternal = url.pathname.startsWith("/_astro");
 		const isErrorRoute = url.pathname.startsWith("/errors/");
 		const hasFileExtension = /\.[a-zA-Z0-9]+$/.test(url.pathname);