@cloudcannon/editable-regions 0.0.2

package/nodes/editable-image.ts

@@ -0,0 +1,253 @@
+import { CloudCannon } from "../helpers/cloudcannon.js";
+import Editable from "./editable.js";
+
+export default class EditableImage extends Editable {
+	value: { src?: string; alt?: string; title?: string } | null | undefined =
+		undefined;
+	inputConfig: { src?: any; alt?: any; title?: any } = {};
+	imageEl?: HTMLImageElement;
+
+	configuredSrc = false;
+	configuredAlt = false;
+	configuredTitle = false;
+
+	displayError(heading: string, message: string) {
+		this.element.classList.add("errored");
+		const error = document.createElement("editable-region-error-card");
+		error.setAttribute("heading", heading);
+		error.setAttribute("message", message);
+		if (this.imageEl) {
+			this.imageEl?.replaceWith(error);
+		} else {
+			this.element.replaceChildren(error);
+		}
+	}
+
+	validateConfiguration(): boolean {
+		const child =
+			this.element instanceof HTMLImageElement
+				? this.element
+				: this.element.querySelector("img");
+
+		if (!(child instanceof HTMLImageElement)) {
+			this.displayError(
+				"Failed to render image editable region",
+				"Image editable region requires an image element as its child.",
+			);
+			return false;
+		}
+
+		this.imageEl = child;
+
+		if (
+			this.element.dataset.prop === undefined &&
+			this.element.dataset.propSrc === undefined &&
+			this.element.dataset.propAlt === undefined &&
+			this.element.dataset.propTitle === undefined
+		) {
+			this.displayError(
+				"Failed to render image editable region",
+				"Atleast one of data-prop, data-prop-src, data-prop-alt, or data-prop-title is required.",
+			);
+			return false;
+		}
+		return true;
+	}
+
+	validateValue(value: unknown): this["value"] {
+		if (typeof value !== "object") {
+			this.displayError(
+				"Failed to render image editable region",
+				`Illegal value type: ${typeof value}. Supported types are object.`,
+			);
+			return;
+		}
+
+		if (value === null) {
+			return value;
+		}
+
+		if ("src" in value && typeof value.src !== "string" && value.src !== null) {
+			this.displayError(
+				"Failed to render image editable region",
+				`Illegal value type for "src": ${typeof value.src}. Supported types are string.`,
+			);
+			return;
+		}
+
+		if ("alt" in value && typeof value.alt !== "string" && value.alt !== null) {
+			this.displayError(
+				"Failed to render image editable region",
+				`Illegal value type for "alt": ${typeof value.alt}. Supported types are string.`,
+			);
+			return;
+		}
+
+		if (
+			"title" in value &&
+			typeof value.title !== "string" &&
+			value.title !== null
+		) {
+			this.displayError(
+				"Failed to render image editable region",
+				`Illegal value type for "title": ${typeof value.title}. Supported types are string.`,
+			);
+			return;
+		}
+
+		const unexpectedKey = Object.keys(value).find(
+			(key) => key !== "src" && key !== "alt" && key !== "title",
+		);
+
+		if (unexpectedKey) {
+			this.displayError(
+				"Failed to render image editable region",
+				`Unexpected key "${unexpectedKey}" in image editable region. Supported keys are "src", "alt", and "title".`,
+			);
+			return;
+		}
+
+		return value;
+	}
+
+	async update(): Promise<void> {
+		if (!this.imageEl) {
+			throw new Error("Element is not an HTMLImageElement");
+		}
+
+		if (this.configuredSrc && this.imageEl.src !== this.value?.src) {
+			const previewUrl = await CloudCannon.getPreviewUrl(
+				this.value?.src ?? "",
+				this.inputConfig.src,
+			);
+			this.imageEl.src = previewUrl;
+			const parent = this.imageEl.parentElement;
+			if (parent instanceof HTMLPictureElement) {
+				for (const sourceEl of parent.children) {
+					if (sourceEl instanceof HTMLSourceElement) {
+						sourceEl.src = previewUrl;
+						sourceEl.srcset = previewUrl;
+					}
+				}
+			}
+		}
+
+		if (this.configuredAlt && this.imageEl.alt !== this.value?.alt) {
+			this.imageEl.alt = this.value?.alt ?? "";
+		}
+
+		if (this.configuredTitle && this.imageEl.title !== this.value?.title) {
+			this.imageEl.title = this.value?.title ?? "";
+		}
+	}
+
+	async loadInputConfig(): Promise<void> {
+		this.inputConfig = {};
+		if (this.configuredSrc) {
+			this.inputConfig.src = await this.dispatchGetInputConfig(
+				this.element.dataset.propSrc ?? `${this.element.dataset.prop}.src`,
+			);
+		}
+		if (this.configuredAlt) {
+			this.inputConfig.alt = await this.dispatchGetInputConfig(
+				this.element.dataset.propAlt ?? `${this.element.dataset.prop}.alt`,
+			);
+		}
+		if (this.configuredTitle) {
+			this.inputConfig.title = await this.dispatchGetInputConfig(
+				this.element.dataset.propTitle ?? `${this.element.dataset.prop}.title`,
+			);
+		}
+	}
+
+	mount(): void {
+		this.configuredSrc =
+			!!this.element.dataset.propSrc || !!this.element.dataset.prop;
+		this.configuredAlt =
+			!!this.element.dataset.propAlt || !!this.element.dataset.prop;
+		this.configuredTitle =
+			!!this.element.dataset.propTitle || !!this.element.dataset.prop;
+
+		this.loadInputConfig().then(() => {
+			this.imageEl?.addEventListener("click", () => {
+				if (!this.value) {
+					throw new Error("Value is not defined");
+				}
+
+				const data: this["value"] = {};
+				if ("src" in this.value) {
+					data.src = this.value.src;
+				}
+				if ("alt" in this.value) {
+					data.alt = this.value.alt;
+				}
+				if ("title" in this.value) {
+					data.title = this.value.title;
+				}
+
+				CloudCannon.createCustomDataPanel({
+					title: "Edit Image",
+					data,
+					position: this.imageEl?.getBoundingClientRect(),
+					config: {
+						_inputs: {
+							src: {
+								label: "Image",
+								type: "image",
+								...this.inputConfig.src,
+							},
+							alt: {
+								comment:
+									"A description which provides information about this image if for some reason it cannot be viewed.",
+								...this.inputConfig.alt,
+							},
+							title: {
+								comment: "Displayed when hovering over the image.",
+								...this.inputConfig.title,
+							},
+						},
+					},
+					onChange: (value): void => {
+						if (!value || typeof value !== "object") {
+							throw new Error("Invalid image data");
+						}
+
+						if (
+							"src" in value &&
+							this.configuredSrc &&
+							value.src !== this.value?.src
+						) {
+							this.dispatchSet(
+								this.element.dataset.propSrc ??
+									`${this.element.dataset.prop}.src`,
+								value.src,
+							);
+						}
+						if (
+							"alt" in value &&
+							this.configuredAlt &&
+							value.alt !== this.value?.alt
+						) {
+							this.dispatchSet(
+								this.element.dataset.propAlt ??
+									`${this.element.dataset.prop}.alt`,
+								value.alt,
+							);
+						}
+						if (
+							"title" in value &&
+							this.configuredTitle &&
+							value.title !== this.value?.title
+						) {
+							this.dispatchSet(
+								this.element.dataset.propTitle ??
+									`${this.element.dataset.prop}.title`,
+								value.title,
+							);
+						}
+					},
+				});
+			});
+		});
+	}
+}

package/nodes/editable-snippet.ts

@@ -0,0 +1,148 @@
+import { getEditableSnippetRenderers } from "../helpers/cloudcannon.js";
+import EditableComponent from "./editable-component.js";
+import Editable from "./editable.js";
+
+export default class EditableSnippet extends EditableComponent {
+	getComponents() {
+		return getEditableSnippetRenderers();
+	}
+
+	setupListeners(): void {
+		this.element.addEventListener("cloudcannon-api", async (e: any) => {
+			if (e.target !== this.element) {
+				if (!e.detail.source) {
+					e.detail.source = `@snippet[${this.element.getAttribute("data-cms-snippet-id")}]`;
+				} else {
+					e.detail.source = `@snippet[${this.element.getAttribute("data-cms-snippet-id")}].${e.detail.source}`;
+				}
+			}
+
+			const { absolute, snippets } = this.parseSource(e.detail.source);
+			if (!this.parent || absolute || snippets) {
+				if (this.executeApiCall(e.detail)) {
+					e.stopPropagation();
+				}
+			}
+		});
+	}
+
+	validateValue(value: unknown): unknown {
+		if (typeof value !== "object") {
+			return;
+		}
+
+		if (!value) {
+			return value;
+		}
+
+		if (
+			!("_snippet_type" in value) ||
+			typeof value._snippet_type !== "string"
+		) {
+			return;
+		}
+
+		this.element.dataset.component = value._snippet_type;
+
+		return value;
+	}
+
+	executeApiCall(options: any): boolean {
+		const { snippets, source } = this.parseSource(options.source);
+
+		if (options.action === "get-input-config") {
+			return false;
+		}
+
+		const snippet = snippets.pop();
+
+		if (
+			snippet &&
+			snippet !== this.element.getAttribute("data-cms-snippet-id")
+		) {
+			const snippetEl = document.querySelector(
+				`[data-cms-snippet-id="${snippet}"]`,
+			);
+			if (
+				!snippetEl ||
+				!("editable" in snippetEl) ||
+				!(snippetEl.editable instanceof Editable)
+			) {
+				console.error(`Error: Snippet with ID "${snippet}" not found`);
+				return false;
+			}
+			return snippetEl.editable.executeApiCall({
+				...options,
+				source,
+			});
+		}
+
+		if (source) {
+			this.dispatchSnippetChange(source, options);
+		}
+		return true;
+	}
+
+	async dispatchSnippetChange(source: string, options: any) {
+		switch (options.action) {
+			case "edit":
+				break;
+			case "set": {
+				const parts = source.split(".");
+				const lastPart = parts.pop();
+				const temp = await this.lookupPath(parts.join("."), this.value);
+
+				if (lastPart && temp && typeof temp === "object") {
+					temp[lastPart] = options.value;
+				}
+				break;
+			}
+			case "move-array-item": {
+				const temp = await this.lookupPath(source, this.value);
+				if (Array.isArray(temp)) {
+					const value = temp.splice(options.fromIndex, 1)[0];
+					temp.splice(options.toIndex, 0, value);
+				}
+				break;
+			}
+			case "remove-array-item": {
+				const temp = await this.lookupPath(source, this.value);
+				if (Array.isArray(temp)) {
+					temp.splice(options.fromIndex, 1);
+				}
+				break;
+			}
+			case "add-array-item": {
+				const temp = await this.lookupPath(source, this.value);
+				if (Array.isArray(temp)) {
+					temp.splice(options.toIndex, 0, options.value);
+				}
+
+				break;
+			}
+		}
+
+		this.element.dispatchEvent(
+			new CustomEvent("snippet-change", {
+				detail: {
+					snippetId: this.element.getAttribute("data-cms-snippet-id"),
+					isValid: true,
+					snippetData: this.value,
+				},
+				bubbles: true,
+			}),
+		);
+	}
+
+	mount(): void {}
+
+	validateConfiguration(): boolean {
+		return true;
+	}
+
+	resolveSource(source?: string): string | undefined {
+		return this.parent
+			? `${this.parent.resolveSource()}.@snippet[${this.element.getAttribute("data-cms-snippet-id")}].${source}`
+			: `@snippet[${this.element.getAttribute("data-cms-snippet-id")}].${source}`;
+	}
+}

package/nodes/editable-source.ts

@@ -0,0 +1,245 @@
+import type { CloudCannonJavaScriptV1APIFile } from "@cloudcannon/javascript-api";
+import { html as beautifyHtml } from "js-beautify";
+import { CloudCannon } from "../helpers/cloudcannon.js";
+import EditableText from "./editable-text.js";
+
+const INDENTATION_REGEX = /^([ \t]+)[^\s]/gm;
+const TAG_REGEX =
+	/<\s*(?<closing>\/?)\s*(?<tagname>[-a-z]+)(\s+[^>]+)*?\s*(?<selfclosing>\/?)\s*>/gi;
+
+const HTML_VOID_ELEMENT: Record<string, boolean> = {
+	area: true,
+	base: true,
+	br: true,
+	col: true,
+	embed: true,
+	hr: true,
+	img: true,
+	input: true,
+	link: true,
+	meta: true,
+	param: true,
+	source: true,
+	track: true,
+	wbr: true,
+};
+
+export default class EditableSource extends EditableText {
+	file?: CloudCannonJavaScriptV1APIFile;
+	format = {
+		leading: "",
+		trailing: "",
+		indent: "",
+		indentSize: 0,
+		indentChar: "",
+	};
+
+	setupListeners(): void {
+		if (!this.element.dataset.path) {
+			return;
+		}
+		this.file = CloudCannon.file(this.element.dataset.path);
+		this.file.addEventListener("change", () => {
+			this.file?.get().then(this.pushValue.bind(this));
+		});
+		this.file.get().then(this.pushValue.bind(this));
+	}
+
+	validateConfiguration(): boolean {
+		const path = this.element.dataset.path;
+		if (typeof path !== "string") {
+			this.element.classList.add("errored");
+			const error = document.createElement("editable-region-error-card");
+			error.setAttribute("heading", "Failed to render source editable region");
+			error.setAttribute("message", "Missing required attribute data-path");
+			this.element.replaceChildren(error);
+			return false;
+		}
+
+		const key = this.element.dataset.key;
+		if (typeof key !== "string") {
+			this.element.classList.add("errored");
+			const error = document.createElement("editable-region-error-card");
+			error.setAttribute("heading", "Failed to render source editable region");
+			error.setAttribute("message", "Missing required attribute data-key");
+			this.element.replaceChildren(error);
+			return false;
+		}
+		return true;
+	}
+
+	validateValue(value: unknown): string | null | undefined {
+		if (typeof value !== "string" && value !== null) {
+			this.element.classList.add("errored");
+			const error = document.createElement("editable-region-error-card");
+			error.setAttribute("heading", "Failed to render source editable region");
+			error.setAttribute(
+				"message",
+				`Illegal value type: ${typeof value}. Supported types are string.`,
+			);
+			this.element.replaceChildren(error);
+			return;
+		}
+
+		if (typeof value === "string") {
+			const keyIndex = value.indexOf(`data-key="${this.element.dataset.key}"`);
+			if (keyIndex === -1) {
+				this.element.classList.add("errored");
+				const error = document.createElement("editable-region-error-card");
+				error.setAttribute(
+					"heading",
+					"Failed to render source editable region",
+				);
+				error.setAttribute(
+					"message",
+					"Failed to find element with matching data-key attribute",
+				);
+				this.element.replaceChildren(error);
+				return;
+			}
+
+			const nextKeyIndex = value.indexOf(
+				`data-key="${this.element.dataset.key}"`,
+				keyIndex + 1,
+			);
+			if (nextKeyIndex !== -1) {
+				this.element.classList.add("errored");
+				const error = document.createElement("editable-region-error-card");
+				error.setAttribute(
+					"heading",
+					"Failed to render source editable region",
+				);
+				error.setAttribute(
+					"message",
+					"Found duplicate data-key attribute. Make sure all source editables have unique data-key attributes",
+				);
+				this.element.replaceChildren(error);
+				return;
+			}
+		}
+
+		return value;
+	}
+
+	getSourceIndices(source: string): { start: number; end: number } {
+		const keyIndex = source.indexOf(`data-key="${this.element.dataset.key}"`);
+		let tagNameIndex = keyIndex;
+		while (tagNameIndex >= 0 && source[tagNameIndex] !== "<") {
+			tagNameIndex -= 1;
+		}
+
+		const stack = [
+			source.substring(tagNameIndex + 1, source.indexOf(" ", tagNameIndex)),
+		];
+
+		const start = source.indexOf(">", keyIndex);
+		source = source.substring(start + 1);
+
+		for (const tagMatch of source.matchAll(TAG_REGEX)) {
+			if (!tagMatch?.groups) {
+				continue;
+			}
+
+			const { closing, tagname, selfclosing } = tagMatch.groups;
+			if (closing) {
+				while (stack.length > 0) {
+					if (stack.pop() === tagname) {
+						break;
+					}
+				}
+			} else if (!selfclosing && !HTML_VOID_ELEMENT[tagname]) {
+				stack.push(tagname);
+			}
+
+			if (stack.length === 0) {
+				return { start: start + 1, end: start + 1 + tagMatch.index };
+			}
+		}
+
+		return { start: start + 1, end: start + 1 + source.length };
+	}
+
+	update(): void {
+		if (!this.value) {
+			return;
+		}
+		const source = this.value;
+		for (const indentation of source.matchAll(INDENTATION_REGEX)) {
+			if (
+				!this.format.indentSize ||
+				indentation[1].length < this.format.indentSize
+			) {
+				this.format.indentSize = indentation[1].length;
+				this.format.indentChar = indentation[0][0];
+			}
+		}
+
+		const { start, end } = this.getSourceIndices(source);
+		const content = source.substring(start, end);
+
+		this.format.leading = content.match(/^(\s*\n)[^\n]*?\S/)?.[1] ?? "";
+		this.format.trailing = content.match(/\S(\n\s*)$/)?.[1] ?? "";
+		this.format.indent =
+			content
+				.split("\n")
+				.filter((line) => line.trim().length > 0)
+				.reduce((acc: string | null, line) => {
+					if (typeof acc !== "string" || !line.startsWith(acc)) {
+						return line.match(/^\s*/)?.[0] ?? "";
+					}
+
+					return acc;
+				}, null) ?? "";
+
+		this.editor?.setContent(content);
+	}
+
+	async mountEditor(): Promise<any> {
+		if (this.editor) {
+			return this.editor;
+		}
+
+		this.editor = await CloudCannon.createTextEditableRegion(
+			this.element,
+			this.onChange.bind(this),
+			{
+				elementType: this.element.dataset.type,
+				editableType: "content",
+				inputConfig: { type: "html" },
+			},
+		);
+
+		if (typeof this.value === "string") {
+			this.update();
+		}
+
+		return this.editor;
+	}
+
+	onChange(value?: string | null) {
+		this.file?.get().then((source) => {
+			value = beautifyHtml(value ?? "", {
+				indent_char: this.format.indentChar,
+				indent_size: this.format.indentSize,
+			});
+
+			const { start, end } = this.getSourceIndices(source);
+			const content =
+				source.substring(0, start) +
+				this.format.leading +
+				value
+					.split("\n")
+					.map((line) => this.format.indent + line)
+					.join("\n") +
+				this.format.trailing +
+				source.substring(end);
+
+			if (content === this.value) {
+				return;
+			}
+
+			this.value = content;
+			this.file?.set(content);
+		});
+	}
+}