@cloudcannon/editable-regions 0.0.2 → 0.0.4

package/nodes/editable-array.ts

@@ -31,6 +31,9 @@ export default class EditableArray extends Editable {
 		| null
 		| undefined = undefined;
 
+	private updatePromise: Promise<void> | undefined;
+	private needsReupdate = false;
+
 	validateConfiguration(): boolean {
 		const prop = this.element.dataset.prop;
 		if (typeof prop !== "string") {
@@ -65,7 +68,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();
@@ -119,7 +137,11 @@ export default class EditableArray extends Editable {
 				}
 				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 +177,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;
 		}
@@ -209,7 +236,11 @@ export default class EditableArray extends Editable {
 			}
 
 			matchingChild.editable.parent = this;
-			matchingChild.editable.pushValue(value[i]);
+			matchingChild.editable.pushValue(
+				value,
+				{ path: `${i}`, editable: matchingChild.editable },
+				{ __base_context: this.contextBase ?? {} },
+			);
 		});
 
 		children.forEach((child, i) => {

package/nodes/editable-component.ts

@@ -11,35 +11,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 +52,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,24 +178,17 @@ 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 (
@@ -208,11 +211,66 @@ export default class EditableComponent extends Editable {
 		}
 	}
 
-	dispatchEdit(source?: string) {
+	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,
 			},
 		);