@cloudcannon/editable-regions 0.0.2 → 0.0.4

package/nodes/editable.ts

@@ -4,7 +4,8 @@ import type {
 	CloudCannonJavaScriptV1APIFile,
 } from "@cloudcannon/javascript-api";
 import { hasEditable } from "../helpers/checks";
-import { CloudCannon, loadedPromise } from "../helpers/cloudcannon";
+import { CloudCannon } from "../helpers/cloudcannon";
+import { loadingPromise } from "../helpers/loading";
 
 export interface EditableListener {
 	editable: Editable;
@@ -12,26 +13,45 @@ export interface EditableListener {
 	path?: string;
 }
 
-export interface APIListener {
+export interface EditableContext {
+	fullPath?: string;
+	filePath?: string;
+	isContent?: boolean;
+	file?: CloudCannonJavaScriptV1APIFile;
+	collection?: CloudCannonJavaScriptV1APICollection;
+	dataset?: CloudCannonJavaScriptV1APIDataset;
+}
+
+export interface DOMListener {
+	fn: (e: any) => void;
+	event: string;
+}
+
+export interface APIListener extends DOMListener {
+	event: "change" | "delete";
 	obj:
 		| CloudCannonJavaScriptV1APIFile
 		| CloudCannonJavaScriptV1APICollection
 		| CloudCannonJavaScriptV1APIDataset;
-	fn: () => void;
-	event: "change" | "delete";
 }
 
 export default class Editable {
 	APIListeners: APIListener[] = [];
 	listeners: EditableListener[] = [];
+	domListeners: DOMListener[] = [];
 	value: unknown = undefined;
 	parent: Editable | null = null;
 	element: HTMLElement;
 	mounted = false;
 	connected = false;
+	disconnecting = false;
+	needsReconnect = false;
 
 	propsBase: unknown;
+	contextBase?: EditableContext;
 	props: Record<string, unknown> = {};
+	contexts: Record<string, EditableContext> = {};
+	connectPromise?: Promise<void>;
 
 	constructor(element: HTMLElement) {
 		this.element = element;
@@ -67,20 +87,92 @@ export default class Editable {
 		}, obj);
 	}
 
+	async lookupPathAndContext(
+		path: string,
+		obj: unknown,
+		contexts: { [key: string]: EditableContext } = {},
+	): Promise<{ value: any; context: EditableContext }> {
+		if (!path) {
+			return {
+				value: obj,
+				context: {},
+			};
+		}
+
+		let value: any = obj;
+		let context: EditableContext | undefined;
+
+		for (const key of path.split(".")) {
+			if (!context && contexts[key]) {
+				context = {
+					...contexts[key],
+				};
+			} else {
+				context = context ?? {
+					...contexts.__base_context,
+				};
+			}
+
+			if (CloudCannon.isAPICollection(value)) {
+				context.collection = value;
+				value = await value.items();
+			} else if (CloudCannon.isAPIFile(value)) {
+				context.file = value;
+				if (key === "@content") {
+					context.isContent = true;
+					value = await value.content.get();
+				} else {
+					value = await value.data.get();
+				}
+			} else if (CloudCannon.isAPIDataset(value)) {
+				context.dataset = value;
+				const items = await value.items();
+				if (Array.isArray(items)) {
+					value = items;
+				} else {
+					context.file = items;
+					value = await items.data.get();
+				}
+			}
+
+			if (value && typeof value === "object" && key in value) {
+				value = (value as any)[key];
+			}
+
+			context.fullPath = context.fullPath ? `${context.fullPath}.${key}` : key;
+			if (context.file) {
+				context.filePath = context.filePath
+					? `${context.filePath}.${key}`
+					: key;
+			}
+		}
+		return { value, context: context ?? {} };
+	}
+
 	shouldUpdate(_value: unknown) {
 		return true;
 	}
 
+	shouldMount() {
+		return this.value !== undefined;
+	}
+
 	async getNewValue(
 		value: unknown,
 		listener?: EditableListener,
+		contexts?: { [key: string]: EditableContext },
 	): Promise<unknown> {
 		const { key, path } = listener ?? {};
-		const resolvedValue = path ? await this.lookupPath(path, value) : value;
+
+		const { value: resolvedValue, context: newContext } = path
+			? await this.lookupPathAndContext(path, value, contexts)
+			: { value, context: {} };
 		if (!key) {
 			this.propsBase = resolvedValue;
+			this.contextBase = newContext;
 		} else {
 			this.props[key] = resolvedValue;
+			this.contexts[key] = newContext;
 		}
 
 		if (Object.entries(this.props).length === 0) {
@@ -98,8 +190,12 @@ export default class Editable {
 		return this.validateValue(newValue);
 	}
 
-	async pushValue(value: unknown, listener?: EditableListener): Promise<void> {
-		const newValue = await this.getNewValue(value, listener);
+	async pushValue(
+		value: unknown,
+		listener?: EditableListener,
+		contexts?: { [key: string]: EditableContext },
+	): Promise<void> {
+		const newValue = await this.getNewValue(value, listener, contexts);
 
 		if (typeof newValue === "undefined" || !this.shouldUpdate(newValue)) {
 			return;
@@ -119,7 +215,10 @@ export default class Editable {
 
 	update(): void {
 		this.listeners.forEach((listener) =>
-			listener.editable.pushValue(this.value, listener),
+			listener.editable.pushValue(this.value, listener, {
+				...this.contexts,
+				__base_context: this.contextBase ?? {},
+			}),
 		);
 	}
 
@@ -138,7 +237,10 @@ export default class Editable {
 		}
 
 		if (this.value !== undefined) {
-			listener.editable.pushValue(this.value, listener);
+			listener.editable.pushValue(this.value, listener, {
+				...this.contexts,
+				__base_context: this.contextBase ?? {},
+			});
 		}
 
 		this.listeners.push(listener);
@@ -150,51 +252,46 @@ export default class Editable {
 		);
 	}
 
-	disconnect(): void {
+	async disconnect(): Promise<void> {
+		this.disconnecting = true;
+
+		if (this.connectPromise) {
+			await this.connectPromise;
+		}
+
 		this.parent?.deregisterListener(this);
 		this.parent = null;
 		this.APIListeners.forEach(({ obj, fn, event }) =>
 			obj.removeEventListener(event, fn),
 		);
-	}
-
-	resolveSource(source?: string): string | undefined {
-		if (typeof source !== "string") {
-			return this.parent
-				? this.parent.resolveSource(this.element.dataset.prop)
-				: this.element.dataset.prop;
-		}
-
-		const [part, ...rest] = source.split(".");
-		const propKey = part.charAt(0).toUpperCase() + part.slice(1);
-		const propPath = this.element.dataset[`prop${propKey}`];
-
-		if (propPath) {
-			rest.unshift(propPath);
-			return this.parent
-				? this.parent.resolveSource(rest.join("."))
-				: rest.join(".");
-		}
-
-		if (typeof this.element.dataset.prop !== "string") {
-			throw new Error(`Failed to resolve source "${source}"`);
-		}
-
-		if (this.element.dataset.prop) {
-			source = `${this.element.dataset.prop}.${source}`;
+		this.APIListeners = [];
+		this.domListeners.forEach(({ event, fn }) => {
+			this.element.removeEventListener(event, fn);
+		});
+		this.domListeners = [];
+		this.connected = false;
+		this.connectPromise = undefined;
+		this.disconnecting = false;
+
+		if (this.needsReconnect) {
+			this.needsReconnect = false;
+			this.connect();
 		}
-
-		return this.parent && !source.startsWith("@")
-			? this.parent.resolveSource(source)
-			: source;
 	}
 
 	connect(): void {
-		loadedPromise.then(() => {
+		if (this.disconnecting) {
+			this.needsReconnect = true;
+			return;
+		}
+		if (this.connectPromise) {
+			return;
+		}
+		this.connectPromise = loadingPromise.then(() => {
 			this.setupListeners();
 			if (this.validateConfiguration()) {
 				this.connected = true;
-				if (this.value !== undefined && !this.mounted) {
+				if (!this.mounted && this.shouldMount()) {
 					this.mounted = true;
 					this.mount();
 					this.update();
@@ -203,6 +300,11 @@ export default class Editable {
 		});
 	}
 
+	addEventListener(event: string, fn: (e: any) => void): void {
+		this.domListeners.push({ event, fn });
+		this.element.addEventListener(event, fn);
+	}
+
 	setupListeners(): void {
 		let parentEditable: Editable | undefined;
 		let parent = this.element.parentElement;
@@ -216,78 +318,69 @@ export default class Editable {
 
 		this.parent = parentEditable || null;
 
-		let hasProps = false;
-		Object.entries(this.element.dataset).forEach(
-			async ([propName, propPath]) => {
-				if (!propName.startsWith("prop") || typeof propPath !== "string") {
-					return;
-				}
+		Object.entries(this.element.dataset).forEach(([propName, propPath]) => {
+			if (!propName.startsWith("prop") || typeof propPath !== "string") {
+				return;
+			}
 
-				hasProps = true;
+			const { collection, file, dataset, source, absolute } =
+				this.parseSource(propPath);
 
-				const { collection, file, dataset, source, absolute } =
-					this.parseSource(propPath);
+			const listener = {
+				editable: this,
+				key:
+					propName === "prop" ? undefined : propName.substring(4).toLowerCase(),
+				path: source,
+			};
 
-				const listener = {
-					editable: this,
-					key:
-						propName === "prop"
-							? undefined
-							: propName.substring(4).toLowerCase(),
-					path: source,
-				};
+			if (!absolute && parentEditable) {
+				parentEditable.registerListener(listener);
+				return;
+			}
 
-				if (!absolute && parentEditable) {
-					parentEditable.registerListener(listener);
-					return;
-				}
+			// Any single data path should only be able to refer to a single absolute API object
+			const obj = collection || dataset || file;
+			if (obj) {
+				const handleAPIChange = () => {
+					this.pushValue(obj, listener);
+				};
+				this.APIListeners.push({
+					obj,
+					fn: handleAPIChange,
+					event: "change",
+				});
+				obj.addEventListener("change", handleAPIChange);
+				handleAPIChange();
+			}
+		});
 
-				// Any single data path should only be able to refer to a single absolute API object
-				const obj = collection || dataset || file;
-				if (obj) {
-					const handleAPIChange = () => {
-						this.pushValue(obj, listener);
-					};
-					this.APIListeners.push({
-						obj,
-						fn: handleAPIChange,
-						event: "change",
-					});
-					obj.addEventListener("change", handleAPIChange);
-					handleAPIChange();
-				}
-			},
-		);
+		this.addEventListener("cloudcannon-api", this.handleApiEvent.bind(this));
+	}
 
-		this.element.addEventListener("cloudcannon-api", async (e: any) => {
-			if (e.target !== this.element) {
-				if (!e.detail.source) {
-					e.detail.source = this.element.dataset.prop;
-				} else {
-					const source = e.detail.source;
-					const [part, ...rest] = source.split(".");
-					const propKey = part.charAt(0).toUpperCase() + part.slice(1);
-					const propPath = this.element.dataset[`prop${propKey}`];
-
-					if (propPath) {
-						rest.unshift(propPath);
-						e.detail.source = rest.join(".");
-					} else if (this.element.dataset.prop) {
-						e.detail.source = `${this.element.dataset.prop}.${source}`;
-					}
+	handleApiEvent(e: any): void {
+		if (e.target !== this.element) {
+			if (!e.detail.source) {
+				e.detail.source = this.element.dataset.prop;
+			} else {
+				const source = e.detail.source;
+				const [part, ...rest] = source.split(".");
+				const propKey = part.charAt(0).toUpperCase() + part.slice(1);
+				const propPath = this.element.dataset[`prop${propKey}`];
+
+				if (propPath) {
+					rest.unshift(propPath);
+					e.detail.source = rest.join(".");
+				} else if (this.element.dataset.prop) {
+					e.detail.source = `${this.element.dataset.prop}.${source}`;
 				}
 			}
+		}
 
-			const { absolute } = this.parseSource(e.detail.source);
-			if (!this.parent || absolute) {
-				if (this.executeApiCall(e.detail)) {
-					e.stopPropagation();
-				}
+		const { absolute } = this.parseSource(e.detail.source);
+		if (!this.parent || absolute) {
+			if (this.executeApiCall(e.detail)) {
+				e.stopPropagation();
 			}
-		});
-
-		if (!hasProps) {
-			this.mount();
 		}
 	}
 
@@ -330,6 +423,7 @@ export default class Editable {
 						options: {
 							disable_reorder: true,
 							disable_remove: true,
+							disable_add: true,
 						},
 					});
 					return true;
@@ -338,9 +432,10 @@ export default class Editable {
 					`Failed to resolve source for API call: ${options.source}`,
 				);
 			}
+
 			switch (options.action) {
 				case "edit":
-					file?.data.edit({ slug: source });
+					file?.data.edit({ slug: source, position: options.position });
 					break;
 				case "set":
 					if (source?.endsWith("@content")) {
@@ -364,8 +459,9 @@ export default class Editable {
 					break;
 				case "move-array-item":
 					file?.data.moveArrayItem({
-						slug: source,
-						index: options.fromIndex,
+						fromSlug: options.fromSlug ?? source,
+						fromIndex: options.fromIndex,
+						toSlug: source,
 						toIndex: options.toIndex,
 					});
 					break;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cloudcannon/editable-regions",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"type": "module",
 	"description": "Visual Editing for the CloudCannon CMS.",
 	"keywords": [
@@ -54,7 +54,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",
-		"@cloudcannon/javascript-api": "0.0.9",
+		"@cloudcannon/javascript-api": "0.0.10",
 		"@types/js-beautify": "1.14.3",
 		"@types/react": "18.3.12",
 		"@types/react-dom": "18.3.1",