@cloudcannon/editable-regions 0.0.3 → 0.0.5

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",
@@ -31,6 +31,63 @@ export default class EditableArray extends Editable {
 		| null
 		| undefined = undefined;
 
+	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") {
@@ -65,7 +122,22 @@ export default class EditableArray extends Editable {
 		return value;
 	}
 
-	async update(): Promise<void> {
+	update(): Promise<void> {
+		if (this.updatePromise) {
+			this.needsReupdate = true;
+			return this.updatePromise;
+		}
+		this.updatePromise = this._update().then(() => {
+			this.updatePromise = undefined;
+			if (this.needsReupdate) {
+				this.needsReupdate = false;
+				return this.update();
+			}
+		});
+		return this.updatePromise;
+	}
+
+	private async _update(): Promise<void> {
 		let value: unknown[] | CloudCannonJavaScriptV1APIFile[];
 		if (CloudCannon.isAPICollection(this.value)) {
 			value = await this.value.items();
@@ -83,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;
 			}
 
@@ -109,17 +177,34 @@ 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(value[i]);
+				child.editable?.pushValue(
+					value,
+					{ path: `${i}`, editable: child.editable },
+					{ __base_context: this.contextBase ?? {} },
+				);
 			}
 			return;
 		}
@@ -155,7 +240,12 @@ export default class EditableArray extends Editable {
 		if (equal && children.length === dataKeys?.length) {
 			children.forEach((child, index) => {
 				child.dataset.prop = `${index}`;
-				child.editable.pushValue(value[index]);
+				child.dataset.length = `${children.length}`;
+				child.editable?.pushValue(
+					value,
+					{ path: `${index}`, editable: child.editable },
+					{ __base_context: this.contextBase ?? {} },
+				);
 			});
 			return;
 		}
@@ -189,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 {
@@ -208,8 +300,14 @@ export default class EditableArray extends Editable {
 				this.element.appendChild(matchingChild);
 			}
 
-			matchingChild.editable.parent = this;
-			matchingChild.editable.pushValue(value[i]);
+			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,
@@ -11,35 +10,30 @@ import "../components/ui/editable-region-error-card.js";
 import "../components/ui/editable-component-controls.js";
 import type EditableComponentControls from "../components/ui/editable-component-controls.js";
 import {
-	CloudCannon,
 	getEditableComponentRenderers,
+	realizeAPIValue,
 } from "../helpers/cloudcannon.js";
 
-const realizeAPIValue = async (value: unknown): Promise<unknown> => {
-	if (CloudCannon.isAPICollection(value)) {
-		const items = await value.items();
-		return Promise.all(items.map(realizeAPIValue));
-	}
-	if (CloudCannon.isAPIFile(value)) {
-		return value.data.get();
-	}
-	if (CloudCannon.isAPIDataset(value)) {
-		const items = await value.items();
-		if (Array.isArray(items)) {
-			return Promise.all(items.map(realizeAPIValue));
-		}
-		return items.data.get();
-	}
-	return value;
-};
-
 export default class EditableComponent extends Editable {
 	protected controlsElement?: EditableComponentControls;
 
+	private updatePromise: Promise<void> | undefined;
+	private needsReupdate = false;
+
 	getComponents() {
 		return getEditableComponentRenderers();
 	}
 
+	shouldMount(): boolean {
+		if (super.shouldMount()) {
+			return true;
+		}
+
+		return !Object.keys(this.element.dataset).some((key) =>
+			key.startsWith("prop"),
+		);
+	}
+
 	validateConfiguration(): boolean {
 		const key = this.element.dataset.component;
 		if (!key) {
@@ -57,7 +51,22 @@ export default class EditableComponent extends Editable {
 		return true;
 	}
 
-	async update(): Promise<void> {
+	update(): Promise<void> {
+		if (this.updatePromise) {
+			this.needsReupdate = true;
+			return this.updatePromise;
+		}
+		this.updatePromise = this._update().then(() => {
+			this.updatePromise = undefined;
+			if (this.needsReupdate) {
+				this.needsReupdate = false;
+				return this.update();
+			}
+		});
+		return this.updatePromise;
+	}
+
+	async _update(): Promise<void> {
 		this.element.classList.remove("errored");
 
 		const key = this.element.dataset.component;
@@ -168,33 +177,27 @@ export default class EditableComponent extends Editable {
 							const listener = this.listeners[i];
 							if (listener.editable.element === targetChild) {
 								listener.editable.element = renderChild;
-								renderChild.editable.pushValue(this.value, listener);
+								renderChild.editable.pushValue(this.value, listener, {
+									...this.contexts,
+									__base_context: this.contextBase ?? {},
+								});
 							}
 						}
 					} else if (hasEditable(targetChild)) {
-						for (let i = 0; i < this.listeners.length; i++) {
-							const listener = this.listeners[i];
-							if (listener.editable.element === targetChild) {
-								targetChild.editable.pushValue(this.value, listener);
-							}
-						}
+						this.updateEditable(renderChild, targetChild);
 					}
 				} else if (hasEditable(targetChild)) {
-					for (let i = 0; i < this.listeners.length; i++) {
-						const listener = this.listeners[i];
-						if (listener.editable.element === targetChild) {
-							targetChild.editable.pushValue(this.value, listener);
-						}
-					}
+					this.updateEditable(renderChild, targetChild);
 				}
 			} 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) {
@@ -208,11 +211,79 @@ export default class EditableComponent extends Editable {
 		}
 	}
 
-	dispatchEdit(source?: string) {
+	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 },
+	) {
+		for (const attribute of renderChild.attributes) {
+			if (attribute.name !== "class") {
+				targetChild.setAttribute(attribute.name, attribute.value);
+			}
+		}
+		for (const attribute of targetChild.attributes) {
+			if (
+				!renderChild.hasAttribute(attribute.name) &&
+				attribute.name !== "class" &&
+				attribute.name !== "contenteditable"
+			) {
+				targetChild.removeAttribute(attribute.name);
+			}
+		}
+
+		for (const className of renderChild.classList) {
+			targetChild.classList.add(className);
+		}
+
+		for (const className of targetChild.classList) {
+			if (
+				!renderChild.classList.contains(className) &&
+				!className.includes("ProseMirror")
+			) {
+				targetChild.classList.remove(className);
+			}
+		}
+
+		for (let i = 0; i < this.listeners.length; i++) {
+			const listener = this.listeners[i];
+			if (listener.editable.element === targetChild) {
+				targetChild.editable.pushValue(this.value, listener, {
+					...this.contexts,
+					__base_context: this.contextBase ?? {},
+				});
+			}
+		}
+	}
+
+	dispatchEdit(source?: string, originalEvent?: MouseEvent) {
+		const rect = this.element.getBoundingClientRect();
 		this.element.dispatchEvent(
 			new CustomEvent("cloudcannon-api", {
 				bubbles: true,
-				detail: { action: "edit", source },
+				detail: {
+					action: "edit",
+					source,
+					position: {
+						x: originalEvent?.clientX ?? 0,
+						y: originalEvent?.clientY ?? 0,
+						left: rect.left,
+						width: rect.width,
+						top: rect.top,
+						height: rect.height,
+					},
+				},
 			}),
 		);
 	}

package/nodes/editable-snippet.ts

@@ -139,10 +139,4 @@ export default class EditableSnippet extends EditableComponent {
 	validateConfiguration(): boolean {
 		return true;
 	}
-
-	resolveSource(source?: string): string | undefined {
-		return this.parent
-			? `${this.parent.resolveSource()}.@snippet[${this.element.getAttribute("data-cms-snippet-id")}].${source}`
-			: `@snippet[${this.element.getAttribute("data-cms-snippet-id")}].${source}`;
-	}
 }

package/nodes/editable-text.ts

@@ -117,13 +117,7 @@ export default class EditableText extends Editable {
 			return this.editor;
 		}
 
-		const source = this.resolveSource();
-
-		if (!source) {
-			throw new Error("Source not found");
-		}
-
-		const inputConfig = source.endsWith("@content")
+		const inputConfig = this.contextBase?.isContent
 			? { type: "markdown" }
 			: await this.dispatchGetInputConfig(this.element.dataset.prop);
 
@@ -132,7 +126,7 @@ export default class EditableText extends Editable {
 			this.onChange.bind(this),
 			{
 				elementType: this.element.dataset.type,
-				editableType: source.endsWith("@content") ? "content" : undefined,
+				editableType: this.contextBase?.isContent ? "content" : undefined,
 				inputConfig,
 			},
 		);