@cloudcannon/editable-regions 0.0.6 → 0.0.7

package/components/ui/editable-array-item-controls.ts

@@ -92,15 +92,11 @@ export default class EditableArrayItemControls extends EditableComponentControls
 		super.render(shadow);
 
 		this.dragHandle = document.createElement("button");
+		this.dragHandle.type = "button";
 		this.dragHandle.onclick = (e) => {
 			e.stopPropagation();
-			if (this.contextMenu?.classList.contains("open")) {
-				this.contextMenu?.classList.remove("open");
-				this.removeAttribute("open");
-			} else if (this.contextMenu && this.contextMenu.childElementCount > 0) {
-				this.contextMenu?.classList.add("open");
-				this.setAttribute("open", "true");
-			}
+			e.preventDefault();
+			this.toggleContextMenu();
 		};
 		this.dragHandle.ondragstart = () => {
 			this.contextMenu?.classList.remove("open");

package/components/ui/editable-component-controls.ts

@@ -7,6 +7,16 @@ export default class EditableComponentControls extends HTMLElement {
 
 	private editButton?: HTMLButtonElement;
 
+	toggleContextMenu() {
+		if (this.contextMenu?.classList.contains("open")) {
+			this.contextMenu?.classList.remove("open");
+			this.removeAttribute("open");
+		} else if (this.contextMenu && this.contextMenu.childElementCount > 0) {
+			this.contextMenu?.classList.add("open");
+			this.setAttribute("open", "true");
+		}
+	}
+
 	render(shadow: ShadowRoot): void {
 		const style = document.createElement("style");
 		style.textContent = styleContent;
@@ -21,18 +31,23 @@ export default class EditableComponentControls extends HTMLElement {
 		shadow.appendChild(this.contextMenu);
 
 		this.editButton = document.createElement("button");
+		this.editButton.type = "button";
 		this.editButton.innerHTML = '<cc-icon name="edit"></cc-icon>';
 		this.editButton.onclick = () => {
 			this.dispatchEvent(new CustomEvent("edit", { detail: this }));
 		};
 		this.buttonRow.append(this.editButton);
 
-		this.onclick = () => {
+		this.onclick = (e) => {
+			e.preventDefault();
 			this.contextMenu?.classList.remove("open");
 			this.removeAttribute("open");
 		};
 
-		this.onblur = () => {
+		this.onblur = (e) => {
+			if ((e.relatedTarget as HTMLElement)?.tagName === "A") {
+				return;
+			}
 			this.contextMenu?.classList.remove("open");
 			this.removeAttribute("open");
 		};

package/nodes/editable-array-item.ts

@@ -44,11 +44,11 @@ export default class EditableArrayItem extends EditableComponent {
 	}
 
 	isValidDropzone(e: DragEvent): boolean {
-		const source = this.parent?.contextBase?.filePath;
-		if (!source || !e.dataTransfer) {
+		if (!e.dataTransfer) {
 			return false;
 		}
 
+		const source = this.parent?.contextBase?.fullPath ?? "@currentFile";
 		if (e.dataTransfer?.types.includes(source.toLowerCase())) {
 			return true;
 		}
@@ -96,11 +96,11 @@ export default class EditableArrayItem extends EditableComponent {
 	}
 
 	onDragStart(e: DragEvent): void {
-		const source = this.parent?.contextBase?.filePath;
-		if (!source || !e.dataTransfer || !this.element.dataset.prop) {
+		if (!e.dataTransfer || !this.element.dataset.prop) {
 			return;
 		}
 
+		const source = this.parent?.contextBase?.fullPath ?? "@currentFile";
 		const clientRect = this.element.getBoundingClientRect();
 
 		e.stopPropagation();
@@ -423,11 +423,7 @@ export default class EditableArrayItem extends EditableComponent {
 				return;
 			}
 
-			const source = this.parent?.contextBase?.filePath;
-			if (!source) {
-				throw new Error("Source not found");
-			}
-
+			const source = this.parent?.contextBase?.fullPath ?? "@currentFile";
 			const dragType = this.getDragType();
 			const sameArrayData = e.dataTransfer.getData(source);
 			const otherArrayData = dragType

package/nodes/editable-array.ts

@@ -29,6 +29,7 @@ export default class EditableArray extends Editable {
 	value:
 		| CloudCannonJavaScriptV1APICollection
 		| CloudCannonJavaScriptV1APIDataset
+		| CloudCannonJavaScriptV1APIFile
 		| unknown[]
 		| null
 		| undefined = undefined;
@@ -42,6 +43,7 @@ export default class EditableArray extends Editable {
 			return;
 		}
 
+		const __base_context = { ...this.contextBase };
 		let value: unknown[] | CloudCannonJavaScriptV1APIFile[];
 		if (CloudCannon.isAPICollection(this.value)) {
 			value = await this.value.items();
@@ -51,8 +53,13 @@ export default class EditableArray extends Editable {
 				value = items;
 			} else {
 				const data = await items.data.get();
+				__base_context.file = items;
 				value = Array.isArray(data) ? data : [];
 			}
+		} else if (CloudCannon.isAPIFile(this.value)) {
+			const data = await this.value.data.get();
+			__base_context.file = this.value;
+			value = Array.isArray(data) ? data : [];
 		} else if (Array.isArray(this.value)) {
 			value = this.value;
 		} else {
@@ -84,7 +91,7 @@ export default class EditableArray extends Editable {
 
 		if (listener.path) {
 			listener.editable.pushValue(value, listener, {
-				__base_context: this.contextBase ?? {},
+				__base_context,
 			});
 		}
 	}
@@ -113,7 +120,8 @@ export default class EditableArray extends Editable {
 			!Array.isArray(value) &&
 			value !== null &&
 			!CloudCannon.isAPICollection(value) &&
-			!CloudCannon.isAPIDataset(value)
+			!CloudCannon.isAPIDataset(value) &&
+			!CloudCannon.isAPIFile(value)
 		) {
 			this.element.classList.add("errored");
 			const error = document.createElement("editable-region-error-card");
@@ -156,6 +164,7 @@ export default class EditableArray extends Editable {
 
 	private async _update(): Promise<void> {
 		let value: unknown[] | CloudCannonJavaScriptV1APIFile[];
+		const __base_context = { ...this.contextBase };
 		if (CloudCannon.isAPICollection(this.value)) {
 			value = await this.value.items();
 		} else if (CloudCannon.isAPIDataset(this.value)) {
@@ -164,8 +173,13 @@ export default class EditableArray extends Editable {
 				value = items;
 			} else {
 				const data = await items.data.get();
+				__base_context.file = items;
 				value = Array.isArray(data) ? data : [];
 			}
+		} else if (CloudCannon.isAPIFile(this.value)) {
+			const data = await this.value.data.get();
+			__base_context.file = this.value;
+			value = Array.isArray(data) ? data : [];
 		} else if (Array.isArray(this.value)) {
 			value = this.value;
 		} else {
@@ -240,7 +254,7 @@ export default class EditableArray extends Editable {
 				child.editable?.pushValue(
 					value,
 					{ path: `${i}`, editable: child.editable },
-					{ __base_context: this.contextBase ?? {} },
+					{ __base_context },
 				);
 			}
 			return;
@@ -284,7 +298,7 @@ export default class EditableArray extends Editable {
 				child.editable?.pushValue(
 					value,
 					{ path: `${index}`, editable: child.editable },
-					{ __base_context: this.contextBase ?? {} },
+					{ __base_context },
 				);
 			});
 
@@ -374,7 +388,7 @@ export default class EditableArray extends Editable {
 				matchingChild.editable.pushValue(
 					value,
 					{ path: `${i}`, editable: matchingChild.editable },
-					{ __base_context: this.contextBase ?? {} },
+					{ __base_context },
 				);
 			}
 		});

package/nodes/editable-image.ts

@@ -185,7 +185,9 @@ export default class EditableImage extends Editable {
 			!!this.element.dataset.propTitle || !!this.element.dataset.prop;
 
 		this.loadInputConfig().then(() => {
-			this.imageEl?.addEventListener("click", () => {
+			this.imageEl?.addEventListener("click", (e) => {
+				e.preventDefault();
+
 				if (!this.value) {
 					throw new Error("Value is not defined");
 				}

package/nodes/editable-text.ts

@@ -80,6 +80,8 @@ export default class EditableText extends Editable {
 	}
 
 	mount(): void {
+		this.element.addEventListener("click", (e) => e.preventDefault());
+
 		this.element.addEventListener("blur", () => {
 			this.focused = false;
 			this.element.dispatchEvent(

package/nodes/editable.ts

@@ -88,14 +88,16 @@ export default class Editable {
 	}
 
 	async lookupPathAndContext(
-		path: string,
-		obj: unknown,
+		path?: string,
+		obj?: unknown,
 		contexts: { [key: string]: EditableContext } = {},
 	): Promise<{ value: any; context: EditableContext }> {
 		if (!path) {
 			return {
 				value: obj,
-				context: {},
+				context: {
+					...contexts.__base_context,
+				},
 			};
 		}
 
@@ -166,9 +168,9 @@ export default class Editable {
 	): Promise<unknown> {
 		const { key, path } = listener ?? {};
 
-		const { value: resolvedValue, context: newContext } = path
-			? await this.lookupPathAndContext(path, value, contexts)
-			: { value, context: {} };
+		const { value: resolvedValue, context: newContext } =
+			await this.lookupPathAndContext(path, value, contexts);
+
 		if (!key) {
 			this.propsBase = resolvedValue;
 			this.contextBase = newContext;
@@ -317,9 +319,12 @@ export default class Editable {
 		let parentEditable: Editable | undefined;
 		let parent = this.element.parentElement;
 		while (parent) {
-			if (hasEditable(parent)) {
+			if (hasEditable(parent) && !parentEditable) {
 				parentEditable = parent.editable;
-				break;
+			}
+
+			if (parent.tagName === "A") {
+				parent.draggable = false;
 			}
 			parent = parent.parentElement;
 		}
@@ -331,7 +336,7 @@ export default class Editable {
 				return;
 			}
 
-			const { collection, file, dataset, source, absolute } =
+			const { collection, file, dataset, source, absolute, currentFile } =
 				this.parseSource(propPath);
 
 			const listener = {
@@ -349,8 +354,15 @@ export default class Editable {
 			// Any single data path should only be able to refer to a single absolute API object
 			const obj = collection || dataset || file;
 			if (obj) {
+				const fullPath = collection
+					? `@collections[${collection.collectionKey}]`
+					: dataset
+						? `@data[${dataset.datasetKey}]`
+						: currentFile
+							? undefined
+							: `@file[${file?.path}]`;
 				const handleAPIChange = () => {
-					this.pushValue(obj, listener);
+					this.pushValue(obj, listener, { __base_context: { fullPath } });
 				};
 				this.APIListeners.push({
 					obj,
@@ -425,22 +437,6 @@ export default class Editable {
 		}
 
 		filePromise.then((file) => {
-			if (typeof source !== "string") {
-				if (options.action === "get-input-config") {
-					options.callback({
-						options: {
-							disable_reorder: true,
-							disable_remove: true,
-							disable_add: true,
-						},
-					});
-					return true;
-				}
-				throw new Error(
-					`Failed to resolve source for API call: ${options.source}`,
-				);
-			}
-
 			switch (options.action) {
 				case "edit":
 					file?.data.edit({ slug: source, position: options.position });
@@ -474,7 +470,17 @@ export default class Editable {
 					});
 					break;
 				case "get-input-config":
-					file?.getInputConfig({ slug: source }).then(options.callback);
+					if (!file) {
+						options.callback({
+							options: {
+								disable_reorder: true,
+								disable_remove: true,
+								disable_add: true,
+							},
+						});
+					} else {
+						file?.getInputConfig({ slug: source }).then(options.callback);
+					}
 					break;
 			}
 		});
@@ -521,6 +527,7 @@ export default class Editable {
 		let file: CloudCannonJavaScriptV1APIFile | undefined;
 		let dataset: CloudCannonJavaScriptV1APIDataset | undefined;
 		let absolute = false;
+		let currentFile = false;
 
 		const collectionMatch = source?.match(
 			/^@collections\[(?<key>[^\]]+)\](\.(?<rest>.+))?$/,
@@ -550,6 +557,7 @@ export default class Editable {
 					absolute = true;
 				} else {
 					file = CloudCannon.currentFile();
+					currentFile = true;
 				}
 			}
 		}
@@ -566,10 +574,11 @@ export default class Editable {
 		return {
 			collection,
 			file,
-			source,
+			source: source ?? "",
 			absolute,
 			snippets,
 			dataset,
+			currentFile,
 		};
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cloudcannon/editable-regions",
-	"version": "0.0.6",
+	"version": "0.0.7",
 	"type": "module",
 	"description": "Visual Editing for the CloudCannon CMS.",
 	"keywords": [