@cloudcannon/editable-regions 0.0.20-rc.2 → 0.0.20

package/integrations/vue.mjs

@@ -1,4 +1,11 @@
-import { createApp, h } from "vue";
+import {
+	createApp,
+	defineComponent,
+	h,
+	onMounted,
+	onUnmounted,
+	ref,
+} from "vue";
 import { addEditableComponentRenderer } from "../helpers/cloudcannon.mjs";
 
 /**
@@ -26,3 +33,92 @@ export const registerVueComponent = (key, component) => {
 
 	addEditableComponentRenderer(key, wrappedComponent);
 };
+
+/**
+ * Root editable region component for Vue.
+ * Keeps editable regions from mutating the DOM before frameworks like Nuxt finish hydrating.
+ *
+ * @param {string} [props.tag] - Element type to render. Defaults to "div".
+ * All other props and attributes are forwarded to the rendered element.
+ */
+export const EditableRegions = defineComponent({
+	name: "EditableRegions",
+	props: {
+		tag: {
+			type: String,
+			default: "div",
+		},
+	},
+	inheritAttrs: false,
+	/**
+	 * @param {{ tag: string }} props
+	 * @param {{ attrs: any; slots: any }} context
+	 */
+	setup(props, { attrs, slots }) {
+		const element = ref(null);
+		/** @type {any} */
+		let editable = null;
+		/** @type {(() => void) | null} */
+		let pendingLoadHandler = null;
+
+		/** @param {any} regions */
+		const connectEditable = (regions) => {
+			if (!regions || editable) {
+				return;
+			}
+
+			editable = new regions.Editable(element.value);
+			editable.connect();
+		};
+
+		onMounted(() => {
+			const regions = /** @type {any} */ (window).editableRegions;
+			if (regions) {
+				connectEditable(regions);
+				return;
+			}
+
+			pendingLoadHandler = () => {
+				connectEditable(/** @type {any} */ (window).editableRegions);
+			};
+			document.addEventListener("editable-regions:load", pendingLoadHandler, {
+				once: true,
+			});
+		});
+
+		onUnmounted(() => {
+			if (pendingLoadHandler) {
+				document.removeEventListener(
+					"editable-regions:load",
+					pendingLoadHandler,
+				);
+				pendingLoadHandler = null;
+			}
+
+			editable?.disconnect();
+			editable = null;
+		});
+
+		return () => {
+			/** @type {Record<string, any>} */
+			const forwarded = {};
+			for (const [name, value] of Object.entries(attrs)) {
+				if (/^data-(prop|literal)/i.test(name)) {
+					continue;
+				}
+				forwarded[name] = value;
+			}
+
+			return h(
+				props.tag,
+				{
+					...forwarded,
+					ref: element,
+					"data-editable": "_dynamic",
+					"data-prop": "",
+				},
+				/** @type {any} */ (slots.default?.()),
+			);
+		};
+	},
+});

package/nodes/editable-array-item.ts

@@ -18,12 +18,16 @@ export const hasEditableArrayItem = <T extends object>(
 export default class EditableArrayItem extends EditableComponent {
 	parent: EditableArray | null = null;
 
-	protected declare controlsElement?: EditableArrayItemControls;
+	declare protected controlsElement?: EditableArrayItemControls;
 
 	private inputConfig?: any;
 	private structureStrings: string[] = [];
 
 	shouldMount(): boolean {
+		if (this.mounted) {
+			return false;
+		}
+
 		return this.value !== undefined;
 	}
 

package/nodes/editable-component.ts

@@ -25,13 +25,19 @@ export default class EditableComponent extends Editable {
 	}
 
 	shouldMount(): boolean {
-		if (super.shouldMount()) {
-			return true;
+		if (this.mounted) {
+			return false;
 		}
 
-		return !Object.keys(this.element.dataset).some((key) =>
-			key.startsWith("prop"),
+		const hasNoProps = Object.keys(this.element.dataset).every(
+			(key) => !key.startsWith("prop"),
 		);
+
+		if (hasNoProps) {
+			return true;
+		}
+
+		return super.shouldMount();
 	}
 
 	validateConfiguration(): boolean {

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.2",
+  "version": "0.0.20",
   "type": "module",
   "description": "Visual Editing for the CloudCannon CMS.",
   "keywords": [
@@ -77,7 +77,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 +104,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",
+    "@types/node": "26.5.1",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
     "@vitejs/plugin-vue": "6.0.8",
-    "astro": "7.2.2",
-    "happy-dom": "20.11.2",
+    "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/hugo.d.ts

@@ -29,6 +29,7 @@ declare global {
 	interface HugoRuntimeMeta {
 		generator?: string;
 		wasmUrl?: string;
+		workerUrl?: string;
 		verbose?: boolean;
 		env?: string;
 	}
@@ -53,7 +54,7 @@ declare global {
 		CloudCannonAPI?: CloudCannonVisualEditorAPIRouter;
 		/** The installed v0/v1 CloudCannon API for this page. */
 		CloudCannon?: CloudCannonVisualEditorAPIV0 | CloudCannonVisualEditorAPIV1;
-		/** Emitter metadata: generator, wasmUrl, verbose, env. */
+		/** Emitter metadata: generator, wasmUrl, workerUrl, verbose, env. */
 		cc_hugo?: HugoRuntimeMeta;
 		/** Template/config snapshot keyed by physical path. */
 		cc_hugo_files?: Record<string, string>;
@@ -65,5 +66,8 @@ declare global {
 	function removeHugoFiles(json: string): HugoEditorResult | null;
 	function readHugoFiles(json: string): Record<string, string>;
 	function initHugoEditorSite(): HugoEditorResult | null;
-	function renderHugoPartials(json: string): HugoRenderResult | null;
+	function renderHugoPartials(
+		json: string,
+		callback: (result: HugoRenderResult) => void,
+	): void;
 }

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;