@cloudcannon/editable-regions 0.0.12 → 0.0.13

package/integrations/astro/modules/content.js

@@ -36,7 +36,7 @@ export const getCollection = async (collectionKey, filter) => {
 			render: () => ({
 				Content: () => body ?? "Content is not available when live editing",
 				headings: [],
-				remarkPluginFrontmatter: {},
+				remarkPluginFrontmatter: data ?? {},
 			}),
 		};
 	});
@@ -109,7 +109,7 @@ export const getEntryBySlug = (collection, slug) => {
 export const render = async (entry) => ({
 	Content: () => entry?.body ?? "Content is not available when live editing",
 	headings: [],
-	remarkPluginFrontmatter: {},
+	remarkPluginFrontmatter: entry?.data ?? {},
 });
 
 export const defineCollection = () =>

package/integrations/eleventy.mjs

@@ -0,0 +1,294 @@
+import fs from "node:fs";
+import path from "node:path";
+import esbuild from "esbuild";
+import { createBindIncludeTag } from "./liquid/index.mjs";
+
+/**
+ * @typedef {Object} ComponentRegistration
+ * @property {string} name - Component name
+ * @property {string} file - Path to component file
+ */
+
+/**
+ * @typedef {Object} LiquidOptions
+ * @property {string[]} [componentDirs] - Defaults to Eleventy's configured directories.includes
+ * @property {string[]} [extensions] - Defaults to [".liquid", ".html"]
+ * @property {string[]} [ignoreDirectories] - Directory names to skip (e.g., ["_drafts", "node_modules"])
+ * @property {ComponentRegistration[]} [components] - Registered components
+ * @property {ComponentRegistration[]} [filters] - Custom Liquid filters
+ * @property {ComponentRegistration[]} [shortcodes] - Custom shortcodes
+ * @property {ComponentRegistration[]} [pairedShortcodes] - Custom paired shortcodes
+ * @property {ComponentRegistration[]} [tags] - Custom tags
+ */
+
+/**
+ * @typedef {Object} PluginOptions
+ * @property {string} [output] - Output path for live-editing.js
+ * @property {boolean} [verbose] - Enable verbose browser logging
+ * @property {LiquidOptions} [liquid] - Liquid template options
+ */
+
+/**
+ * @typedef {Object} EleventyDirectories
+ * @property {string} input - Input directory
+ * @property {string} includes - Includes directory (normalized, relative to project root)
+ * @property {string} data - Data directory
+ * @property {string} output - Output directory
+ */
+
+/**
+ * @typedef {Object} EleventyConfig
+ * @property {function(string, function): void} addLiquidTag - Register a custom Liquid tag
+ * @property {function(string, function({ directories: EleventyDirectories }): Promise<void>): void} on - Register an event handler
+ * @property {EleventyDirectories} dir - Directory configuration
+ */
+
+/**
+ * Eleventy plugin for CloudCannon editable regions.
+ * Registers Liquid tags and builds live-editing client bundle.
+ *
+ * @param {EleventyConfig} eleventyConfig - Eleventy configuration object
+ * @param {PluginOptions} pluginOptions - Plugin configuration options
+ * @returns {void}
+ */
+export default function (eleventyConfig, pluginOptions) {
+	if (pluginOptions.liquid) {
+		eleventyConfig.addLiquidTag("bind_include", createBindIncludeTag);
+	}
+
+	eleventyConfig.on("eleventy.before", async ({ directories }) => {
+		const liveEditingSource = createLiveEditingSource(
+			pluginOptions,
+			directories,
+		);
+
+		// Build dynamic loader config from extensions
+		// esbuild only looks at the final extension, so .bookshop.liquid -> .liquid
+		/** @type {Record<string, import('esbuild').Loader>} */
+		const loader = {};
+		const extensions = pluginOptions.liquid?.extensions ?? [".liquid", ".html"];
+		extensions.forEach((ext) => {
+			const normalized = ext.startsWith(".") ? ext : `.${ext}`;
+			// Extract the final extension (e.g., ".bookshop.liquid" -> ".liquid")
+			const lastDotIndex = normalized.lastIndexOf(".");
+			loader[normalized.slice(lastDotIndex)] = "text";
+		});
+
+		await esbuild.build({
+			stdin: {
+				contents: await liveEditingSource,
+				resolveDir: process.cwd(),
+			},
+			loader,
+			bundle: true,
+			outfile: pluginOptions.output ?? `${directories.output}/live-editing.js`,
+		});
+	});
+}
+
+/**
+ * Creates the JavaScript source code for the live-editing client bundle.
+ * Generates imports for components, filters, shortcodes, and tags.
+ *
+ * @param {PluginOptions} pluginOptions - Plugin configuration options
+ * @param {EleventyDirectories} directories - Eleventy directory configuration
+ * @returns {Promise<string>} Generated JavaScript source code
+ */
+const createLiveEditingSource = async (pluginOptions, directories) => {
+	let source = "";
+
+	if (pluginOptions.liquid) {
+		const componentDirs = pluginOptions.liquid.componentDirs ?? [
+			directories.includes,
+			directories.input,
+		];
+		const extensions = pluginOptions.liquid.extensions ?? [".liquid", ".html"];
+		const ignoreDirectories = pluginOptions.liquid.ignoreDirectories ?? [
+			directories.output,
+			"node_modules",
+		];
+
+		const normalizedExtensions = extensions.map((ext) =>
+			ext.startsWith(".") ? ext.toLowerCase() : `.${ext.toLowerCase()}`,
+		);
+		const normalizedIgnoreDirs = ignoreDirectories.map((dir) =>
+			dir.toLowerCase(),
+		);
+
+		source += `		
+      import { createSharedLiquidEngine, registerLiquidComponent, registerCustomFilter, registerCustomShortcode, registerCustomPairedShortcode, registerCustomTag, setVerbose } from '@cloudcannon/editable-regions/liquid';
+
+      setVerbose(${Boolean(pluginOptions.verbose)});
+      
+			// Configure the Liquid engine with component directories
+			createSharedLiquidEngine({
+				root: ${JSON.stringify(componentDirs)},
+				extname: ".liquid",
+				strictFilters: true,
+			});
+    
+    	window.cc_files = {};
+  `;
+
+		// Add files we'll need to window.cc_files -
+		// Then in our liquid file system we can grab them from window.cc_files during readFile
+		let i = 0;
+		const allLiquidFiles = await findAllLiquidFiles(
+			componentDirs,
+			normalizedExtensions,
+			normalizedIgnoreDirs,
+		);
+		allLiquidFiles.forEach((path) => {
+			const id = `liquidFile_${i++}`;
+			source += `import ${id} from "./${path}";
+
+      window.cc_files["${path}"] = ${id};
+      `;
+		});
+
+		// Register custom filters
+		const customFilters = pluginOptions.liquid?.filters;
+		if (customFilters?.length) {
+			let filterIdx = 0;
+			for (const { name, file } of customFilters) {
+				const filterName = `customFilter_${filterIdx++}`;
+				source += `  
+          import ${filterName} from "./${file}";
+          registerCustomFilter("${name}", ${filterName});
+        `;
+			}
+		}
+
+		// Register custom shortcodes
+		const customShortcodes = pluginOptions.liquid?.shortcodes;
+		if (customShortcodes?.length) {
+			let shortcodeIdx = 0;
+			for (const { name, file } of customShortcodes) {
+				const shortcodeName = `customShortcode_${shortcodeIdx++}`;
+				source += `  
+          import ${shortcodeName} from "./${file}";
+          registerCustomShortcode("${name}", ${shortcodeName});
+        `;
+			}
+		}
+
+		// Register custom paired shortcodes
+		const customPairedShortcodes = pluginOptions.liquid?.pairedShortcodes;
+		if (customPairedShortcodes?.length) {
+			let pairedIdx = 0;
+			for (const { name, file } of customPairedShortcodes) {
+				const pairedShortcodeName = `customPairedShortcode_${pairedIdx++}`;
+				source += `  
+          import ${pairedShortcodeName} from "./${file}";
+          registerCustomPairedShortcode("${name}", ${pairedShortcodeName});
+        `;
+			}
+		}
+
+		// Register custom tags
+		const tags = pluginOptions.liquid?.tags;
+		if (tags?.length) {
+			let tagIdx = 0;
+			for (const { name, file } of tags) {
+				const tagName = `tag_${tagIdx++}`;
+				source += `  
+          import ${tagName} from "./${file}";
+          registerCustomTag("${name}", ${tagName});
+        `;
+			}
+		}
+
+		// Register components
+		let componentIdx = 0;
+		pluginOptions.liquid?.components?.forEach(({ name, file }) => {
+			const componentName = `customComponent_${componentIdx++}`;
+
+			source += `
+        import ${componentName} from "./${file}";
+        registerLiquidComponent("${name}", ${componentName});
+      `;
+		});
+	}
+	return source;
+};
+
+/**
+ * Find all component files across multiple directories.
+ *
+ * @param {string[]} componentDirs - Directories to search
+ * @param {string[]} extensions - File extensions to match
+ * @param {string[]} ignoreDirectories - Directory names to skip
+ * @returns {Promise<string[]>} Array of file paths
+ */
+async function findAllLiquidFiles(
+	componentDirs,
+	extensions,
+	ignoreDirectories,
+) {
+	const allFiles = [];
+
+	for (const dir of componentDirs) {
+		const files = await findFilesInDirectory({
+			directory: dir,
+			extensions,
+			ignoreDirectories,
+		});
+
+		allFiles.push(...files);
+	}
+	return allFiles;
+}
+
+/**
+ * Recursively find all matching files in a single directory.
+ *
+ * @param {Object} options - Search options
+ * @param {string} options.directory - Directory to search
+ * @param {string[]} [options.extensions] - File extensions to match
+ * @param {string[]} [options.ignoreDirectories] - Directory names to skip
+ * @returns {Promise<string[]>} Array of file paths
+ */
+async function findFilesInDirectory({
+	directory,
+	extensions = [".html", ".liquid"],
+	ignoreDirectories = [],
+}) {
+	const files = [];
+
+	try {
+		const entries = await fs.promises.readdir(directory, {
+			withFileTypes: true,
+		});
+
+		for (const entry of entries) {
+			const fullPath = path.join(directory, entry.name);
+
+			if (entry.isDirectory()) {
+				if (ignoreDirectories.includes(entry.name.toLowerCase())) {
+					continue;
+				}
+				const subFiles = await findFilesInDirectory({
+					directory: fullPath,
+					extensions,
+					ignoreDirectories,
+				});
+				files.push(...subFiles);
+			} else if (entry.isFile()) {
+				// Check if filename ends with any of the configured extensions
+				// This handles both simple (.liquid) and compound (.bookshop.liquid) extensions
+				const filenameLower = entry.name.toLowerCase();
+				const hasValidExtension = extensions.some((ext) =>
+					filenameLower.endsWith(ext),
+				);
+				if (hasValidExtension) {
+					files.push(fullPath);
+				}
+			}
+		}
+	} catch (error) {
+		console.error("ERROR reading directory:", directory, error);
+		throw error;
+	}
+
+	return files;
+}

package/integrations/liquid/11ty-filters.mjs

@@ -0,0 +1,69 @@
+/**
+ * Browser-compatible implementations of Eleventy's built-in filters.
+ * Some filters (get*CollectionItem, inputPathToUrl, renderTransforms) are not
+ * included as they require build-time context.
+ */
+
+import slugify from "@sindresorhus/slugify";
+
+/**
+ * Logs value to console (pass-through filter).
+ *
+ * @param {any} value - Value to log
+ * @param {string} [prefix] - Optional prefix for the log message
+ * @returns {any} The original value (for chaining)
+ */
+export function logFilter(value, prefix = "") {
+	if (prefix) {
+		console.log(`[${prefix}]`, value);
+	} else {
+		console.log(value);
+	}
+	// Return the original value so it can be chained or used in output
+	return value;
+}
+
+/**
+ * Normalizes URL paths (simplified browser version of Eleventy's url filter).
+ *
+ * @param {string} url - URL to normalize
+ * @param {string} [pathPrefix] - Optional path prefix to prepend
+ * @returns {string} Normalized URL
+ */
+export function urlFilter(url, pathPrefix = "") {
+	if (!url) {
+		return "";
+	}
+
+	const urlString = String(url);
+
+	// If there's a pathPrefix, prepend it
+	if (pathPrefix) {
+		// Ensure pathPrefix starts with / and doesn't end with /
+		const normalizedPrefix = `/${pathPrefix.replace(/^\/+|\/+$/g, "")}`;
+
+		// If url is absolute (starts with /), prepend pathPrefix
+		if (urlString.startsWith("/")) {
+			return normalizedPrefix + urlString;
+		}
+		// If url is relative, just return it
+		return urlString;
+	}
+
+	// Basic normalization: ensure single slashes, remove trailing slash (except root)
+	const normalized = urlString.replace(/\/+/g, "/");
+
+	// Remove trailing slash unless it's the root path
+	if (normalized.length > 1 && normalized.endsWith("/")) {
+		return normalized.slice(0, -1);
+	}
+
+	return normalized;
+}
+
+/** @type {Record<string, any>} */
+export const eleventyFilters = {
+	slugify,
+	log: logFilter,
+	url: urlFilter,
+};

package/integrations/liquid/fs.mjs

@@ -0,0 +1,127 @@
+import { log, warn } from "./logger.mjs";
+
+/**
+ * In-memory filesystem for LiquidJS that reads from window.cc_files.
+ *
+ * @type {any} LiquidJS-compatible filesystem object
+ */
+export const inMemoryFs = {
+	sep: "/",
+
+	/**
+	 * Gets the directory name from a file path.
+	 *
+	 * @param {string} filePath - The file path
+	 * @returns {string} The directory portion of the path
+	 */
+	dirname(filePath) {
+		const parts = filePath.split("/");
+		parts.pop();
+		return parts.join("/") || "/";
+	},
+
+	/**
+	 * Synchronously reads a file from the in-memory store.
+	 *
+	 * @param {string} filePath - The file path to read
+	 * @returns {string | undefined} The file contents or undefined if not found
+	 */
+	readFileSync(filePath) {
+		log("readFileSync:", filePath);
+		const fileContents = window.cc_files?.[filePath];
+
+		if (fileContents === undefined) {
+			const availableFiles = Object.keys(window.cc_files || {});
+			warn("File not found:", filePath);
+			log("Available files:", availableFiles);
+		} else {
+			log("File found, length:", fileContents?.length || 0);
+		}
+
+		return fileContents;
+	},
+
+	/**
+	 * Asynchronously reads a file from the in-memory store.
+	 *
+	 * @param {string} filePath - The file path to read
+	 * @returns {Promise<string>} The file contents
+	 * @throws {Error} If filePath is empty
+	 */
+	async readFile(filePath) {
+		log("readFile:", filePath);
+		if (!filePath) {
+			throw new Error("readFile called with empty path");
+		}
+		return this.readFileSync(filePath);
+	},
+
+	/**
+	 * Asynchronously checks if a file exists.
+	 *
+	 * @param {string} filePath - The file path to check
+	 * @returns {Promise<boolean>} True if the file exists
+	 */
+	async exists(filePath) {
+		if (!filePath || typeof filePath !== "string") {
+			log("exists: invalid path", filePath);
+			return false;
+		}
+		const result = this.existsSync(filePath);
+		log("exists:", filePath, "=", result);
+		return result;
+	},
+
+	/**
+	 * Synchronously checks if a file exists.
+	 *
+	 * @param {string} filePath - The file path to check
+	 * @returns {boolean} True if the file exists
+	 */
+	existsSync(filePath) {
+		if (!filePath || typeof filePath !== "string") {
+			return false;
+		}
+		const fileContents = window.cc_files?.[filePath];
+		const exists = fileContents !== null && fileContents !== undefined;
+		log("existsSync:", filePath, "=", exists);
+		return exists;
+	},
+
+	/**
+	 * Resolves a file path by joining the root with the file name and extension.
+	 * LiquidJS calls this once per root directory and checks exists() on the
+	 * result, so no directory searching is needed here.
+	 *
+	 * @param {string} root - The root directory provided by LiquidJS
+	 * @param {string} file - The file name to resolve
+	 * @param {string} [ext] - The file extension (defaults to ".liquid")
+	 * @returns {string} The resolved file path
+	 */
+	resolve(root, file, ext) {
+		const extension = ext || ".liquid";
+		const fileWithExt = file.endsWith(extension) ? file : `${file}${extension}`;
+		const normalizedRoot = root.replace(/^\.\//, "").replace(/\/*$/, "/");
+		const resolved = `${normalizedRoot}${fileWithExt}`;
+		log("resolve:", { root, file, ext }, "->", resolved);
+		return resolved;
+	},
+
+	/**
+	 * Returns file stat (always returns isFile: true for compatibility).
+	 *
+	 * @returns {Promise<{isFile: () => boolean}>}
+	 */
+	async statAsync() {
+		return { isFile: () => true };
+	},
+
+	/**
+	 * Returns file stat synchronously (always returns isFile: true for compatibility).
+	 *
+	 * @returns {{isFile: () => boolean}}
+	 */
+	statSync() {
+		return { isFile: () => true };
+	},
+};

package/integrations/liquid/index.mjs

@@ -0,0 +1,269 @@
+import { evalToken, Liquid, Tokenizer, toPromise } from "liquidjs";
+import { eleventyFilters } from "./11ty-filters.mjs";
+import { inMemoryFs } from "./fs.mjs";
+import { group, groupEnd, log } from "./logger.mjs";
+import { createPairedShortcodeTag, createShortcodeTag } from "./shortcodes.mjs";
+
+// Re-export logger utilities for external use
+export { group, groupEnd, log, setVerbose } from "./logger.mjs";
+
+/** @type {import("liquidjs").Liquid | null} */
+let sharedLiquidEngine = null;
+
+/**
+ * Creates and configures the shared Liquid engine instance.
+ *
+ * @param {{componentDirs?: string[]}} options - Liquid engine options
+ * @returns {void}
+ */
+export function createSharedLiquidEngine(options) {
+	log("Creating shared Liquid engine");
+
+	sharedLiquidEngine = new Liquid({
+		fs: inMemoryFs,
+		globals: {
+			ENV_CLIENT: true,
+		},
+		...options,
+	});
+	log("Liquid engine instantiated");
+
+	// Register Eleventy's built-in filters
+	for (const [name, fn] of Object.entries(eleventyFilters)) {
+		sharedLiquidEngine.registerFilter(name, fn);
+	}
+	log(
+		"Registered",
+		Object.keys(eleventyFilters).length,
+		"built-in 11ty filters",
+	);
+
+	log(
+		"Available files in window.cc_files:",
+		Object.keys(window.cc_files || {}),
+	);
+
+	sharedLiquidEngine.registerTag(
+		"bind_include",
+		createBindIncludeTag(sharedLiquidEngine),
+	);
+	log("bind_include tag registered");
+}
+
+/**
+ * Registers a Liquid component with the CloudCannon component system.
+ * Creates a wrapper that renders the Liquid template to an HTMLElement.
+ *
+ * @param {string} key - Unique identifier for the component
+ * @param {string} contents - The Liquid template contents
+ * @returns {void}
+ */
+export function registerLiquidComponent(key, contents) {
+	log("Registering component:", key);
+	log("Component contents preview:", contents?.substring?.(0, 200) || contents);
+
+	if (!sharedLiquidEngine) {
+		throw new Error(
+			`sharedLiquidEngine not defined when registering component ${key}`,
+		);
+	}
+	const liquidEngine = sharedLiquidEngine;
+
+	/**
+	 * Wrapper function that renders the Liquid component to an HTMLElement.
+	 *
+	 * @param {Object} props - Props to pass to the Liquid template
+	 * @returns {Promise<HTMLElement>} The rendered component as an HTMLElement
+	 */
+	const wrappedComponent = async (props) => {
+		group(`Rendering component: ${key}`);
+		log("Props:", props);
+		log("Parsing and rendering template...");
+		const htmlString = await liquidEngine.parseAndRender(contents, props);
+		log(
+			"Rendered HTML preview:",
+			htmlString?.substring?.(0, 200) || htmlString,
+		);
+		const rootEl = document.createElement("div");
+		rootEl.innerHTML = htmlString;
+		groupEnd();
+		return rootEl;
+	};
+
+	window.cc_components = window.cc_components || {};
+	window.cc_components[key] = wrappedComponent;
+	log(`Component registered, ${key}`);
+}
+
+/**
+ * Registers a custom Liquid filter.
+ *
+ * @param {string} name - The filter name
+ * @param {any} fn - The filter function
+ * @returns {void}
+ */
+export function registerCustomFilter(name, fn) {
+	log("Registering filter:", name);
+	if (!sharedLiquidEngine) {
+		throw new Error(
+			`sharedLiquidEngine not defined when registering custom filter ${name}`,
+		);
+	}
+	sharedLiquidEngine.registerFilter(name, fn);
+}
+
+/**
+ * Registers a custom shortcode.
+ *
+ * Usage in templates: {% shortcodeName arg1, arg2 %}
+ *
+ * @param {string} name - The shortcode name (used as the tag name)
+ * @param {any} fn - The shortcode function (arg1, arg2, ...) => string
+ * @returns {void}
+ */
+export function registerCustomShortcode(name, fn) {
+	log("Registering shortcode:", name);
+	if (!sharedLiquidEngine) {
+		throw new Error(
+			`sharedLiquidEngine not defined when registering custom shortcode ${name}`,
+		);
+	}
+	sharedLiquidEngine.registerTag(name, createShortcodeTag(fn, name));
+}
+
+/**
+ * Registers a custom paired shortcode (with content between tags).
+ *
+ * Usage in templates: {% shortcodeName arg %}content{% endshortcodeName %}
+ *
+ * @param {string} name - The shortcode name (used as the tag name)
+ * @param {any} fn - The shortcode function (content, arg1, ...) => string
+ * @returns {void}
+ */
+export function registerCustomPairedShortcode(name, fn) {
+	log("Registering paired shortcode:", name);
+	if (!sharedLiquidEngine) {
+		throw new Error(
+			`sharedLiquidEngine not defined when registering custom paired shortcode ${name}`,
+		);
+	}
+	sharedLiquidEngine.registerTag(name, createPairedShortcodeTag(name, fn));
+}
+
+/**
+ * Registers a custom tag with full LiquidJS parser access.
+ *
+ * Custom tags are more powerful than shortcodes - they receive full access to
+ * the LiquidJS parser and can implement complex parsing/rendering logic.
+ *
+ * Usage in templates: {% tagName args %}
+ *
+ * @param {string} name - The tag name
+ * @param {any} factory - Factory function (liquidEngine) => { parse(), render() }
+ * @returns {void}
+ */
+export function registerCustomTag(name, factory) {
+	log("Registering custom tag:", name);
+	if (!sharedLiquidEngine) {
+		throw new Error(
+			`sharedLiquidEngine not defined when registering custom tag ${name}`,
+		);
+	}
+	sharedLiquidEngine.registerTag(name, factory(sharedLiquidEngine));
+}
+
+/**
+ * Creates a bind_include tag for spreading object props into includes.
+ * Like Astro's {...props} spread for Liquid includes.
+ *
+ * Usage: {% bind_include "path/to/partial", objectToSpread %}
+ *
+ * @param {any} _liquidEngine - The LiquidJS engine instance (provided by LiquidJS, accessed via this.liquid)
+ * @returns {any} Tag implementation with parse and render methods
+ */
+export function createBindIncludeTag(_liquidEngine) {
+	return {
+		/**
+		 * Parses the bind_include tag arguments.
+		 * @param {any} tagToken - The tag token from LiquidJS parser
+		 */
+		parse(tagToken) {
+			log("bind_include parsing tag with args:", tagToken.args);
+			const tokenizer = new Tokenizer(
+				tagToken.args,
+				this.liquid.options.operatorsTrie,
+			);
+
+			this.pathToken = tokenizer.readValue();
+			if (!this.pathToken)
+				throw new Error("bind_include: missing path argument");
+			log("bind_include parsed path token:", this.pathToken);
+
+			tokenizer.skipBlank();
+			if (tokenizer.peek() !== ",")
+				throw new Error("bind_include: expected comma separator");
+			tokenizer.advance();
+			tokenizer.skipBlank();
+
+			this.objectToken = tokenizer.readValue();
+			if (!this.objectToken)
+				throw new Error("bind_include: missing object argument");
+			log("bind_include parsed object token:", this.objectToken);
+		},
+
+		/**
+		 * Renders the included template with spread props.
+		 * @param {any} context - The LiquidJS render context
+		 */
+		async render(context) {
+			group("bind_include rendering");
+			log("Evaluating path token...");
+			const path = await toPromise(evalToken(this.pathToken, context));
+			log("Path resolved to:", path);
+
+			log("Evaluating object token...");
+			const obj = await toPromise(evalToken(this.objectToken, context));
+			log("Object resolved to:", obj);
+
+			if (!path || typeof path !== "string") {
+				groupEnd();
+				throw new Error(`bind_include: invalid path "${path}"`);
+			}
+			if (!obj || typeof obj !== "object") {
+				log("Object is not valid, returning empty");
+				groupEnd();
+				return;
+			}
+
+			log(
+				"Including:",
+				path,
+				"with",
+				Object.keys(obj).length,
+				"props:",
+				Object.keys(obj),
+			);
+
+			context.push(obj);
+			try {
+				log("Parsing file:", path);
+				const templates = await this.liquid.parseFile(path);
+				log("File parsed, template count:", templates?.length || 0);
+
+				log("Rendering templates...");
+				const result = await this.liquid.render(templates, context);
+				log("Rendered result preview:", result?.substring?.(0, 200) || result);
+				groupEnd();
+				return result;
+			} catch (err) {
+				const error = /** @type {Error} */ (err);
+				log("Error during render:", error.message);
+				log("Full error:", error);
+				groupEnd();
+				throw error;
+			} finally {
+				context.pop();
+			}
+		},
+	};
+}

package/integrations/liquid/logger.mjs

@@ -0,0 +1,108 @@
+/**
+ * Simple logger for live editing integration.
+ * Enable verbose mode to see detailed logs in browser console.
+ */
+
+let verboseEnabled = false;
+
+/**
+ * Enables or disables verbose logging.
+ *
+ * @param {boolean} enabled - Whether to enable verbose logging
+ * @returns {void}
+ */
+export function setVerbose(enabled) {
+	verboseEnabled = enabled;
+	if (enabled) {
+		console.log("Live editing verbose logging enabled");
+	}
+}
+
+/**
+ * Returns whether verbose logging is enabled.
+ *
+ * @returns {boolean}
+ */
+export function isVerbose() {
+	return verboseEnabled;
+}
+
+/**
+ * Log only when verbose mode is enabled.
+ * Use for diagnostic information during development.
+ *
+ * @param {...any} args - Arguments to log
+ * @returns {void}
+ */
+export function log(...args) {
+	if (verboseEnabled) {
+		console.log(...args);
+	}
+}
+
+/**
+ * Always log warnings.
+ *
+ * @param {...any} args - Arguments to log
+ * @returns {void}
+ */
+export function warn(...args) {
+	console.warn(...args);
+}
+
+/**
+ * Always log errors.
+ *
+ * @param {...any} args - Arguments to log
+ * @returns {void}
+ */
+export function error(...args) {
+	console.error(...args);
+}
+
+/**
+ * Group logs (only in verbose mode).
+ *
+ * @param {string} label - Group label
+ * @returns {void}
+ */
+export function group(label) {
+	if (verboseEnabled) {
+		console.group(label);
+	}
+}
+
+/**
+ * End a console group (only in verbose mode).
+ *
+ * @returns {void}
+ */
+export function groupEnd() {
+	if (verboseEnabled) {
+		console.groupEnd();
+	}
+}
+
+/**
+ * Start timing an operation (only in verbose mode).
+ *
+ * @param {string} label - Timer label
+ * @returns {void}
+ */
+export function time(label) {
+	if (verboseEnabled) {
+		console.time(label);
+	}
+}
+
+/**
+ * End timing an operation (only in verbose mode).
+ *
+ * @param {string} label - Timer label
+ * @returns {void}
+ */
+export function timeEnd(label) {
+	if (verboseEnabled) {
+		console.timeEnd(label);
+	}
+}

package/integrations/liquid/shortcodes.mjs

@@ -0,0 +1,165 @@
+/**
+ * Shortcode-to-LiquidJS-Tag wrapper utilities.
+ * Converts Eleventy-style shortcode functions into LiquidJS custom tags.
+ *
+ * Eleventy shortcodes: simple functions that return HTML
+ * LiquidJS tags: objects with parse() and render() methods
+ */
+
+import { evalToken, Tokenizer, toPromise } from "liquidjs";
+import { group, groupEnd, log } from "./logger.mjs";
+
+/**
+ * Parses comma-separated arguments from a tag's args string.
+ * Handles quoted strings and variable references.
+ *
+ * @param {string} argsString - Raw arguments string from tagToken.args
+ * @param {any} operatorsTrie - Liquid options operatorsTrie
+ * @returns {any[]} Array of parsed tokens
+ */
+function parseArgs(argsString, operatorsTrie) {
+	if (!argsString || !argsString.trim()) {
+		return [];
+	}
+
+	const tokenizer = new Tokenizer(argsString, operatorsTrie);
+	const tokens = [];
+
+	while (true) {
+		tokenizer.skipBlank();
+		const token = tokenizer.readValue();
+		if (!token) break;
+		tokens.push(token);
+
+		tokenizer.skipBlank();
+		if (tokenizer.peek() === ",") {
+			tokenizer.advance();
+		} else {
+			break;
+		}
+	}
+
+	return tokens;
+}
+
+/**
+ * Evaluates parsed tokens against the render context.
+ *
+ * @param {any[]} tokens - Array of parsed tokens
+ * @param {any} context - LiquidJS render context
+ * @returns {Promise<any[]>} Array of evaluated values
+ */
+async function evaluateArgs(tokens, context) {
+	const values = [];
+	for (const token of tokens) {
+		const value = await toPromise(evalToken(token, context));
+		values.push(value);
+	}
+	return values;
+}
+
+/**
+ * Creates a LiquidJS tag implementation for a regular (non-paired) shortcode.
+ *
+ * Usage: {% shortcodeName arg1, arg2, "literal" %}
+ *
+ * @param {any} shortcodeFn - The shortcode function (arg1, arg2, ...) => string
+ * @param {string} shortcodeName - The shortcode name for logging
+ * @returns {import('liquidjs/dist/template/tag-options-adapter').TagImplOptions} LiquidJS tag implementation
+ */
+export function createShortcodeTag(shortcodeFn, shortcodeName) {
+	/** @type {any} */
+	const tag = {
+		/**
+		 * @param {any} tagToken - The tag token from LiquidJS parser
+		 */
+		parse(tagToken) {
+			this.argTokens = parseArgs(
+				tagToken.args,
+				this.liquid.options.operatorsTrie,
+			);
+		},
+
+		/**
+		 * @param {any} context - The LiquidJS render context
+		 */
+		async render(context) {
+			log(`Executing shortcode "${shortcodeName}"`);
+			const args = await evaluateArgs(this.argTokens, context);
+			log("Shortcode args:", args);
+			const result = await shortcodeFn(...args);
+			log("Shortcode returned:", result?.substring?.(0, 100) || result);
+			return result ?? "";
+		},
+	};
+	return tag;
+}
+
+/**
+ * Creates a LiquidJS tag implementation for a paired shortcode.
+ *
+ * Usage: {% shortcodeName arg1 %}content{% endshortcodeName %}
+ *
+ * @param {string} tagName - The shortcode/tag name (needed to find end tag)
+ * @param {any} shortcodeFn - The shortcode function (content, arg1, ...) => string
+ * @returns {import('liquidjs/dist/template/tag-options-adapter').TagImplOptions} LiquidJS tag implementation
+ */
+export function createPairedShortcodeTag(tagName, shortcodeFn) {
+	const endTagName = `end${tagName}`;
+
+	/** @type {any} */
+	const tag = {
+		/**
+		 * @param {any} tagToken - The tag token from LiquidJS parser
+		 * @param {any} remainTokens - Remaining tokens to parse
+		 */
+		parse(tagToken, remainTokens) {
+			this.argTokens = parseArgs(
+				tagToken.args,
+				this.liquid.options.operatorsTrie,
+			);
+			this.templates = [];
+
+			// Consume tokens until we find the end tag
+			while (remainTokens.length) {
+				const token = remainTokens.shift();
+
+				// Check if this is our end tag
+				if (token.name === endTagName) {
+					break;
+				}
+
+				// Parse this token into a template and add to our templates
+				const template = this.liquid.parser.parseToken(token, remainTokens);
+				this.templates.push(template);
+			}
+		},
+
+		/**
+		 * @param {any} context - The LiquidJS render context
+		 */
+		async render(context) {
+			group(`Paired shortcode "${tagName}"`);
+			log("Inner templates to render:", this.templates.length);
+
+			// Render the content between the tags
+			// NOTE: renderTemplates returns a generator, must use toPromise() to resolve it
+			const content = await toPromise(
+				this.liquid.renderer.renderTemplates(this.templates, context),
+			);
+			log("Content resolved:", content);
+
+			// Evaluate arguments
+			const args = await evaluateArgs(this.argTokens, context);
+			log("Args:", args);
+
+			// Call shortcode with content as first argument, then other args
+			const result = await shortcodeFn(content, ...args);
+			log("Final HTML:", result?.substring?.(0, 100) || result);
+			groupEnd();
+
+			return result ?? "";
+		},
+	};
+	return tag;
+}

package/nodes/editable-array-item.ts

@@ -493,4 +493,15 @@ export default class EditableArrayItem extends EditableComponent {
 			"@index": Number(this.element.dataset.prop),
 		};
 	}
+
+	handleApiEvent(e: any): void {
+		if (this.connected) {
+			return super.handleApiEvent(e);
+		}
+	}
+
+	async disconnect(): Promise<void> {
+		await super.disconnect();
+		this.hardDisconnect();
+	}
 }

package/nodes/editable-image.ts

@@ -6,6 +6,7 @@ export default class EditableImage extends Editable {
 		undefined;
 	inputConfig: { src?: any; alt?: any; title?: any } = {};
 	imageEl?: HTMLImageElement;
+	panelId?: string;
 
 	configuredSrc = false;
 	configuredAlt = false;
@@ -185,7 +186,7 @@ export default class EditableImage extends Editable {
 			!!this.element.dataset.propTitle || !!this.element.dataset.prop;
 
 		this.loadInputConfig().then(() => {
-			this.imageEl?.addEventListener("click", (e) => {
+			this.imageEl?.addEventListener("click", async (e) => {
 				e.preventDefault();
 
 				if (!this.value) {
@@ -203,7 +204,7 @@ export default class EditableImage extends Editable {
 					data.title = this.value.title;
 				}
 
-				CloudCannon.createCustomDataPanel({
+				this.panelId = await CloudCannon.createCustomDataPanel({
 					title: "Edit Image",
 					data,
 					position: this.imageEl?.getBoundingClientRect(),
@@ -268,4 +269,11 @@ export default class EditableImage extends Editable {
 			});
 		});
 	}
+
+	hardDisconnect(): void {
+		if (this.panelId) {
+			CloudCannon.destroyCustomDataPanel(this.panelId);
+		}
+		super.hardDisconnect();
+	}
 }

package/nodes/editable-text.ts

@@ -138,6 +138,10 @@ export default class EditableText extends Editable {
 			? { type: "markdown" }
 			: await this.dispatchGetInputConfig(this.element.dataset.prop);
 
+		const extension = this.contextBase?.isContent
+			? this.contextBase.file?.path.split(".").pop()
+			: undefined;
+
 		this.editor = await CloudCannon.createTextEditableRegion(
 			this.element,
 			this.onChange.bind(this),
@@ -145,6 +149,7 @@ export default class EditableText extends Editable {
 				elementType: this.element.dataset.type,
 				editableType: this.contextBase?.isContent ? "content" : undefined,
 				inputConfig,
+				extension,
 			},
 		);
 

package/nodes/editable.ts

@@ -42,6 +42,7 @@ export interface APIListener {
 
 export default class Editable {
 	APIListeners: APIListener[] = [];
+	handleAPIEventsListeners?: this["handleApiEvent"];
 	listeners: EditableListener[] = [];
 	domListeners: DOMListener[] = [];
 	value: unknown = undefined;
@@ -371,6 +372,12 @@ export default class Editable {
 		}
 	}
 
+	hardDisconnect(): void {
+		this.listeners.forEach(({ editable }) => {
+			editable.hardDisconnect();
+		});
+	}
+
 	async disconnect(): Promise<void> {
 		if (this.disconnecting) {
 			return;
@@ -382,7 +389,6 @@ export default class Editable {
 		}
 
 		this.parent?.deregisterListener(this);
-		this.parent = null;
 		if (this.pendingParentElement) {
 			const pending = this.pendingParentElement.__pendingEditableListeners;
 			if (pending) {
@@ -413,6 +419,8 @@ export default class Editable {
 	}
 
 	connect(): void {
+		this.parent = null;
+
 		if (!this.validateConfiguration()) {
 			return;
 		}
@@ -528,12 +536,23 @@ export default class Editable {
 			this.queueListenerOnParent(this.pendingParentElement, { editable: this });
 		}
 
-		this.addEventListener("cloudcannon-api", this.handleApiEvent.bind(this));
+		if (this.handleAPIEventsListeners) {
+			this.element.removeEventListener(
+				"cloudcannon-api",
+				this.handleAPIEventsListeners,
+			);
+		}
+		this.handleAPIEventsListeners = this.handleApiEvent.bind(this);
+		this.element.addEventListener(
+			"cloudcannon-api",
+			this.handleAPIEventsListeners,
+		);
 		this.replayPendingListeners();
 	}
 
 	handleApiEvent(e: any): void {
-		if (e.target !== this.element) {
+		const target = e.detail.forwardedTarget ?? e.target;
+		if (target !== this.element) {
 			if (!e.detail.source) {
 				e.detail.source = this.element.dataset.prop;
 			} else {
@@ -551,15 +570,30 @@ export default class Editable {
 			}
 		}
 
+		let propagating = true;
 		const { absolute } = this.parseSource(e.detail.source);
 		if (!this.parent || absolute) {
 			if (this.executeApiCall(e.detail)) {
+				propagating = false;
 				e.stopPropagation();
 			}
 		}
+
+		if (!this.connected && propagating) {
+			this.parent?.element.dispatchEvent(
+				new CustomEvent("cloudcannon-api", {
+					bubbles: true,
+					detail: { ...e.detail, forwardedTarget: target },
+				}),
+			);
+		}
 	}
 
 	executeApiCall(options: any): boolean {
+		if (!this.connected) {
+			return false;
+		}
+
 		let { file, collection, source, dataset } = this.parseSource(
 			options.source,
 		);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cloudcannon/editable-regions",
-	"version": "0.0.12",
+	"version": "0.0.13",
 	"type": "module",
 	"description": "Visual Editing for the CloudCannon CMS.",
 	"keywords": [
@@ -49,17 +49,25 @@
 			"default": "./integrations/react.mjs",
 			"types": "./types/react.d.ts"
 		},
+		"./liquid": "./integrations/liquid/index.mjs",
+		"./eleventy": "./integrations/eleventy.mjs",
 		"./internal/components": "./components/index.js",
 		"./internal/styles": "./styles/index.js"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.4.4",
-		"@cloudcannon/javascript-api": "0.0.12",
+		"@biomejs/biome": "2.4.10",
+		"@cloudcannon/javascript-api": "0.0.14",
+		"@sindresorhus/slugify": "3.0.0",
 		"@types/js-beautify": "1.14.3",
-		"@types/react": "19.2.8",
-		"@types/react-dom": "18.3.1",
-		"astro": "^5.14.1",
-		"js-beautify": "^1.15.4",
+		"@types/node": "25.5.0",
+		"@types/react": "19.2.14",
+		"@types/react-dom": "19.2.3",
+		"astro": "6.1.2",
+		"js-beautify": "1.15.4",
+		"liquidjs": "10.25.2",
 		"typescript": "5.9.3"
+	},
+	"dependencies": {
+		"esbuild": "0.27.4"
 	}
 }

package/types/liquid.d.ts

@@ -0,0 +1,53 @@
+declare module "@cloudcannon/editable-regions/liquid" {
+	import type { Liquid } from "liquidjs";
+
+	interface LiquidConfig {
+		componentDirs?: string[];
+	}
+
+	export function setVerbose(value: boolean): void;
+	export function log(...args: any[]): void;
+	export function group(label?: string): void;
+	export function groupEnd(): void;
+
+	export function configureLiquid(options: LiquidConfig): void;
+	export function getLiquidEngine(options?: Record<string, any>): Liquid;
+	export function registerLiquidComponent(key: string, contents: string): void;
+
+	export function createBindIncludeTag(liquidEngine: Liquid): {
+		parse(tagToken: any): void;
+		render(context: any): Promise<string>;
+	};
+
+	export function registerCustomFilter(
+		name: string,
+		fn: (...args: any[]) => any,
+	): void;
+	export function registerCustomShortcode(
+		name: string,
+		fn: (...args: any[]) => any,
+	): void;
+	export function registerCustomPairedShortcode(
+		name: string,
+		fn: (...args: any[]) => any,
+	): void;
+	export function registerCustomTag(
+		name: string,
+		factory: (liquidEngine: Liquid) => any,
+	): void;
+}
+
+/** Window globals used by the liquid integration */
+declare global {
+	interface Window {
+		/** Registered liquid components keyed by name */
+		cc_components?: Record<
+			string,
+			(props: Record<string, any>) => Promise<HTMLElement>
+		>;
+		/** Liquid template files keyed by path */
+		cc_files?: Record<string, string>;
+	}
+}
+
+export {};