@jbpark/live-editor 1.17.0 → 1.18.0

package/dist/dnd/index.d.ts

@@ -1,2 +1,2 @@
-import { a as PanelRenderData, c as DraggableItemDragState, i as PanelBinding, l as DraggableItemProps, n as ICON_MAP, o as Props, r as PaletteRenderData, s as DraggableItem, t as Dnd } from "../index-qdhllaw-.js";
-export { DraggableItem, type DraggableItemDragState, type DraggableItemProps, ICON_MAP, type PaletteRenderData, type PanelBinding, type PanelRenderData, type Props, Dnd as default };
+import { a as ICON_OPTIONS, c as PanelRenderData, d as DraggableItemDragState, f as DraggableItemProps, i as ICON_MAP, l as Props, n as Panel, o as PaletteRenderData, r as PanelProps, s as PanelBinding, t as Dnd, u as DraggableItem } from "../index-soMhswGI.js";
+export { Panel as DefaultPanel, DraggableItem, type DraggableItemDragState, type DraggableItemProps, ICON_MAP, ICON_OPTIONS, type PaletteRenderData, type PanelBinding, type PanelProps, type PanelRenderData, type Props, Dnd as default };

package/dist/dnd/index.js

@@ -1,2 +1,2 @@
-import { n as ICON_MAP, r as DraggableItem, t as Dnd } from "../dnd-D8hsq1Fl.js";
-export { DraggableItem, ICON_MAP, Dnd as default };
+import { a as DraggableItem, i as ICON_OPTIONS, n as Panel, r as ICON_MAP, t as Dnd } from "../dnd-l2V0EmfS.js";
+export { Panel as DefaultPanel, DraggableItem, ICON_MAP, ICON_OPTIONS, Dnd as default };

package/dist/{dnd-D8hsq1Fl.js → dnd-l2V0EmfS.js}

@@ -18,8 +18,6 @@ import Placeholder from "@tiptap/extension-placeholder";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 //#region src/components/dnd/draggable.tsx
-var import_lib = require_lib();
-var import_lib$1 = /* @__PURE__ */ __toESM(require_lib$1(), 1);
 const DraggableItem = ({ item, children }) => {
 	const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
 		id: item.id,
@@ -191,6 +189,63 @@ const Tiptap = ({ value = "", placeholder = "Enter text...", className, onChange
 	});
 };
 //#endregion
+//#region src/components/dnd/panel/node.tsx
+var import_lib = require_lib();
+var import_lib$1 = /* @__PURE__ */ __toESM(require_lib$1(), 1);
+const Node = ({ data, onChange }) => {
+	const idAttr = data.dataAttributes.find((a) => a.name === "data-id");
+	const bindingAttr = data.dataAttributes.find((a) => a.name === "data-binding");
+	if (!idAttr?.value || !bindingAttr?.value) return null;
+	const dataId = idAttr.value;
+	const bindings = data.bindings || parseBinding(bindingAttr.value);
+	if (!bindings.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-2 rounded",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "space-y-1",
+			children: bindings.map((binding) => {
+				const currentValue = getCurrentValue(data, binding.property);
+				return /* @__PURE__ */ jsxs("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ jsxs("label", {
+						className: "block text-xs font-semibold text-gray-700",
+						children: [binding.label, /* @__PURE__ */ jsxs("span", {
+							className: "ml-1 text-gray-400",
+							children: [
+								"(",
+								binding.property,
+								")"
+							]
+						})]
+					}), /* @__PURE__ */ jsx(Field, {
+						binding: {
+							id: dataId,
+							label: binding.label,
+							property: binding.property,
+							type: binding.type,
+							widget: binding.widget,
+							options: binding.options,
+							render: binding.render,
+							min: binding.min,
+							max: binding.max,
+							pattern: binding.pattern,
+							required: binding.required,
+							value: currentValue,
+							onChange: (next) => onChange?.({
+								id: dataId,
+								label: binding.label,
+								property: binding.property,
+								value: next
+							})
+						},
+						onNodeChange: onChange
+					})]
+				}, binding.label);
+			})
+		})
+	});
+};
+//#endregion
 //#region src/components/dnd/panel/selection.ts
 const removeIndices = (items, indices) => {
 	return items.filter((_, index) => !indices.has(index));
@@ -550,12 +605,13 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 					})]
 				}), /* @__PURE__ */ jsx(Field, {
 					binding: {
+						id: `primitive-${item.id}`,
 						label: `item-${i}`,
-						property: item.type
+						property: item.type,
+						value: String(item.value ?? ""),
+						onChange: (next) => updatePrimitive(item.index, next)
 					},
-					id: `primitive-${item.id}`,
-					value: String(item.value ?? ""),
-					onChange: ({ value: next }) => updatePrimitive(item.index, next)
+					onNodeChange: onChildChange
 				})]
 			}, item.id))
 		]
@@ -645,14 +701,15 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 								children: key
 							}), /* @__PURE__ */ jsx(Field, {
 								binding: {
+									id: `item-${item.id}-${key}`,
 									label: key,
 									property: render?.[key] && "type" in render[key] ? render[key].property ?? render[key].type : key,
 									type: render?.[key] && "type" in render[key] ? render[key].type : void 0,
-									render: render?.[key] && "type" in render[key] ? render[key].render : render?.[key] && !("type" in render[key]) ? render[key] : void 0
+									render: render?.[key] && "type" in render[key] ? render[key].render : render?.[key] && !("type" in render[key]) ? render[key] : void 0,
+									value: String(prop.value),
+									onChange: (next) => updateProperty(item.index, key, parseValue(next))
 								},
-								id: `item-${item.id}-${key}`,
-								value: String(prop.value),
-								onChange: ({ value: next }) => updateProperty(item.index, key, parseValue(next))
+								onNodeChange: onChildChange
 							})]
 						}), /* @__PURE__ */ jsxs("span", {
 							className: "text-right text-xs text-gray-500",
@@ -896,7 +953,7 @@ const Children = ({ value, onChange, onNodeChange }) => {
 	});
 };
 //#endregion
-//#region src/components/dnd/panel/icon-map.ts
+//#region src/components/dnd/panel/icon-map.tsx
 const ICON_MAP = {
 	AlertCircle,
 	ArrowDown,
@@ -936,6 +993,13 @@ const ICON_MAP = {
 	User,
 	X
 };
+const ICON_OPTIONS = Object.entries(ICON_MAP).map(([name, Icon]) => ({
+	label: /* @__PURE__ */ jsxs("span", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx(Icon, { size: 14 }), name]
+	}),
+	value: name
+}));
 //#endregion
 //#region src/components/dnd/panel/field.tsx
 const isColorProperty = (propertyName) => {
@@ -957,7 +1021,7 @@ const formatDateValue = (date) => {
 	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
 };
 const COLOR_COMMIT_DELAY = 75;
-const ColorPickerField = ({ id, label, property, value, onChange }) => {
+const ColorPickerField = ({ value, onChange }) => {
 	const [liveValue, setLiveValue] = useState(value);
 	const [prevValue, setPrevValue] = useState(value);
 	const lastCommittedRef = useRef(value);
@@ -971,12 +1035,7 @@ const ColorPickerField = ({ id, label, property, value, onChange }) => {
 	const commit = (next) => {
 		if (next === lastCommittedRef.current) return;
 		lastCommittedRef.current = next;
-		onChange?.({
-			id,
-			label,
-			property,
-			value: next
-		});
+		onChange(next);
 	};
 	const debouncedCommit = useDebounce(() => commit(liveValue), {
 		delay: COLOR_COMMIT_DELAY,
@@ -994,14 +1053,8 @@ const ColorPickerField = ({ id, label, property, value, onChange }) => {
 		}
 	});
 };
-const ICON_OPTIONS = Object.entries(ICON_MAP).map(([name, Icon]) => ({
-	label: /* @__PURE__ */ jsxs("span", {
-		className: "flex items-center gap-2",
-		children: [/* @__PURE__ */ jsx(Icon, { size: 14 }), name]
-	}),
-	value: name
-}));
-const Field = ({ binding, id, value, onChange }) => {
+const Field = ({ binding, onNodeChange }) => {
+	const { id, value, onChange } = binding;
 	const parsedValue = useMemo(() => {
 		return parseValue(value);
 	}, [value]);
@@ -1009,25 +1062,13 @@ const Field = ({ binding, id, value, onChange }) => {
 	if (binding.property === "items" || binding.property === "data" || binding.type === "array") return /* @__PURE__ */ jsx(Items, {
 		value,
 		render: binding.render,
-		onChange: (next) => {
-			onChange?.({
-				id,
-				label: binding.label,
-				property: binding.property,
-				value: next
-			});
-		},
-		onChildChange: onChange
+		onChange,
+		onChildChange: onNodeChange
 	});
 	if (binding.type === "richtext") return /* @__PURE__ */ jsx(Tiptap, {
 		value,
 		onChange: (next) => {
-			if (next !== value) onChange?.({
-				id,
-				label: binding.label,
-				property: binding.property,
-				value: next
-			});
+			if (next !== value) onChange(next);
 		}
 	});
 	if (binding.property === BINDING_PROP.INNER_HTML || binding.type === "jsx") {
@@ -1038,26 +1079,14 @@ const Field = ({ binding, id, value, onChange }) => {
 			fragment: !isHTML,
 			raw: isHTML,
 			onSave: (next) => {
-				if (next !== value) onChange?.({
-					id,
-					label: binding.label,
-					property: binding.property,
-					value: next
-				});
+				if (next !== value) onChange(next);
 			}
 		});
 	}
 	if (binding.property === "children" && Array.isArray(parsedValue)) return /* @__PURE__ */ jsx(Children, {
 		value: parsedValue,
-		onChange: (next) => {
-			onChange?.({
-				id,
-				label: binding.label,
-				property: binding.property,
-				value: next
-			});
-		},
-		onNodeChange: onChange
+		onChange,
+		onNodeChange
 	});
 	if (typeof parsedValue === "object" && parsedValue !== null && !Array.isArray(parsedValue)) return /* @__PURE__ */ jsx("div", {
 		className: "space-y-2 rounded border border-gray-200 bg-gray-50 p-2",
@@ -1068,38 +1097,29 @@ const Field = ({ binding, id, value, onChange }) => {
 				children: key
 			}), /* @__PURE__ */ jsx(Field, {
 				binding: {
+					id,
 					label: key,
 					property: binding.render?.[key] && "type" in binding.render[key] ? binding.render[key].type : key,
 					type: binding.render?.[key] && "type" in binding.render[key] ? binding.render[key].type : void 0,
-					render: binding.render?.[key] && !("type" in binding.render[key]) ? binding.render[key] : void 0
+					render: binding.render?.[key] && !("type" in binding.render[key]) ? binding.render[key] : void 0,
+					value: typeof val === "object" ? JSON.stringify(val) : String(val),
+					onChange: (next) => {
+						const convertedValue = parseValue(next);
+						const updated = {
+							...parsedValue,
+							[key]: convertedValue
+						};
+						onChange(JSON.stringify(updated));
+					}
 				},
-				id,
-				value: typeof val === "object" ? JSON.stringify(val) : String(val),
-				onChange: ({ value: next }) => {
-					const convertedValue = parseValue(next);
-					const updated = {
-						...parsedValue,
-						[key]: convertedValue
-					};
-					onChange?.({
-						id,
-						label: binding.label,
-						property: binding.property,
-						value: JSON.stringify(updated)
-					});
-				}
+				onNodeChange
 			})]
 		}, key))
 	});
 	if (binding.type === "boolean" || typeof parsedValue === "boolean") return /* @__PURE__ */ jsx(Checkbox, {
 		checked: parsedValue === true || parsedValue === "true",
 		onChange: (checked) => {
-			onChange?.({
-				id,
-				label: binding.label,
-				property: binding.property,
-				value: checked.toString()
-			});
+			onChange(checked.toString());
 		}
 	});
 	const stringValue = String(value);
@@ -1107,18 +1127,10 @@ const Field = ({ binding, id, value, onChange }) => {
 		value: stringValue,
 		options: binding.options,
 		onChange: (next) => {
-			if (next !== value) onChange?.({
-				id,
-				label: binding.label,
-				property: binding.property,
-				value: next
-			});
+			if (next !== value) onChange(next);
 		}
 	});
 	if (binding.type === "color" || isColorProperty(binding.property)) return /* @__PURE__ */ jsx(ColorPickerField, {
-		id,
-		label: binding.label,
-		property: binding.property,
 		value: normalizeToHex(stringValue),
 		onChange
 	});
@@ -1132,12 +1144,7 @@ const Field = ({ binding, id, value, onChange }) => {
 				return;
 			}
 			setValidationError(null);
-			if (next !== value) onChange?.({
-				id,
-				label: binding.label,
-				property: binding.property,
-				value: next
-			});
+			if (next !== value) onChange(next);
 		}
 	}), validationError && /* @__PURE__ */ jsx("p", {
 		className: "mt-1 text-xs text-red-500",
@@ -1155,12 +1162,7 @@ const Field = ({ binding, id, value, onChange }) => {
 				return;
 			}
 			setValidationError(null);
-			if (next !== value) onChange?.({
-				id,
-				label: binding.label,
-				property: binding.property,
-				value: next
-			});
+			if (next !== value) onChange(next);
 		}
 	}), validationError && /* @__PURE__ */ jsx("p", {
 		className: "mt-1 text-xs text-red-500",
@@ -1174,12 +1176,7 @@ const Field = ({ binding, id, value, onChange }) => {
 				value: stringValue,
 				options: ICON_OPTIONS,
 				onChange: (next) => {
-					if (next !== value) onChange?.({
-						id,
-						label: binding.label,
-						property: binding.property,
-						value: next
-					});
+					if (next !== value) onChange(next);
 				}
 			}), SelectedIcon && /* @__PURE__ */ jsx(SelectedIcon, {
 				size: 18,
@@ -1207,12 +1204,7 @@ const Field = ({ binding, id, value, onChange }) => {
 							return;
 						}
 						setValidationError(null);
-						if (next !== value) onChange?.({
-							id,
-							label: binding.label,
-							property: binding.property,
-							value: next
-						});
+						if (next !== value) onChange(next);
 					}
 				}),
 				/* @__PURE__ */ jsx(Upload, {
@@ -1222,12 +1214,7 @@ const Field = ({ binding, id, value, onChange }) => {
 					defaultValue: defaultUploadValue,
 					onChange: (files) => {
 						const next = files[0]?.url ?? "";
-						if (next !== value) onChange?.({
-							id,
-							label: binding.label,
-							property: binding.property,
-							value: next
-						});
+						if (next !== value) onChange(next);
 					}
 				}),
 				validationError && /* @__PURE__ */ jsx("p", {
@@ -1249,12 +1236,7 @@ const Field = ({ binding, id, value, onChange }) => {
 				return;
 			}
 			setValidationError(null);
-			if (next !== value) onChange?.({
-				id,
-				label: binding.label,
-				property: binding.property,
-				value: next
-			});
+			if (next !== value) onChange(next);
 		}
 	}), validationError && /* @__PURE__ */ jsx("p", {
 		className: "mt-1 text-xs text-red-500",
@@ -1271,12 +1253,7 @@ const Field = ({ binding, id, value, onChange }) => {
 				return;
 			}
 			setValidationError(null);
-			if (next !== value) onChange?.({
-				id,
-				label: binding.label,
-				property: binding.property,
-				value: next
-			});
+			if (next !== value) onChange(next);
 		}
 	}), validationError && /* @__PURE__ */ jsx("p", {
 		className: "mt-1 text-xs text-red-500",
@@ -1284,46 +1261,43 @@ const Field = ({ binding, id, value, onChange }) => {
 	})] });
 };
 //#endregion
-//#region src/components/dnd/panel/node.tsx
-const Node = ({ data, onChange }) => {
-	const idAttr = data.dataAttributes.find((a) => a.name === "data-id");
-	const bindingAttr = data.dataAttributes.find((a) => a.name === "data-binding");
-	if (!idAttr?.value || !bindingAttr?.value) return null;
-	const dataId = idAttr.value;
-	const bindings = data.bindings || parseBinding(bindingAttr.value);
-	if (!bindings.length) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: "space-y-2 rounded",
-		children: /* @__PURE__ */ jsx("div", {
+//#region src/components/dnd/panel/field-group.tsx
+const FieldGroup = ({ bindings, onNodeChange }) => /* @__PURE__ */ jsx("div", {
+	className: "space-y-2 rounded",
+	children: /* @__PURE__ */ jsx("div", {
+		className: "space-y-1",
+		children: bindings.map((binding) => /* @__PURE__ */ jsxs("div", {
 			className: "space-y-1",
-			children: bindings.map((binding) => {
-				const currentValue = getCurrentValue(data, binding.property);
-				return /* @__PURE__ */ jsxs("div", {
-					className: "space-y-1",
-					children: [/* @__PURE__ */ jsxs("label", {
-						className: "block text-xs font-semibold text-gray-700",
-						children: [binding.label, /* @__PURE__ */ jsxs("span", {
-							className: "ml-1 text-gray-400",
-							children: [
-								"(",
-								binding.property,
-								")"
-							]
-						})]
-					}), /* @__PURE__ */ jsx(Field, {
-						id: dataId,
-						binding,
-						value: currentValue,
-						onChange
-					})]
-				}, binding.label);
-			})
-		})
-	});
-};
+			children: [/* @__PURE__ */ jsxs("label", {
+				className: "block text-xs font-semibold text-gray-700",
+				children: [binding.label, /* @__PURE__ */ jsxs("span", {
+					className: "ml-1 text-gray-400",
+					children: [
+						"(",
+						binding.property,
+						")"
+					]
+				})]
+			}), /* @__PURE__ */ jsx(Field, {
+				binding,
+				onNodeChange
+			})]
+		}, binding.label))
+	})
+});
 //#endregion
 //#region src/components/dnd/panel/panel.tsx
-const Panel = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false, fields, onFieldChange }) => {
+const groupBindingsById = (bindings) => {
+	const groups = /* @__PURE__ */ new Map();
+	for (const binding of bindings) {
+		const group = groups.get(binding.id);
+		if (group) group.push(binding);
+		else groups.set(binding.id, [binding]);
+	}
+	return [...groups.values()];
+};
+const Panel = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false, bindings, onNodeChange }) => {
+	const groups = useMemo(() => groupBindingsById(bindings), [bindings]);
 	if (!item) return /* @__PURE__ */ jsx(Typography.Paragraph, {
 		className: cn("p-4 text-sm text-gray-500"),
 		children: "Please select a section."
@@ -1360,14 +1334,14 @@ const Panel = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canMov
 					]
 				})]
 			}),
-			!fields.length && /* @__PURE__ */ jsx(Typography.Text, {
+			!groups.length && /* @__PURE__ */ jsx(Typography.Text, {
 				className: "text-xs text-gray-400",
 				children: "No editable elements."
 			}),
-			fields.map((node, index) => /* @__PURE__ */ jsx(Node, {
-				data: node,
-				onChange: onFieldChange
-			}, `${item.id}-${index}`))
+			groups.map((group) => /* @__PURE__ */ jsx(FieldGroup, {
+				bindings: group,
+				onNodeChange
+			}, group[0].id))
 		]
 	});
 };
@@ -1593,8 +1567,8 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 			onMoveDown: () => moveSection(selectedId, "down"),
 			canMoveUp,
 			canMoveDown,
-			fields,
-			onFieldChange
+			bindings,
+			onNodeChange: onFieldChange
 		});
 	};
 	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DndContext, {
@@ -1702,7 +1676,8 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 //#region src/components/dnd/index.ts
 const Dnd = Dnd$1;
 Dnd.DraggableItem = DraggableItem;
+Dnd.DefaultPanel = Panel;
 //#endregion
-export { ICON_MAP as n, DraggableItem as r, Dnd as t };
+export { DraggableItem as a, ICON_OPTIONS as i, Panel as n, ICON_MAP as r, Dnd as t };
 
-//# sourceMappingURL=dnd-D8hsq1Fl.js.map
+//# sourceMappingURL=dnd-l2V0EmfS.js.map