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

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.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/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;