@cloudcannon/editable-regions 0.0.20-rc.3 → 0.0.21

package/nodes/editable-image.ts

@@ -185,87 +185,92 @@ export default class EditableImage extends Editable {
 		this.configuredTitle =
 			!!this.element.dataset.propTitle || !!this.element.dataset.prop;
 
-		this.loadInputConfig().then(() => {
-			this.imageEl?.addEventListener("click", async (e) => {
-				e.preventDefault();
+		// Loading the input config costs a round trip per configured prop, so the
+		// listener is attached up front and the click waits for it. Attaching after
+		// the load resolves instead leaves a window where clicks are dropped.
+		const inputConfigLoaded = this.loadInputConfig();
 
-				if (!this.value) {
-					throw new Error("Value is not defined");
-				}
+		this.imageEl?.addEventListener("click", async (e) => {
+			e.preventDefault();
 
-				const data: this["value"] = {};
-				if ("src" in this.value) {
-					data.src = this.value.src;
-				}
-				if ("alt" in this.value) {
-					data.alt = this.value.alt;
-				}
-				if ("title" in this.value) {
-					data.title = this.value.title;
-				}
+			await inputConfigLoaded;
 
-				this.panelId = await CloudCannon.createCustomDataPanel({
-					title: "Edit Image",
-					data,
-					position: this.imageEl?.getBoundingClientRect(),
-					config: {
-						_inputs: {
-							src: {
-								label: "Image",
-								type: "image",
-								...this.inputConfig.src,
-							},
-							alt: {
-								comment:
-									"A description which provides information about this image if for some reason it cannot be viewed.",
-								...this.inputConfig.alt,
-							},
-							title: {
-								comment: "Displayed when hovering over the image.",
-								...this.inputConfig.title,
-							},
+			if (!this.value) {
+				throw new Error("Value is not defined");
+			}
+
+			const data: this["value"] = {};
+			if ("src" in this.value) {
+				data.src = this.value.src;
+			}
+			if ("alt" in this.value) {
+				data.alt = this.value.alt;
+			}
+			if ("title" in this.value) {
+				data.title = this.value.title;
+			}
+
+			this.panelId = await CloudCannon.createCustomDataPanel({
+				title: "Edit Image",
+				data,
+				position: this.imageEl?.getBoundingClientRect(),
+				config: {
+					_inputs: {
+						src: {
+							label: "Image",
+							type: "image",
+							...this.inputConfig.src,
+						},
+						alt: {
+							comment:
+								"A description which provides information about this image if for some reason it cannot be viewed.",
+							...this.inputConfig.alt,
+						},
+						title: {
+							comment: "Displayed when hovering over the image.",
+							...this.inputConfig.title,
 						},
 					},
-					onChange: (value): void => {
-						if (!value || typeof value !== "object") {
-							throw new Error("Invalid image data");
-						}
+				},
+				onChange: (value): void => {
+					if (!value || typeof value !== "object") {
+						throw new Error("Invalid image data");
+					}
 
-						if (
-							"src" in value &&
-							this.configuredSrc &&
-							value.src !== this.value?.src
-						) {
-							this.dispatchSet(
-								this.element.dataset.propSrc ??
-									`${this.element.dataset.prop}.src`,
-								value.src,
-							);
-						}
-						if (
-							"alt" in value &&
-							this.configuredAlt &&
-							value.alt !== this.value?.alt
-						) {
-							this.dispatchSet(
-								this.element.dataset.propAlt ??
-									`${this.element.dataset.prop}.alt`,
-								value.alt,
-							);
-						}
-						if (
-							"title" in value &&
-							this.configuredTitle &&
-							value.title !== this.value?.title
-						) {
-							this.dispatchSet(
-								this.element.dataset.propTitle ??
-									`${this.element.dataset.prop}.title`,
-								value.title,
-							);
-						}
-					},
-				});
+					if (
+						"src" in value &&
+						this.configuredSrc &&
+						value.src !== this.value?.src
+					) {
+						this.dispatchSet(
+							this.element.dataset.propSrc ??
+								`${this.element.dataset.prop}.src`,
+							value.src,
+						);
+					}
+					if (
+						"alt" in value &&
+						this.configuredAlt &&
+						value.alt !== this.value?.alt
+					) {
+						this.dispatchSet(
+							this.element.dataset.propAlt ??
+								`${this.element.dataset.prop}.alt`,
+							value.alt,
+						);
+					}
+					if (
+						"title" in value &&
+						this.configuredTitle &&
+						value.title !== this.value?.title
+					) {
+						this.dispatchSet(
+							this.element.dataset.propTitle ??
+								`${this.element.dataset.prop}.title`,
+							value.title,
+						);
+					}
+				},
 			});
 		});
 	}

package/nodes/editable.ts

@@ -174,7 +174,19 @@ export default class Editable {
 		return true;
 	}
 
+	private parentMounted(): boolean {
+		if (this.parent) {
+			return this.parent.mounted;
+		}
+
+		return !this.pendingParentElement;
+	}
+
 	shouldMount() {
+		if (this.mounted) {
+			return false;
+		}
+
 		return this.value !== undefined;
 	}
 
@@ -211,8 +223,10 @@ export default class Editable {
 		contexts?: { [key: string]: EditableContext },
 	): Promise<unknown> {
 		const { key, path } = listener ?? {};
+		let shouldValidate = false;
 
 		if (typeof path === "string") {
+			shouldValidate = true;
 			const { value: resolvedValue, context: newContext } =
 				await this.lookupPathAndContext(path, value, contexts);
 
@@ -255,6 +269,7 @@ export default class Editable {
 			({ key }) => !!key,
 		);
 		if (filteredSpecialPropsListener.length > 0) {
+			shouldValidate = true;
 			newValue = filteredSpecialPropsListener.reduce(
 				(acc, { key, path }) => {
 					if (key && path) {
@@ -271,6 +286,7 @@ export default class Editable {
 		}
 
 		if (Object.entries(literalProps).length > 0) {
+			shouldValidate = true;
 			newValue = Object.entries(literalProps).reduce(
 				(acc, [key, val]) => {
 					(acc as any)[key] = structuredClone(val);
@@ -282,7 +298,11 @@ export default class Editable {
 			);
 		}
 
-		return this.validateValue(newValue);
+		if (shouldValidate) {
+			newValue = this.validateValue(newValue);
+		}
+
+		return newValue;
 	}
 
 	async pushValue(
@@ -299,15 +319,18 @@ export default class Editable {
 			contexts,
 		);
 
-		if (typeof newValue === "undefined" || !this.shouldUpdate(newValue)) {
+		if (
+			typeof newValue === "undefined" ||
+			!this.shouldUpdate(newValue) ||
+			!this.parentMounted()
+		) {
 			return;
 		}
 
 		this.value = newValue;
-		if (this.connected && !this.mounted) {
+		if (this.connected && this.shouldMount()) {
 			this.mounted = true;
 			this.mount();
-			return this.update(partialSubtree);
 		}
 
 		if (this.mounted) {
@@ -440,7 +463,7 @@ export default class Editable {
 		this.connectPromise = apiLoadedPromise.then(() => {
 			this.setupListeners();
 			this.connected = true;
-			if (!this.mounted && this.shouldMount()) {
+			if (this.parentMounted() && this.shouldMount()) {
 				this.mounted = true;
 				this.mount();
 				this.update();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudcannon/editable-regions",
-  "version": "0.0.20-rc.3",
+  "version": "0.0.21",
   "type": "module",
   "description": "Visual Editing for the CloudCannon CMS.",
   "keywords": [
@@ -37,7 +37,8 @@
     "test:build-astro-fixture": "npm --prefix test/unit/_fixtures/astro install --silent && npm --prefix test/unit/_fixtures/astro run build",
     "test:build-eleventy-fixture": "npm --prefix test/unit/_fixtures/eleventy install --silent && npm --prefix test/unit/_fixtures/eleventy run build",
     "test:build-eleventy-plugin-config": "npm --prefix test/unit/_fixtures/eleventy-plugin-config install --silent && npm --prefix test/unit/_fixtures/eleventy-plugin-config run build",
-    "test:build-hugo-fixture": "npm --prefix test/unit/_fixtures/hugo run build"
+    "test:build-hugo-fixture": "npm --prefix test/unit/_fixtures/hugo run build",
+    "test:integration": "npm run build:hugo && bash run-integration-tests.sh"
   },
   "files": [
     "components",
@@ -77,7 +78,8 @@
     },
     "./svelte": {
       "types": "./types/svelte.d.ts",
-      "default": "./integrations/svelte.mjs"
+      "svelte": "./integrations/svelte/index.mjs",
+      "default": "./integrations/svelte/index.mjs"
     },
     "./vue": {
       "types": "./types/vue.d.ts",
@@ -103,30 +105,30 @@
     "./internal/styles": "./styles/index.js"
   },
   "devDependencies": {
-    "@astrojs/react": "6.0.2",
+    "@astrojs/react": "6.0.5",
     "@astrojs/svelte": "9.0.1",
     "@astrojs/vue": "7.0.2",
-    "@biomejs/biome": "2.5.8",
+    "@biomejs/biome": "2.5.13",
     "@cloudcannon/visual-editor-api": "0.0.20",
-    "@sindresorhus/slugify": "3.0.0",
+    "@sindresorhus/slugify": "3.0.1",
     "@sveltejs/vite-plugin-svelte": "7.3.0",
     "@types/js-beautify": "1.14.3",
-    "@types/node": "26.2.0",
-    "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.4",
-    "@vitejs/plugin-vue": "6.0.8",
-    "astro": "7.2.2",
-    "happy-dom": "20.11.2",
+    "@types/node": "26.5.1",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-vue": "6.0.9",
+    "astro": "7.3.2",
+    "happy-dom": "20.14.5",
     "js-beautify": "2.0.3",
     "liquidjs": "10.29.0",
-    "react": "19.2.8",
-    "react-dom": "19.2.8",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
     "slugify": "1.6.9",
-    "svelte": "5.56.9",
+    "svelte": "5.57.0",
     "typescript": "6.0.3",
-    "vitest": "4.1.10",
-    "vue": "3.5.41",
-    "vue-tsc": "3.3.10"
+    "vitest": "^4.1.11",
+    "vue": "3.5.42",
+    "vue-tsc": "3.3.11"
   },
   "dependencies": {
     "esbuild": "0.28.2"

package/types/react.d.ts

@@ -1,32 +1,38 @@
 /// <reference path="./cloudcannon.d.ts" />
 
-import type { HTMLAttributes, RefAttributes } from "react";
+import type { FC, HTMLAttributes, RefAttributes } from "react";
 
 export function registerReactComponent(key: string, component: unknown): void;
 
+export const EditableRegions: FC<
+	HTMLAttributes<HTMLElement> & {
+		tag?: string;
+	}
+>;
+
 declare global {
 	namespace React.JSX {
 		interface IntrinsicElements {
 			"editable-component": RefAttributes<HTMLElement> &
-				Omit<HTMLAttributes<HTMLElement>, "className"> & {
+				HTMLAttributes<HTMLElement> & {
 					class?: string;
 					"data-prop": string;
 					"data-component": string;
 				};
 			"editable-text": RefAttributes<HTMLElement> &
-				Omit<HTMLAttributes<HTMLElement>, "className"> & {
+				HTMLAttributes<HTMLElement> & {
 					class?: string;
 					"data-prop": string;
 					"data-type"?: "block" | "text" | "span";
 				};
 			"editable-source": RefAttributes<HTMLElement> &
-				Omit<HTMLAttributes<HTMLElement>, "className"> & {
+				HTMLAttributes<HTMLElement> & {
 					class?: string;
 					"data-path": string;
 					"data-key": string;
 				};
 			"editable-array": RefAttributes<HTMLElement> &
-				Omit<HTMLAttributes<HTMLElement>, "className"> & {
+				HTMLAttributes<HTMLElement> & {
 					class?: string;
 					"data-prop": string;
 					"data-id-key"?: string;
@@ -39,11 +45,19 @@ declare global {
 						| "row-reverse";
 				};
 			"editable-array-item": RefAttributes<HTMLElement> &
-				Omit<HTMLAttributes<HTMLElement>, "className"> & {
+				HTMLAttributes<HTMLElement> & {
 					class?: string;
 					"data-id"?: string;
 					"data-component"?: string;
 				};
+			"editable-image": RefAttributes<HTMLElement> &
+				HTMLAttributes<HTMLElement> & {
+					class?: string;
+					"data-prop"?: string;
+					"data-prop-src"?: string;
+					"data-prop-alt"?: string;
+					"data-prop-title"?: string;
+				};
 		}
 	}
 }

package/types/svelte.d.ts

@@ -1,3 +1,13 @@
 /// <reference path="./cloudcannon.d.ts" />
 
+import type { SvelteComponentTyped } from "svelte";
+
 export function registerSvelteComponent(key: string, component: unknown): void;
+
+export const EditableRegions: import("svelte").ComponentType<
+	SvelteComponentTyped<
+		{
+			tag?: string;
+		} & Record<string, any>
+	>
+>;

package/types/vue.d.ts

@@ -1,9 +1,15 @@
 /// <reference path="./cloudcannon.d.ts" />
 
-import type { HTMLAttributes } from "vue";
+import type { DefineComponent, HTMLAttributes } from "vue";
 
 export function registerVueComponent(key: string, component: unknown): void;
 
+export const EditableRegions: DefineComponent<
+	Omit<HTMLAttributes, "data-prop"> & {
+		tag?: string;
+	}
+>;
+
 declare global {
 	namespace JSX {
 		interface IntrinsicElements {
@@ -17,6 +23,13 @@ declare global {
 				"data-prop": string;
 				"data-type"?: "block" | "text" | "span";
 			};
+			"editable-image": HTMLAttributes & {
+				class?: string;
+				"data-prop"?: string;
+				"data-prop-src"?: string;
+				"data-prop-alt"?: string;
+				"data-prop-title"?: string;
+			};
 			"editable-source": HTMLAttributes & {
 				class?: string;
 				"data-path": string;