@jbpark/live-editor 2.0.1 → 2.0.2

package/dist/{dnd-DXI5JfwJ.js → dnd-Cyuif73L.js}

@@ -1,7 +1,7 @@
-import { C as __toESM, b as DRAGGABLE_ITEMS, f as nanoid, g as BINDING_PROP, h as require_lib, m as require_lib$1, n as createSectionPreviewCache, r as fillSectionIds, y as DEFAULT_TEMPLATE } from "./document-DEx4WyCn.js";
+import { C as __toESM, b as DRAGGABLE_ITEMS, f as nanoid, g as BINDING_PROP, m as require_lib, n as createSectionPreviewCache, r as fillSectionIds, y as DEFAULT_TEMPLATE } from "./document-DEx4WyCn.js";
 import { d as replaceSections, o as extractSections, r as cn, s as generateSection, u as preloadScripts } from "./utils-CXq1KaM3.js";
 import { i as usePreview } from "./states-Ci1AvoQ9.js";
-import { S as generateCode, _ as extractObjectProperties, b as parseValue, c as extract, d as getStructuredValue, f as parseBinding, g as extractNodeValue, h as createNodeFromValue, i as replaceIds, l as findEditableChildren, m as arrayExpressionToCode, n as clone, o as update, r as fillIds, t as validateBindingValue, u as getCurrentValue, y as parseArrayExpression } from "./ast-BmGLa00g.js";
+import { A as parseValue, D as extractObjectProperties, E as extractNodeValue, M as generateCode, S as parseBinding, _ as moveSelectedIndices, a as extract, b as getCurrentValue, c as moveArrayItem, d as removeArrayItems, f as updateArrayItemProperty, g as replaceIds, h as fillIds, k as parseArrayExpression, l as moveArrayItems, o as appendArrayItem, p as updateArrayItemValue, r as update, s as duplicateArrayItems, t as validateBindingValue, v as removeIndices, x as getStructuredValue, y as findEditableChildren } from "./ast-BKQmEBj9.js";
 import { n as useCompiledModule, r as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-_3tC-S5j.js";
 import { n as Error, t as ErrorBoundary } from "./boundary-b-U70XU_.js";
 import { t as Core } from "./core-mdFWxqB2.js";
@@ -190,8 +190,7 @@ 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);
+var import_lib = /* @__PURE__ */ __toESM(require_lib(), 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");
@@ -249,33 +248,6 @@ const Node = ({ data, onChange }) => {
 	});
 };
 //#endregion
-//#region src/components/dnd/panel/selection.ts
-const removeIndices = (items, indices) => {
-	return items.filter((_, index) => !indices.has(index));
-};
-/**
-* Shifts every selected index up/down by one step as a block, preserving
-* relative order — scattered selections stop moving individually once they
-* hit an unselected neighbor, so the whole group slides together instead of
-* items passing through each other.
-*/
-const moveSelectedIndices = (items, indices, direction) => {
-	const next = [...items];
-	const nextIndices = new Set(indices);
-	const ordered = [...indices].sort((a, b) => direction === "up" ? a - b : b - a);
-	for (const index of ordered) {
-		const target = direction === "up" ? index - 1 : index + 1;
-		if (target < 0 || target >= next.length || nextIndices.has(target)) continue;
-		[next[index], next[target]] = [next[target], next[index]];
-		nextIndices.delete(index);
-		nextIndices.add(target);
-	}
-	return {
-		items: next,
-		indices: nextIndices
-	};
-};
-//#endregion
 //#region src/components/dnd/panel/items.tsx
 const BulkActionsBar = ({ count, onDuplicate, onMoveUp, onMoveDown, onDelete, onClear }) => {
 	if (count === 0) return null;
@@ -322,33 +294,30 @@ const BulkActionsBar = ({ count, onDuplicate, onMoveUp, onMoveDown, onDelete, on
 	});
 };
 const Items = ({ value, render, onChange, onChildChange }) => {
-	const { objectItems, primitiveItems, allElements, parseError } = useMemo(() => {
+	const { objectItems, primitiveItems, parseError } = useMemo(() => {
 		const ast = parseArrayExpression(value);
 		if (!ast) return {
 			objectItems: [],
 			primitiveItems: [],
-			allElements: [],
 			parseError: true
 		};
 		const objectItems = [];
 		const primitiveItems = [];
-		const allElements = ast.elements.filter(Boolean);
-		ast.elements.forEach((element) => {
-			if (!element) return;
-			if (!import_lib$1.isObjectExpression(element)) {
+		ast.elements.filter((element) => Boolean(element)).forEach((element, elementIndex) => {
+			if (!import_lib.isObjectExpression(element)) {
 				const extracted = extractNodeValue(element);
 				primitiveItems.push({
 					id: nanoid(6),
 					index: primitiveItems.length,
+					elementIndex,
 					value: extracted.value,
-					type: extracted.type,
-					astNode: element
+					type: extracted.type
 				});
 				return;
 			}
 			const jsxBindings = {};
 			element.properties.forEach((prop) => {
-				if (!import_lib$1.isObjectProperty(prop) || !import_lib$1.isIdentifier(prop.key) || !import_lib$1.isJSXElement(prop.value)) return;
+				if (!import_lib.isObjectProperty(prop) || !import_lib.isIdentifier(prop.key) || !import_lib.isJSXElement(prop.value)) return;
 				const propertyName = prop.key.name;
 				try {
 					const jsxCode = generateCode(prop.value);
@@ -369,15 +338,14 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 			objectItems.push({
 				id: nanoid(6),
 				index: objectItems.length,
+				elementIndex,
 				editableProperties: extractObjectProperties(element),
-				originalElement: element,
 				jsxBindings
 			});
 		});
 		return {
 			objectItems,
 			primitiveItems,
-			allElements,
 			parseError: false
 		};
 	}, [value]);
@@ -386,158 +354,73 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 	}, [parseError]);
 	const isPrimitive = primitiveItems.length > 0 && objectItems.length === 0;
 	const selection = useMultiSelect(isPrimitive ? primitiveItems.length : objectItems.length);
-	const updatePrimitive = (index, next) => {
-		const ast = parseArrayExpression(value);
-		if (!ast) {
+	const commit = (next) => {
+		if (next === null) {
 			Toast.error("Failed to update this item", { description: "Check the console for details." });
 			return;
 		}
-		const elements = ast.elements.filter(Boolean);
-		const item = primitiveItems.find((p) => p.index === index);
-		if (!item) return;
-		const newNode = createNodeFromValue(item.type, parseValue(next));
-		if (!newNode) return;
-		elements[index] = newNode;
-		onChange?.(generateCode(import_lib$1.arrayExpression(elements)));
+		onChange?.(next);
 	};
-	const movePrimitive = (fromIndex, toIndex) => {
-		const nextElements = [...allElements];
-		const [moved] = nextElements.splice(fromIndex, 1);
-		nextElements.splice(toIndex, 0, moved);
-		onChange?.(generateCode(import_lib$1.arrayExpression(nextElements)));
+	const elementIndicesOf = (items, indices) => {
+		return new Set(items.filter((item) => indices.has(item.index)).map((item) => item.elementIndex));
+	};
+	const updatePrimitive = (elementIndex, next) => {
+		commit(updateArrayItemValue(value, elementIndex, next));
+	};
+	const movePrimitive = (from, to) => {
+		const target = primitiveItems.find((item) => item.index === to);
+		if (!target) return;
+		commit(moveArrayItem(value, from, target.elementIndex));
 	};
 	const deleteSelectedPrimitives = (indices) => {
-		if (allElements.length - indices.size < 1) return;
-		const nextElements = removeIndices(allElements, indices);
-		onChange?.(generateCode(import_lib$1.arrayExpression(nextElements)));
+		commit(removeArrayItems(value, elementIndicesOf(primitiveItems, indices), "primitive"));
+	};
+	const deletePrimitive = (elementIndex) => {
+		commit(removeArrayItems(value, /* @__PURE__ */ new Set([elementIndex]), "primitive"));
 	};
-	const deletePrimitive = (index) => deleteSelectedPrimitives(/* @__PURE__ */ new Set([index]));
 	const addPrimitive = () => {
-		const first = primitiveItems[0];
-		if (!first) return;
-		const newNode = createNodeFromValue(first.type, first.value);
-		if (!newNode) return;
-		onChange?.(generateCode(import_lib$1.arrayExpression([...allElements, newNode])));
+		commit(appendArrayItem(value, "primitive"));
 	};
 	const duplicateSelectedPrimitives = (indices) => {
-		const clones = [...indices].sort((a, b) => a - b).map((index) => allElements[index]).filter((node) => Boolean(node)).map((node) => clone(node));
-		if (clones.length === 0) return;
-		onChange?.(generateCode(import_lib$1.arrayExpression([...allElements, ...clones])));
+		commit(duplicateArrayItems(value, elementIndicesOf(primitiveItems, indices)));
 	};
 	const moveSelectedPrimitives = (indices, direction) => {
-		const { items: nextElements, indices: nextIndices } = moveSelectedIndices(allElements, indices, direction);
-		selection.replace(nextIndices);
-		onChange?.(generateCode(import_lib$1.arrayExpression(nextElements)));
-	};
-	const moveItem = (fromIndex, toIndex) => {
-		const nextItems = [...objectItems];
-		const [movedItem] = nextItems.splice(fromIndex, 1);
-		nextItems.splice(toIndex, 0, movedItem);
-		const nextValue = arrayExpressionToCode(nextItems.map((item) => item.originalElement));
-		onChange?.(nextValue);
-	};
-	const updateProperty = (itemIndex, propertyKey, value) => {
-		const item = objectItems[itemIndex];
-		const property = item.editableProperties[propertyKey];
-		const renderLeaf = render?.[propertyKey] && "type" in render[propertyKey] ? render[propertyKey] : null;
-		const isJsx = renderLeaf?.type === "jsx";
-		const isInnerHTML = renderLeaf?.property === BINDING_PROP.INNER_HTML;
-		let nextAstValue = null;
-		if (isInnerHTML) {
-			const str = String(value);
-			nextAstValue = import_lib$1.templateLiteral([import_lib$1.templateElement({
-				raw: str,
-				cooked: str
-			}, true)], []);
-		} else if (property.type === "array" || property.type === "object") try {
-			nextAstValue = (0, import_lib.parseExpression)(String(value), { plugins: ["jsx", "typescript"] });
-		} catch {
+		const result = moveArrayItems(value, elementIndicesOf(primitiveItems, indices), direction);
+		if (!result) {
+			commit(null);
 			return;
 		}
-		else if (!isJsx) nextAstValue = createNodeFromValue(property.type, value);
-		if (!isJsx && !nextAstValue) return;
-		const targetProperty = item.originalElement.properties.find((prop) => import_lib$1.isObjectProperty(prop) && import_lib$1.isIdentifier(prop.key) && prop.key.name === propertyKey);
-		const jsxPlaceholders = /* @__PURE__ */ new Map();
-		const originalValues = /* @__PURE__ */ new Map();
-		if (isJsx && targetProperty) {
-			const trimmed = String(value).trim();
-			if (trimmed.startsWith("<")) {
-				const placeholder = `__JSX_${nanoid(6)}__`;
-				jsxPlaceholders.set(placeholder, trimmed);
-				targetProperty.value = import_lib$1.identifier(placeholder);
-			} else targetProperty.value = import_lib$1.stringLiteral(trimmed);
-		} else if (targetProperty && nextAstValue) targetProperty.value = nextAstValue;
-		objectItems.forEach((obj) => {
-			obj.originalElement.properties.forEach((prop) => {
-				if (!import_lib$1.isObjectProperty(prop) || !import_lib$1.isIdentifier(prop.key)) return;
-				if (import_lib$1.isJSXElement(prop.value) || import_lib$1.isJSXFragment(prop.value)) {
-					const placeholder = `__JSX_${nanoid(6)}__`;
-					jsxPlaceholders.set(placeholder, generateCode(prop.value));
-					originalValues.set(prop, prop.value);
-					prop.value = import_lib$1.identifier(placeholder);
-				}
-			});
-		});
-		let nextValue = arrayExpressionToCode(objectItems.map((item) => item.originalElement));
-		for (const [prop, original] of originalValues) prop.value = original;
-		for (const [placeholder, code] of jsxPlaceholders) nextValue = nextValue.replace(placeholder, () => code);
-		onChange?.(nextValue);
+		selection.replace(result.indices);
+		commit(result.code);
+	};
+	const moveItem = (from, to) => {
+		const target = objectItems.find((item) => item.index === to);
+		if (!target) return;
+		commit(moveArrayItem(value, from, target.elementIndex));
+	};
+	const updateProperty = (elementIndex, propertyKey, next) => {
+		commit(updateArrayItemProperty(value, elementIndex, propertyKey, next, render));
 	};
 	const deleteSelectedItems = (indices) => {
-		if (objectItems.length - indices.size < 1) return;
-		const nextItems = removeIndices(objectItems, indices);
-		const nextValue = arrayExpressionToCode(nextItems.map((item) => item.originalElement));
-		onChange?.(nextValue);
+		commit(removeArrayItems(value, elementIndicesOf(objectItems, indices), "object"));
 	};
-	const deleteItem = (index) => deleteSelectedItems(/* @__PURE__ */ new Set([index]));
-	const cloneObjectItemElement = (source) => {
-		const clonedElement = clone(source.originalElement);
-		clonedElement.properties.forEach((prop) => {
-			if (import_lib$1.isObjectProperty(prop) && import_lib$1.isIdentifier(prop.key)) {
-				const key = prop.key.name;
-				const editableProp = source.editableProperties[key];
-				if (key === "key" && import_lib$1.isStringLiteral(prop.value)) {
-					const uniqueKey = `${prop.value.value}-${nanoid(6)}`;
-					prop.value = import_lib$1.stringLiteral(uniqueKey);
-					return;
-				}
-				if (editableProp) {
-					const nextValue = createNodeFromValue(editableProp.type, editableProp.value);
-					if (nextValue) prop.value = nextValue;
-				}
-			}
-		});
-		return clonedElement;
+	const deleteItem = (elementIndex) => {
+		commit(removeArrayItems(value, /* @__PURE__ */ new Set([elementIndex]), "object"));
 	};
 	const addItem = () => {
-		const firstItem = objectItems[0];
-		if (!firstItem) return;
-		const clonedElement = cloneObjectItemElement(firstItem);
-		const editableProperties = extractObjectProperties(clonedElement);
-		const nextItems = [...objectItems];
-		const newItemData = {
-			id: nanoid(6),
-			index: nextItems.length,
-			editableProperties,
-			originalElement: clonedElement,
-			jsxBindings: {}
-		};
-		nextItems.push(newItemData);
-		const nextValue = arrayExpressionToCode(nextItems.map((item) => item.originalElement));
-		onChange?.(nextValue);
+		commit(appendArrayItem(value, "object"));
 	};
 	const duplicateSelectedItems = (indices) => {
-		const sources = [...indices].sort((a, b) => a - b).map((index) => objectItems[index]).filter((item) => Boolean(item));
-		if (sources.length === 0) return;
-		const clonedElements = sources.map(cloneObjectItemElement);
-		const nextValue = arrayExpressionToCode([...objectItems.map((item) => item.originalElement), ...clonedElements]);
-		onChange?.(nextValue);
+		commit(duplicateArrayItems(value, elementIndicesOf(objectItems, indices)));
 	};
 	const moveSelectedItems = (indices, direction) => {
-		const { items: nextItems, indices: nextIndices } = moveSelectedIndices(objectItems, indices, direction);
-		selection.replace(nextIndices);
-		const nextValue = arrayExpressionToCode(nextItems.map((item) => item.originalElement));
-		onChange?.(nextValue);
+		const result = moveArrayItems(value, elementIndicesOf(objectItems, indices), direction);
+		if (!result) {
+			commit(null);
+			return;
+		}
+		selection.replace(result.indices);
+		commit(result.code);
 	};
 	if (isPrimitive) return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
@@ -589,20 +472,20 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 								size: "small",
 								icon: /* @__PURE__ */ jsx(ArrowUp, {}),
 								disabled: i === 0,
-								onClick: () => movePrimitive(item.index, item.index - 1)
+								onClick: () => movePrimitive(item.elementIndex, item.index - 1)
 							}),
 							/* @__PURE__ */ jsx(Button, {
 								size: "small",
 								icon: /* @__PURE__ */ jsx(ArrowDown, {}),
 								disabled: i === primitiveItems.length - 1,
-								onClick: () => movePrimitive(item.index, item.index + 1)
+								onClick: () => movePrimitive(item.elementIndex, item.index + 1)
 							}),
 							/* @__PURE__ */ jsx(Button, {
 								danger: true,
 								size: "small",
 								icon: /* @__PURE__ */ jsx(X, {}),
 								disabled: primitiveItems.length <= 1,
-								onClick: () => deletePrimitive(item.index)
+								onClick: () => deletePrimitive(item.elementIndex)
 							})
 						]
 					})]
@@ -613,7 +496,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 						property: item.type,
 						value: item.value ?? "",
 						rawValue: String(item.value ?? ""),
-						onChange: (next) => updatePrimitive(item.index, next)
+						onChange: (next) => updatePrimitive(item.elementIndex, next)
 					},
 					onNodeChange: onChildChange
 				})]
@@ -678,20 +561,20 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 									size: "small",
 									icon: /* @__PURE__ */ jsx(ArrowUp, {}),
 									disabled: item.index === 0,
-									onClick: () => moveItem(item.index, item.index - 1)
+									onClick: () => moveItem(item.elementIndex, item.index - 1)
 								}),
 								/* @__PURE__ */ jsx(Button, {
 									size: "small",
 									icon: /* @__PURE__ */ jsx(ArrowDown, {}),
 									disabled: item.index === objectItems.length - 1,
-									onClick: () => moveItem(item.index, item.index + 1)
+									onClick: () => moveItem(item.elementIndex, item.index + 1)
 								}),
 								/* @__PURE__ */ jsx(Button, {
 									danger: true,
 									size: "small",
 									icon: /* @__PURE__ */ jsx(X, {}),
 									disabled: objectItems.length <= 1,
-									onClick: () => deleteItem(item.index)
+									onClick: () => deleteItem(item.elementIndex)
 								})
 							]
 						})]
@@ -712,7 +595,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 									render: render?.[key] && "type" in render[key] ? render[key].render : render?.[key] && !("type" in render[key]) ? render[key] : void 0,
 									value: parseValue(String(prop.value)),
 									rawValue: String(prop.value),
-									onChange: (next) => updateProperty(item.index, key, parseValue(next))
+									onChange: (next) => updateProperty(item.elementIndex, key, next)
 								},
 								onNodeChange: onChildChange
 							})]
@@ -1688,4 +1571,4 @@ Dnd.DefaultPanel = Panel;
 //#endregion
 export { DraggableItem as a, ICON_OPTIONS as i, Panel as n, ICON_MAP as r, Dnd as t };
 
-//# sourceMappingURL=dnd-DXI5JfwJ.js.map
+//# sourceMappingURL=dnd-Cyuif73L.js.map