@cloudcannon/editable-regions 0.0.7 → 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-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[] = [];
@@ -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);
 			});
 

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 = [
@@ -186,6 +186,44 @@ export default class EditableArray extends Editable {
 			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(
@@ -206,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");
@@ -218,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();
 			}
@@ -233,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;
@@ -260,7 +307,6 @@ export default class EditableArray extends Editable {
 			return;
 		}
 
-		const key = this.element.dataset.idKey;
 		const componentKey = this.element.dataset.componentKey;
 		const dataKeys: (string | null)[] = [];
 		const componentKeys: (string | null)[] = [];
@@ -287,14 +333,22 @@ 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 },
@@ -324,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(
@@ -333,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.",
@@ -352,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 {
@@ -374,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();

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 {

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;

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 {
@@ -522,6 +522,28 @@ 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;
@@ -529,29 +551,23 @@ export default class Editable {
 		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;

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.7",
+	"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 };