@cloudcannon/editable-regions 0.0.6 → 0.0.8

package/components/index.ts

@@ -1,12 +1,12 @@
 export { default as EditableArrayComponent } from "./editable-array-component.js";
 export { default as EditableArrayItemComponent } from "./editable-array-item-component.js";
-export { default as EditableTextComponent } from "./editable-text-component.js";
 export { default as EditableComponentComponent } from "./editable-component-component.js";
 export { default as EditableImageComponent } from "./editable-image-component.js";
-export { default as EditableSourceComponent } from "./editable-source-component.js";
 export { default as EditableSnippetComponent } from "./editable-snippet-component.js";
+export { default as EditableSourceComponent } from "./editable-source-component.js";
+export { default as EditableTextComponent } from "./editable-text-component.js";
 
-import { apiLoadedPromise } from "../helpers/cloudcannon.js";
+import { apiLoadedPromise } from "../helpers/cloudcannon.mjs";
 import {
 	dehydrateDataEditableRegions,
 	hydrateDataEditableRegions,

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/components/ui/editable-region-button.ts

@@ -22,11 +22,13 @@ export default class EditableRegionButton extends HTMLElement {
 		button.innerHTML = `<cc-icon name='${this.getAttribute("icon")}'></cc-icon>${this.getAttribute("text")}`;
 		shadow.appendChild(button);
 
-		button.addEventListener("click", (e) => {
-			this.dispatchEvent(
-				new CustomEvent("button-click", { detail: { originalEvent: e } }),
-			);
-		});
+		button.addEventListener("click", (e) => this.triggerClick(e));
+	}
+
+	triggerClick(e?: MouseEvent) {
+		this.dispatchEvent(
+			new CustomEvent("button-click", { detail: { originalEvent: e } }),
+		);
 	}
 }
 

package/helpers/checks.ts

@@ -1,6 +1,6 @@
+import Editable from "../nodes/editable.js";
 import EditableArrayItem from "../nodes/editable-array-item.js";
 import EditableText from "../nodes/editable-text.js";
-import Editable from "../nodes/editable.js";
 
 const TAG_NAMES = [
 	"EDITABLE-TEXT",

package/helpers/cloudcannon.mjs

@@ -0,0 +1,110 @@
+/**
+ * @typedef {import("@cloudcannon/javascript-api").CloudCannonEditorWindow} CloudCannonEditorWindow
+ * @typedef {import("@cloudcannon/javascript-api").CloudCannonJavaScriptV1API} CloudCannonJavaScriptV1API
+ */
+
+/**
+ * @typedef {(props: any) => HTMLElement | Promise<HTMLElement>} ComponentRenderer
+ */
+
+/**
+ * @typedef {CloudCannonEditorWindow & {
+ *   cc_components?: Record<string, ComponentRenderer>;
+ *   cc_snippets?: Record<string, ComponentRenderer>;
+ * }} ExtendedWindow
+ */
+
+/** @type {ExtendedWindow} */
+const extendedWindow = /** @type {any} */ (window);
+
+/** @type {CloudCannonJavaScriptV1API} */
+let _cloudcannon;
+
+/**
+ * Promise that resolves when the CloudCannon API is loaded
+ * @type {Promise<void>}
+ */
+export const apiLoadedPromise = new Promise((resolve) => {
+	if (extendedWindow.CloudCannonAPI) {
+		_cloudcannon = /** @type {any} */ (
+			extendedWindow.CloudCannonAPI.useVersion("v1", true)
+		);
+		resolve();
+	} else {
+		document.addEventListener(
+			"cloudcannon:load",
+			() => {
+				if (extendedWindow.CloudCannonAPI) {
+					_cloudcannon = /** @type {any} */ (
+						extendedWindow.CloudCannonAPI.useVersion("v1", true)
+					);
+				}
+				return resolve();
+			},
+			{ once: true },
+		);
+	}
+});
+
+/**
+ * Add a renderer for editable components
+ * @param {string} key - The component key
+ * @param {ComponentRenderer} renderer - The component renderer function
+ * @returns {void}
+ */
+export const addEditableComponentRenderer = (key, renderer) => {
+	extendedWindow.cc_components = extendedWindow.cc_components || {};
+	extendedWindow.cc_components[key] = renderer;
+	document.dispatchEvent(new CustomEvent(`editable-regions:registered-${key}`));
+};
+
+/**
+ * Add a renderer for editable snippets
+ * @param {string} key - The snippet key
+ * @param {ComponentRenderer} renderer - The snippet renderer function
+ * @returns {void}
+ */
+export const addEditableSnippetRenderer = (key, renderer) => {
+	extendedWindow.cc_snippets = extendedWindow.cc_snippets || {};
+	extendedWindow.cc_snippets[key] = renderer;
+	document.dispatchEvent(new CustomEvent(`editable-regions:registered-${key}`));
+};
+
+/**
+ * Get all registered editable component renderers
+ * @returns {Record<string, ComponentRenderer>}
+ */
+export const getEditableComponentRenderers = () =>
+	extendedWindow.cc_components ?? {};
+
+/**
+ * Get all registered editable snippet renderers
+ * @returns {Record<string, ComponentRenderer>}
+ */
+export const getEditableSnippetRenderers = () =>
+	extendedWindow.cc_snippets ?? {};
+
+/**
+ * Realize API values by converting CloudCannon API objects to their data representations
+ * @param {unknown} value - The value to realize
+ * @returns {Promise<unknown>}
+ */
+export const realizeAPIValue = async (value) => {
+	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 { _cloudcannon as CloudCannon };

package/integrations/astro/astro-integration.mjs

@@ -32,10 +32,32 @@ export default () => {
 			},
 			"astro:build:setup": async ({ target, vite }) => {
 				if (target === "client") {
+					vite.plugins ??= [];
 					vite.define ??= {};
 					vite.define.ENV_CLIENT = true;
 
-					vite.plugins?.unshift({
+					const flatPlugins = vite.plugins?.flat(10);
+					const astroBuildPlugin = flatPlugins?.find((obj) => {
+						return (
+							obj &&
+							typeof obj === "object" &&
+							"name" in obj &&
+							obj.name === "astro:build"
+						);
+					});
+
+					if (
+						astroBuildPlugin &&
+						"transform" in astroBuildPlugin &&
+						typeof astroBuildPlugin.transform === "function"
+					) {
+						const original = astroBuildPlugin.transform;
+						astroBuildPlugin.transform = function (source, id, options) {
+							return original.bind(this)(source, id, { ...options, ssr: true });
+						};
+					}
+
+					vite.plugins.unshift({
 						name: "vite-plugin-editable-regions",
 						enforce: "pre",
 
@@ -88,7 +110,7 @@ export default () => {
 												default:
 													contents += `export const ${key} = ${JSON.stringify(process.env[key] ?? "")};\n`;
 											}
-										} catch (e) {
+										} catch (_e) {
 											//Error intentionally ignored
 										}
 									},

package/integrations/astro/index.mjs

@@ -2,7 +2,7 @@ import {
 	renderSlotToString,
 	renderToString,
 } from "astro/runtime/server/index.js";
-import { addEditableComponentRenderer } from "../../helpers/cloudcannon";
+import { addEditableComponentRenderer } from "../../helpers/cloudcannon.mjs";
 
 /**
  * Queue of React components waiting to be rendered
@@ -86,7 +86,7 @@ export const registerAstroComponent = (key, component) => {
 				true,
 				["encrypt", "decrypt"],
 			);
-		} catch (err) {
+		} catch (_err) {
 			console.warn(
 				"[CloudCannon] Could not generate a key for Astro component. This may cause issues with Astro components that use server-islands",
 			);

package/integrations/astro/modules/content.js

@@ -1,4 +1,4 @@
-import { CloudCannon } from "../../../helpers/cloudcannon";
+import { CloudCannon } from "../../../helpers/cloudcannon.mjs";
 
 /**
  * @param {string} collectionKey

package/integrations/astro/react-renderer.mjs

@@ -24,7 +24,7 @@ addFrameworkRenderer({
 			try {
 				const reactNode = Component(props);
 				return { html: renderToStaticMarkup(reactNode) };
-			} catch (err) {
+			} catch (_err) {
 				const id = queueForClientSideRender((node) => {
 					const reactNode = createElement(Component, props, null);
 					const root = createRoot(node);

package/integrations/react.mjs

@@ -1,7 +1,7 @@
 import { createElement } from "react";
 import { flushSync } from "react-dom";
 import { createRoot } from "react-dom/client";
-import { addEditableComponentRenderer } from "../helpers/cloudcannon";
+import { addEditableComponentRenderer } from "../helpers/cloudcannon.mjs";
 
 /**
  * Registers a React component with the CloudCannon component system.

package/nodes/editable-array-item.ts

@@ -6,14 +6,14 @@ import {
 	isEditableArrayItem,
 	isEditableElement,
 } from "../helpers/checks.js";
-import { CloudCannon, realizeAPIValue } from "../helpers/cloudcannon.js";
+import { CloudCannon, realizeAPIValue } from "../helpers/cloudcannon.mjs";
 import type EditableArray from "./editable-array.js";
 import EditableComponent from "./editable-component.js";
 
 export default class EditableArrayItem extends EditableComponent {
 	parent: EditableArray | null = null;
 
-	protected controlsElement?: EditableArrayItemControls;
+	protected declare controlsElement?: EditableArrayItemControls;
 
 	private inputConfig?: any;
 	private structureStrings: string[] = [];
@@ -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();
@@ -292,7 +292,7 @@ export default class EditableArrayItem extends EditableComponent {
 			this.controlsElement = document.createElement(
 				"editable-array-item-controls",
 			);
-			this.controlsElement.addEventListener("edit", (e: any) => {
+			this.controlsElement.addEventListener("edit", (_e: any) => {
 				this.dispatchEdit(this.element.dataset.prop);
 			});
 
@@ -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

@@ -6,9 +6,9 @@ import type {
 import type EditableArrayItemComponent from "../components/editable-array-item-component.js";
 import type EditableRegionButton from "../components/ui/editable-region-button.js";
 import { isEditableElement } from "../helpers/checks.js";
-import { CloudCannon } from "../helpers/cloudcannon.js";
-import type EditableArrayItem from "./editable-array-item.js";
+import { CloudCannon } from "../helpers/cloudcannon.mjs";
 import Editable, { type EditableListener } from "./editable.js";
+import type EditableArrayItem from "./editable-array-item.js";
 import "../components/ui/editable-region-button.js";
 
 const arrayDirectionValues = [
@@ -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,14 +173,57 @@ 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 {
 			value = [];
 		}
 
+		const templates: {
+			keyed: Record<
+				string,
+				HTMLElement & {
+					editable?: EditableArrayItem;
+				}
+			>;
+			unkeyed?: HTMLElement & {
+				editable?: EditableArrayItem;
+			};
+		} = { keyed: {} };
+
+		for (let i = 0; i < this.element.children.length; i += 1) {
+			const childEl = this.element.children[i];
+			if (
+				childEl instanceof HTMLTemplateElement &&
+				typeof childEl.dataset.cloudcannonIgnore !== "string"
+			) {
+				const key = childEl.dataset.id;
+				const content = childEl.content;
+				let templateEl: HTMLElement;
+				if (content.childElementCount === 1) {
+					templateEl = content.children[0] as HTMLElement;
+				} else {
+					templateEl = document.createElement(
+						"editable-array-item",
+					) as HTMLElement;
+					templateEl.append(content.cloneNode(true));
+				}
+
+				if (typeof key === "string") {
+					templates.keyed[key] = templateEl;
+				} else {
+					templates.unkeyed = templateEl;
+				}
+			}
+		}
+
 		const children: (HTMLElement & { editable?: EditableArrayItem })[] = [];
 
 		for (const child of this.element.querySelectorAll(
@@ -192,7 +244,9 @@ export default class EditableArray extends Editable {
 		if (
 			children.length === 0 &&
 			!this.element.dataset.component &&
-			!this.element.dataset.componentKey
+			!this.element.dataset.componentKey &&
+			!templates.unkeyed &&
+			Object.keys(templates.keyed).length === 0
 		) {
 			const error = document.createElement("editable-region-error-card");
 			error.setAttribute("heading", "Failed to render array editable region");
@@ -204,7 +258,9 @@ export default class EditableArray extends Editable {
 			return;
 		}
 
-		if (!this.element.dataset.idKey) {
+		const key = this.element.dataset.idKey ?? this.element.dataset.componentKey;
+
+		if (!key) {
 			while (children.length > value.length) {
 				children.pop()?.remove();
 			}
@@ -219,7 +275,12 @@ export default class EditableArray extends Editable {
 			for (let i = 0; i < value.length; i++) {
 				let child = children[i];
 				if (!child) {
-					if (this.element.dataset.component) {
+					if (templates.unkeyed) {
+						child = templates.unkeyed.cloneNode(true) as HTMLElement & {
+							editable?: EditableArrayItem;
+						};
+						child.dataset.editable = "array-item";
+					} else if (this.element.dataset.component) {
 						child = document.createElement(
 							"editable-array-item",
 						) as EditableArrayItemComponent;
@@ -240,13 +301,12 @@ export default class EditableArray extends Editable {
 				child.editable?.pushValue(
 					value,
 					{ path: `${i}`, editable: child.editable },
-					{ __base_context: this.contextBase ?? {} },
+					{ __base_context },
 				);
 			}
 			return;
 		}
 
-		const key = this.element.dataset.idKey;
 		const componentKey = this.element.dataset.componentKey;
 		const dataKeys: (string | null)[] = [];
 		const componentKeys: (string | null)[] = [];
@@ -273,18 +333,26 @@ export default class EditableArray extends Editable {
 		}
 
 		const childKeys = children.map((element) => {
-			return element.dataset.id;
+			return element.dataset.id ?? element.dataset.component;
 		});
 
 		const equal = dataKeys?.every((key, i) => key === childKeys[i]);
 		if (equal && children.length === dataKeys?.length) {
 			children.forEach((child, index) => {
+				const componentKey =
+					componentKeys[index] || this.element.dataset.component;
+
+				child.dataset.id = String(childKeys[index]);
 				child.dataset.prop = `${index}`;
 				child.dataset.length = `${children.length}`;
+				if (componentKey) {
+					child.dataset.component = componentKey;
+				}
+
 				child.editable?.pushValue(
 					value,
 					{ path: `${index}`, editable: child.editable },
-					{ __base_context: this.contextBase ?? {} },
+					{ __base_context },
 				);
 			});
 
@@ -310,6 +378,7 @@ export default class EditableArray extends Editable {
 			}
 			const placeholder = placeholders[i];
 			const existingElement = children[i];
+			const templateElement = templates.keyed[key] ?? templates.unkeyed;
 			const componentKey = componentKeys[i] || this.element.dataset.component;
 
 			const matchingChildIndex = children.findIndex(
@@ -319,18 +388,19 @@ export default class EditableArray extends Editable {
 			let matchingChild = children[matchingChildIndex];
 			if (!matchingChild) {
 				const clone = children.find((child) => child.dataset.id === key);
-				if (clone) {
-					matchingChild = clone.cloneNode(true) as any;
+				if (templateElement) {
+					matchingChild = templateElement.cloneNode(true) as any;
+					matchingChild.dataset.editable = "array-item";
 				} else if (componentKey) {
 					matchingChild = document.createElement(
 						"editable-array-item",
 					) as EditableArrayItemComponent;
-					matchingChild.dataset.id = key;
-					matchingChild.dataset.component = componentKey;
+				} else if (clone) {
+					matchingChild = clone.cloneNode(true) as any;
 				} else {
 					const error = document.createElement("editable-region-error-card");
 					error.setAttribute("heading", "Failed to render array item");
-					if (typeof this.element.dataset.componentKey === "string") {
+					if (typeof componentKey === "string") {
 						error.setAttribute(
 							"message",
 							"Array editable region has no child with a matching 'data-id' value for this element and the value has no key matching the 'data-component-key' attribute. Please check that the 'data-component-key' attribute for this element is correct and that each element has an entry for that key, or provide a fallback 'data-component' attribute.",
@@ -338,7 +408,7 @@ export default class EditableArray extends Editable {
 						error.setAttribute(
 							"hint",
 							`This may mean that the value for 'data-component-key' is incorrect or that your array data is incorrectly formatted.
-							The current value for 'data-component-key' is '${this.element.dataset.componentKey}' and the current value for 'data-id' is '${key}'.
+							The current value for 'data-component-key' is '${componentKey}' and the current value for 'data-id' is '${key}'.
 							`,
 						);
 					} else {
@@ -360,6 +430,11 @@ export default class EditableArray extends Editable {
 
 			matchingChild.dataset.id = String(key);
 			matchingChild.dataset.prop = `${i}`;
+			matchingChild.dataset.length = `${dataKeys.length}`;
+
+			if (componentKey) {
+				matchingChild.dataset.component = componentKey;
+			}
 
 			if (existingElement === matchingChild) {
 				placeholder.remove();
@@ -374,7 +449,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-component.ts

@@ -12,7 +12,7 @@ import type EditableComponentControls from "../components/ui/editable-component-
 import {
 	getEditableComponentRenderers,
 	realizeAPIValue,
-} from "../helpers/cloudcannon.js";
+} from "../helpers/cloudcannon.mjs";
 
 export default class EditableComponent extends Editable {
 	protected controlsElement?: EditableComponentControls;
@@ -87,7 +87,7 @@ export default class EditableComponent extends Editable {
 
 		let rootEl: HTMLElement;
 		try {
-			rootEl = await component(this.value);
+			rootEl = await component(value);
 		} catch (err: unknown) {
 			this.element.classList.add("errored");
 			const error = document.createElement("editable-region-error-card");
@@ -332,7 +332,7 @@ export default class EditableComponent extends Editable {
 				this.controlsElement = document.createElement(
 					"editable-component-controls",
 				);
-				this.controlsElement.addEventListener("edit", (e: any) => {
+				this.controlsElement.addEventListener("edit", (_e: any) => {
 					this.dispatchEdit(editPath);
 				});
 				this.element.append(this.controlsElement);

package/nodes/editable-image.ts

@@ -1,4 +1,4 @@
-import { CloudCannon } from "../helpers/cloudcannon.js";
+import { CloudCannon } from "../helpers/cloudcannon.mjs";
 import Editable from "./editable.js";
 
 export default class EditableImage extends Editable {
@@ -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-snippet.ts

@@ -1,6 +1,6 @@
-import { getEditableSnippetRenderers } from "../helpers/cloudcannon.js";
-import EditableComponent from "./editable-component.js";
+import { getEditableSnippetRenderers } from "../helpers/cloudcannon.mjs";
 import Editable from "./editable.js";
+import EditableComponent from "./editable-component.js";
 
 export default class EditableSnippet extends EditableComponent {
 	getComponents() {

package/nodes/editable-source.ts

@@ -1,6 +1,6 @@
 import type { CloudCannonJavaScriptV1APIFile } from "@cloudcannon/javascript-api";
 import { html as beautifyHtml } from "js-beautify";
-import { CloudCannon } from "../helpers/cloudcannon.js";
+import { CloudCannon } from "../helpers/cloudcannon.mjs";
 import EditableText from "./editable-text.js";
 
 const INDENTATION_REGEX = /^([ \t]+)[^\s]/gm;

package/nodes/editable-text.ts

@@ -1,4 +1,4 @@
-import { CloudCannon } from "../helpers/cloudcannon.js";
+import { CloudCannon } from "../helpers/cloudcannon.mjs";
 import Editable from "./editable.js";
 
 type EditableFocusEvent = CustomEvent<number>;
@@ -7,7 +7,8 @@ export default class EditableText extends Editable {
 	editor?: any;
 	focused = false;
 	focusIndex = 0;
-	value: string | null | undefined;
+
+	declare value: string | null | undefined;
 
 	validateConfiguration(): boolean {
 		const prop = this.element.dataset.prop;
@@ -80,6 +81,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

@@ -4,7 +4,7 @@ import type {
 	CloudCannonJavaScriptV1APIFile,
 } from "@cloudcannon/javascript-api";
 import { hasEditable } from "../helpers/checks";
-import { CloudCannon } from "../helpers/cloudcannon";
+import { CloudCannon } from "../helpers/cloudcannon.mjs";
 import { loadingPromise } from "../helpers/loading";
 
 export interface EditableListener {
@@ -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;
 			}
 		});
@@ -516,40 +522,58 @@ export default class Editable {
 		});
 	}
 
+	matchSourcePart(type: "collections" | "data" | "file", source?: string) {
+		if (!source) {
+			return;
+		}
+
+		if (!source.startsWith(`@${type}`)) {
+			return;
+		}
+
+		const argsPart = source.slice(type.length + 1);
+		const brackets = argsPart.match(/^\[+/);
+		if (!brackets) {
+			return;
+		}
+		const bracketsLength = brackets[0].length;
+		return argsPart.match(
+			new RegExp(
+				`^\\[{${bracketsLength}}(?<key>.+?)\\]{${bracketsLength}}(\\.(?<rest>.+))?$`,
+			),
+		)?.groups;
+	}
+
 	parseSource(source?: string) {
 		let collection: CloudCannonJavaScriptV1APICollection | undefined;
 		let file: CloudCannonJavaScriptV1APIFile | undefined;
 		let dataset: CloudCannonJavaScriptV1APIDataset | undefined;
 		let absolute = false;
+		let currentFile = false;
 
-		const collectionMatch = source?.match(
-			/^@collections\[(?<key>[^\]]+)\](\.(?<rest>.+))?$/,
-		);
-		if (collectionMatch?.groups) {
-			const { key, rest } = collectionMatch.groups;
+		const collectionMatch = this.matchSourcePart("collections", source);
+		if (collectionMatch) {
+			const { key, rest } = collectionMatch;
 			collection = CloudCannon.collection(key);
 			source = rest;
 			absolute = true;
 		} else {
-			const fileMatch = source?.match(
-				/^@file\[(?<path>[^\]]+)\]\.(?<rest>.+)$/,
-			);
-			if (fileMatch?.groups) {
-				const { path, rest } = fileMatch.groups;
-				file = CloudCannon.file(path);
+			const fileMatch = this.matchSourcePart("file", source);
+			if (fileMatch) {
+				const { key, rest } = fileMatch;
+				file = CloudCannon.file(key);
 				source = rest;
 				absolute = true;
 			} else {
-				const dataMatch = source?.match(
-					/^@data\[(?<key>[^\]]+)\](\.(?<rest>.+))?$/,
-				);
-				if (dataMatch?.groups) {
-					const { key, rest } = dataMatch.groups;
+				const dataMatch = this.matchSourcePart("data", source);
+				if (dataMatch) {
+					const { key, rest } = dataMatch;
 					dataset = CloudCannon.dataset(key);
 					source = rest;
 					absolute = true;
 				} else {
 					file = CloudCannon.currentFile();
+					currentFile = true;
 				}
 			}
 		}
@@ -566,10 +590,11 @@ export default class Editable {
 		return {
 			collection,
 			file,
-			source,
+			source: source ?? "",
 			absolute,
 			snippets,
 			dataset,
+			currentFile,
 		};
 	}
 }

package/nodes/index.ts

@@ -1,8 +1,8 @@
 export { default as Editable } from "./editable.js";
 export { default as EditableArray } from "./editable-array.js";
 export { default as EditableArrayItem } from "./editable-array-item.js";
-export { default as EditableText } from "./editable-text.js";
 export { default as EditableComponent } from "./editable-component.js";
 export { default as EditableImage } from "./editable-image.js";
-export { default as EditableSource } from "./editable-source.js";
 export { default as EditableSnippet } from "./editable-snippet.js";
+export { default as EditableSource } from "./editable-source.js";
+export { default as EditableText } from "./editable-text.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cloudcannon/editable-regions",
-	"version": "0.0.6",
+	"version": "0.0.8",
 	"type": "module",
 	"description": "Visual Editing for the CloudCannon CMS.",
 	"keywords": [
@@ -53,10 +53,10 @@
 		"./internal/styles": "./styles/index.js"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "1.9.4",
+		"@biomejs/biome": "2.3.6",
 		"@cloudcannon/javascript-api": "0.0.10",
 		"@types/js-beautify": "1.14.3",
-		"@types/react": "18.3.12",
+		"@types/react": "19.2.6",
 		"@types/react-dom": "18.3.1",
 		"astro": "^5.14.1",
 		"js-beautify": "^1.15.4",

package/styles/editable-array-item.css

@@ -1,5 +1,12 @@
 editable-array-item {
 	display: block;
+	/*
+    In Chrome 143.0.7499.41 setting display: block sometimes causes text elements to not be rendered.
+    But in Firefox, not setting display: block causes the positioning of the controls element to be wrong.
+    If you want to remove this line (either because Chrome has fixed it or because you're fixing the positioning logic)
+    make sure you test against [this ticket](https://www.notion.so/cloudcannon/Text-elements-in-editable-regions-in-Chrome-sometimes-don-t-render-2beb2cf63b238067bdbdfc5efb2b2ead).
+    */
+	will-change: contents;
 }
 
 editable-array-item,

package/styles/editable-component.css

@@ -1,5 +1,12 @@
 editable-component {
 	display: block;
+	/*
+    In Chrome 143.0.7499.41 setting display: block sometimes causes text elements to not be rendered.
+    But in Firefox, not setting display: block causes the positioning of the controls element to be wrong.
+    If you want to remove this line (either because Chrome has fixed it or because you're fixing the positioning logic)
+    make sure you test against [this ticket](https://www.notion.so/cloudcannon/Text-elements-in-editable-regions-in-Chrome-sometimes-don-t-render-2beb2cf63b238067bdbdfc5efb2b2ead).
+    */
+	will-change: contents;
 }
 
 editable-component,

package/styles/ui/editable-component-controls.css

@@ -10,6 +10,30 @@
 	align-items: end;
 }
 
+button {
+	background-color: transparent;
+	border: 0;
+	padding: 0;
+
+	border-radius: var(--ccve-border-radius);
+	cursor: pointer;
+
+	&[draggable="true"] {
+		cursor: grab;
+	}
+
+	&:disabled {
+		color: #979797;
+		--cc-icon-fill: #979797;
+		cursor: not-allowed;
+
+		&:hover {
+			background-color: transparent;
+			--cc-icon-fill: #979797;
+		}
+	}
+}
+
 .button-row {
 	display: flex;
 	background: #fff;
@@ -40,7 +64,6 @@
 	padding: 10px 6px;
 	margin: 4px;
 	width: 154px;
-	border: 1px solid #eee;
 	box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
 	border: 2px solid #cfcfcf;
 	display: none;
@@ -67,30 +90,6 @@
 	}
 }
 
-button {
-	background-color: transparent;
-	border: 0;
-	padding: 0;
-
-	border-radius: var(--ccve-border-radius);
-	cursor: pointer;
-
-	&[draggable="true"] {
-		cursor: grab;
-	}
-
-	&:disabled {
-		color: #979797;
-		--cc-icon-fill: #979797;
-		cursor: not-allowed;
-
-		&:hover {
-			background-color: transparent;
-			--cc-icon-fill: #979797;
-		}
-	}
-}
-
 @keyframes fade-in-up {
 	from {
 		opacity: 0.5;

package/types/react.d.ts

@@ -1,5 +1,49 @@
 /// <reference path="./cloudcannon.d.ts" />
 
-declare module "@cloudcannon/editable-regions/react" {
-	export function registerReactComponent(key: string, component: unknown): void;
+import type { HTMLAttributes, RefAttributes } from "react";
+
+export function registerReactComponent(key: string, component: unknown): void;
+
+declare global {
+	namespace React.JSX {
+		interface IntrinsicElements {
+			"editable-component": RefAttributes<HTMLElement> &
+				Omit<HTMLAttributes<HTMLElement>, "className"> & {
+					class?: string;
+					"data-prop": string;
+					"data-component": string;
+				};
+			"editable-text": RefAttributes<HTMLElement> &
+				Omit<HTMLAttributes<HTMLElement>, "className"> & {
+					class?: string;
+					"data-prop": string;
+					"data-type"?: "block" | "text" | "span";
+				};
+			"editable-source": RefAttributes<HTMLElement> &
+				Omit<HTMLAttributes<HTMLElement>, "className"> & {
+					class?: string;
+					"data-path": string;
+					"data-key": string;
+				};
+			"editable-array": RefAttributes<HTMLElement> &
+				Omit<HTMLAttributes<HTMLElement>, "className"> & {
+					class?: string;
+					"data-prop": string;
+					"data-id-key"?: string;
+					"data-component-key"?: string;
+					"data-component"?: string;
+					"data-direction"?:
+						| "column"
+						| "row"
+						| "column-reverse"
+						| "row-reverse";
+				};
+			"editable-array-item": RefAttributes<HTMLElement> &
+				Omit<HTMLAttributes<HTMLElement>, "className"> & {
+					class?: string;
+					"data-id"?: string;
+					"data-component"?: string;
+				};
+		}
+	}
 }

package/helpers/cloudcannon.ts

@@ -1,74 +0,0 @@
-import type {
-	CloudCannonEditorWindow,
-	CloudCannonJavaScriptV1API,
-} from "@cloudcannon/javascript-api";
-
-export type ComponentRenderer = (
-	props: any,
-) => HTMLElement | Promise<HTMLElement>;
-
-declare const window: CloudCannonEditorWindow & {
-	cc_components?: Record<string, ComponentRenderer>;
-	cc_snippets?: Record<string, ComponentRenderer>;
-};
-
-let _cloudcannon: CloudCannonJavaScriptV1API;
-
-export const apiLoadedPromise = new Promise<void>((resolve) => {
-	if (window.CloudCannonAPI) {
-		_cloudcannon = window.CloudCannonAPI.useVersion("v1", true) as any;
-		resolve();
-	} else {
-		document.addEventListener(
-			"cloudcannon:load",
-			() => {
-				if (window.CloudCannonAPI) {
-					_cloudcannon = window.CloudCannonAPI.useVersion("v1", true) as any;
-				}
-				return resolve();
-			},
-			{ once: true },
-		);
-	}
-});
-
-export const addEditableComponentRenderer = (
-	key: string,
-	renderer: ComponentRenderer,
-) => {
-	window.cc_components = window.cc_components || {};
-	window.cc_components[key] = renderer;
-	document.dispatchEvent(new CustomEvent(`editable-regions:registered-${key}`));
-};
-
-export const addEditableSnippetRenderer = (
-	key: string,
-	renderer: ComponentRenderer,
-) => {
-	window.cc_snippets = window.cc_snippets || {};
-	window.cc_snippets[key] = renderer;
-	document.dispatchEvent(new CustomEvent(`editable-regions:registered-${key}`));
-};
-
-export const getEditableComponentRenderers = () => window.cc_components ?? {};
-export const getEditableSnippetRenderers = () => window.cc_snippets ?? {};
-
-export 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 { _cloudcannon as CloudCannon };