@questpie/admin 3.2.0 → 3.2.2

package/dist/client/components/blocks/block-item.mjs

@@ -2,7 +2,7 @@
 
 import { useTranslation } from "../../i18n/hooks.mjs";
 import { cn } from "../../lib/utils.mjs";
-import { useBlockEditorActions, useBlockSchema, useBlockValues, useIsBlockExpanded } from "./block-editor-context.mjs";
+import { useBlockEditorActions, useBlockSchema, useBlockValues, useIsBlockExpanded, useIsBlockSelected } from "./block-editor-context.mjs";
 import { BlockInsertButton } from "./block-insert-button.mjs";
 import { Card, CardContent, CardHeader } from "../ui/card.mjs";
 import { BlockFieldsRenderer } from "./block-fields-renderer.mjs";
@@ -27,13 +27,14 @@ function areBlockItemPropsEqual(prev, next) {
 	return prev.block === next.block && prev.level === next.level && prev.index === next.index && prev.parentId === next.parentId;
 }
 const BlockItem = React.memo(function BlockItem$1(t0) {
-	const $ = c(100);
+	const $ = c(105);
 	const { block, level } = t0;
 	const { t } = useTranslation();
 	const actions = useBlockEditorActions();
 	const blockSchema = useBlockSchema(block.type);
 	const values = useBlockValues(block.id);
 	const isExpanded = useIsBlockExpanded(block.id);
+	const isSelected = useIsBlockSelected(block.id);
 	const isUnknownType = !blockSchema;
 	const canHaveChildren = blockSchema?.allowChildren ?? false;
 	let t1;
@@ -129,63 +130,68 @@ const BlockItem = React.memo(function BlockItem$1(t0) {
 		$[25] = showDropIndicator;
 		$[26] = t11;
 	} else t11 = $[26];
-	const t12 = isUnknownType && "border-destructive/50";
-	let t13;
-	if ($[27] !== t12) {
-		t13 = cn("gap-0 overflow-hidden p-0 transition-shadow", t12);
-		$[27] = t12;
-		$[28] = t13;
-	} else t13 = $[28];
-	let t14;
-	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = cn("group flex cursor-pointer flex-row items-center gap-2 px-3 py-2 select-none", "hover:bg-muted transition-colors", "focus-visible:ring-ring/25 focus-visible:ring-3 focus-visible:outline-none focus-visible:ring-inset");
-		$[29] = t14;
-	} else t14 = $[29];
+	const t12 = `content._values.${block.id}`;
+	const t13 = isUnknownType && "border-destructive/50";
+	const t14 = isSelected && "border-primary ring-primary/20 ring-2";
 	let t15;
-	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-		t15 = /* @__PURE__ */ jsx(Icon, {
+	if ($[27] !== t13 || $[28] !== t14) {
+		t15 = cn("gap-0 overflow-hidden p-0 transition-[border-color,box-shadow]", t13, t14);
+		$[27] = t13;
+		$[28] = t14;
+		$[29] = t15;
+	} else t15 = $[29];
+	const t16 = isSelected && "bg-primary/5";
+	let t17;
+	if ($[30] !== t16) {
+		t17 = cn("group flex cursor-pointer flex-row items-center gap-2 px-3 py-2 select-none", "hover:bg-muted transition-colors", "focus-visible:ring-ring/25 focus-visible:ring-3 focus-visible:outline-none focus-visible:ring-inset", t16);
+		$[30] = t16;
+		$[31] = t17;
+	} else t17 = $[31];
+	let t18;
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = /* @__PURE__ */ jsx(Icon, {
 			icon: "ph:dots-six-vertical",
 			className: "text-muted-foreground h-4 w-4"
 		});
-		$[30] = t15;
-	} else t15 = $[30];
-	let t16;
-	if ($[31] !== attributes || $[32] !== listeners) {
-		t16 = /* @__PURE__ */ jsx("button", {
+		$[32] = t18;
+	} else t18 = $[32];
+	let t19;
+	if ($[33] !== attributes || $[34] !== listeners) {
+		t19 = /* @__PURE__ */ jsx("button", {
 			type: "button",
 			"data-drag-handle": true,
 			className: "hover:bg-muted -ml-1 cursor-grab rounded p-1 active:cursor-grabbing",
 			...attributes,
 			...listeners,
 			onClick: _temp,
-			children: t15
+			children: t18
 		});
-		$[31] = attributes;
-		$[32] = listeners;
-		$[33] = t16;
-	} else t16 = $[33];
-	const t17 = isExpanded && "rotate-90";
-	let t18;
-	if ($[34] !== t17) {
-		t18 = cn("h-4 w-4 transition-transform duration-150 ease-in-out", t17);
-		$[34] = t17;
-		$[35] = t18;
-	} else t18 = $[35];
-	let t19;
-	if ($[36] !== t18) {
-		t19 = /* @__PURE__ */ jsx("div", {
+		$[33] = attributes;
+		$[34] = listeners;
+		$[35] = t19;
+	} else t19 = $[35];
+	const t20 = isExpanded && "rotate-90";
+	let t21;
+	if ($[36] !== t20) {
+		t21 = cn("h-4 w-4 transition-transform duration-150 ease-in-out", t20);
+		$[36] = t20;
+		$[37] = t21;
+	} else t21 = $[37];
+	let t22;
+	if ($[38] !== t21) {
+		t22 = /* @__PURE__ */ jsx("div", {
 			className: "text-muted-foreground",
 			children: /* @__PURE__ */ jsx(Icon, {
 				icon: "ph:caret-right",
-				className: t18
+				className: t21
 			})
 		});
-		$[36] = t18;
-		$[37] = t19;
-	} else t19 = $[37];
-	let t20;
-	if ($[38] !== blockSchema?.admin?.icon || $[39] !== isRoot || $[40] !== isUnknownType) {
-		t20 = isUnknownType ? /* @__PURE__ */ jsx(Icon, {
+		$[38] = t21;
+		$[39] = t22;
+	} else t22 = $[39];
+	let t23;
+	if ($[40] !== blockSchema?.admin?.icon || $[41] !== isRoot || $[42] !== isUnknownType) {
+		t23 = isUnknownType ? /* @__PURE__ */ jsx(Icon, {
 			icon: "ph:warning",
 			className: "text-destructive h-3.5 w-3.5"
 		}) : /* @__PURE__ */ jsx(BlockIcon, {
@@ -193,50 +199,50 @@ const BlockItem = React.memo(function BlockItem$1(t0) {
 			size: 14,
 			className: isRoot ? "text-foreground" : "text-muted-foreground"
 		});
-		$[38] = blockSchema?.admin?.icon;
-		$[39] = isRoot;
-		$[40] = isUnknownType;
-		$[41] = t20;
-	} else t20 = $[41];
-	const t21 = isUnknownType ? "text-destructive" : isRoot ? "text-foreground" : "text-foreground/90";
-	let t22;
-	if ($[42] !== t21) {
-		t22 = cn("truncate text-sm font-medium", t21);
-		$[42] = t21;
-		$[43] = t22;
-	} else t22 = $[43];
-	let t23;
-	if ($[44] !== blockLabel || $[45] !== t22) {
-		t23 = /* @__PURE__ */ jsx("span", {
-			className: t22,
+		$[40] = blockSchema?.admin?.icon;
+		$[41] = isRoot;
+		$[42] = isUnknownType;
+		$[43] = t23;
+	} else t23 = $[43];
+	const t24 = isUnknownType ? "text-destructive" : isRoot ? "text-foreground" : "text-foreground/90";
+	let t25;
+	if ($[44] !== t24) {
+		t25 = cn("truncate text-sm font-medium", t24);
+		$[44] = t24;
+		$[45] = t25;
+	} else t25 = $[45];
+	let t26;
+	if ($[46] !== blockLabel || $[47] !== t25) {
+		t26 = /* @__PURE__ */ jsx("span", {
+			className: t25,
 			children: blockLabel
 		});
-		$[44] = blockLabel;
-		$[45] = t22;
-		$[46] = t23;
-	} else t23 = $[46];
-	let t24;
-	if ($[47] !== values) {
-		t24 = values && /* @__PURE__ */ jsx("span", {
+		$[46] = blockLabel;
+		$[47] = t25;
+		$[48] = t26;
+	} else t26 = $[48];
+	let t27;
+	if ($[49] !== values) {
+		t27 = values && /* @__PURE__ */ jsx("span", {
 			className: "text-muted-foreground hidden truncate text-xs sm:inline",
 			children: getPreviewText(values)
 		});
-		$[47] = values;
-		$[48] = t24;
-	} else t24 = $[48];
-	let t25;
-	if ($[49] !== t23 || $[50] !== t24) {
-		t25 = /* @__PURE__ */ jsxs("div", {
+		$[49] = values;
+		$[50] = t27;
+	} else t27 = $[50];
+	let t28;
+	if ($[51] !== t26 || $[52] !== t27) {
+		t28 = /* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 flex-1 items-baseline gap-2",
-			children: [t23, t24]
+			children: [t26, t27]
 		});
-		$[49] = t23;
-		$[50] = t24;
-		$[51] = t25;
-	} else t25 = $[51];
-	let t26;
-	if ($[52] !== block.id || $[53] !== canHaveChildren || $[54] !== handleDuplicate || $[55] !== handleRemove) {
-		t26 = /* @__PURE__ */ jsx("div", {
+		$[51] = t26;
+		$[52] = t27;
+		$[53] = t28;
+	} else t28 = $[53];
+	let t29;
+	if ($[54] !== block.id || $[55] !== canHaveChildren || $[56] !== handleDuplicate || $[57] !== handleRemove) {
+		t29 = /* @__PURE__ */ jsx("div", {
 			"data-actions-menu": true,
 			children: /* @__PURE__ */ jsx(BlockItemDropdownMenu, {
 				blockId: block.id,
@@ -246,55 +252,58 @@ const BlockItem = React.memo(function BlockItem$1(t0) {
 				className: "h-7 w-7 opacity-0 transition-opacity group-hover:opacity-100"
 			})
 		});
-		$[52] = block.id;
-		$[53] = canHaveChildren;
-		$[54] = handleDuplicate;
-		$[55] = handleRemove;
-		$[56] = t26;
-	} else t26 = $[56];
-	let t27;
-	if ($[57] !== handleKeyDown || $[58] !== handleToggleExpand || $[59] !== t16 || $[60] !== t19 || $[61] !== t20 || $[62] !== t25 || $[63] !== t26) {
-		t27 = /* @__PURE__ */ jsxs(CardHeader, {
+		$[54] = block.id;
+		$[55] = canHaveChildren;
+		$[56] = handleDuplicate;
+		$[57] = handleRemove;
+		$[58] = t29;
+	} else t29 = $[58];
+	let t30;
+	if ($[59] !== handleKeyDown || $[60] !== handleToggleExpand || $[61] !== isExpanded || $[62] !== t17 || $[63] !== t19 || $[64] !== t22 || $[65] !== t23 || $[66] !== t28 || $[67] !== t29) {
+		t30 = /* @__PURE__ */ jsxs(CardHeader, {
 			role: "button",
 			tabIndex: 0,
-			className: t14,
+			"aria-expanded": isExpanded,
+			className: t17,
 			onClick: handleToggleExpand,
 			onKeyDown: handleKeyDown,
 			children: [
-				t16,
 				t19,
-				t20,
-				t25,
-				t26
+				t22,
+				t23,
+				t28,
+				t29
 			]
 		});
-		$[57] = handleKeyDown;
-		$[58] = handleToggleExpand;
-		$[59] = t16;
-		$[60] = t19;
-		$[61] = t20;
-		$[62] = t25;
-		$[63] = t26;
-		$[64] = t27;
-	} else t27 = $[64];
-	let t28;
-	if ($[65] !== block.id || $[66] !== blockSchema || $[67] !== isExpanded || $[68] !== isRoot) {
-		t28 = isExpanded && blockSchema && /* @__PURE__ */ jsx(CardContent, {
+		$[59] = handleKeyDown;
+		$[60] = handleToggleExpand;
+		$[61] = isExpanded;
+		$[62] = t17;
+		$[63] = t19;
+		$[64] = t22;
+		$[65] = t23;
+		$[66] = t28;
+		$[67] = t29;
+		$[68] = t30;
+	} else t30 = $[68];
+	let t31;
+	if ($[69] !== block.id || $[70] !== blockSchema || $[71] !== isExpanded || $[72] !== isRoot) {
+		t31 = isExpanded && blockSchema && /* @__PURE__ */ jsx(CardContent, {
 			className: cn("p-3", !isRoot && "py-2"),
 			children: /* @__PURE__ */ jsx(BlockFieldsRenderer, {
 				blockId: block.id,
 				blockSchema
 			})
 		});
-		$[65] = block.id;
-		$[66] = blockSchema;
-		$[67] = isExpanded;
-		$[68] = isRoot;
-		$[69] = t28;
-	} else t28 = $[69];
-	let t29;
-	if ($[70] !== block.type || $[71] !== isExpanded || $[72] !== isUnknownType || $[73] !== t) {
-		t29 = isExpanded && isUnknownType && /* @__PURE__ */ jsx(CardContent, {
+		$[69] = block.id;
+		$[70] = blockSchema;
+		$[71] = isExpanded;
+		$[72] = isRoot;
+		$[73] = t31;
+	} else t31 = $[73];
+	let t32;
+	if ($[74] !== block.type || $[75] !== isExpanded || $[76] !== isUnknownType || $[77] !== t) {
+		t32 = isExpanded && isUnknownType && /* @__PURE__ */ jsx(CardContent, {
 			className: "p-3",
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "text-destructive flex items-center gap-2 text-sm",
@@ -304,31 +313,33 @@ const BlockItem = React.memo(function BlockItem$1(t0) {
 				}), /* @__PURE__ */ jsx("span", { children: t("blocks.unknownType", { type: block.type }) })]
 			})
 		});
-		$[70] = block.type;
-		$[71] = isExpanded;
-		$[72] = isUnknownType;
-		$[73] = t;
-		$[74] = t29;
-	} else t29 = $[74];
-	let t30;
-	if ($[75] !== t13 || $[76] !== t27 || $[77] !== t28 || $[78] !== t29) {
-		t30 = /* @__PURE__ */ jsxs(Card, {
-			className: t13,
+		$[74] = block.type;
+		$[75] = isExpanded;
+		$[76] = isUnknownType;
+		$[77] = t;
+		$[78] = t32;
+	} else t32 = $[78];
+	let t33;
+	if ($[79] !== t12 || $[80] !== t15 || $[81] !== t30 || $[82] !== t31 || $[83] !== t32) {
+		t33 = /* @__PURE__ */ jsxs(Card, {
+			"data-field-path": t12,
+			className: t15,
 			children: [
-				t27,
-				t28,
-				t29
+				t30,
+				t31,
+				t32
 			]
 		});
-		$[75] = t13;
-		$[76] = t27;
-		$[77] = t28;
-		$[78] = t29;
-		$[79] = t30;
-	} else t30 = $[79];
-	let t31;
-	if ($[80] !== block.children || $[81] !== block.id || $[82] !== canHaveChildren || $[83] !== isExpanded || $[84] !== level) {
-		t31 = canHaveChildren && isExpanded && block.children.length > 0 && /* @__PURE__ */ jsxs("div", {
+		$[79] = t12;
+		$[80] = t15;
+		$[81] = t30;
+		$[82] = t31;
+		$[83] = t32;
+		$[84] = t33;
+	} else t33 = $[84];
+	let t34;
+	if ($[85] !== block.children || $[86] !== block.id || $[87] !== canHaveChildren || $[88] !== isExpanded || $[89] !== level) {
+		t34 = canHaveChildren && isExpanded && block.children.length > 0 && /* @__PURE__ */ jsxs("div", {
 			className: "relative",
 			children: [/* @__PURE__ */ jsx("div", { className: "bg-border absolute top-0 bottom-0 left-3 w-px" }), /* @__PURE__ */ jsx("div", {
 				className: "space-y-2 pt-2 pl-8",
@@ -339,16 +350,16 @@ const BlockItem = React.memo(function BlockItem$1(t0) {
 				})
 			})]
 		});
-		$[80] = block.children;
-		$[81] = block.id;
-		$[82] = canHaveChildren;
-		$[83] = isExpanded;
-		$[84] = level;
-		$[85] = t31;
-	} else t31 = $[85];
-	let t32;
-	if ($[86] !== block.children || $[87] !== block.id || $[88] !== blockLabel || $[89] !== canHaveChildren || $[90] !== isExpanded) {
-		t32 = canHaveChildren && isExpanded && /* @__PURE__ */ jsxs("div", {
+		$[85] = block.children;
+		$[86] = block.id;
+		$[87] = canHaveChildren;
+		$[88] = isExpanded;
+		$[89] = level;
+		$[90] = t34;
+	} else t34 = $[90];
+	let t35;
+	if ($[91] !== block.children || $[92] !== block.id || $[93] !== blockLabel || $[94] !== canHaveChildren || $[95] !== isExpanded) {
+		t35 = canHaveChildren && isExpanded && /* @__PURE__ */ jsxs("div", {
 			className: "relative mt-2 pl-8",
 			children: [
 				/* @__PURE__ */ jsx("div", { className: "bg-border absolute -top-2 left-3 h-[calc(50%+8px)] w-px" }),
@@ -363,36 +374,36 @@ const BlockItem = React.memo(function BlockItem$1(t0) {
 				})
 			]
 		});
-		$[86] = block.children;
-		$[87] = block.id;
-		$[88] = blockLabel;
-		$[89] = canHaveChildren;
-		$[90] = isExpanded;
-		$[91] = t32;
-	} else t32 = $[91];
-	let t33;
-	if ($[92] !== setNodeRef || $[93] !== style || $[94] !== t10 || $[95] !== t11 || $[96] !== t30 || $[97] !== t31 || $[98] !== t32) {
-		t33 = /* @__PURE__ */ jsxs("div", {
+		$[91] = block.children;
+		$[92] = block.id;
+		$[93] = blockLabel;
+		$[94] = canHaveChildren;
+		$[95] = isExpanded;
+		$[96] = t35;
+	} else t35 = $[96];
+	let t36;
+	if ($[97] !== setNodeRef || $[98] !== style || $[99] !== t10 || $[100] !== t11 || $[101] !== t33 || $[102] !== t34 || $[103] !== t35) {
+		t36 = /* @__PURE__ */ jsxs("div", {
 			ref: setNodeRef,
 			style,
 			className: t10,
 			children: [
 				t11,
-				t30,
-				t31,
-				t32
+				t33,
+				t34,
+				t35
 			]
 		});
-		$[92] = setNodeRef;
-		$[93] = style;
-		$[94] = t10;
-		$[95] = t11;
-		$[96] = t30;
-		$[97] = t31;
-		$[98] = t32;
-		$[99] = t33;
-	} else t33 = $[99];
-	return t33;
+		$[97] = setNodeRef;
+		$[98] = style;
+		$[99] = t10;
+		$[100] = t11;
+		$[101] = t33;
+		$[102] = t34;
+		$[103] = t35;
+		$[104] = t36;
+	} else t36 = $[104];
+	return t36;
 }, areBlockItemPropsEqual);
 function getBlockLabel(block, blockSchema, values) {
 	if (values) {

package/dist/client/components/blocks/utils/tree-utils.mjs

@@ -19,6 +19,18 @@ function findBlockById(tree, id) {
 	return null;
 }
 /**
+* Find the path of block IDs from root to the target block.
+*/
+function getBlockPathIds(tree, id) {
+	for (const node of tree) {
+		const nextPath = [node.id];
+		if (node.id === id) return nextPath;
+		const childPath = getBlockPathIds(node.children, id);
+		if (childPath) return [...nextPath, ...childPath];
+	}
+	return null;
+}
+/**
 * Find a block's position (parent and index) in the tree.
 */
 function findBlockPosition(tree, id, parentId = null) {
@@ -182,4 +194,4 @@ function getDefaultValues(fields) {
 }
 
 //#endregion
-export { countBlocks, duplicateBlockInTree, findBlockById, findBlockPosition, getAllBlockIds, getDefaultValues, insertBlockInTree, removeBlockFromTree, reorderBlockInTree };
+export { countBlocks, duplicateBlockInTree, findBlockById, findBlockPosition, getAllBlockIds, getBlockPathIds, getDefaultValues, insertBlockInTree, removeBlockFromTree, reorderBlockInTree };