@cloudcannon/editable-regions 0.0.10 → 0.0.12

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

@@ -46,7 +46,11 @@ export const isEditableElement = (el: unknown): boolean => {
 	);
 };
 
-export const areEqualEditables = (a: HTMLElement, b: HTMLElement) => {
+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}`));
 };
 
 /**

package/integrations/astro/astro-integration.mjs

@@ -4,6 +4,33 @@ import { fileURLToPath } from "node:url";
 /** @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}
  */
@@ -14,70 +41,96 @@ export default () => {
 			"astro:config:setup": ({ updateConfig }) => {
 				updateConfig({
 					vite: {
-						define: {
-							ENV_CLIENT: false,
-						},
-					},
-				});
-			},
-			"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 });
-						};
-					}
+									config.environments.astro ??= {};
+									config.environments.astro.define ??= {};
+									config.environments.astro.define.ENV_CLIENT = false;
 
-					vite.plugins.unshift({
-						name: "vite-plugin-editable-regions",
-						enforce: "pre",
+									config.environments.prerender ??= {};
+									config.environments.prerender.define ??= {};
+									config.environments.prerender.define.ENV_CLIENT = false;
 
-						resolveId(id) {
-							if (id.startsWith("astro:")) {
-								const type = id
-									.replace("astro:", "")
-									.replace("/client", "")
-									.replace("/server", "");
+									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", "");
 
-								if (type === "env" && id.endsWith("/server")) {
-									return join(dir, "modules", "secrets.js");
-								}
+											let dir = "";
+											if (typeof __dirname !== "undefined") {
+												dir = __dirname;
+											} else {
+												dir = dirname(fileURLToPath(import.meta.url));
+											}
 
-								if (!SUPPORTED_VIRTUAL_MODULES.includes(type)) {
-									return;
-								}
+											if (type === "env" && id.endsWith("/server")) {
+												return join(dir, "modules", "secrets.js");
+											}
 
-								return join(dir, "modules", `${type}.js`);
-							}
-						},
-					});
-				}
+											if (!SUPPORTED_VIRTUAL_MODULES.includes(type)) {
+												return;
+											}
+
+											return join(dir, "modules", `${type}.js`);
+										}
+									},
+								},
+							},
+						],
+					},
+				});
 			},
 		},
 	};

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/nodes/editable-component.ts

@@ -171,100 +171,112 @@ export default class EditableComponent extends Editable {
 		targetNode?: ChildNode | null,
 		renderNode?: ChildNode | null,
 	): void {
-		let targetChild: ChildNode | null | undefined =
+		let nextTargetChild: ChildNode | null | undefined =
 			targetNode?.firstChild ?? undefined;
-		let renderChild: ChildNode | null | undefined =
+		let nextRenderChild: ChildNode | null | undefined =
 			renderNode?.firstChild ?? undefined;
-		while (renderChild || targetChild) {
-			const nextTargetChild: ChildNode | null | undefined =
-				targetChild?.nextSibling ?? undefined;
-			const nextRenderChild: ChildNode | null | undefined =
-				renderChild?.nextSibling ?? undefined;
 
-			if (
-				targetChild instanceof Element &&
-				renderChild &&
-				!(renderChild instanceof Element)
-			) {
+		while (nextRenderChild || nextTargetChild) {
+			const targetChild: ChildNode | null | undefined = nextTargetChild;
+			const renderChild: ChildNode | null | undefined = nextRenderChild;
+
+			nextTargetChild = targetChild?.nextSibling ?? undefined;
+			nextRenderChild = renderChild?.nextSibling ?? undefined;
+
+			// There is an existing node in the DOM but no rendered node in it's place
+			if (!renderChild && targetChild) {
+				targetNode?.removeChild(targetChild);
+				continue;
+			}
+
+			// There is a node to be rendered, but no existing node in the DOM in it's place
+			if (renderChild && !targetChild) {
+				targetNode?.appendChild(renderChild);
+				continue;
+			}
+
+			if (!targetChild || !renderChild) {
+				throw new Error("Illegal rendering state, both children should exist ");
+			}
+
+			// The existing child is an element and the rendered child is a node (i.e. some text)
+			if (targetChild instanceof Element && !(renderChild instanceof Element)) {
+				// Render the (text) node before the element and skip to the next rendered child
 				targetChild.before(renderChild);
-				renderChild = nextRenderChild;
+				nextTargetChild = targetChild;
 				continue;
 			}
 
-			if (
-				renderChild instanceof Element &&
-				targetChild &&
-				!(targetChild instanceof Element)
-			) {
+			// The existing child is a node (i.e. some text) and the rendered child is an element
+			if (renderChild instanceof Element && !(targetChild instanceof Element)) {
+				// Delete the (text) node and skip to the next existing child
 				targetChild.remove();
-				targetChild = nextTargetChild;
+				nextRenderChild = renderChild;
 				continue;
 			}
 
+			// Both existing and rendered children are nodes (i.e. some text)
 			if (
-				renderChild &&
-				targetChild &&
 				!(renderChild instanceof Element) &&
 				!(targetChild instanceof Element)
 			) {
+				// Render the offscreen node's content into the existing node.
 				targetChild.nodeValue = renderChild.nodeValue;
-			} else if (
-				targetChild instanceof HTMLElement &&
-				renderChild instanceof HTMLElement &&
-				isEditableElement(renderChild) &&
-				isEditableElement(targetChild)
+				continue;
+			}
+
+			// Both children are elements but are different types
+			if (renderChild.nodeName !== targetChild.nodeName) {
+				targetChild.replaceWith(renderChild);
+				continue;
+			}
+
+			// Both existing and rendered children are the same kind of element, and neither is editable
+			if (!isEditableElement(renderChild) && !isEditableElement(targetChild)) {
+				// Update the existing element to match the rendered element and recurse their subtrees
+				this.updateNode(targetChild, renderChild);
+				this.updateTree(targetChild, renderChild);
+				continue;
+			}
+
+			if (
+				!(renderChild instanceof HTMLElement) ||
+				!(targetChild instanceof HTMLElement)
 			) {
-				if (!areEqualEditables(renderChild, targetChild)) {
-					targetChild.replaceWith(renderChild);
-				} else if (isEditableText(renderChild) && isEditableText(targetChild)) {
-					if (
-						hasEditableText(targetChild) &&
-						!targetChild.editable.focused &&
-						!targetChild?.isEqualNode(renderChild) &&
-						hasEditable(renderChild)
-					) {
-						targetChild.replaceWith(renderChild);
-						for (let i = 0; i < this.listeners.length; i++) {
-							const listener = this.listeners[i];
-							if (listener.editable.element === targetChild) {
-								listener.editable.element = renderChild;
-								renderChild.editable.pushValue(
-									this.value,
-									this.specialProps,
-									listener,
-									{
-										...this.contexts,
-										__base_context: this.contextBase ?? {},
-									},
-									renderChild,
-								);
-							}
-						}
-					} else if (hasEditable(targetChild)) {
-						this.updateEditable(renderChild, targetChild);
-					}
-				} else if (hasEditable(targetChild)) {
-					this.updateEditable(renderChild, targetChild);
-				}
-			} else if (renderChild && targetChild) {
-				if (
-					renderChild.nodeName !== targetChild.nodeName ||
-					isEditableElement(renderChild) ||
-					isEditableElement(targetChild)
-				) {
-					targetChild.replaceWith(renderChild);
-				} else {
-					this.updateNode(targetChild, renderChild);
-					this.updateTree(targetChild, renderChild);
-				}
-			} else if (renderChild) {
-				targetNode?.appendChild(renderChild);
-			} else if (targetChild) {
-				targetNode?.removeChild(targetChild);
+				throw new Error("Illegal state, both children should be elements");
+			}
+
+			// The existing and rendered child either aren't both editable or are different kinds of editables
+			if (!areEqualEditables(renderChild, targetChild)) {
+				targetChild.replaceWith(renderChild);
+				continue;
+			}
+
+			if (!isEditableElement(renderChild) || !isEditableElement(targetChild)) {
+				throw new Error("Illegal state, both children should be editable");
+			}
+
+			// Both elements are editable but the existing element hasn't hydrated
+			if (!hasEditable(targetChild)) {
+				targetChild.replaceWith(renderChild);
+				continue;
+			}
+
+			// The existing and rendered child are the same kind of non-text editable.
+			if (!isEditableText(targetChild)) {
+				this.updateEditable(renderChild, targetChild);
+				continue;
 			}
 
-			targetChild = nextTargetChild;
-			renderChild = nextRenderChild;
+			// The existing element is currently focused or is already the same as the rendered element
+			if (
+				(hasEditableText(targetChild) && targetChild.editable.focused) ||
+				targetChild?.nodeName === renderChild.nodeName
+			) {
+				this.updateEditable(renderChild, targetChild);
+			} else {
+				targetChild.replaceWith(renderChild);
+			}
 		}
 	}
 
@@ -351,23 +363,6 @@ export default class EditableComponent extends Editable {
 		);
 	}
 
-	setupListeners(): void {
-		super.setupListeners();
-		const key = this.element.dataset.component;
-		if (!key) {
-			return;
-		}
-
-		const component = this.getComponents()?.[key];
-		if (!component) {
-			document.addEventListener(
-				`editable-regions:registered-${key}`,
-				() => this.update(),
-				{ once: true },
-			);
-		}
-	}
-
 	mount(): void {
 		if (!this.controlsElement) {
 			let editPath: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cloudcannon/editable-regions",
-	"version": "0.0.10",
+	"version": "0.0.12",
 	"type": "module",
 	"description": "Visual Editing for the CloudCannon CMS.",
 	"keywords": [
@@ -53,8 +53,8 @@
 		"./internal/styles": "./styles/index.js"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.3.6",
-		"@cloudcannon/javascript-api": "0.0.10",
+		"@biomejs/biome": "2.4.4",
+		"@cloudcannon/javascript-api": "0.0.12",
 		"@types/js-beautify": "1.14.3",
 		"@types/react": "19.2.8",
 		"@types/react-dom": "18.3.1",

package/styles/editable-array-item.css

@@ -9,7 +9,9 @@ editable-array-item {
 	will-change: contents;
 }
 
-editable-array-item,
-[data-editable="array-item"] {
-	position: relative;
+@supports not (anchor-name: --a) {
+	editable-array-item,
+	[data-editable="array-item"] {
+		position: relative;
+	}
 }

package/styles/editable-component.css

@@ -9,7 +9,9 @@ editable-component {
 	will-change: contents;
 }
 
-editable-component,
-[data-editable="component"] {
-	position: relative;
+@supports not (anchor-name: --a) {
+	editable-component,
+	[data-editable="component"] {
+		position: relative;
+	}
 }

package/styles/ui/editable-component-controls.css

@@ -90,6 +90,27 @@ button {
 	}
 }
 
+.context-menu:popover-open {
+	display: block;
+	pointer-events: auto;
+	inset: auto;
+	margin: 4px 4px 0 0;
+	position: fixed;
+	top: anchor(bottom);
+	right: anchor(right);
+	position-try-fallbacks: flip-block;
+}
+
+@supports (anchor-name: --a) {
+	:host {
+		position: fixed;
+		top: anchor(top);
+		right: anchor(right);
+		margin-top: var(--ccve-editable-outline-width);
+		margin-right: var(--ccve-editable-outline-width);
+	}
+}
+
 @keyframes fade-in-up {
 	from {
 		opacity: 0.5;