@cloudcannon/editable-regions 0.0.9 → 0.0.10

package/components/editable-snippet-component.ts

@@ -9,7 +9,7 @@ export default class EditableSnippetComponent extends HTMLElement {
 	}
 
 	set snippetData(value: unknown) {
-		this.editable.pushValue(value);
+		this.editable.pushValue(value, {}, { path: "", editable: this.editable });
 	}
 
 	connectedCallback(): void {

package/components/index.ts

@@ -6,12 +6,10 @@ export { default as EditableSnippetComponent } from "./editable-snippet-componen
 export { default as EditableSourceComponent } from "./editable-source-component.js";
 export { default as EditableTextComponent } from "./editable-text-component.js";
 
-import { apiLoadedPromise } from "../helpers/cloudcannon.mjs";
 import {
 	dehydrateDataEditableRegions,
 	hydrateDataEditableRegions,
 } from "../helpers/hydrate-editable-regions";
-import { completeLoading } from "../helpers/loading.js";
 
 const observer = new MutationObserver((mutations) => {
 	mutations.forEach((mutation) => {
@@ -32,14 +30,3 @@ const observer = new MutationObserver((mutations) => {
 hydrateDataEditableRegions(document.body);
 
 observer.observe(document, { childList: true, subtree: true });
-
-Promise.all([
-	apiLoadedPromise,
-	customElements.whenDefined("editable-array-item"),
-	customElements.whenDefined("editable-array"),
-	customElements.whenDefined("editable-text"),
-	customElements.whenDefined("editable-component"),
-	customElements.whenDefined("editable-image"),
-	customElements.whenDefined("editable-source"),
-	customElements.whenDefined("editable-snippet"),
-]).then(() => completeLoading());

package/helpers/checks.ts

@@ -2,32 +2,11 @@ import Editable from "../nodes/editable.js";
 import EditableArrayItem from "../nodes/editable-array-item.js";
 import EditableText from "../nodes/editable-text.js";
 
-const TAG_NAMES = [
-	"EDITABLE-TEXT",
-	"EDITABLE-COMPONENT",
-	"EDITABLE-ARRAY-ITEM",
-	"EDITABLE-ARRAY",
-	"EDITABLE-IMAGE",
-	"EDITABLE-SOURCE",
-	"EDITABLE-SNIPPET",
-];
-
-const EDITABLE_REGION_TYPES = [
-	"text",
-	"component",
-	"array",
-	"array-item",
-	"image",
-	"source",
-];
-
-const CORRESPONDING_NAME: Record<string, string> = {
-	"EDITABLE-TEXT": "text",
-	"EDITABLE-COMPONENT": "component",
-	"EDITABLE-ARRAY-ITEM": "array-item",
-	"EDITABLE-ARRAY": "array",
-	"EDITABLE-IMAGE": "image",
-	"EDITABLE-SOURCE": "source",
+const getEditableType = (el: HTMLElement): string | undefined => {
+	if (el.tagName.startsWith("EDITABLE-")) {
+		return el.tagName.slice(9).toLowerCase();
+	}
+	return el.dataset.editable;
 };
 
 export const hasEditable = <T extends object>(
@@ -53,7 +32,7 @@ export const isEditableWebcomponent = (el: unknown): boolean => {
 		return false;
 	}
 
-	return TAG_NAMES.includes(el.tagName);
+	return el.tagName.startsWith("EDITABLE-");
 };
 
 export const isEditableElement = (el: unknown): boolean => {
@@ -62,19 +41,13 @@ export const isEditableElement = (el: unknown): boolean => {
 	}
 
 	return (
-		TAG_NAMES.includes(el.tagName) ||
-		(!!el.dataset.editable &&
-			EDITABLE_REGION_TYPES.includes(el.dataset.editable))
+		el.tagName.startsWith("EDITABLE-") ||
+		typeof el.dataset.editable === "string"
 	);
 };
 
 export const areEqualEditables = (a: HTMLElement, b: HTMLElement) => {
-	if (
-		a.tagName !== b.tagName &&
-		a.dataset.editable !== b.dataset.editable &&
-		CORRESPONDING_NAME[a.tagName] !== b.dataset.editable &&
-		CORRESPONDING_NAME[b.tagName] !== a.dataset.editable
-	) {
+	if (getEditableType(a) !== getEditableType(b)) {
 		return false;
 	}
 

package/helpers/cloudcannon.mjs

@@ -107,4 +107,14 @@ export const realizeAPIValue = async (value) => {
 	return value;
 };
 
+export const addCustomEditableRegion = (key, region) => {
+	extendedWindow.editableRegionMap ??= {};
+	extendedWindow.editableRegionMap[key] = region;
+	extendedWindow.hydrateDataEditableRegions(document.body);
+};
+
+export const getCustomEditableRegions = () => {
+	return extendedWindow.editableRegionMap ?? {};
+};
+
 export { _cloudcannon as CloudCannon };

package/helpers/hydrate-editable-regions.ts

@@ -9,7 +9,7 @@ import {
 } from "../nodes";
 import { hasEditable, isEditableWebcomponent } from "./checks";
 
-const editableMap: Record<string, typeof Editable | undefined> = {
+const baseEditableMap: Record<string, typeof Editable | undefined> = {
 	array: EditableArray,
 	"array-item": EditableArrayItem,
 	component: EditableComponent,
@@ -31,6 +31,10 @@ export const dehydrateDataEditableRegions = (root: Element) => {
 };
 
 export const hydrateDataEditableRegions = (root: Element) => {
+	const editableMap: Record<string, typeof Editable | undefined> = {
+		...baseEditableMap,
+		...((window as any).editableRegionMap ?? {}),
+	};
 	if (
 		root instanceof HTMLElement &&
 		root.dataset.editable &&
@@ -89,3 +93,5 @@ export const hydrateDataEditableRegions = (root: Element) => {
 		}
 	});
 };
+
+(window as any).hydrateDataEditableRegions = hydrateDataEditableRegions;

package/integrations/astro/astro-integration.mjs

@@ -1,26 +1,17 @@
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 
-const SUPPORTED_VIRTUAL_MODULES = [
-	"actions",
-	"assets",
-	"content",
-	"i18n",
-	"middleware",
-	"transitions",
-];
+/** @type{string[]} */
+const SUPPORTED_VIRTUAL_MODULES = ["assets", "content"];
 
 /**
  * @return {import("astro").AstroIntegration}
  */
 export default () => {
-	/** @type {import("astro").AstroConfig} */
-	let astroConfig;
-
 	return {
 		name: "editable-regions",
 		hooks: {
-			"astro:config:setup": ({ config, updateConfig }) => {
+			"astro:config:setup": ({ updateConfig }) => {
 				updateConfig({
 					vite: {
 						define: {
@@ -28,7 +19,6 @@ export default () => {
 						},
 					},
 				});
-				astroConfig = config;
 			},
 			"astro:build:setup": async ({ target, vite }) => {
 				if (target === "client") {
@@ -68,14 +58,6 @@ export default () => {
 									.replace("/client", "")
 									.replace("/server", "");
 
-								if (type === "env") {
-									return "\0editable-region:env";
-								}
-
-								if (!SUPPORTED_VIRTUAL_MODULES.includes(type)) {
-									return;
-								}
-
 								let dir = "";
 								if (typeof __dirname !== "undefined") {
 									dir = __dirname;
@@ -83,41 +65,15 @@ export default () => {
 									dir = dirname(fileURLToPath(import.meta.url));
 								}
 
-								return join(dir, "modules", `${type}.js`);
-							}
-						},
+								if (type === "env" && id.endsWith("/server")) {
+									return join(dir, "modules", "secrets.js");
+								}
 
-						load(id) {
-							if (id === "\0editable-region:env") {
-								let contents = "";
-								Object.entries(astroConfig?.env?.schema ?? {}).forEach(
-									([key, schema]) => {
-										if (
-											schema.context !== "client" ||
-											schema.access !== "public"
-										) {
-											return;
-										}
+								if (!SUPPORTED_VIRTUAL_MODULES.includes(type)) {
+									return;
+								}
 
-										try {
-											switch (schema.type) {
-												case "boolean":
-													contents += `export const ${key} = ${!!process.env[key]};\n`;
-													break;
-												case "number":
-													contents += `export const ${key} = ${Number(process.env[key])};\n`;
-													break;
-												default:
-													contents += `export const ${key} = ${JSON.stringify(process.env[key] ?? "")};\n`;
-											}
-										} catch (_e) {
-											//Error intentionally ignored
-										}
-									},
-								);
-								contents +=
-									'export const getSecret = () => console.log("[CloudCannon] getSecret is not supported in an editable component. Please use an editing fallback instead.");';
-								return contents;
+								return join(dir, "modules", `${type}.js`);
 							}
 						},
 					});

package/integrations/astro/modules/content.js

@@ -26,12 +26,18 @@ export const getCollection = async (collectionKey, filter) => {
 			slug = data.slug;
 		}
 
+		const body = await file.get();
 		return {
 			collection: collectionKey,
 			id: id,
 			data: data,
 			slug: slug,
-			body: await file.get(),
+			body: body,
+			render: () => ({
+				Content: () => body ?? "Content is not available when live editing",
+				headings: [],
+				remarkPluginFrontmatter: {},
+			}),
 		};
 	});
 

package/integrations/astro/modules/secrets.js

@@ -0,0 +1,4 @@
+export const getSecret = () =>
+	console.log(
+		"[CloudCannon] getSecret is not supported in an editable component. Please use an editing fallback instead.",
+	);

package/nodes/editable-array-item.ts

@@ -249,8 +249,8 @@ export default class EditableArrayItem extends EditableComponent {
 		);
 	}
 
-	async update(): Promise<void> {
-		await super.update();
+	async update(partialSubtree?: ChildNode | null): Promise<void> {
+		await super.update(partialSubtree);
 		this.updateControls();
 	}
 
@@ -485,12 +485,12 @@ export default class EditableArrayItem extends EditableComponent {
 		}
 	}
 
-	setupListeners(): void {
-		super.setupListeners();
-		if (!this.element.dataset.prop) {
-			this.parent?.registerListener({
-				editable: this,
-			});
-		}
+	getSpecialProps(
+		incomingSpecialProps: Record<string, unknown> = {},
+	): Record<string, unknown> {
+		return {
+			...super.getSpecialProps(incomingSpecialProps),
+			"@index": Number(this.element.dataset.prop),
+		};
 	}
 }

package/nodes/editable-array.ts

@@ -37,13 +37,16 @@ export default class EditableArray extends Editable {
 	private updatePromise: Promise<void> | undefined;
 	private needsReupdate = false;
 	private addButton?: EditableRegionButton;
+	private pendingPartialSubtree?: ChildNode | null;
 
 	async registerListener(listener: EditableListener): Promise<void> {
 		if (!this.value) {
 			return;
 		}
 
-		const __base_context = { ...this.contextBase };
+		const __base_context = {
+			...this.contextBase,
+		};
 		let value: unknown[] | CloudCannonJavaScriptV1APIFile[];
 		if (CloudCannon.isAPICollection(this.value)) {
 			value = await this.value.items();
@@ -90,7 +93,7 @@ export default class EditableArray extends Editable {
 		}
 
 		if (listener.path) {
-			listener.editable.pushValue(value, listener, {
+			listener.editable.pushValue(value, this.specialProps, listener, {
 				__base_context,
 			});
 		}
@@ -147,24 +150,29 @@ export default class EditableArray extends Editable {
 		return value;
 	}
 
-	update(): Promise<void> {
+	update(partialSubtree?: ChildNode | null): Promise<void> {
 		if (this.updatePromise) {
 			this.needsReupdate = true;
+			this.pendingPartialSubtree = partialSubtree;
 			return this.updatePromise;
 		}
-		this.updatePromise = this._update().then(() => {
+		this.updatePromise = this._update(partialSubtree).then(() => {
 			this.updatePromise = undefined;
 			if (this.needsReupdate) {
 				this.needsReupdate = false;
-				return this.update();
+				const savedPartialSubtree = this.pendingPartialSubtree;
+				this.pendingPartialSubtree = undefined;
+				return this.update(savedPartialSubtree);
 			}
 		});
 		return this.updatePromise;
 	}
 
-	private async _update(): Promise<void> {
+	private async _update(partialSubtree?: ChildNode | null): Promise<void> {
 		let value: unknown[] | CloudCannonJavaScriptV1APIFile[];
-		const __base_context = { ...this.contextBase };
+		const __base_context = {
+			...this.contextBase,
+		};
 		if (CloudCannon.isAPICollection(this.value)) {
 			value = await this.value.items();
 		} else if (CloudCannon.isAPIDataset(this.value)) {
@@ -186,6 +194,24 @@ export default class EditableArray extends Editable {
 			value = [];
 		}
 
+		const partialChildren: (HTMLElement & { editable?: EditableArrayItem })[] =
+			[];
+		if (partialSubtree instanceof HTMLElement) {
+			for (const child of partialSubtree.querySelectorAll(
+				"editable-array-item,[data-editable='array-item']",
+			)) {
+				let parent = child.parentElement;
+				while (parent instanceof HTMLElement && !isEditableElement(parent)) {
+					parent = parent.parentElement;
+				}
+				if (parent !== partialSubtree) {
+					continue;
+				}
+
+				partialChildren.push(child as any);
+			}
+		}
+
 		const templates: {
 			keyed: Record<
 				string,
@@ -241,23 +267,6 @@ export default class EditableArray extends Editable {
 			children.push(child as any);
 		}
 
-		if (
-			children.length === 0 &&
-			!this.element.dataset.component &&
-			!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");
-			error.setAttribute(
-				"message",
-				"Array editable regions with no child array items must have either a 'data-component' attribute or a 'data-component-key' attribute. Please add an item to this array then save and rebuild to see your changes or add a 'data-component' or 'data-component-key' attribute to this element.",
-			);
-			this.element.replaceChildren(error);
-			return;
-		}
-
 		const key = this.element.dataset.idKey ?? this.element.dataset.componentKey;
 
 		if (!key) {
@@ -274,8 +283,14 @@ export default class EditableArray extends Editable {
 
 			for (let i = 0; i < value.length; i++) {
 				let child = children[i];
+				const partialChild = partialChildren[i];
+
 				if (!child) {
-					if (templates.unkeyed) {
+					if (partialChild) {
+						child = partialChild.cloneNode(true) as HTMLElement & {
+							editable?: EditableArrayItem;
+						};
+					} else if (templates.unkeyed) {
 						child = templates.unkeyed.cloneNode(true) as HTMLElement & {
 							editable?: EditableArrayItem;
 						};
@@ -284,11 +299,22 @@ export default class EditableArray extends Editable {
 						child = document.createElement(
 							"editable-array-item",
 						) as EditableArrayItemComponent;
-					} else {
-						// Empty arrays should be caught by the error case above so children[0] should always exist
+					} else if (children[0]) {
 						child = children[0].cloneNode(true) as HTMLElement & {
 							editable?: EditableArrayItem;
 						};
+					} else {
+						const error = document.createElement("editable-region-error-card");
+						error.setAttribute(
+							"heading",
+							"Failed to render array editable region",
+						);
+						error.setAttribute(
+							"message",
+							"Array editable region contains an array item that cannot be rendered. Either a 'data-component' attribute or a 'data-component-key' attribute is required to render array items that weren't previously on the page. Please save and rebuild to see your changes or add a 'data-component' or 'data-component-key' attribute to this element.",
+						);
+						this.element.replaceChildren(error);
+						return;
 					}
 					this.element.appendChild(child);
 				}
@@ -300,8 +326,10 @@ export default class EditableArray extends Editable {
 				child.dataset.length = `${children.length}`;
 				child.editable?.pushValue(
 					value,
+					this.specialProps,
 					{ path: `${i}`, editable: child.editable },
 					{ __base_context },
+					partialChild,
 				);
 			}
 			return;
@@ -351,8 +379,10 @@ export default class EditableArray extends Editable {
 
 				child.editable?.pushValue(
 					value,
+					this.specialProps,
 					{ path: `${index}`, editable: child.editable },
 					{ __base_context },
+					partialChildren[index],
 				);
 			});
 
@@ -380,6 +410,7 @@ export default class EditableArray extends Editable {
 			const existingElement = children[i];
 			const templateElement = templates.keyed[key] ?? templates.unkeyed;
 			const componentKey = componentKeys[i] || this.element.dataset.component;
+			const partialChild = partialChildren[i];
 
 			const matchingChildIndex = children.findIndex(
 				(child, i) => child.dataset.id === key && !moved[i],
@@ -388,7 +419,9 @@ export default class EditableArray extends Editable {
 			let matchingChild = children[matchingChildIndex];
 			if (!matchingChild) {
 				const clone = children.find((child) => child.dataset.id === key);
-				if (templateElement) {
+				if (partialChild) {
+					matchingChild = partialChild.cloneNode(true) as any;
+				} else if (templateElement) {
 					matchingChild = templateElement.cloneNode(true) as any;
 					matchingChild.dataset.editable = "array-item";
 				} else if (componentKey) {
@@ -448,8 +481,10 @@ export default class EditableArray extends Editable {
 				matchingChild.editable.parent = this;
 				matchingChild.editable.pushValue(
 					value,
+					this.specialProps,
 					{ path: `${i}`, editable: matchingChild.editable },
 					{ __base_context },
+					partialChild,
 				);
 			}
 		});
@@ -502,4 +537,15 @@ export default class EditableArray extends Editable {
 			);
 		});
 	}
+
+	getSpecialProps(
+		incomingSpecialProps: Record<string, unknown> = {},
+	): Record<string, unknown> {
+		return {
+			...super.getSpecialProps(incomingSpecialProps),
+			"@length": Array.isArray(this.propsBase)
+				? this.propsBase.length
+				: undefined,
+		};
+	}
 }

package/nodes/editable-component.ts

@@ -19,6 +19,7 @@ export default class EditableComponent extends Editable {
 
 	private updatePromise: Promise<void> | undefined;
 	private needsReupdate = false;
+	private pendingPartialSubtree?: ChildNode | null;
 
 	getComponents() {
 		return getEditableComponentRenderers();
@@ -51,31 +52,81 @@ export default class EditableComponent extends Editable {
 		return true;
 	}
 
-	update(): Promise<void> {
+	update(partialSubtree?: ChildNode | null): Promise<void> {
 		if (this.updatePromise) {
 			this.needsReupdate = true;
+			this.pendingPartialSubtree = partialSubtree;
 			return this.updatePromise;
 		}
-		this.updatePromise = this._update().then(() => {
+		this.updatePromise = this._update(partialSubtree).then(() => {
 			this.updatePromise = undefined;
 			if (this.needsReupdate) {
 				this.needsReupdate = false;
-				return this.update();
+				const savedPartialSubtree = this.pendingPartialSubtree;
+				this.pendingPartialSubtree = undefined;
+				return this.update(savedPartialSubtree);
 			}
 		});
 		return this.updatePromise;
 	}
 
-	async _update(): Promise<void> {
+	santiseComponentOutput(el: HTMLElement): HTMLElement {
+		el.querySelectorAll("noscript").forEach((el) => el.remove());
+		return el;
+	}
+
+	async _update(partialSubtree?: ChildNode | null): Promise<void> {
+		if (partialSubtree) {
+			if (this.controlsElement) {
+				this.controlsElement.remove();
+			}
+			this.updateTree(this.element, partialSubtree);
+			if (this.controlsElement) {
+				this.element.appendChild(this.controlsElement);
+			}
+			return;
+		}
+
 		this.element.classList.remove("errored");
 
 		const key = this.element.dataset.component;
 		if (!key) {
 			return super.update();
 		}
-		const component = this.getComponents()?.[key];
+
+		let component = this.getComponents()?.[key];
+		for (let i = 0; !component && i < 20; i++) {
+			await new Promise((resolve) => setTimeout(resolve, 200));
+			component = this.getComponents()?.[key];
+		}
+
 		if (!component) {
-			return super.update();
+			this.element.classList.add("errored");
+			const error = document.createElement("editable-region-error-card");
+			error.setAttribute("heading", "Failed to render component");
+			error.setAttribute(
+				"message",
+				`Failed to find a registered component with the key "${key}". This may mean that the provided "data-component" attribute is incorrect or that the component hasn't been registered.`,
+			);
+
+			const caseMatch = Object.keys(this.getComponents()).find(
+				(k) => k.toLowerCase() === key.toLowerCase(),
+			);
+
+			if (Object.keys(this.getComponents()).length === 0) {
+				error.setAttribute(
+					"hint",
+					"There are no registered components currently available. Please check that you've included your registration script and that it's running correctly.",
+				);
+			} else if (caseMatch) {
+				error.setAttribute(
+					"hint",
+					`The component key "${key}" is not case-sensitive. Did you mean "${caseMatch}"?`,
+				);
+			}
+
+			this.element.replaceChildren(error);
+			return;
 		}
 
 		const value = await realizeAPIValue(this.value);
@@ -87,7 +138,7 @@ export default class EditableComponent extends Editable {
 
 		let rootEl: HTMLElement;
 		try {
-			rootEl = await component(value);
+			rootEl = this.santiseComponentOutput(await component(value));
 		} catch (err: unknown) {
 			this.element.classList.add("errored");
 			const error = document.createElement("editable-region-error-card");
@@ -177,10 +228,16 @@ 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, {
-									...this.contexts,
-									__base_context: this.contextBase ?? {},
-								});
+								renderChild.editable.pushValue(
+									this.value,
+									this.specialProps,
+									listener,
+									{
+										...this.contexts,
+										__base_context: this.contextBase ?? {},
+									},
+									renderChild,
+								);
 							}
 						}
 					} else if (hasEditable(targetChild)) {
@@ -259,10 +316,16 @@ export default class EditableComponent extends Editable {
 		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 ?? {},
-				});
+				targetChild.editable.pushValue(
+					this.value,
+					this.specialProps,
+					listener,
+					{
+						...this.contexts,
+						__base_context: this.contextBase ?? {},
+					},
+					renderChild,
+				);
 			}
 		}
 	}

package/nodes/editable-source.ts

@@ -45,9 +45,15 @@ export default class EditableSource extends EditableText {
 
 		this.file = CloudCannon.file(this.element.dataset.path);
 		this.file.addEventListener("change", () => {
-			this.file?.get().then(this.pushValue.bind(this));
+			this.file
+				?.get()
+				.then((source) =>
+					this.pushValue(source, {}, { path: "", editable: this }),
+				);
+		});
+		this.file.get().then((source) => {
+			this.pushValue(source, {}, { path: "", editable: this });
 		});
-		this.file.get().then(this.pushValue.bind(this));
 	}
 
 	validateConfiguration(): boolean {

package/nodes/editable.ts

@@ -4,8 +4,13 @@ import type {
 	CloudCannonJavaScriptV1APIFile,
 } from "@cloudcannon/javascript-api";
 import { hasEditable } from "../helpers/checks";
-import { CloudCannon } from "../helpers/cloudcannon.mjs";
-import { loadingPromise } from "../helpers/loading";
+import { apiLoadedPromise, CloudCannon } from "../helpers/cloudcannon.mjs";
+
+declare global {
+	interface HTMLElement {
+		__pendingEditableListeners?: EditableListener[];
+	}
+}
 
 export interface EditableListener {
 	editable: Editable;
@@ -41,12 +46,15 @@ export default class Editable {
 	domListeners: DOMListener[] = [];
 	value: unknown = undefined;
 	parent: Editable | null = null;
+	pendingParentElement: HTMLElement | null = null;
 	element: HTMLElement;
 	mounted = false;
 	connected = false;
 	disconnecting = false;
 	needsReconnect = false;
 
+	specialPropListeners: EditableListener[] = [];
+	specialProps: Record<string, unknown> = {};
 	propsBase: unknown;
 	contextBase?: EditableContext;
 	props: Record<string, unknown> = {};
@@ -150,7 +158,10 @@ export default class Editable {
 					: key;
 			}
 		}
-		return { value, context: context ?? {} };
+		return {
+			value,
+			context: context ?? {},
+		};
 	}
 
 	shouldUpdate(_value: unknown) {
@@ -161,45 +172,126 @@ export default class Editable {
 		return this.value !== undefined;
 	}
 
+	getLiteralProps() {
+		let literalPropsBase: unknown;
+		const literalProps: Record<string, unknown> = {};
+		Object.entries(this.element.dataset).forEach(([propName, propPath]) => {
+			if (!propName.startsWith("literal") || typeof propPath !== "string") {
+				return;
+			}
+
+			const key =
+				propName === "prop" ? undefined : propName.substring(7).toLowerCase();
+			let value = propPath;
+			try {
+				value = JSON.parse(value);
+			} catch (_error) {
+				// Error intentionally ignored
+			}
+
+			if (key) {
+				literalProps[key] = value;
+			} else {
+				literalPropsBase = value;
+			}
+		});
+		return { literalPropsBase, literalProps };
+	}
+
 	async getNewValue(
 		value: unknown,
+		specialProps: Record<string, unknown>,
 		listener?: EditableListener,
 		contexts?: { [key: string]: EditableContext },
 	): Promise<unknown> {
 		const { key, path } = listener ?? {};
 
-		const { value: resolvedValue, context: newContext } =
-			await this.lookupPathAndContext(path, value, contexts);
+		if (typeof path === "string") {
+			const { value: resolvedValue, context: newContext } =
+				await this.lookupPathAndContext(path, value, contexts);
 
-		if (!key) {
-			this.propsBase = resolvedValue;
-			this.contextBase = newContext;
-		} else {
-			this.props[key] = resolvedValue;
-			this.contexts[key] = newContext;
+			if (!key) {
+				this.propsBase = resolvedValue;
+				this.contextBase = newContext;
+			} else {
+				this.props[key] = resolvedValue;
+				this.contexts[key] = newContext;
+			}
 		}
 
-		if (Object.entries(this.props).length === 0) {
-			return this.validateValue(this.propsBase);
+		this.specialProps = this.getSpecialProps(specialProps);
+		const { literalPropsBase, literalProps } = this.getLiteralProps();
+
+		let newValue: unknown;
+		const specialPropsBase = this.specialPropListeners.find(({ key }) => !key);
+
+		if (this.propsBase !== undefined) {
+			newValue = this.propsBase;
+		} else if (specialPropsBase?.path) {
+			newValue = structuredClone(this.specialProps[specialPropsBase.path]);
+		} else if (literalPropsBase !== undefined) {
+			newValue = literalPropsBase;
 		}
 
-		const newValue = Object.entries(this.props).reduce(
-			(acc, [key, val]) => {
-				(acc as any)[key] = structuredClone(val);
-				return acc;
-			},
-			structuredClone(this.propsBase ?? {}),
+		if (Object.entries(this.props).length > 0) {
+			newValue = Object.entries(this.props).reduce(
+				(acc, [key, val]) => {
+					(acc as any)[key] = structuredClone(val);
+					return acc;
+				},
+				newValue && typeof newValue === "object"
+					? structuredClone(newValue)
+					: {},
+			);
+		}
+
+		const filteredSpecialPropsListener = this.specialPropListeners.filter(
+			({ key }) => !!key,
 		);
+		if (filteredSpecialPropsListener.length > 0) {
+			newValue = filteredSpecialPropsListener.reduce(
+				(acc, { key, path }) => {
+					if (key && path) {
+						(acc as any)[key] = structuredClone(this.specialProps[path]);
+					}
+					return acc;
+				},
+				structuredClone(
+					newValue && typeof newValue === "object"
+						? structuredClone(newValue)
+						: {},
+				),
+			);
+		}
+
+		if (Object.entries(literalProps).length > 0) {
+			newValue = Object.entries(literalProps).reduce(
+				(acc, [key, val]) => {
+					(acc as any)[key] = structuredClone(val);
+					return acc;
+				},
+				newValue && typeof newValue === "object"
+					? structuredClone(newValue)
+					: {},
+			);
+		}
 
 		return this.validateValue(newValue);
 	}
 
 	async pushValue(
 		value: unknown,
+		specialProps: Record<string, unknown>,
 		listener?: EditableListener,
 		contexts?: { [key: string]: EditableContext },
+		partialSubtree?: ChildNode | null,
 	): Promise<void> {
-		const newValue = await this.getNewValue(value, listener, contexts);
+		const newValue = await this.getNewValue(
+			value,
+			specialProps,
+			listener,
+			contexts,
+		);
 
 		if (typeof newValue === "undefined" || !this.shouldUpdate(newValue)) {
 			return;
@@ -209,17 +301,17 @@ export default class Editable {
 		if (this.connected && !this.mounted) {
 			this.mounted = true;
 			this.mount();
-			return this.update();
+			return this.update(partialSubtree);
 		}
 
 		if (this.mounted) {
-			return this.update();
+			return this.update(partialSubtree);
 		}
 	}
 
-	update(): void {
+	update(_partialSubtree?: ChildNode | null): void {
 		this.listeners.forEach((listener) =>
-			listener.editable.pushValue(this.value, listener, {
+			listener.editable.pushValue(this.value, this.specialProps, listener, {
 				...this.contexts,
 				__base_context: this.contextBase ?? {},
 			}),
@@ -232,7 +324,7 @@ export default class Editable {
 
 	registerListener(listener: EditableListener): void {
 		if (this.value !== undefined) {
-			listener.editable.pushValue(this.value, listener, {
+			listener.editable.pushValue(this.value, this.specialProps, listener, {
 				...this.contexts,
 				__base_context: this.contextBase ?? {},
 			});
@@ -256,6 +348,29 @@ export default class Editable {
 		);
 	}
 
+	private queueListenerOnParent(
+		parentElement: HTMLElement,
+		listener: EditableListener,
+	): void {
+		if (!parentElement.__pendingEditableListeners) {
+			parentElement.__pendingEditableListeners = [];
+		}
+		parentElement.__pendingEditableListeners.push(listener);
+	}
+
+	private replayPendingListeners(): void {
+		const pending = this.element.__pendingEditableListeners;
+		if (!pending || pending.length === 0) {
+			return;
+		}
+		this.element.__pendingEditableListeners = [];
+		for (const listener of pending) {
+			listener.editable.parent = this;
+			listener.editable.pendingParentElement = null;
+			this.registerListener(listener);
+		}
+	}
+
 	async disconnect(): Promise<void> {
 		if (this.disconnecting) {
 			return;
@@ -268,6 +383,15 @@ export default class Editable {
 
 		this.parent?.deregisterListener(this);
 		this.parent = null;
+		if (this.pendingParentElement) {
+			const pending = this.pendingParentElement.__pendingEditableListeners;
+			if (pending) {
+				this.pendingParentElement.__pendingEditableListeners = pending.filter(
+					(listener) => listener.editable !== this,
+				);
+			}
+			this.pendingParentElement = null;
+		}
 		this.APIListeners.forEach(({ obj, fn }) => {
 			obj.removeEventListener("change", fn);
 			obj.removeEventListener("delete", fn);
@@ -277,6 +401,7 @@ export default class Editable {
 			this.element.removeEventListener(event, fn);
 		});
 		this.domListeners = [];
+		this.specialPropListeners = [];
 		this.connected = false;
 		this.connectPromise = undefined;
 		this.disconnecting = false;
@@ -299,7 +424,7 @@ export default class Editable {
 		if (this.connectPromise) {
 			return;
 		}
-		this.connectPromise = loadingPromise.then(() => {
+		this.connectPromise = apiLoadedPromise.then(() => {
 			this.setupListeners();
 			this.connected = true;
 			if (!this.mounted && this.shouldMount()) {
@@ -316,11 +441,14 @@ export default class Editable {
 	}
 
 	setupListeners(): void {
-		let parentEditable: Editable | undefined;
+		let parentElement: HTMLElement | null = null;
 		let parent = this.element.parentElement;
 		while (parent) {
-			if (hasEditable(parent) && !parentEditable) {
-				parentEditable = parent.editable;
+			if (
+				parent.tagName.startsWith("EDITABLE-") ||
+				"editable" in parent.dataset
+			) {
+				parentElement ??= parent;
 			}
 
 			if (parent.tagName === "A") {
@@ -329,7 +457,13 @@ export default class Editable {
 			parent = parent.parentElement;
 		}
 
-		this.parent = parentEditable || null;
+		let hasParentListener = false;
+
+		if (parentElement && hasEditable(parentElement)) {
+			this.parent = parentElement.editable;
+		} else if (parentElement) {
+			this.pendingParentElement = parentElement;
+		}
 
 		Object.entries(this.element.dataset).forEach(([propName, propPath]) => {
 			if (!propName.startsWith("prop") || typeof propPath !== "string") {
@@ -346,8 +480,20 @@ export default class Editable {
 				path: source,
 			};
 
-			if (!absolute && parentEditable) {
-				parentEditable.registerListener(listener);
+			if (!absolute && source.startsWith("@") && source !== "@content") {
+				this.specialPropListeners.push(listener);
+				return;
+			}
+
+			if (!absolute && this.parent) {
+				hasParentListener = true;
+				this.parent.registerListener(listener);
+				return;
+			}
+
+			if (!absolute && this.pendingParentElement) {
+				hasParentListener = true;
+				this.queueListenerOnParent(this.pendingParentElement, listener);
 				return;
 			}
 
@@ -362,7 +508,9 @@ export default class Editable {
 							? undefined
 							: `@file[${file?.path}]`;
 				const handleAPIChange = () => {
-					this.pushValue(obj, listener, { __base_context: { fullPath } });
+					this.pushValue(obj, {}, listener, {
+						__base_context: { fullPath },
+					});
 				};
 				this.APIListeners.push({
 					obj,
@@ -374,7 +522,14 @@ export default class Editable {
 			}
 		});
 
+		if (this.parent && !hasParentListener) {
+			this.parent.registerListener({ editable: this });
+		} else if (this.pendingParentElement && !hasParentListener) {
+			this.queueListenerOnParent(this.pendingParentElement, { editable: this });
+		}
+
 		this.addEventListener("cloudcannon-api", this.handleApiEvent.bind(this));
+		this.replayPendingListeners();
 	}
 
 	handleApiEvent(e: any): void {
@@ -597,4 +752,13 @@ export default class Editable {
 			currentFile,
 		};
 	}
+
+	getSpecialProps(
+		incomingSpecialProps: Record<string, unknown> = {},
+	): Record<string, unknown> {
+		return {
+			...this.specialProps,
+			...incomingSpecialProps,
+		};
+	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cloudcannon/editable-regions",
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"type": "module",
 	"description": "Visual Editing for the CloudCannon CMS.",
 	"keywords": [
@@ -56,7 +56,7 @@
 		"@biomejs/biome": "2.3.6",
 		"@cloudcannon/javascript-api": "0.0.10",
 		"@types/js-beautify": "1.14.3",
-		"@types/react": "19.2.6",
+		"@types/react": "19.2.8",
 		"@types/react-dom": "18.3.1",
 		"astro": "^5.14.1",
 		"js-beautify": "^1.15.4",

package/helpers/loading.ts

@@ -1,7 +0,0 @@
-let completeLoading: () => void;
-
-export const loadingPromise = new Promise<void>((resolve) => {
-	completeLoading = resolve;
-});
-
-export { completeLoading };

package/integrations/astro/modules/actions.js

@@ -1,74 +0,0 @@
-export const actions = new Proxy(
-	{},
-	{
-		get() {
-			console.warn(
-				"[CloudCannon] actions is not supported in an editable component. Please use an editing fallback instead.",
-			);
-			return () => {};
-		},
-	},
-);
-
-export const defineAction = () => {
-	console.warn(
-		"[CloudCannon] defineAction is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return {
-		handler: () => {},
-		input: null,
-	};
-};
-
-export const isInputError = () => {
-	console.warn(
-		"[CloudCannon] isInputError is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return false;
-};
-
-export const isActionError = () => {
-	console.warn(
-		"[CloudCannon] isActionError is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return false;
-};
-
-export class ActionError extends Error {
-	/**
-	 * @param {any} code
-	 * @param {any} message
-	 */
-	constructor(code, message) {
-		super(message);
-		console.warn(
-			"[CloudCannon] ActionError is not supported in an editable component. Please use an editing fallback instead.",
-		);
-		this.code = code;
-	}
-}
-
-export const getActionContext = () => {
-	console.warn(
-		"[CloudCannon] getActionContext is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return {
-		action: undefined,
-		setActionResult: () => {},
-		serializeActionResult: () => ({}),
-	};
-};
-
-export const deserializeActionResult = () => {
-	console.warn(
-		"[CloudCannon] deserializeActionResult is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return {};
-};
-
-export const getActionPath = () => {
-	console.warn(
-		"[CloudCannon] getActionPath is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return "";
-};

package/integrations/astro/modules/client-router.astro

@@ -1,5 +0,0 @@
----
-console.warn(
-	"[CloudCannon] view transitions are not supported in an editable component. Please use an editing fallback instead.",
-);
----

package/integrations/astro/modules/i18n.js

@@ -1,76 +0,0 @@
-export const getRelativeLocaleUrl = () => {
-	console.warn(
-		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return "";
-};
-
-export const getAbsoluteLocaleUrl = () => {
-	console.warn(
-		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return "";
-};
-
-export const getRelativeLocaleUrlList = () => {
-	console.warn(
-		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return [];
-};
-
-export const getAbsoluteLocaleUrlList = () => {
-	console.warn(
-		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return [];
-};
-
-export const getPathByLocale = () => {
-	console.warn(
-		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return "";
-};
-
-export const getLocaleByPath = () => {
-	console.warn(
-		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return "";
-};
-
-export const redirectToDefaultLocale = () => {
-	console.warn(
-		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return Promise.resolve(new Response());
-};
-
-export const redirectToFallback = () => {
-	console.warn(
-		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return Promise.resolve(new Response());
-};
-
-export const notFound = () => {
-	console.warn(
-		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return Promise.resolve(new Response());
-};
-
-export const middleware = () => {
-	console.warn(
-		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return () => {};
-};
-
-export const requestHasLocale = () => {
-	console.warn(
-		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return false;
-};

package/integrations/astro/modules/middleware.js

@@ -1,27 +0,0 @@
-export const sequence = () => {
-	console.warn(
-		"[CloudCannon] middleware is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return () => {};
-};
-
-export const defineMiddleware = () => {
-	console.warn(
-		"[CloudCannon] middleware is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return () => {};
-};
-
-export const createContext = () => {
-	console.warn(
-		"[CloudCannon] middleware is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return {};
-};
-
-export const trySerializeLocals = () => {
-	console.warn(
-		"[CloudCannon] middleware is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return "";
-};

package/integrations/astro/modules/transitions.js

@@ -1,63 +0,0 @@
-import ClientRouterInternal from "./client-router.astro";
-
-export const ClientRouter = ClientRouterInternal;
-
-export const fade = () => {
-	console.warn(
-		"[CloudCannon] view transitions are not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return {};
-};
-
-export const slide = () => {
-	console.warn(
-		"[CloudCannon] view transitions are not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return {};
-};
-
-export const navigate = () => {
-	console.warn(
-		"[CloudCannon] view transitions are not supported in an editable component. Please use an editing fallback instead.",
-	);
-};
-
-export const supportsViewTransitions = false;
-
-export const transitionEnabledOnThisPage = false;
-
-export const getFallback = () => {
-	console.warn(
-		"[CloudCannon] view transitions are not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return "none";
-};
-
-export const swapFunctions = {
-	deselectScripts: () => {
-		console.warn(
-			"[CloudCannon] view transitions are not supported in an editable component. Please use an editing fallback instead.",
-		);
-	},
-	swapRootAttributes: () => {
-		console.warn(
-			"[CloudCannon] view transitions are not supported in an editable component. Please use an editing fallback instead.",
-		);
-	},
-	swapHeadElements: () => {
-		console.warn(
-			"[CloudCannon] view transitions are not supported in an editable component. Please use an editing fallback instead.",
-		);
-	},
-	saveFocus: () => {
-		console.warn(
-			"[CloudCannon] view transitions are not supported in an editable component. Please use an editing fallback instead.",
-		);
-		return () => {};
-	},
-	swapBodyElement: () => {
-		console.warn(
-			"[CloudCannon] view transitions are not supported in an editable component. Please use an editing fallback instead.",
-		);
-	},
-};