@cloudcannon/editable-regions 0.0.2

package/nodes/editable-array.ts

@@ -0,0 +1,241 @@
+import type {
+	CloudCannonJavaScriptV1APICollection,
+	CloudCannonJavaScriptV1APIDataset,
+	CloudCannonJavaScriptV1APIFile,
+} from "@cloudcannon/javascript-api";
+import type EditableArrayItemComponent from "../components/editable-array-item-component.js";
+import { hasEditableArrayItem, isEditableElement } from "../helpers/checks.js";
+import { CloudCannon } from "../helpers/cloudcannon.js";
+import type EditableArrayItem from "./editable-array-item.js";
+import Editable from "./editable.js";
+
+const arrayDirectionValues = [
+	"row",
+	"column",
+	"row-reverse",
+	"column-reverse",
+] as const;
+
+export type ArrayDirection = (typeof arrayDirectionValues)[number];
+
+function isArrayDirection(value: unknown): value is ArrayDirection {
+	return arrayDirectionValues.includes(value as ArrayDirection);
+}
+
+export default class EditableArray extends Editable {
+	arrayDirection?: ArrayDirection;
+	value:
+		| CloudCannonJavaScriptV1APICollection
+		| CloudCannonJavaScriptV1APIDataset
+		| unknown[]
+		| null
+		| undefined = undefined;
+
+	validateConfiguration(): boolean {
+		const prop = this.element.dataset.prop;
+		if (typeof prop !== "string") {
+			this.element.classList.add("errored");
+			const error = document.createElement("editable-region-error-card");
+			error.setAttribute("heading", "Failed to render array editable");
+			error.setAttribute("message", "Missing required attribute data-prop");
+			this.element.replaceChildren(error);
+			return false;
+		}
+
+		return true;
+	}
+
+	validateValue(value: unknown): this["value"] {
+		if (
+			!Array.isArray(value) &&
+			value !== null &&
+			!CloudCannon.isAPICollection(value) &&
+			!CloudCannon.isAPIDataset(value)
+		) {
+			this.element.classList.add("errored");
+			const error = document.createElement("editable-region-error-card");
+			error.setAttribute("heading", "Failed to render array editable");
+			error.setAttribute(
+				"message",
+				`Illegal value type: ${typeof value}. Supported types are array.`,
+			);
+			this.element.replaceChildren(error);
+			return;
+		}
+		return value;
+	}
+
+	async update(): Promise<void> {
+		let value: unknown[] | CloudCannonJavaScriptV1APIFile[];
+		if (CloudCannon.isAPICollection(this.value)) {
+			value = await this.value.items();
+		} else if (CloudCannon.isAPIDataset(this.value)) {
+			const items = await this.value.items();
+			if (Array.isArray(items)) {
+				value = items;
+			} else {
+				const data = await items.data.get();
+				value = Array.isArray(data) ? data : [];
+			}
+		} else if (Array.isArray(this.value)) {
+			value = this.value;
+		} else {
+			value = [];
+		}
+
+		const children: (HTMLElement & { editable: EditableArrayItem })[] = [];
+
+		for (const child of this.element.querySelectorAll(
+			"editable-array-item,[data-editable='array-item']",
+		)) {
+			if (!hasEditableArrayItem(child)) {
+				continue;
+			}
+
+			let parent = child.parentElement;
+			while (parent instanceof HTMLElement && !isEditableElement(parent)) {
+				parent = parent.parentElement;
+			}
+
+			if (!parent || ("editable" in parent && parent.editable !== this)) {
+				continue;
+			}
+
+			children.push(child as any);
+		}
+
+		if (!this.element.dataset.idKey) {
+			while (children.length > value.length) {
+				children.pop()?.remove();
+			}
+
+			for (let i = 0; i < value.length; i++) {
+				let child = children[i];
+				if (!child) {
+					child = children[0].cloneNode(true) as HTMLElement & {
+						editable: EditableArrayItem;
+					};
+					this.element.appendChild(child);
+				}
+				child.dataset.prop = `${i}`;
+				child.dataset.length = `${children.length}`;
+				child.editable?.pushValue(value[i]);
+			}
+			return;
+		}
+
+		const key = this.element.dataset.idKey;
+		const componentKey = this.element.dataset.componentKey;
+		const dataKeys: (string | null)[] = [];
+		const componentKeys: (string | null)[] = [];
+		for (const item of value) {
+			let data = item;
+			if (CloudCannon.isAPIFile(item)) {
+				data = await item.data.get();
+			}
+
+			if (data && typeof data === "object" && key) {
+				dataKeys.push(String((data as any)[key]));
+			} else {
+				dataKeys.push(null);
+			}
+
+			if (data && typeof data === "object" && componentKey) {
+				componentKeys.push(String((data as any)[componentKey]));
+			} else {
+				componentKeys.push(null);
+			}
+		}
+
+		const childKeys = children.map((element) => {
+			return element.dataset.id;
+		});
+
+		const equal = dataKeys?.every((key, i) => key === childKeys[i]);
+		if (equal && children.length === dataKeys?.length) {
+			children.forEach((child, index) => {
+				child.dataset.prop = `${index}`;
+				child.editable.pushValue(value[index]);
+			});
+			return;
+		}
+
+		const placeholders = children.map((child) => {
+			const placeholder = document.createElement("array-placeholder");
+			child.after(placeholder);
+			return placeholder;
+		});
+
+		const moved: Record<number, boolean> = {};
+
+		dataKeys?.forEach((key, i) => {
+			if (!key) {
+				return;
+			}
+			const placeholder = placeholders[i];
+			const existingElement = children[i];
+			const matchingChildIndex = children.findIndex(
+				(child, i) => child.dataset.id === key && !moved[i],
+			);
+
+			let matchingChild = children[matchingChildIndex];
+			if (!matchingChild) {
+				const clone = children.find((child) => child.dataset.id === key);
+				if (clone) {
+					matchingChild = clone.cloneNode(true) as any;
+				} else {
+					matchingChild = document.createElement(
+						"editable-array-item",
+					) as EditableArrayItemComponent;
+					matchingChild.dataset.id = key;
+
+					if (componentKeys[i]) {
+						matchingChild.dataset.component = componentKeys[i];
+					}
+				}
+			} else {
+				moved[matchingChildIndex] = true;
+			}
+
+			matchingChild.dataset.id = String(key);
+			matchingChild.dataset.prop = `${i}`;
+
+			if (existingElement === matchingChild) {
+				placeholder.remove();
+			} else if (placeholder) {
+				placeholder.replaceWith(matchingChild);
+			} else {
+				this.element.appendChild(matchingChild);
+			}
+
+			matchingChild.editable.parent = this;
+			matchingChild.editable.pushValue(value[i]);
+		});
+
+		children.forEach((child, i) => {
+			if (!moved[i]) {
+				child.remove();
+			}
+		});
+	}
+
+	calculateArrayDirection(): ArrayDirection {
+		if (isArrayDirection(this.element.dataset.direction)) {
+			return this.element.dataset.direction;
+		}
+
+		const computedStyles = getComputedStyle(this.element);
+		if (
+			computedStyles.display === "flex" &&
+			isArrayDirection(computedStyles.flexDirection)
+		) {
+			return computedStyles.flexDirection;
+		}
+
+		return "column";
+	}
+
+	mount(): void {
+		this.arrayDirection = this.calculateArrayDirection();
+	}
+}

package/nodes/editable-component.ts

@@ -0,0 +1,273 @@
+import {
+	areEqualEditables,
+	areEqualNodes,
+	hasEditable,
+	hasEditableText,
+	isEditableElement,
+	isEditableText,
+} from "../helpers/checks.js";
+import Editable from "./editable.js";
+import "../components/ui/editable-region-error-card.js";
+import "../components/ui/editable-component-controls.js";
+import type EditableComponentControls from "../components/ui/editable-component-controls.js";
+import {
+	CloudCannon,
+	getEditableComponentRenderers,
+} from "../helpers/cloudcannon.js";
+
+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 default class EditableComponent extends Editable {
+	protected controlsElement?: EditableComponentControls;
+
+	getComponents() {
+		return getEditableComponentRenderers();
+	}
+
+	validateConfiguration(): boolean {
+		const key = this.element.dataset.component;
+		if (!key) {
+			this.element.classList.add("errored");
+			const error = document.createElement("editable-region-error-card");
+			error.setAttribute("heading", "Failed to render component");
+			error.setAttribute(
+				"message",
+				"Component key(data-component) not provided",
+			);
+			this.element.replaceChildren(error);
+			return false;
+		}
+
+		return true;
+	}
+
+	async update(): Promise<void> {
+		this.element.classList.remove("errored");
+
+		const key = this.element.dataset.component;
+		if (!key) {
+			return super.update();
+		}
+		const component = this.getComponents()?.[key];
+		if (!component) {
+			return super.update();
+		}
+
+		const value = await realizeAPIValue(this.value);
+		if (value && typeof value === "object" && !Array.isArray(value)) {
+			for (const key of Object.keys(value)) {
+				(value as any)[key] = await realizeAPIValue((value as any)[key]);
+			}
+		}
+
+		let rootEl: HTMLElement;
+		try {
+			rootEl = await component(this.value);
+		} catch (err: unknown) {
+			this.element.classList.add("errored");
+			const error = document.createElement("editable-region-error-card");
+			error.setAttribute("heading", `Failed to render component: ${key}`);
+			error.error = err;
+			this.element.replaceChildren(error);
+			return;
+		}
+
+		const child = rootEl.firstElementChild;
+		if (
+			child instanceof HTMLElement &&
+			"editable" in child &&
+			child.editable instanceof EditableComponent &&
+			child.dataset.component === key
+		) {
+			rootEl = child;
+		}
+
+		if (this.controlsElement) {
+			this.controlsElement.remove();
+		}
+		this.updateTree(this.element, rootEl);
+		if (this.controlsElement) {
+			this.element.appendChild(this.controlsElement);
+		}
+	}
+
+	updateTree(
+		targetNode?: ChildNode | null,
+		renderNode?: ChildNode | null,
+	): void {
+		let targetChild: ChildNode | null | undefined =
+			targetNode?.firstChild ?? undefined;
+		let renderChild: 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)
+			) {
+				targetChild.before(renderChild);
+				renderChild = nextRenderChild;
+				continue;
+			}
+
+			if (
+				renderChild instanceof Element &&
+				targetChild &&
+				!(targetChild instanceof Element)
+			) {
+				targetChild.remove();
+				targetChild = nextTargetChild;
+				continue;
+			}
+
+			if (
+				renderChild &&
+				targetChild &&
+				!(renderChild instanceof Element) &&
+				!(targetChild instanceof Element)
+			) {
+				targetChild.nodeValue = renderChild.nodeValue;
+			} else if (
+				targetChild instanceof HTMLElement &&
+				renderChild instanceof HTMLElement &&
+				isEditableElement(renderChild) &&
+				isEditableElement(targetChild)
+			) {
+				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, listener);
+							}
+						}
+					} else if (hasEditable(targetChild)) {
+						for (let i = 0; i < this.listeners.length; i++) {
+							const listener = this.listeners[i];
+							if (listener.editable.element === targetChild) {
+								targetChild.editable.pushValue(this.value, listener);
+							}
+						}
+					}
+				} else if (hasEditable(targetChild)) {
+					for (let i = 0; i < this.listeners.length; i++) {
+						const listener = this.listeners[i];
+						if (listener.editable.element === targetChild) {
+							targetChild.editable.pushValue(this.value, listener);
+						}
+					}
+				}
+			} else if (renderChild && targetChild) {
+				if (
+					!areEqualNodes(targetChild, renderChild) ||
+					isEditableElement(renderChild) ||
+					isEditableElement(targetChild)
+				) {
+					targetChild.replaceWith(renderChild);
+				} else {
+					this.updateTree(targetChild, renderChild);
+				}
+			} else if (renderChild) {
+				targetNode?.appendChild(renderChild);
+			} else if (targetChild) {
+				targetNode?.removeChild(targetChild);
+			}
+
+			targetChild = nextTargetChild;
+			renderChild = nextRenderChild;
+		}
+	}
+
+	dispatchEdit(source?: string) {
+		this.element.dispatchEvent(
+			new CustomEvent("cloudcannon-api", {
+				bubbles: true,
+				detail: { action: "edit", source },
+			}),
+		);
+	}
+
+	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;
+			Object.entries(this.element.dataset).forEach(([propName, propPath]) => {
+				if (!propName.startsWith("prop")) {
+					return;
+				}
+
+				if (typeof editPath !== "string") {
+					editPath = propPath;
+					return;
+				}
+
+				while (!propPath?.startsWith(editPath)) {
+					editPath = editPath?.replace(/(\.|^)[^.]*$/, "");
+				}
+			});
+
+			editPath ||= this.element.dataset.prop;
+			editPath ||= Object.entries(this.element.dataset).find(([propName]) =>
+				propName.startsWith("prop"),
+			)?.[1];
+
+			if (editPath) {
+				this.controlsElement = document.createElement(
+					"editable-component-controls",
+				);
+				this.controlsElement.addEventListener("edit", (e: any) => {
+					this.dispatchEdit(editPath);
+				});
+				this.element.append(this.controlsElement);
+			}
+
+			this.update();
+		}
+	}
+}