@cloudcannon/editable-regions 0.0.9 → 0.0.11

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/components/ui/editable-array-item-controls.ts

@@ -93,7 +93,16 @@ export default class EditableArrayItemControls extends EditableComponentControls
 
 		this.dragHandle = document.createElement("button");
 		this.dragHandle.type = "button";
+
+		if (this.usePopoverAPI) {
+			//@ts-expect-error: Typescript doesn't yet support the popover API
+			this.dragHandle.style.anchorName = this.anchorName;
+		}
+
 		this.dragHandle.onclick = (e) => {
+			if (this.hasAttribute("open")) {
+				return;
+			}
 			e.stopPropagation();
 			e.preventDefault();
 			this.toggleContextMenu();

package/components/ui/editable-component-controls.ts

@@ -6,13 +6,28 @@ export default class EditableComponentControls extends HTMLElement {
 	protected buttonRow?: HTMLDivElement;
 
 	private editButton?: HTMLButtonElement;
+	protected usePopoverAPI = false;
+	protected contextMenuId =
+		`context-menu-popover-${Math.random().toString(36).substring(2, 11)}`;
+	protected anchorName = `--${this.contextMenuId}`;
+	protected hostAnchorName =
+		`--cc-editable-host-${Math.random().toString(36).substring(2, 11)}`;
 
 	toggleContextMenu() {
-		if (this.contextMenu?.classList.contains("open")) {
-			this.contextMenu?.classList.remove("open");
+		if (!this.contextMenu || this.contextMenu.childElementCount === 0) {
+			return;
+		}
+
+		if (this.usePopoverAPI) {
+			this.contextMenu.togglePopover();
+			return;
+		}
+
+		if (this.contextMenu.classList.contains("open")) {
+			this.contextMenu.classList.remove("open");
 			this.removeAttribute("open");
-		} else if (this.contextMenu && this.contextMenu.childElementCount > 0) {
-			this.contextMenu?.classList.add("open");
+		} else {
+			this.contextMenu.classList.add("open");
 			this.setAttribute("open", "true");
 		}
 	}
@@ -28,6 +43,13 @@ export default class EditableComponentControls extends HTMLElement {
 
 		this.contextMenu = document.createElement("ul");
 		this.contextMenu.classList.add("context-menu");
+
+		if (this.usePopoverAPI) {
+			this.contextMenu.setAttribute("popover", "auto");
+			//@ts-expect-error: Typescript doesn't yet support the popover API
+			this.contextMenu.style.positionAnchor = this.anchorName;
+		}
+
 		shadow.appendChild(this.contextMenu);
 
 		this.editButton = document.createElement("button");
@@ -40,17 +62,32 @@ export default class EditableComponentControls extends HTMLElement {
 
 		this.onclick = (e) => {
 			e.preventDefault();
-			this.contextMenu?.classList.remove("open");
 			this.removeAttribute("open");
-		};
 
-		this.onblur = (e) => {
-			if ((e.relatedTarget as HTMLElement)?.tagName === "A") {
-				return;
+			if (this.usePopoverAPI) {
+				this.contextMenu?.hidePopover();
+			} else {
+				this.contextMenu?.classList.remove("open");
 			}
-			this.contextMenu?.classList.remove("open");
-			this.removeAttribute("open");
 		};
+
+		if (this.usePopoverAPI && this.contextMenu) {
+			this.contextMenu.ontoggle = (e: ToggleEvent) => {
+				if (e.newState === "open") {
+					this.setAttribute("open", "true");
+				} else {
+					this.removeAttribute("open");
+				}
+			};
+		} else {
+			this.onblur = (e) => {
+				if ((e.relatedTarget as HTMLElement)?.tagName === "A") {
+					return;
+				}
+				this.removeAttribute("open");
+				this.contextMenu?.classList.remove("open");
+			};
+		}
 	}
 
 	connectedCallback() {
@@ -58,8 +95,27 @@ export default class EditableComponentControls extends HTMLElement {
 			return;
 		}
 
+		this.usePopoverAPI =
+			"popover" in HTMLElement.prototype && CSS.supports("anchor-name", "--a");
+
 		this.shadow = this.attachShadow({ mode: "open" });
 		this.render(this.shadow);
+
+		if (this.usePopoverAPI && this.parentElement) {
+			const existing = getComputedStyle(this.parentElement)
+				.getPropertyValue("anchor-name")
+				.trim();
+
+			if (existing && existing !== "none") {
+				this.hostAnchorName = existing.split(",")[0].trim();
+			} else {
+				// @ts-expect-error
+				this.parentElement.style.anchorName = this.hostAnchorName;
+			}
+
+			// @ts-expect-error
+			this.style.positionAnchor = this.hostAnchorName;
+		}
 	}
 }
 

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,17 @@ 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
-	) {
+export const areEqualEditables = (a: Element, b: Element) => {
+	if (!(a instanceof HTMLElement) || !(b instanceof HTMLElement)) {
+		return false;
+	}
+
+	if (getEditableType(a) !== getEditableType(b)) {
 		return false;
 	}
 

package/helpers/cloudcannon.mjs

@@ -55,7 +55,6 @@ export const apiLoadedPromise = new Promise((resolve) => {
 export const addEditableComponentRenderer = (key, renderer) => {
 	extendedWindow.cc_components = extendedWindow.cc_components || {};
 	extendedWindow.cc_components[key] = renderer;
-	document.dispatchEvent(new CustomEvent(`editable-regions:registered-${key}`));
 };
 
 /**
@@ -67,7 +66,6 @@ export const addEditableComponentRenderer = (key, renderer) => {
 export const addEditableSnippetRenderer = (key, renderer) => {
 	extendedWindow.cc_snippets = extendedWindow.cc_snippets || {};
 	extendedWindow.cc_snippets[key] = renderer;
-	document.dispatchEvent(new CustomEvent(`editable-regions:registered-${key}`));
 };
 
 /**
@@ -107,4 +105,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,127 +1,136 @@
 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"];
+
+/**
+ * @param {*} original
+ * @returns
+ */
+function wrapTransform(original) {
+	/**
+	 * @this {*}
+	 * @param {*} source
+	 * @param {*} id
+	 * @param {*} options
+	 */
+	return function (source, id, options) {
+		if (this.environment?.name === "client") {
+			const proxy = new Proxy(this, {
+				get(target, prop) {
+					if (prop === "environment") {
+						return { ...target.environment, name: "ssr" };
+					}
+					return Reflect.get(target, prop);
+				},
+			});
+			return original.call(proxy, source, id, { ...options, ssr: true });
+		}
+		return original.call(this, source, id, options);
+	};
+}
 
 /**
  * @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: {
-							ENV_CLIENT: false,
-						},
-					},
-				});
-				astroConfig = config;
-			},
-			"astro:build:setup": async ({ target, vite }) => {
-				if (target === "client") {
-					vite.plugins ??= [];
-					vite.define ??= {};
-					vite.define.ENV_CLIENT = true;
+						plugins: [
+							{
+								enforce: "pre",
+								name: "vite-plugin-editable-regions",
+								applyToEnvironment(environment) {
+									return environment.name === "client";
+								},
+								config(config) {
+									config.environments ??= {};
 
-					const flatPlugins = vite.plugins?.flat(10);
-					const astroBuildPlugin = flatPlugins?.find((obj) => {
-						return (
-							obj &&
-							typeof obj === "object" &&
-							"name" in obj &&
-							obj.name === "astro:build"
-						);
-					});
+									config.environments.ssr ??= {};
+									config.environments.ssr.define ??= {};
+									config.environments.ssr.define.ENV_CLIENT = false;
 
-					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",
-
-						resolveId(id) {
-							if (id.startsWith("astro:")) {
-								const type = id
-									.replace("astro:", "")
-									.replace("/client", "")
-									.replace("/server", "");
+									config.environments.astro ??= {};
+									config.environments.astro.define ??= {};
+									config.environments.astro.define.ENV_CLIENT = false;
 
-								if (type === "env") {
-									return "\0editable-region:env";
-								}
+									config.environments.prerender ??= {};
+									config.environments.prerender.define ??= {};
+									config.environments.prerender.define.ENV_CLIENT = false;
 
-								if (!SUPPORTED_VIRTUAL_MODULES.includes(type)) {
-									return;
-								}
+									config.environments.client ??= {};
+									config.environments.client.define ??= {};
+									config.environments.client.define.ENV_CLIENT = true;
+								},
+								configResolved(config) {
+									const flatPlugins = config.plugins?.flat(10);
+									const astroBuildPlugin = flatPlugins?.find((obj) => {
+										return (
+											obj &&
+											typeof obj === "object" &&
+											"name" in obj &&
+											obj.name === "astro:build"
+										);
+									});
 
-								let dir = "";
-								if (typeof __dirname !== "undefined") {
-									dir = __dirname;
-								} else {
-									dir = dirname(fileURLToPath(import.meta.url));
-								}
+									if (
+										astroBuildPlugin &&
+										"transform" in astroBuildPlugin &&
+										typeof astroBuildPlugin.transform === "object" &&
+										astroBuildPlugin.transform &&
+										"handler" in astroBuildPlugin.transform &&
+										typeof astroBuildPlugin.transform.handler === "function"
+									) {
+										astroBuildPlugin.transform.handler = wrapTransform(
+											astroBuildPlugin.transform.handler,
+										);
+									} else if (
+										astroBuildPlugin &&
+										"transform" in astroBuildPlugin &&
+										typeof astroBuildPlugin.transform === "function"
+									) {
+										astroBuildPlugin.transform = wrapTransform(
+											astroBuildPlugin.transform,
+										);
+									}
+								},
+								resolveId: {
+									order: "pre",
+									handler(id) {
+										if (id.startsWith("astro:")) {
+											const type = id
+												.replace("astro:", "")
+												.replace("/client", "")
+												.replace("/server", "");
 
-								return join(dir, "modules", `${type}.js`);
-							}
-						},
+											let dir = "";
+											if (typeof __dirname !== "undefined") {
+												dir = __dirname;
+											} else {
+												dir = dirname(fileURLToPath(import.meta.url));
+											}
 
-						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 (type === "env" && id.endsWith("/server")) {
+												return join(dir, "modules", "secrets.js");
+											}
 
-										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`;
+											if (!SUPPORTED_VIRTUAL_MODULES.includes(type)) {
+												return;
 											}
-										} catch (_e) {
-											//Error intentionally ignored
+
+											return join(dir, "modules", `${type}.js`);
 										}
 									},
-								);
-								contents +=
-									'export const getSecret = () => console.log("[CloudCannon] getSecret is not supported in an editable component. Please use an editing fallback instead.");';
-								return contents;
-							}
-						},
-					});
-				}
+								},
+							},
+						],
+					},
+				});
 			},
 		},
 	};

package/integrations/astro/index.mjs

@@ -131,31 +131,44 @@ export const registerAstroComponent = (key, component) => {
 			props,
 			resolve: () => "editable-region-placeholder",
 			/**
-			 * @param {*} astroGlobal
-			 * @param {*} props
-			 * @param {*} slots
+			 * @param {*} args
 			 */
-			createAstro(astroGlobal, props, slots) {
+			createAstro(...args) {
+				if (args.length < 2 || args.length > 3) {
+					console.warn(
+						`[CloudCannon] createAstro called with unexpected number of arguments (${args.length})`,
+					);
+				}
+
+				let astroGlobal = SSRResult;
+				let componentProps, componentSlots;
+
+				if (args.length === 2) {
+					[componentProps, componentSlots] = args;
+				} else {
+					[astroGlobal, componentProps, componentSlots] = args;
+				}
+
 				const astroSlots = {
 					/**
 					 * @param {string} name
 					 * @returns boolean
 					 */
 					has: (name) => {
-						if (!slots) return false;
-						return Boolean(slots[name]);
+						if (!componentSlots) return false;
+						return Boolean(componentSlots[name]);
 					},
 					/**
 					 * @param {string} name
 					 * @returns string
 					 */
 					render: (name) => {
-						return renderSlotToString(SSRResult, slots[name]);
+						return renderSlotToString(SSRResult, componentSlots[name]);
 					},
 				};
 				return {
 					__proto__: astroGlobal,
-					props,
+					props: componentProps,
 					slots: astroSlots,
 					request: new Request(window.location.href),
 				};

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