@jbpark/live-editor 2.0.0 → 2.0.2

package/dist/{ast-CrSMBsL4.js → ast-BKQmEBj9.js}

@@ -426,6 +426,197 @@ const findEditableChildren = (node) => {
 	return editableChildren;
 };
 //#endregion
+//#region src/utils/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/utils/ast/tree.ts
+const replaceIds = (code, generateId = () => nanoid(6)) => {
+	return code.replace(new RegExp(`${DATA_ATTR.ID}="[^"]*"`, "g"), () => {
+		return `${DATA_ATTR.ID}="${generateId()}"`;
+	});
+};
+const fillIds = (code, generateId = () => nanoid(6)) => {
+	return code.replace(new RegExp(`${DATA_ATTR.ID}=""`, "g"), () => {
+		return `${DATA_ATTR.ID}="${generateId()}"`;
+	});
+};
+const clone = (element, generateId = () => nanoid(6)) => {
+	const cloned = import_lib$2.cloneNode(element, true);
+	const generatedCode = generateCode(cloned);
+	const code = replaceIds(generatedCode, generateId);
+	return (0, import_lib$1.parseExpression)(code, { plugins: ["jsx", "typescript"] });
+};
+//#endregion
+//#region src/utils/ast/items.ts
+const elementsOf = (code) => {
+	const ast = parseArrayExpression(code);
+	if (!ast) return null;
+	return ast.elements.filter((element) => Boolean(element));
+};
+const kindOf = (element) => import_lib$2.isObjectExpression(element) ? "object" : "primitive";
+const toCode = (elements) => {
+	return generateCode(import_lib$2.arrayExpression(elements));
+};
+const parseItems = (code) => {
+	const elements = elementsOf(code);
+	if (!elements) return null;
+	return elements.map((node, index) => ({
+		index,
+		kind: kindOf(node),
+		node
+	}));
+};
+const resolveRenderLeaf = (render, key) => {
+	const leaf = render?.[key];
+	return leaf && "type" in leaf ? leaf : null;
+};
+const isLosslesslyEvaluable = (node) => {
+	if (import_lib$2.isStringLiteral(node) || import_lib$2.isNumericLiteral(node) || import_lib$2.isBooleanLiteral(node) || import_lib$2.isNullLiteral(node)) return true;
+	if (import_lib$2.isUnaryExpression(node) && node.operator === "-" && import_lib$2.isNumericLiteral(node.argument)) return true;
+	if (import_lib$2.isTemplateLiteral(node)) return node.expressions.length === 0;
+	if (import_lib$2.isArrayExpression(node)) return node.elements.every((element) => element !== null && isLosslesslyEvaluable(element));
+	if (import_lib$2.isObjectExpression(node)) return node.properties.every((property) => import_lib$2.isObjectProperty(property) && !property.computed && (import_lib$2.isIdentifier(property.key) || import_lib$2.isStringLiteral(property.key) || import_lib$2.isNumericLiteral(property.key)) && isLosslesslyEvaluable(property.value));
+	return false;
+};
+const toTemplateRaw = (value) => {
+	return value.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${").replace(/\r/g, "\\r");
+};
+const buildPropertyValue = (value, declaredType, renderLeaf, current) => {
+	if (renderLeaf?.property === BINDING_PROP.INNER_HTML) {
+		const raw = String(value);
+		return import_lib$2.templateLiteral([import_lib$2.templateElement({
+			raw: toTemplateRaw(raw),
+			cooked: raw
+		}, true)], []);
+	}
+	if (renderLeaf?.type === "jsx") {
+		const trimmed = String(value).trim();
+		if (!trimmed.startsWith("<")) return import_lib$2.stringLiteral(trimmed);
+		try {
+			return (0, import_lib$1.parseExpression)(trimmed, { plugins: ["jsx", "typescript"] });
+		} catch {
+			return;
+		}
+	}
+	if (declaredType === "array" || declaredType === "object") {
+		if (typeof value === "string") try {
+			return (0, import_lib$1.parseExpression)(value, { plugins: ["jsx", "typescript"] });
+		} catch {
+			return;
+		}
+		if (!isLosslesslyEvaluable(current)) return;
+		return valueToExpression(value) ?? void 0;
+	}
+	return createNodeFromValue(declaredType, parseValue(value)) ?? void 0;
+};
+const updateArrayItemProperty = (code, index, key, value, render) => {
+	const elements = elementsOf(code);
+	const element = elements?.[index];
+	if (!elements || !import_lib$2.isObjectExpression(element)) return null;
+	const target = element.properties.find((property) => import_lib$2.isObjectProperty(property) && import_lib$2.isIdentifier(property.key) && property.key.name === key);
+	if (!target) return null;
+	const declaredType = extractObjectProperties(element)[key]?.type ?? "string";
+	const nextValue = buildPropertyValue(value, declaredType, resolveRenderLeaf(render, key), target.value);
+	if (!nextValue) return null;
+	target.value = nextValue;
+	return toCode(elements);
+};
+const updateArrayItemValue = (code, index, value) => {
+	const elements = elementsOf(code);
+	const element = elements?.[index];
+	if (!elements || !element) return null;
+	const nextValue = createNodeFromValue(extractNodeValue(element).type, parseValue(value));
+	if (!nextValue) return null;
+	elements[index] = nextValue;
+	return toCode(elements);
+};
+const moveArrayItem = (code, from, to) => {
+	const elements = elementsOf(code);
+	if (!elements?.[from]) return null;
+	const next = [...elements];
+	const [moved] = next.splice(from, 1);
+	next.splice(to, 0, moved);
+	return toCode(next);
+};
+const moveArrayItems = (code, indices, direction) => {
+	const elements = elementsOf(code);
+	if (!elements) return null;
+	const { items, indices: nextIndices } = moveSelectedIndices(elements, indices, direction);
+	return {
+		code: toCode(items),
+		indices: nextIndices
+	};
+};
+const removeArrayItems = (code, indices, kind) => {
+	const elements = elementsOf(code);
+	if (!elements) return null;
+	const remaining = removeIndices(elements, indices);
+	if ((kind === void 0 ? remaining : remaining.filter((element) => kindOf(element) === kind)).length < 1) return null;
+	return toCode(remaining);
+};
+const cloneItem = (element, generateId) => {
+	const cloned = clone(element);
+	if (!import_lib$2.isObjectExpression(cloned)) return cloned;
+	const editable = extractObjectProperties(cloned);
+	cloned.properties.forEach((property) => {
+		if (!import_lib$2.isObjectProperty(property) || !import_lib$2.isIdentifier(property.key)) return;
+		const key = property.key.name;
+		if (key === "key" && import_lib$2.isStringLiteral(property.value)) {
+			property.value = import_lib$2.stringLiteral(`${property.value.value}-${generateId()}`);
+			return;
+		}
+		const source = editable[key];
+		if (source) {
+			const next = createNodeFromValue(source.type, source.value);
+			if (next) property.value = next;
+		}
+	});
+	return cloned;
+};
+const duplicateArrayItems = (code, indices, generateId = () => nanoid(6)) => {
+	const elements = elementsOf(code);
+	if (!elements) return null;
+	const clones = [...indices].sort((a, b) => a - b).map((index) => elements[index]).filter((element) => Boolean(element)).map((element) => cloneItem(element, generateId));
+	if (clones.length === 0) return null;
+	return toCode([...elements, ...clones]);
+};
+const appendArrayItem = (code, kind, generateId = () => nanoid(6)) => {
+	const elements = elementsOf(code);
+	if (!elements) return null;
+	const template = elements.find((element) => kindOf(element) === kind);
+	if (!template) return null;
+	if (kind === "primitive") {
+		const { type, value } = extractNodeValue(template);
+		const next = createNodeFromValue(type, value);
+		return next ? toCode([...elements, next]) : null;
+	}
+	return toCode([...elements, cloneItem(template, generateId)]);
+};
+//#endregion
 //#region src/utils/ast/extract.ts
 const collectText = (children) => {
 	return children.filter((c) => import_lib$2.isJSXText(c)).map((c) => c.value.trim()).filter((v) => v.length).join(" ");
@@ -683,45 +874,196 @@ function clearExtractCache() {
 	extractCache.clear();
 }
 //#endregion
-//#region src/utils/ast/update.ts
-const updateInnerText = (path, value) => {
-	const jsxChildren = path.node.children;
-	for (let i = jsxChildren.length - 1; i >= 0; i--) if (import_lib$2.isJSXText(jsxChildren[i])) jsxChildren.splice(i, 1);
-	jsxChildren.push(import_lib$2.jsxText(value));
+//#region src/utils/ast/patch.ts
+const hasOnlyLayoutNewlines = (content) => {
+	let index = 0;
+	while (index < content.length) {
+		const char = content[index];
+		if (char === "`" || char === "<") return false;
+		if (char === "\"" || char === "'") {
+			const next = skipStringLiteral(content, index);
+			if (next === -1) return false;
+			index = next;
+			continue;
+		}
+		if (char === "/") {
+			const following = content[index + 1];
+			if (following === "/") {
+				const lineEnd = content.indexOf("\n", index + 2);
+				index = lineEnd === -1 ? content.length : lineEnd;
+				continue;
+			}
+			if (following === "*") {
+				const commentEnd = content.indexOf("*/", index + 2);
+				if (commentEnd === -1) return false;
+				index = commentEnd + 2;
+				continue;
+			}
+			return false;
+		}
+		index++;
+	}
 	return true;
 };
-const injectPlaceholder = (prefix, value, placeholders, { asRawContent = false } = {}) => {
-	const name = `__${prefix}_${nanoid(6)}__`;
-	const container = import_lib$2.jsxExpressionContainer(import_lib$2.identifier(name));
-	placeholders.set(asRawContent ? `{${name}}` : name, value);
-	return container;
+const skipStringLiteral = (content, start) => {
+	const quote = content[start];
+	for (let index = start + 1; index < content.length; index++) {
+		const char = content[index];
+		if (char === "\\") {
+			const escaped = content[index + 1];
+			if (escaped === "\n" || escaped === "\r") return -1;
+			index++;
+			continue;
+		}
+		if (char === quote) return index + 1;
+		if (char === "\n") return -1;
+	}
+	return -1;
 };
-const updateInnerHTML = (path, value, placeholders) => {
-	path.node.children = [injectPlaceholder("HTML", value, placeholders, { asRawContent: true })];
-	return true;
+const lineIndentAt = (source, offset) => {
+	const lineStart = source.lastIndexOf("\n", offset - 1) + 1;
+	return /^[ \t]*/.exec(source.slice(lineStart, offset))?.[0] ?? "";
 };
-const updateChildren = (path, value) => {
+const lineTerminatorOf = (source) => {
+	return source.includes("\r\n") ? "\r\n" : "\n";
+};
+const applyEdits = (source, edits) => {
+	if (edits.length === 0) return source;
+	const ordered = [...edits].sort((a, b) => a.start - b.start || a.end - b.end);
+	for (const edit of ordered) if (!Number.isInteger(edit.start) || !Number.isInteger(edit.end) || edit.start < 0 || edit.end > source.length || edit.start > edit.end) throw new Error(`Invalid source edit [${edit.start}, ${edit.end}) for a source of length ${source.length}`);
+	for (let i = 1; i < ordered.length; i++) {
+		const previous = ordered[i - 1];
+		const current = ordered[i];
+		if (current.start < previous.end) throw new Error(`Overlapping source edits: [${previous.start}, ${previous.end}) and [${current.start}, ${current.end})`);
+	}
+	let result = "";
+	let cursor = 0;
+	const terminator = lineTerminatorOf(source);
+	for (const edit of ordered) {
+		const content = edit.indent && edit.content.includes("\n") && hasOnlyLayoutNewlines(edit.content) ? edit.content.replace(/\n/g, `${terminator}${lineIndentAt(source, edit.start)}`) : edit.content;
+		result += source.slice(cursor, edit.start) + content;
+		cursor = edit.end;
+	}
+	return result + source.slice(cursor);
+};
+//#endregion
+//#region src/utils/ast/update.ts
+const childrenRange = (element) => {
+	const { openingElement, closingElement } = element;
+	if (!closingElement || openingElement.end == null || closingElement.start == null) return null;
+	return {
+		start: openingElement.end,
+		end: closingElement.start
+	};
+};
+const findAttribute = (opening, propertyName) => {
+	return opening.attributes.find((attr) => import_lib$2.isJSXAttribute(attr) && import_lib$2.isJSXIdentifier(attr.name) && attr.name.name === propertyName);
+};
+const attributeInsertPoint = (opening) => {
+	return opening.attributes[opening.attributes.length - 1]?.end ?? opening.name.end ?? null;
+};
+const editInnerText = (source, element, value) => {
+	const range = childrenRange(element);
+	if (!range) return [];
+	const [only] = element.children;
+	if (element.children.length === 1 && import_lib$2.isJSXText(only) && only.start != null && only.end != null) {
+		const raw = source.slice(only.start, only.end);
+		if (raw.trim() !== "") {
+			const leading = raw.length - raw.trimStart().length;
+			const trailing = raw.length - raw.trimEnd().length;
+			return [{
+				start: only.start + leading,
+				end: only.end - trailing,
+				content: value
+			}];
+		}
+	}
+	const edits = [];
+	for (const child of element.children) if (import_lib$2.isJSXText(child) && child.start != null && child.end != null) edits.push({
+		start: child.start,
+		end: child.end,
+		content: ""
+	});
+	edits.push({
+		start: range.end,
+		end: range.end,
+		content: value
+	});
+	return edits;
+};
+const editInnerHTML = (element, value) => {
+	const range = childrenRange(element);
+	if (!range) return [];
+	return [{
+		start: range.start,
+		end: range.end,
+		content: value
+	}];
+};
+const editChildren = (element, value) => {
 	try {
 		const childrenData = typeof value === "string" ? JSON.parse(value) : value;
-		path.node.children.length = 0;
-		childrenData.forEach((childData) => {
-			const jsxElement = nodeToJSX(childData);
-			if (jsxElement) path.node.children.push(jsxElement);
-		});
-		return true;
+		const range = childrenRange(element);
+		if (!range) return [];
+		const content = childrenData.map((childData) => nodeToJSX(childData)).filter((node) => node !== null).map((node) => generateCode(node)).join("");
+		return [{
+			start: range.start,
+			end: range.end,
+			content,
+			indent: true
+		}];
 	} catch (error) {
 		console.error("❌ Children update error:", error);
-		return false;
+		return null;
 	}
 };
-const updateRichtext = (path, value) => {
-	path.node.children = [];
-	const opening = path.node.openingElement;
-	const htmlObject = import_lib$2.objectExpression([import_lib$2.objectProperty(import_lib$2.identifier("__html"), import_lib$2.stringLiteral(value))]);
-	const existingAttr = opening.attributes.find((a) => import_lib$2.isJSXAttribute(a) && import_lib$2.isJSXIdentifier(a.name) && a.name.name === "dangerouslySetInnerHTML");
-	if (existingAttr && import_lib$2.isJSXAttribute(existingAttr)) existingAttr.value = import_lib$2.jsxExpressionContainer(htmlObject);
-	else opening.attributes.push(import_lib$2.jsxAttribute(import_lib$2.jsxIdentifier("dangerouslySetInnerHTML"), import_lib$2.jsxExpressionContainer(htmlObject)));
-	return true;
+const editRichtext = (element, value) => {
+	const edits = [];
+	const range = childrenRange(element);
+	if (range && range.start !== range.end) edits.push({
+		start: range.start,
+		end: range.end,
+		content: ""
+	});
+	const opening = element.openingElement;
+	const attribute = import_lib$2.jsxAttribute(import_lib$2.jsxIdentifier("dangerouslySetInnerHTML"), import_lib$2.jsxExpressionContainer(import_lib$2.objectExpression([import_lib$2.objectProperty(import_lib$2.identifier("__html"), import_lib$2.stringLiteral(value))])));
+	const content = generateCode(attribute);
+	const existing = findAttribute(opening, "dangerouslySetInnerHTML");
+	if (existing && existing.start != null && existing.end != null) {
+		edits.push({
+			start: existing.start,
+			end: existing.end,
+			content,
+			indent: true
+		});
+		return edits;
+	}
+	const insertAt = attributeInsertPoint(opening);
+	if (insertAt == null) return null;
+	edits.push({
+		start: insertAt,
+		end: insertAt,
+		content: ` ${content}`,
+		indent: true
+	});
+	return edits;
+};
+const editJsxAttribute = (opening, propertyName, value) => {
+	const attribute = findAttribute(opening, propertyName);
+	if (!attribute) return null;
+	const content = `{${String(value).trim()}}`;
+	if (attribute.value?.start != null && attribute.value.end != null) return [{
+		start: attribute.value.start,
+		end: attribute.value.end,
+		content
+	}];
+	const insertAt = attribute.name.end;
+	if (insertAt == null) return null;
+	return [{
+		start: insertAt,
+		end: insertAt,
+		content: `=${content}`
+	}];
 };
 const buildAttributeValue = (value, type) => {
 	if (type === "array" || type === "object") {
@@ -737,13 +1079,16 @@ const buildAttributeValue = (value, type) => {
 	const expr = valueToExpression(value);
 	return expr ? import_lib$2.jsxExpressionContainer(expr) : import_lib$2.stringLiteral(String(value));
 };
-const updateAttribute = (opening, propertyName, value, type) => {
-	const customAttr = opening.attributes.find((attr) => import_lib$2.isJSXAttribute(attr) && import_lib$2.isJSXIdentifier(attr.name) && attr.name.name === propertyName);
-	if (customAttr && import_lib$2.isJSXAttribute(customAttr)) {
-		customAttr.value = buildAttributeValue(value, type);
-		return true;
-	}
-	return false;
+const editAttribute = (opening, propertyName, value, type) => {
+	const attribute = findAttribute(opening, propertyName);
+	if (!attribute || attribute.start == null || attribute.end == null) return null;
+	const content = generateCode(import_lib$2.jsxAttribute(attribute.name, buildAttributeValue(value, type)));
+	return [{
+		start: attribute.start,
+		end: attribute.end,
+		content,
+		indent: true
+	}];
 };
 const update = (code, dataId, label, value, property) => {
 	try {
@@ -753,7 +1098,12 @@ const update = (code, dataId, label, value, property) => {
 			plugins: ["jsx", "typescript"]
 		});
 		let changed = false;
-		const jsxPlaceholders = /* @__PURE__ */ new Map();
+		const edits = [];
+		const collect = (result) => {
+			if (!result) return;
+			edits.push(...result);
+			changed = true;
+		};
 		traverse(ast, { JSXElement(path) {
 			const opening = path.node.openingElement;
 			if (!opening.attributes.find((attr) => {
@@ -773,32 +1123,23 @@ const update = (code, dataId, label, value, property) => {
 			const propertyBinding = matches[0];
 			switch (propertyBinding.property) {
 				case BINDING_PROP.INNER_TEXT:
-					changed = updateInnerText(path, String(value));
+					collect(editInnerText(wrapped, path.node, String(value)));
 					break;
 				case BINDING_PROP.INNER_HTML:
-					if (propertyBinding.type === "richtext") changed = updateRichtext(path, String(value));
-					else changed = updateInnerHTML(path, String(value), jsxPlaceholders);
+					collect(propertyBinding.type === "richtext" ? editRichtext(path.node, String(value)) : editInnerHTML(path.node, String(value)));
 					break;
 				case BINDING_PROP.CHILDREN:
-					changed = updateChildren(path, value);
+					collect(editChildren(path.node, value));
 					break;
-				default: if (propertyBinding.type === "jsx") {
-					const attr = opening.attributes.find((a) => import_lib$2.isJSXAttribute(a) && import_lib$2.isJSXIdentifier(a.name) && a.name.name === propertyBinding.property);
-					if (attr && import_lib$2.isJSXAttribute(attr)) {
-						attr.value = injectPlaceholder("JSX", String(value).trim(), jsxPlaceholders);
-						changed = true;
-					}
-				} else changed = updateAttribute(opening, propertyBinding.property, value, propertyBinding.type);
+				default: collect(propertyBinding.type === "jsx" ? editJsxAttribute(opening, propertyBinding.property, value) : editAttribute(opening, propertyBinding.property, value, propertyBinding.type));
 			}
 		} });
 		if (!changed) return {
 			code,
 			success: false
 		};
-		let result = unwrap(generateCode(ast));
-		for (const [placeholder, original] of jsxPlaceholders) result = result.replace(placeholder, () => original);
 		return {
-			code: result,
+			code: unwrap(applyEdits(wrapped, edits)),
 			success: true
 		};
 	} catch (error) {
@@ -823,24 +1164,6 @@ const bulkUpdate = (raw, entries) => {
 	};
 };
 //#endregion
-//#region src/utils/ast/tree.ts
-const replaceIds = (code, generateId = () => nanoid(6)) => {
-	return code.replace(new RegExp(`${DATA_ATTR.ID}="[^"]*"`, "g"), () => {
-		return `${DATA_ATTR.ID}="${generateId()}"`;
-	});
-};
-const fillIds = (code, generateId = () => nanoid(6)) => {
-	return code.replace(new RegExp(`${DATA_ATTR.ID}=""`, "g"), () => {
-		return `${DATA_ATTR.ID}="${generateId()}"`;
-	});
-};
-const clone = (element, generateId = () => nanoid(6)) => {
-	const cloned = import_lib$2.cloneNode(element, true);
-	const generatedCode = generateCode(cloned);
-	const code = replaceIds(generatedCode, generateId);
-	return (0, import_lib$1.parseExpression)(code, { plugins: ["jsx", "typescript"] });
-};
-//#endregion
 //#region src/utils/ast/validate.ts
 const VALID = { valid: true };
 const validateBindingValue = (binding, value) => {
@@ -890,6 +1213,6 @@ const validateBindingValue = (binding, value) => {
 	return VALID;
 };
 //#endregion
-export { generateCode as S, extractObjectProperties as _, bulkUpdate as a, parseValue as b, extract as c, getStructuredValue as d, parseBinding as f, extractNodeValue as g, createNodeFromValue as h, replaceIds as i, findEditableChildren as l, arrayExpressionToCode as m, clone as n, update as o, parseBindingExpression as p, fillIds as r, clearExtractCache as s, validateBindingValue as t, getCurrentValue as u, flattenEditableValue as v, setEditableValue as x, parseArrayExpression as y };
+export { parseValue as A, parseBindingExpression as C, extractObjectProperties as D, extractNodeValue as E, generateCode as M, flattenEditableValue as O, parseBinding as S, createNodeFromValue as T, moveSelectedIndices as _, extract as a, getCurrentValue as b, moveArrayItem as c, removeArrayItems as d, updateArrayItemProperty as f, replaceIds as g, fillIds as h, clearExtractCache as i, setEditableValue as j, parseArrayExpression as k, moveArrayItems as l, clone as m, bulkUpdate as n, appendArrayItem as o, updateArrayItemValue as p, update as r, duplicateArrayItems as s, validateBindingValue as t, parseItems as u, removeIndices as v, arrayExpressionToCode as w, getStructuredValue as x, findEditableChildren as y };
 
-//# sourceMappingURL=ast-CrSMBsL4.js.map
+//# sourceMappingURL=ast-BKQmEBj9.js.map