@questpie/admin 1.1.1 → 3.0.0

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

@@ -0,0 +1,363 @@
+"use client";
+
+import { useTranslation } from "../../i18n/hooks.mjs";
+import { Button } from "../ui/button.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "../ui/dropdown-menu.mjs";
+import { useAllowedBlockTypes, useBlockEditorActions, useBlockRegistry, useBlockTree, useIsBlockExpanded } from "./block-editor-context.mjs";
+import { BlockTypeIcon } from "./block-type-icon.mjs";
+import { findBlockById, findBlockPosition } from "./utils/tree-utils.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/blocks/block-item-menu.tsx
+/**
+* Block Item Menu
+*
+* Shared menu items for block context menu and dropdown.
+* Provides actions like duplicate, delete, add child, etc.
+*/
+function MenuItems(t0) {
+	const $ = c(60);
+	const { blockId, canHaveChildren, onDuplicate, onRemove, MenuItem, Separator, SubMenu, SubMenuTrigger, SubMenuContent, onClose } = t0;
+	const { t } = useTranslation();
+	const actions = useBlockEditorActions();
+	const blockRegistry = useBlockRegistry();
+	const allowedBlocks = useAllowedBlockTypes();
+	const blockTree = useBlockTree();
+	const isExpanded = useIsBlockExpanded(blockId);
+	let t1;
+	if ($[0] !== allowedBlocks || $[1] !== blockRegistry) {
+		t1 = Object.entries(blockRegistry).filter((t2$1) => {
+			const [type] = t2$1;
+			if (!allowedBlocks) return true;
+			return allowedBlocks.includes(type);
+		}).map(_temp).sort(_temp2);
+		$[0] = allowedBlocks;
+		$[1] = blockRegistry;
+		$[2] = t1;
+	} else t1 = $[2];
+	const blockTypes = t1;
+	let t2;
+	if ($[3] !== blockId || $[4] !== blockTree) {
+		t2 = findBlockPosition(blockTree, blockId);
+		$[3] = blockId;
+		$[4] = blockTree;
+		$[5] = t2;
+	} else t2 = $[5];
+	const blockPosition = t2;
+	let t3;
+	if ($[6] !== actions || $[7] !== blockId || $[8] !== blockTree || $[9] !== isExpanded || $[10] !== onClose) {
+		t3 = (blockType) => {
+			const childrenCount = findBlockById(blockTree, blockId)?.children.length ?? 0;
+			actions.addBlock(blockType, {
+				parentId: blockId,
+				index: childrenCount
+			});
+			if (!isExpanded) actions.toggleExpanded(blockId);
+			onClose?.();
+		};
+		$[6] = actions;
+		$[7] = blockId;
+		$[8] = blockTree;
+		$[9] = isExpanded;
+		$[10] = onClose;
+		$[11] = t3;
+	} else t3 = $[11];
+	const handleAddChild = t3;
+	let t4;
+	if ($[12] !== actions || $[13] !== blockPosition || $[14] !== onClose) {
+		t4 = (blockType_0) => {
+			if (!blockPosition) return;
+			actions.addBlock(blockType_0, {
+				parentId: blockPosition.parentId,
+				index: blockPosition.index
+			});
+			onClose?.();
+		};
+		$[12] = actions;
+		$[13] = blockPosition;
+		$[14] = onClose;
+		$[15] = t4;
+	} else t4 = $[15];
+	const handleAddAbove = t4;
+	let t5;
+	if ($[16] !== actions || $[17] !== blockPosition || $[18] !== onClose) {
+		t5 = (blockType_1) => {
+			if (!blockPosition) return;
+			actions.addBlock(blockType_1, {
+				parentId: blockPosition.parentId,
+				index: blockPosition.index + 1
+			});
+			onClose?.();
+		};
+		$[16] = actions;
+		$[17] = blockPosition;
+		$[18] = onClose;
+		$[19] = t5;
+	} else t5 = $[19];
+	const handleAddBelow = t5;
+	let t6;
+	if ($[20] !== onClose || $[21] !== onDuplicate) {
+		t6 = () => {
+			onDuplicate();
+			onClose?.();
+		};
+		$[20] = onClose;
+		$[21] = onDuplicate;
+		$[22] = t6;
+	} else t6 = $[22];
+	const handleDuplicate = t6;
+	let t7;
+	if ($[23] !== onClose || $[24] !== onRemove) {
+		t7 = () => {
+			onRemove();
+			onClose?.();
+		};
+		$[23] = onClose;
+		$[24] = onRemove;
+		$[25] = t7;
+	} else t7 = $[25];
+	const handleRemove = t7;
+	let t8;
+	if ($[26] !== MenuItem || $[27] !== Separator || $[28] !== SubMenu || $[29] !== SubMenuContent || $[30] !== SubMenuTrigger || $[31] !== blockPosition || $[32] !== blockTypes || $[33] !== canHaveChildren || $[34] !== handleAddAbove || $[35] !== handleAddBelow || $[36] !== handleAddChild || $[37] !== t) {
+		t8 = blockTypes.length > 0 && blockPosition && /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs(SubMenu, { children: [/* @__PURE__ */ jsxs(SubMenuTrigger, { children: [/* @__PURE__ */ jsx(Icon, {
+				icon: "ph:arrow-up",
+				className: "h-4 w-4"
+			}), t("blocks.addAbove")] }), /* @__PURE__ */ jsx(SubMenuContent, { children: blockTypes.map((t9$1) => {
+				const { type: type_1, label } = t9$1;
+				return /* @__PURE__ */ jsxs(MenuItem, {
+					onClick: () => handleAddAbove(type_1),
+					children: [/* @__PURE__ */ jsx(BlockTypeIcon, {
+						type: type_1,
+						className: "h-4 w-4"
+					}), label]
+				}, type_1);
+			}) })] }),
+			/* @__PURE__ */ jsxs(SubMenu, { children: [/* @__PURE__ */ jsxs(SubMenuTrigger, { children: [/* @__PURE__ */ jsx(Icon, {
+				icon: "ph:arrow-down",
+				className: "h-4 w-4"
+			}), t("blocks.addBelow")] }), /* @__PURE__ */ jsx(SubMenuContent, { children: blockTypes.map((t10$1) => {
+				const { type: type_2, label: label_0 } = t10$1;
+				return /* @__PURE__ */ jsxs(MenuItem, {
+					onClick: () => handleAddBelow(type_2),
+					children: [/* @__PURE__ */ jsx(BlockTypeIcon, {
+						type: type_2,
+						className: "h-4 w-4"
+					}), label_0]
+				}, type_2);
+			}) })] }),
+			canHaveChildren && /* @__PURE__ */ jsxs(SubMenu, { children: [/* @__PURE__ */ jsxs(SubMenuTrigger, { children: [/* @__PURE__ */ jsx(Icon, {
+				icon: "ph:plus",
+				className: "h-4 w-4"
+			}), t("blocks.addChild")] }), /* @__PURE__ */ jsx(SubMenuContent, { children: blockTypes.map((t11$1) => {
+				const { type: type_3, label: label_1 } = t11$1;
+				return /* @__PURE__ */ jsxs(MenuItem, {
+					onClick: () => handleAddChild(type_3),
+					children: [/* @__PURE__ */ jsx(BlockTypeIcon, {
+						type: type_3,
+						className: "h-4 w-4"
+					}), label_1]
+				}, type_3);
+			}) })] }),
+			/* @__PURE__ */ jsx(Separator, {})
+		] });
+		$[26] = MenuItem;
+		$[27] = Separator;
+		$[28] = SubMenu;
+		$[29] = SubMenuContent;
+		$[30] = SubMenuTrigger;
+		$[31] = blockPosition;
+		$[32] = blockTypes;
+		$[33] = canHaveChildren;
+		$[34] = handleAddAbove;
+		$[35] = handleAddBelow;
+		$[36] = handleAddChild;
+		$[37] = t;
+		$[38] = t8;
+	} else t8 = $[38];
+	let t9;
+	if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:copy",
+			className: "h-4 w-4"
+		});
+		$[39] = t9;
+	} else t9 = $[39];
+	let t10;
+	if ($[40] !== t) {
+		t10 = t("common.duplicate");
+		$[40] = t;
+		$[41] = t10;
+	} else t10 = $[41];
+	let t11;
+	if ($[42] !== MenuItem || $[43] !== handleDuplicate || $[44] !== t10) {
+		t11 = /* @__PURE__ */ jsxs(MenuItem, {
+			onClick: handleDuplicate,
+			children: [t9, t10]
+		});
+		$[42] = MenuItem;
+		$[43] = handleDuplicate;
+		$[44] = t10;
+		$[45] = t11;
+	} else t11 = $[45];
+	let t12;
+	if ($[46] !== Separator) {
+		t12 = /* @__PURE__ */ jsx(Separator, {});
+		$[46] = Separator;
+		$[47] = t12;
+	} else t12 = $[47];
+	let t13;
+	if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:trash",
+			className: "h-4 w-4"
+		});
+		$[48] = t13;
+	} else t13 = $[48];
+	let t14;
+	if ($[49] !== t) {
+		t14 = t("common.delete");
+		$[49] = t;
+		$[50] = t14;
+	} else t14 = $[50];
+	let t15;
+	if ($[51] !== MenuItem || $[52] !== handleRemove || $[53] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(MenuItem, {
+			variant: "destructive",
+			onClick: handleRemove,
+			children: [t13, t14]
+		});
+		$[51] = MenuItem;
+		$[52] = handleRemove;
+		$[53] = t14;
+		$[54] = t15;
+	} else t15 = $[54];
+	let t16;
+	if ($[55] !== t11 || $[56] !== t12 || $[57] !== t15 || $[58] !== t8) {
+		t16 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t8,
+			t11,
+			t12,
+			t15
+		] });
+		$[55] = t11;
+		$[56] = t12;
+		$[57] = t15;
+		$[58] = t8;
+		$[59] = t16;
+	} else t16 = $[59];
+	return t16;
+}
+function _temp2(a, b) {
+	return a.label.localeCompare(b.label);
+}
+function _temp(t0) {
+	const [type_0, def] = t0;
+	return {
+		type: type_0,
+		label: getBlockLabel(def)
+	};
+}
+function BlockItemDropdownMenu(t0) {
+	const $ = c(16);
+	let className;
+	let menuProps;
+	if ($[0] !== t0) {
+		({className, ...menuProps} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = menuProps;
+	} else {
+		className = $[1];
+		menuProps = $[2];
+	}
+	const [open, setOpen] = React.useState(false);
+	let t1;
+	if ($[3] !== className) {
+		t1 = /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			className,
+			onClick: _temp3
+		});
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:dots-three-vertical",
+			className: "h-4 w-4"
+		});
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Block actions"
+		});
+		$[5] = t2;
+		$[6] = t3;
+	} else {
+		t2 = $[5];
+		t3 = $[6];
+	}
+	let t4;
+	if ($[7] !== t1) {
+		t4 = /* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+			render: t1,
+			children: [t2, t3]
+		});
+		$[7] = t1;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = () => setOpen(false);
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== menuProps) {
+		t6 = /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "end",
+			children: /* @__PURE__ */ jsx(MenuItems, {
+				...menuProps,
+				MenuItem: DropdownMenuItem,
+				Separator: DropdownMenuSeparator,
+				SubMenu: DropdownMenuSub,
+				SubMenuTrigger: DropdownMenuSubTrigger,
+				SubMenuContent: DropdownMenuSubContent,
+				onClose: t5
+			})
+		});
+		$[10] = menuProps;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== open || $[13] !== t4 || $[14] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(DropdownMenu, {
+			open,
+			onOpenChange: setOpen,
+			children: [t4, t6]
+		});
+		$[12] = open;
+		$[13] = t4;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	return t7;
+}
+function _temp3(e) {
+	return e.stopPropagation();
+}
+function getBlockLabel(blockDef) {
+	const label = blockDef.admin?.label;
+	if (!label) return blockDef.name || "Block";
+	if (typeof label === "string") return label;
+	if ("key" in label) return label.fallback || blockDef.name || "Block";
+	return label.en || Object.values(label)[0] || blockDef.name || "Block";
+}
+
+//#endregion
+export { BlockItemDropdownMenu };