@cloudcannon/editable-regions 0.0.3 → 0.0.5

package/components/index.ts

@@ -6,11 +6,12 @@ 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";
 
-import { loadedPromise } from "../helpers/cloudcannon.js";
+import { apiLoadedPromise } from "../helpers/cloudcannon.js";
 import {
 	dehydrateDataEditableRegions,
 	hydrateDataEditableRegions,
 } from "../helpers/hydrate-editable-regions";
+import { completeLoading } from "../helpers/loading.js";
 
 const observer = new MutationObserver((mutations) => {
 	mutations.forEach((mutation) => {
@@ -28,8 +29,17 @@ const observer = new MutationObserver((mutations) => {
 	});
 });
 
+hydrateDataEditableRegions(document.body);
+
 observer.observe(document, { childList: true, subtree: true });
 
-loadedPromise.then(() => {
-	hydrateDataEditableRegions(document.body);
-});
+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

@@ -11,11 +11,14 @@ export default class EditableArrayItemControls extends EditableComponentControls
 	private _disableMoveBackward = false;
 	private _disableRemove = false;
 	private _disableReorder = false;
+	private _disableAdd = false;
 
 	private moveForwardButton?: HTMLButtonElement;
 	private moveBackwardButton?: HTMLButtonElement;
 	private deleteButton?: HTMLButtonElement;
 	private dragHandle?: HTMLButtonElement;
+	private duplicateButton?: HTMLButtonElement;
+	private addButton?: HTMLButtonElement;
 
 	set disableMoveForward(value: boolean) {
 		this._disableMoveForward = value;
@@ -37,7 +40,20 @@ export default class EditableArrayItemControls extends EditableComponentControls
 		this.update();
 	}
 
+	set disableAdd(value: boolean) {
+		this._disableAdd = value;
+		this.update();
+	}
+
 	update() {
+		if (this.addButton) {
+			this.addButton.disabled = this._disableAdd;
+		}
+
+		if (this.duplicateButton) {
+			this.duplicateButton.disabled = this._disableAdd;
+		}
+
 		if (this.dragHandle) {
 			this.dragHandle.draggable = !this._disableReorder;
 			this.dragHandle.innerHTML = `<cc-icon name="${this.dragHandle.draggable ? "drag_indicator" : "more_vert"}"></cc-icon>`;
@@ -58,6 +74,20 @@ export default class EditableArrayItemControls extends EditableComponentControls
 		}
 	}
 
+	addContextMenuButton(
+		icon: string,
+		text: string,
+		onClick: (e: PointerEvent) => void,
+	): HTMLButtonElement {
+		const button = document.createElement("button");
+		button.onclick = onClick;
+		button.innerHTML = `<cc-icon name="${icon}"></cc-icon> ${text}`;
+		const buttonContainer = document.createElement("li");
+		buttonContainer.append(button);
+		this.contextMenu?.append(buttonContainer);
+		return button;
+	}
+
 	render(shadow: ShadowRoot): void {
 		super.render(shadow);
 
@@ -78,34 +108,41 @@ export default class EditableArrayItemControls extends EditableComponentControls
 		};
 		this.buttonRow?.append(this.dragHandle);
 
+		this.addButton = this.addContextMenuButton("add", "Add", (e) => {
+			this.dispatchEvent(
+				new CustomEvent("add", { detail: { originalEvent: e } }),
+			);
+		});
+
+		this.duplicateButton = this.addContextMenuButton(
+			"library_add",
+			"Duplicate",
+			() => {
+				this.dispatchEvent(new CustomEvent("duplicate", { detail: this }));
+			},
+		);
+
 		const backwardIconName = this.moveBackwardText === "up" ? "north" : "west";
-		this.moveBackwardButton = document.createElement("button");
-		this.moveBackwardButton.innerHTML = `<cc-icon name="${backwardIconName}"></cc-icon> Move ${this.moveBackwardText}`;
-		this.moveBackwardButton.onclick = () => {
-			this.dispatchEvent(new CustomEvent("move-backward", { detail: this }));
-		};
-		const moveBackwardContainer = document.createElement("li");
-		moveBackwardContainer.append(this.moveBackwardButton);
-		this.contextMenu?.append(moveBackwardContainer);
+		this.moveBackwardButton = this.addContextMenuButton(
+			backwardIconName,
+			`Move ${this.moveBackwardText}`,
+			() => {
+				this.dispatchEvent(new CustomEvent("move-backward", { detail: this }));
+			},
+		);
 
 		const forwardIconName = this.moveForwardText === "down" ? "south" : "east";
-		this.moveForwardButton = document.createElement("button");
-		this.moveForwardButton.innerHTML = `<cc-icon name="${forwardIconName}"></cc-icon> Move ${this.moveForwardText}`;
-		this.moveForwardButton.onclick = (): void => {
-			this.dispatchEvent(new CustomEvent("move-forward", { detail: this }));
-		};
-		const moveForwardContainer = document.createElement("li");
-		moveForwardContainer.append(this.moveForwardButton);
-		this.contextMenu?.append(moveForwardContainer);
-
-		this.deleteButton = document.createElement("button");
-		this.deleteButton.innerHTML = '<cc-icon name="delete"></cc-icon> Delete';
-		this.deleteButton.onclick = () => {
+		this.moveForwardButton = this.addContextMenuButton(
+			forwardIconName,
+			`Move ${this.moveForwardText}`,
+			() => {
+				this.dispatchEvent(new CustomEvent("move-forward", { detail: this }));
+			},
+		);
+
+		this.deleteButton = this.addContextMenuButton("delete", "Delete", () => {
 			this.dispatchEvent(new CustomEvent("delete", { detail: this }));
-		};
-		const deleteContainer = document.createElement("li");
-		deleteContainer.append(this.deleteButton);
-		this.contextMenu?.append(deleteContainer);
+		});
 
 		this.update();
 	}

package/helpers/checks.ts

@@ -48,6 +48,14 @@ export const hasEditableArrayItem = <T extends object>(
 	return "editable" in el && el.editable instanceof EditableArrayItem;
 };
 
+export const isEditableWebcomponent = (el: unknown): boolean => {
+	if (!(el instanceof HTMLElement)) {
+		return false;
+	}
+
+	return TAG_NAMES.includes(el.tagName);
+};
+
 export const isEditableElement = (el: unknown): boolean => {
 	if (!(el instanceof HTMLElement)) {
 		return false;
@@ -92,35 +100,3 @@ export const isEditableArrayItem = (el?: Element | null): boolean => {
 		(el instanceof HTMLElement && el.dataset.editable === "array-item")
 	);
 };
-
-export const areEqualNodes = (a: ChildNode, b: ChildNode) => {
-	if (a.nodeName !== b.nodeName) {
-		return false;
-	}
-
-	if (a instanceof Element && b instanceof Element) {
-		if (a.className !== b.className) {
-			return false;
-		}
-
-		if (a.id !== b.id) {
-			return false;
-		}
-
-		if (a.attributes.length !== b.attributes.length) {
-			return false;
-		}
-
-		for (let i = 0; i < a.attributes.length; i++) {
-			if (
-				a.attributes[i].name !== b.attributes[i].name ||
-				a.attributes[i].value !== b.attributes[i].value
-			) {
-				return false;
-			}
-		}
-
-		return true;
-	}
-	return a.isEqualNode(b);
-};

package/helpers/cloudcannon.ts

@@ -14,7 +14,7 @@ declare const window: CloudCannonEditorWindow & {
 
 let _cloudcannon: CloudCannonJavaScriptV1API;
 
-const apiLoadedPromise = new Promise<void>((resolve) => {
+export const apiLoadedPromise = new Promise<void>((resolve) => {
 	if (window.CloudCannonAPI) {
 		_cloudcannon = window.CloudCannonAPI.useVersion("v1", true) as any;
 		resolve();
@@ -32,17 +32,6 @@ const apiLoadedPromise = new Promise<void>((resolve) => {
 	}
 });
 
-export const loadedPromise = 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"),
-]);
-
 export const addEditableComponentRenderer = (
 	key: string,
 	renderer: ComponentRenderer,
@@ -64,4 +53,22 @@ export const addEditableSnippetRenderer = (
 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 };

package/helpers/hydrate-editable-regions.ts

@@ -1,5 +1,5 @@
 import {
-	type Editable,
+	Editable,
 	EditableArray,
 	EditableArrayItem,
 	EditableComponent,
@@ -7,7 +7,7 @@ import {
 	EditableSource,
 	EditableText,
 } from "../nodes";
-import { hasEditable } from "./checks";
+import { hasEditable, isEditableWebcomponent } from "./checks";
 
 const editableMap: Record<string, typeof Editable | undefined> = {
 	array: EditableArray,
@@ -34,17 +34,21 @@ export const hydrateDataEditableRegions = (root: Element) => {
 	if (
 		root instanceof HTMLElement &&
 		root.dataset.editable &&
-		!("editable" in root)
+		!isEditableWebcomponent(root)
 	) {
-		const Editable = editableMap[root.dataset.editable];
-		if (Editable) {
-			const editable = new Editable(root);
-			editable.connect();
+		if ("editable" in root && root.editable instanceof Editable) {
+			root.editable.connect();
+		} else {
+			const Editable = editableMap[root.dataset.editable];
+			if (Editable) {
+				const editable = new Editable(root);
+				editable.connect();
+			}
 		}
 	}
 
 	root.querySelectorAll("[data-editable]").forEach((element) => {
-		if (!(element instanceof HTMLElement) || "editable" in element) {
+		if (!(element instanceof HTMLElement) || isEditableWebcomponent(element)) {
 			return;
 		}
 
@@ -64,8 +68,11 @@ export const hydrateDataEditableRegions = (root: Element) => {
 			return;
 		}
 
-		const editable = new Editable(element);
-
-		editable.connect();
+		if ("editable" in element && element.editable instanceof Editable) {
+			element.editable.connect();
+		} else {
+			const editable = new Editable(element);
+			editable.connect();
+		}
 	});
 };

package/helpers/loading.ts

@@ -0,0 +1,7 @@
+let completeLoading: () => void;
+
+export const loadingPromise = new Promise<void>((resolve) => {
+	completeLoading = resolve;
+});
+
+export { completeLoading };

package/integrations/astro/astro-integration.mjs

@@ -1,4 +1,5 @@
 import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 
 const SUPPORTED_VIRTUAL_MODULES = [
 	"actions",
@@ -57,15 +58,10 @@ export default () => {
 								if (typeof __dirname !== "undefined") {
 									dir = __dirname;
 								} else {
-									dir = dirname(import.meta.url);
+									dir = dirname(fileURLToPath(import.meta.url));
 								}
 
-								const path = join(dir, "modules", `${type}.js`).replace(
-									"file:",
-									"",
-								);
-
-								return path;
+								return join(dir, "modules", `${type}.js`);
 							}
 						},
 

package/integrations/astro/index.mjs

@@ -127,7 +127,7 @@ export const registerAstroComponent = (key, component) => {
 				["visible", "editable-region-placeholder"],
 				["media", "editable-region-placeholder"],
 			]),
-			slots: null,
+			slots: {},
 			props,
 			resolve: () => "editable-region-placeholder",
 			/**
@@ -162,7 +162,7 @@ export const registerAstroComponent = (key, component) => {
 			},
 		};
 		// Render the Astro component to HTML string
-		const result = await renderToString(SSRResult, component, props, null);
+		const result = await renderToString(SSRResult, component, props, {});
 		const doc = document.implementation.createHTMLDocument();
 		doc.body.innerHTML = result;
 

package/nodes/editable-array-item.ts

@@ -4,7 +4,7 @@ import {
 	hasEditableArrayItem,
 	isEditableArrayItem,
 } from "../helpers/checks.js";
-import { CloudCannon } from "../helpers/cloudcannon.js";
+import { CloudCannon, realizeAPIValue } from "../helpers/cloudcannon.js";
 import EditableArray from "./editable-array.js";
 import EditableComponent from "./editable-component.js";
 
@@ -15,6 +15,10 @@ export default class EditableArrayItem extends EditableComponent {
 
 	private inputConfig?: any;
 
+	shouldMount(): boolean {
+		return this.value !== undefined;
+	}
+
 	validateConfiguration(): boolean {
 		const key = this.element.dataset.component;
 		if (key) {
@@ -44,25 +48,36 @@ export default class EditableArrayItem extends EditableComponent {
 		return true;
 	}
 
-	onHover(e: DragEvent): void {
-		const source = this.parent?.resolveSource();
+	isValidDropzone(e: DragEvent): boolean {
+		const source = this.parent?.contextBase?.filePath;
 		if (!source || !e.dataTransfer) {
-			return;
+			return false;
 		}
 
+		const dragType = this.getDragType();
+
 		if (
-			!e.dataTransfer?.types.includes(source) &&
-			!e.dataTransfer.types.includes(this.getDragType())
+			!e.dataTransfer?.types.includes(source.toLowerCase()) &&
+			(!dragType || !e.dataTransfer.types.includes(dragType))
 		) {
+			return false;
+		}
+
+		return true;
+	}
+
+	onHover(e: DragEvent): void {
+		if (!this.isValidDropzone(e)) {
 			return;
 		}
 
 		e.preventDefault();
+		e.stopPropagation();
 		this.element.classList.add("dragover");
 		this.element.style.boxShadow = this.getDraggingBoxShadow(e);
 	}
 
-	getDragType(): string {
+	getDragType(): string | undefined {
 		if (this.inputConfig?.options?.structures?.values?.length) {
 			return "cc:structure";
 		}
@@ -72,7 +87,14 @@ export default class EditableArrayItem extends EditableComponent {
 			return `cc:${currentArraySubtype}`;
 		}
 
-		const type = CloudCannon.getInputType(this.resolveSource(), this.value);
+		const type = CloudCannon.getInputType(
+			this.contextBase?.filePath,
+			this.value,
+			this.inputConfig,
+		);
+		if (type === "array" || type === "object") {
+			return undefined;
+		}
 		return `cc:${type}`;
 	}
 
@@ -127,12 +149,13 @@ export default class EditableArrayItem extends EditableComponent {
 		return isBefore ? "before" : "after";
 	}
 
-	dispatchArrayMove(fromIndex: number, toIndex: number) {
+	dispatchArrayMove(fromIndex: number, toIndex: number, fromSlug?: string) {
 		this.element.dispatchEvent(
 			new CustomEvent("cloudcannon-api", {
 				bubbles: true,
 				detail: {
 					action: "move-array-item",
+					fromSlug,
 					fromIndex,
 					toIndex,
 				},
@@ -153,13 +176,14 @@ export default class EditableArrayItem extends EditableComponent {
 		);
 	}
 
-	dispatchArrayAdd(newIndex: number, value: unknown) {
+	dispatchArrayAdd(newIndex: number, value: unknown, sourceIndex?: number) {
 		this.element.dispatchEvent(
 			new CustomEvent("cloudcannon-api", {
 				bubbles: true,
 				detail: {
 					action: "add-array-item",
 					newIndex,
+					sourceIndex,
 					value,
 				},
 			}),
@@ -213,6 +237,34 @@ export default class EditableArrayItem extends EditableComponent {
 				this.dispatchEdit(this.element.dataset.prop);
 			});
 
+			this.controlsElement.addEventListener("add", () => {
+				const fromIndex = Number(this.element.dataset.prop);
+				const arrayDirection = this.parent?.arrayDirection ?? "column";
+				const reversed = arrayDirection.endsWith("reverse");
+
+				this.dispatchArrayAdd(
+					reversed ? fromIndex - 1 : fromIndex + 1,
+					undefined,
+					fromIndex,
+				);
+			});
+
+			this.controlsElement.addEventListener("duplicate", async () => {
+				const value = await realizeAPIValue(this.value);
+				const fromIndex = Number(this.element.dataset.prop);
+				const arrayDirection = this.parent?.arrayDirection ?? "column";
+				const reversed = arrayDirection.endsWith("reverse");
+
+				this.dispatchArrayAdd(
+					reversed ? fromIndex - 1 : fromIndex + 1,
+					value,
+					fromIndex,
+				);
+
+				this.controlsElement?.removeAttribute("open");
+				this.element.after(this.element.cloneNode(true));
+			});
+
 			this.controlsElement.addEventListener("move-backward", () => {
 				const fromIndex = Number(this.element.dataset.prop);
 				const arrayDirection = this.parent?.arrayDirection ?? "column";
@@ -249,7 +301,7 @@ export default class EditableArrayItem extends EditableComponent {
 			});
 
 			this.controlsElement.addEventListener("dragstart", (e: DragEvent) => {
-				const source = this.parent?.resolveSource();
+				const source = this.parent?.contextBase?.filePath;
 				if (!source || !e.dataTransfer || !this.element.dataset.prop) {
 					return;
 				}
@@ -261,7 +313,6 @@ export default class EditableArrayItem extends EditableComponent {
 
 				e.dataTransfer.setDragImage(this.element, clientRect.width - 35, 35);
 				e.dataTransfer.effectAllowed = "move";
-				e.dataTransfer?.setData(source, this.element.dataset.prop);
 
 				const id = Math.random().toString(36).slice(2);
 				this.element.id = id;
@@ -279,7 +330,12 @@ export default class EditableArrayItem extends EditableComponent {
 					);
 				}
 
-				e.dataTransfer?.setData(this.getDragType(), JSON.stringify(data));
+				const payload = JSON.stringify(data);
+				e.dataTransfer?.setData(source, payload);
+				const dragType = this.getDragType();
+				if (dragType) {
+					e.dataTransfer?.setData(dragType, payload);
+				}
 			});
 
 			this.updateControls();
@@ -298,6 +354,8 @@ export default class EditableArrayItem extends EditableComponent {
 					(inputConfig as any)?.options?.disable_reorder ?? false;
 				this.controlsElement.disableRemove =
 					(inputConfig as any)?.options?.disable_remove ?? false;
+				this.controlsElement.disableAdd =
+					(inputConfig as any)?.options?.disable_add ?? false;
 
 				this.inputConfig = inputConfig;
 				this.element.append(this.controlsElement);
@@ -313,6 +371,9 @@ export default class EditableArrayItem extends EditableComponent {
 		this.element.ondragover = this.onHover.bind(this);
 
 		this.element.ondragleave = (e: DragEvent): void => {
+			if (!this.isValidDropzone(e)) {
+				return;
+			}
 			e.stopPropagation();
 
 			this.element.classList.remove("dragover");
@@ -320,6 +381,10 @@ export default class EditableArrayItem extends EditableComponent {
 		};
 
 		this.element.ondrop = (e: DragEvent): void => {
+			if (!this.isValidDropzone(e)) {
+				return;
+			}
+
 			this.element.classList.remove("dragover");
 			this.element.style.boxShadow = "";
 
@@ -327,14 +392,16 @@ export default class EditableArrayItem extends EditableComponent {
 				return;
 			}
 
-			const source = this.parent?.resolveSource();
+			const source = this.parent?.contextBase?.filePath;
 			if (!source) {
 				throw new Error("Source not found");
 			}
 
 			const dragType = this.getDragType();
 			const sameArrayData = e.dataTransfer.getData(source);
-			const otherArrayData = e.dataTransfer.getData(dragType);
+			const otherArrayData = dragType
+				? e.dataTransfer.getData(dragType)
+				: undefined;
 
 			const position = this.getDragPosition(e);
 			let newIndex =
@@ -343,20 +410,14 @@ export default class EditableArrayItem extends EditableComponent {
 					: Number(this.element.dataset.prop);
 
 			if (sameArrayData) {
-				const fromIndex = Number(sameArrayData);
+				const { index: fromIndex, sourceId } = JSON.parse(sameArrayData);
+
 				if (fromIndex < newIndex) {
 					newIndex -= 1;
 				}
 
-				e.preventDefault();
-				e.stopPropagation();
-				e.dataTransfer.dropEffect = "move";
-
 				if (fromIndex !== newIndex) {
-					this.dispatchArrayMove(fromIndex, newIndex);
-					const sourceElement = this.parent?.element.querySelector(
-						`[data-prop="${fromIndex}"]`,
-					);
+					const sourceElement = document.getElementById(sourceId);
 					if (sourceElement) {
 						if (position === "after") {
 							this.element.after(sourceElement);
@@ -364,13 +425,14 @@ export default class EditableArrayItem extends EditableComponent {
 							this.element.before(sourceElement);
 						}
 					}
+					this.dispatchArrayMove(fromIndex, newIndex);
 				}
 			} else if (otherArrayData) {
 				const { index, sourceId, value, structure } =
 					JSON.parse(otherArrayData);
 				if (dragType === "cc:structure") {
 					if (!this.inputConfig?.options?.structures?.values) {
-						throw new Error("No structures found");
+						return;
 					}
 
 					const targetStructure = CloudCannon.findStructure(
@@ -378,41 +440,35 @@ export default class EditableArrayItem extends EditableComponent {
 						this.value,
 					);
 					if (!targetStructure) {
-						throw new Error("No target structure found");
+						return;
 					}
 
 					if (JSON.stringify(structure) !== JSON.stringify(targetStructure)) {
-						throw new Error("Structures do not match");
+						return;
 					}
 				}
 
 				const sourceElement = document.getElementById(sourceId);
 				if (sourceElement && hasEditableArrayItem(sourceElement)) {
-					if (Array.isArray(sourceElement.editable.parent?.value)) {
-						sourceElement.editable.parent.value = structuredClone(
-							sourceElement.editable.parent.value,
-						);
-						sourceElement.editable.parent.value.splice(index, 1);
+					const parentValue = this.parent?.value;
+					if (Array.isArray(parentValue)) {
+						parentValue.splice(newIndex, 0, value);
 					}
-					sourceElement.editable.dispatchArrayRemove(index);
+					sourceElement.dataset.prop = `${newIndex}`;
+					const fromSlug = sourceElement.editable.parent?.contextBase?.fullPath;
 					if (position === "after") {
 						this.element.after(sourceElement);
 					} else {
 						this.element.before(sourceElement);
 					}
-					sourceElement.editable.parent?.update();
-				}
-				if (Array.isArray(this.parent?.value)) {
-					this.parent.value = structuredClone(this.parent.value);
-					this.parent.value.splice(newIndex, 0, value);
-				}
-				this.dispatchArrayAdd(newIndex, value);
-				this.parent?.update();
 
-				e.preventDefault();
-				e.stopPropagation();
-				e.dataTransfer.dropEffect = "move";
+					this.dispatchArrayMove(index, newIndex, fromSlug);
+				}
 			}
+
+			e.preventDefault();
+			e.stopPropagation();
+			e.dataTransfer.dropEffect = "move";
 		};
 
 		if (this.value !== undefined) {
@@ -422,6 +478,10 @@ export default class EditableArrayItem extends EditableComponent {
 
 	setupListeners(): void {
 		super.setupListeners();
-		this.parent?.registerListener({ editable: this });
+		if (!this.element.dataset.prop) {
+			this.parent?.registerListener({
+				editable: this,
+			});
+		}
 	}
 }