@cloudcannon/editable-regions 0.0.4 → 0.0.5

package/helpers/checks.ts

@@ -100,35 +100,3 @@ export const isEditableArrayItem = (el?: Element | null): boolean => {
 		(el instanceof HTMLElement && el.dataset.editable === "array-item")
 	);
 };
-
-export const areEqualNodes = (a: ChildNode, b: ChildNode) => {
-	if (a.nodeName !== b.nodeName) {
-		return false;
-	}
-
-	if (a instanceof Element && b instanceof Element) {
-		if (a.className !== b.className) {
-			return false;
-		}
-
-		if (a.id !== b.id) {
-			return false;
-		}
-
-		if (a.attributes.length !== b.attributes.length) {
-			return false;
-		}
-
-		for (let i = 0; i < a.attributes.length; i++) {
-			if (
-				a.attributes[i].name !== b.attributes[i].name ||
-				a.attributes[i].value !== b.attributes[i].value
-			) {
-				return false;
-			}
-		}
-
-		return true;
-	}
-	return a.isEqualNode(b);
-};

package/nodes/editable-array-item.ts

@@ -478,6 +478,10 @@ export default class EditableArrayItem extends EditableComponent {
 
 	setupListeners(): void {
 		super.setupListeners();
-		this.parent?.registerListener({ editable: this });
+		if (!this.element.dataset.prop) {
+			this.parent?.registerListener({
+				editable: this,
+			});
+		}
 	}
 }

package/nodes/editable-array.ts

@@ -7,7 +7,7 @@ import type EditableArrayItemComponent from "../components/editable-array-item-c
 import { hasEditableArrayItem, isEditableElement } from "../helpers/checks.js";
 import { CloudCannon } from "../helpers/cloudcannon.js";
 import type EditableArrayItem from "./editable-array-item.js";
-import Editable from "./editable.js";
+import Editable, { type EditableListener } from "./editable.js";
 
 const arrayDirectionValues = [
 	"row",
@@ -34,6 +34,60 @@ export default class EditableArray extends Editable {
 	private updatePromise: Promise<void> | undefined;
 	private needsReupdate = false;
 
+	async registerListener(listener: EditableListener): Promise<void> {
+		if (!this.value) {
+			return;
+		}
+
+		let value: unknown[] | CloudCannonJavaScriptV1APIFile[];
+		if (CloudCannon.isAPICollection(this.value)) {
+			value = await this.value.items();
+		} else if (CloudCannon.isAPIDataset(this.value)) {
+			const items = await this.value.items();
+			if (Array.isArray(items)) {
+				value = items;
+			} else {
+				const data = await items.data.get();
+				value = Array.isArray(data) ? data : [];
+			}
+		} else if (Array.isArray(this.value)) {
+			value = this.value;
+		} else {
+			value = [];
+		}
+
+		if (!listener.path) {
+			let index = 0;
+			for (const child of this.element.querySelectorAll(
+				"editable-array-item,[data-editable='array-item']",
+			)) {
+				let parent = child.parentElement;
+				while (parent instanceof HTMLElement && !isEditableElement(parent)) {
+					parent = parent.parentElement;
+				}
+
+				if (parent !== this.element) {
+					continue;
+				}
+
+				if (child === listener.editable.element) {
+					listener.path = `${index}`;
+					break;
+				}
+
+				index += 1;
+			}
+		}
+
+		if (listener.path) {
+			listener.editable.pushValue(value, listener, {
+				__base_context: this.contextBase ?? {},
+			});
+		}
+	}
+
+	deregisterListener(_target: Editable): void {}
+
 	validateConfiguration(): boolean {
 		const prop = this.element.dataset.prop;
 		if (typeof prop !== "string") {
@@ -101,21 +155,17 @@ export default class EditableArray extends Editable {
 			value = [];
 		}
 
-		const children: (HTMLElement & { editable: EditableArrayItem })[] = [];
+		const children: (HTMLElement & { editable?: EditableArrayItem })[] = [];
 
 		for (const child of this.element.querySelectorAll(
 			"editable-array-item,[data-editable='array-item']",
 		)) {
-			if (!hasEditableArrayItem(child)) {
-				continue;
-			}
-
 			let parent = child.parentElement;
 			while (parent instanceof HTMLElement && !isEditableElement(parent)) {
 				parent = parent.parentElement;
 			}
 
-			if (!parent || ("editable" in parent && parent.editable !== this)) {
+			if (parent !== this.element) {
 				continue;
 			}
 
@@ -127,14 +177,27 @@ export default class EditableArray extends Editable {
 				children.pop()?.remove();
 			}
 
+			const firstChild = children[0];
 			for (let i = 0; i < value.length; i++) {
 				let child = children[i];
 				if (!child) {
-					child = children[0].cloneNode(true) as HTMLElement & {
-						editable: EditableArrayItem;
-					};
+					if (this.element.dataset.component) {
+						child = document.createElement(
+							"editable-array-item",
+						) as EditableArrayItemComponent;
+					} else if (firstChild) {
+						child = children[0].cloneNode(true) as HTMLElement & {
+							editable?: EditableArrayItem;
+						};
+					} else {
+						child = document.createElement("array-placeholder");
+					}
 					this.element.appendChild(child);
 				}
+
+				if (this.element.dataset.component) {
+					child.dataset.component = this.element.dataset.component;
+				}
 				child.dataset.prop = `${i}`;
 				child.dataset.length = `${children.length}`;
 				child.editable?.pushValue(
@@ -178,7 +241,7 @@ export default class EditableArray extends Editable {
 			children.forEach((child, index) => {
 				child.dataset.prop = `${index}`;
 				child.dataset.length = `${children.length}`;
-				child.editable.pushValue(
+				child.editable?.pushValue(
 					value,
 					{ path: `${index}`, editable: child.editable },
 					{ __base_context: this.contextBase ?? {} },
@@ -216,8 +279,10 @@ export default class EditableArray extends Editable {
 					) as EditableArrayItemComponent;
 					matchingChild.dataset.id = key;
 
-					if (componentKeys[i]) {
-						matchingChild.dataset.component = componentKeys[i];
+					const componentKey =
+						componentKeys[i] || this.element.dataset.component;
+					if (componentKey) {
+						matchingChild.dataset.component = componentKey;
 					}
 				}
 			} else {
@@ -235,12 +300,14 @@ export default class EditableArray extends Editable {
 				this.element.appendChild(matchingChild);
 			}
 
-			matchingChild.editable.parent = this;
-			matchingChild.editable.pushValue(
-				value,
-				{ path: `${i}`, editable: matchingChild.editable },
-				{ __base_context: this.contextBase ?? {} },
-			);
+			if (matchingChild.editable) {
+				matchingChild.editable.parent = this;
+				matchingChild.editable.pushValue(
+					value,
+					{ path: `${i}`, editable: matchingChild.editable },
+					{ __base_context: this.contextBase ?? {} },
+				);
+			}
 		});
 
 		children.forEach((child, i) => {

package/nodes/editable-component.ts

@@ -1,6 +1,5 @@
 import {
 	areEqualEditables,
-	areEqualNodes,
 	hasEditable,
 	hasEditableText,
 	isEditableElement,
@@ -192,12 +191,13 @@ export default class EditableComponent extends Editable {
 				}
 			} else if (renderChild && targetChild) {
 				if (
-					!areEqualNodes(targetChild, renderChild) ||
+					renderChild.nodeName !== targetChild.nodeName ||
 					isEditableElement(renderChild) ||
 					isEditableElement(targetChild)
 				) {
 					targetChild.replaceWith(renderChild);
 				} else {
+					this.updateNode(targetChild, renderChild);
 					this.updateTree(targetChild, renderChild);
 				}
 			} else if (renderChild) {
@@ -211,6 +211,19 @@ export default class EditableComponent extends Editable {
 		}
 	}
 
+	updateNode(targetChild: ChildNode, renderChild: ChildNode) {
+		if (targetChild instanceof Element && renderChild instanceof Element) {
+			for (const attribute of renderChild.attributes) {
+				targetChild.setAttribute(attribute.name, attribute.value);
+			}
+			for (const attribute of targetChild.attributes) {
+				if (!renderChild.hasAttribute(attribute.name)) {
+					targetChild.removeAttribute(attribute.name);
+				}
+			}
+		}
+	}
+
 	updateEditable(
 		renderChild: HTMLElement,
 		targetChild: HTMLElement & { editable: Editable },

package/nodes/editable.ts

@@ -27,8 +27,8 @@ export interface DOMListener {
 	event: string;
 }
 
-export interface APIListener extends DOMListener {
-	event: "change" | "delete";
+export interface APIListener {
+	fn: (e: any) => void;
 	obj:
 		| CloudCannonJavaScriptV1APIFile
 		| CloudCannonJavaScriptV1APICollection
@@ -118,10 +118,7 @@ export default class Editable {
 				value = await value.items();
 			} else if (CloudCannon.isAPIFile(value)) {
 				context.file = value;
-				if (key === "@content") {
-					context.isContent = true;
-					value = await value.content.get();
-				} else {
+				if (key !== "@content") {
 					value = await value.data.get();
 				}
 			} else if (CloudCannon.isAPIDataset(value)) {
@@ -135,8 +132,13 @@ export default class Editable {
 				}
 			}
 
-			if (value && typeof value === "object" && key in value) {
+			if (key === "@content" && CloudCannon.isAPIFile(value)) {
+				context.isContent = true;
+				value = await value.content.get();
+			} else if (value && typeof value === "object" && key in value) {
 				value = (value as any)[key];
+			} else {
+				value = undefined;
 			}
 
 			context.fullPath = context.fullPath ? `${context.fullPath}.${key}` : key;
@@ -227,6 +229,13 @@ export default class Editable {
 	}
 
 	registerListener(listener: EditableListener): void {
+		if (this.value !== undefined) {
+			listener.editable.pushValue(this.value, listener, {
+				...this.contexts,
+				__base_context: this.contextBase ?? {},
+			});
+		}
+
 		if (
 			this.listeners.find(
 				({ editable: other, key }) =>
@@ -236,13 +245,6 @@ export default class Editable {
 			return;
 		}
 
-		if (this.value !== undefined) {
-			listener.editable.pushValue(this.value, listener, {
-				...this.contexts,
-				__base_context: this.contextBase ?? {},
-			});
-		}
-
 		this.listeners.push(listener);
 	}
 
@@ -253,6 +255,9 @@ export default class Editable {
 	}
 
 	async disconnect(): Promise<void> {
+		if (this.disconnecting) {
+			return;
+		}
 		this.disconnecting = true;
 
 		if (this.connectPromise) {
@@ -261,9 +266,10 @@ export default class Editable {
 
 		this.parent?.deregisterListener(this);
 		this.parent = null;
-		this.APIListeners.forEach(({ obj, fn, event }) =>
-			obj.removeEventListener(event, fn),
-		);
+		this.APIListeners.forEach(({ obj, fn }) => {
+			obj.removeEventListener("change", fn);
+			obj.removeEventListener("delete", fn);
+		});
 		this.APIListeners = [];
 		this.domListeners.forEach(({ event, fn }) => {
 			this.element.removeEventListener(event, fn);
@@ -347,9 +353,9 @@ export default class Editable {
 				this.APIListeners.push({
 					obj,
 					fn: handleAPIChange,
-					event: "change",
 				});
 				obj.addEventListener("change", handleAPIChange);
+				obj.addEventListener("delete", handleAPIChange);
 				handleAPIChange();
 			}
 		});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cloudcannon/editable-regions",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"type": "module",
 	"description": "Visual Editing for the CloudCannon CMS.",
 	"keywords": [
@@ -59,6 +59,7 @@
 		"@types/react": "18.3.12",
 		"@types/react-dom": "18.3.1",
 		"astro": "^5.14.1",
+		"js-beautify": "^1.15.4",
 		"typescript": "5.9.3"
 	}
 }