@cloudcannon/editable-regions 0.0.20 → 0.0.22

package/README.md

@@ -888,3 +888,5 @@ If you *can* move the value into front matter or a data file, prefer a text regi
 | `data-path` | String | Yes | The template file the text lives in, relative to the site root. A leading `/` is optional. This is a file path, not a selector. |
 | `data-key` | String | Yes | The name identifying this region within the file. Must be unique among all `data-key` values in the same file. |
 | `data-type` | `"span"` \| `"text"` \| `"block"` | No | Controls the rich text editing surface, as with [text regions](#text). Source content is edited as HTML. |
+| `data-input-config` | JSON object | No | Inline input configuration for the editor, as a JSON object. Takes precedence over `data-input`. |
+| `data-input` | String | No | The slug of the CloudCannon input configuration to resolve for this region, used when `data-input-config` isn't set. |

package/helpers/error-card.ts

@@ -0,0 +1,21 @@
+import type EditableRegionErrorCard from "../components/ui/editable-region-error-card.js";
+
+/**
+ * Builds an `<editable-region-error-card>` with the given content. The caller
+ * decides where to place it (usually `element.replaceChildren(...)`).
+ */
+export function createErrorCard(
+	heading: string,
+	message?: string,
+	hint?: string,
+): EditableRegionErrorCard {
+	const error = document.createElement("editable-region-error-card");
+	error.setAttribute("heading", heading);
+	if (typeof message === "string") {
+		error.setAttribute("message", message);
+	}
+	if (typeof hint === "string") {
+		error.setAttribute("hint", hint);
+	}
+	return error;
+}

package/helpers/hydrate-editable-regions.ts

@@ -9,6 +9,7 @@ import {
 } from "../nodes";
 import { hasEditable } from "../nodes/editable.js";
 import { isEditableWebcomponent } from "./checks";
+import { createErrorCard } from "./error-card.js";
 
 const DYNAMIC_EDITABLE_TYPE = "_dynamic";
 
@@ -84,23 +85,19 @@ export const hydrateDataEditableRegions = (root: Element) => {
 
 		const Editable = editableMap[element.dataset.editable];
 		if (!Editable) {
-			const error = document.createElement("editable-region-error-card");
-			error.setAttribute("heading", "Failed to render editable region");
-			error.setAttribute(
-				"message",
-				`This element has an invalid editable type for the 'data-editable' HTML attribute. The supported editable types are ${Object.keys(
-					editableMap,
-				)
-					.map((type) => `"${type}"`)
-					.join(
-						", ",
-					)} but instead received the type "${element.dataset.editable}". Please make sure that this element has a valid "data-editable" attribute.`,
+			element.replaceWith(
+				createErrorCard(
+					"Failed to render editable region",
+					`This element has an invalid editable type for the 'data-editable' HTML attribute. The supported editable types are ${Object.keys(
+						editableMap,
+					)
+						.map((type) => `"${type}"`)
+						.join(
+							", ",
+						)} but instead received the type "${element.dataset.editable}". Please make sure that this element has a valid "data-editable" attribute.`,
+					"If this is intentional you can use the 'data-cloudcannon-ignore' attribute to exclude this element from editable regions.",
+				),
 			);
-			error.setAttribute(
-				"hint",
-				"If this is intentional you can use the 'data-cloudcannon-ignore' attribute to exclude this element from editable regions.",
-			);
-			element.replaceWith(error);
 			return;
 		}
 

package/integrations/eleventy/index.mjs

@@ -368,9 +368,10 @@ async function generateLiveEditingSource(
 
 		for (const [i, filePath] of allLiquidFiles.entries()) {
 			const id = `liquidFile_${i}`;
-			source += `import ${id} from "./${filePath}";
+			const importPath = toPosixPath(filePath);
+			source += `import ${id} from ${JSON.stringify(`./${importPath}`)};
 
-      window.cc_liquid_files["${filePath}"] = ${id};
+      window.cc_liquid_files[${JSON.stringify(importPath)}] = ${id};
       `;
 		}
 
@@ -537,6 +538,14 @@ async function findAllLiquidFiles(
 	return allFiles;
 }
 
+/**
+ * @param {string} filePath
+ * @returns {string}
+ */
+function toPosixPath(filePath) {
+	return filePath.split(path.sep).join("/");
+}
+
 /**
  * @param {Object} options
  * @param {string} options.directory
@@ -625,7 +634,8 @@ function emitImportRegistrations(liquidOptions) {
 			liquidOptions?.[optionKey] ?? {},
 		).entries()) {
 			const id = `${optionKey}_${i}`;
-			imports += `\nimport ${id} from "./${file}";\n`;
+			const importPath = toPosixPath(String(file));
+			imports += `\nimport ${id} from ${JSON.stringify(`./${importPath}`)};\n`;
 			body += `${registerFn}(${JSON.stringify(name)}, ${id});\n`;
 		}
 	}

package/integrations/hugo/browser/errors.ts

@@ -6,6 +6,7 @@
 const TEMPLATE_FRAME_RE =
 	/^template: (.+?): executing ".*?" at .*?: error calling (.+?): /;
 const FAILED_SEPARATOR = ": execute of template failed: ";
+const TEMPLATE_FRAME_START = "template: ";
 
 export interface ParsedHugoError {
 	/** Template refs (file:line:column), outermost call first. */
@@ -14,12 +15,21 @@ export interface ParsedHugoError {
 	call?: string;
 	/** The underlying error, with the template-call chain stripped. */
 	message: string;
+	/** Wrapper text ahead of the first template frame (e.g. a build-error prefix). */
+	prefix?: string;
 }
 
 export function parseHugoTemplateError(raw: string): ParsedHugoError {
+	const trimmed = raw.trim();
+	// Build errors arrive wrapped ("editor site build failed: ...") ahead of the
+	// template chain, so start parsing at the first frame and keep the wrapper
+	// as context.
+	const start = trimmed.indexOf(TEMPLATE_FRAME_START);
+	const prefix = start > 0 ? trimmed.slice(0, start) : "";
+	let rest = start > 0 ? trimmed.slice(start) : trimmed;
+
 	const frames: string[] = [];
 	let call: string | undefined;
-	let rest = raw.trim();
 	for (;;) {
 		const match = rest.match(TEMPLATE_FRAME_RE);
 		if (!match) break;
@@ -35,12 +45,18 @@ export function parseHugoTemplateError(raw: string): ParsedHugoError {
 			const separator = rest.indexOf(FAILED_SEPARATOR);
 			const after =
 				separator === -1 ? "" : rest.slice(separator + FAILED_SEPARATOR.length);
-			if (after.startsWith("template: ")) {
+			if (after.startsWith(TEMPLATE_FRAME_START)) {
 				rest = after;
 			}
 		}
 	}
-	return { frames, call, message: rest };
+
+	// No template chain (a content/config error, say) — keep the whole message.
+	if (frames.length === 0) {
+		return { frames, message: trimmed };
+	}
+
+	return { frames, call, message: rest, prefix: prefix || undefined };
 }
 
 /** An error enhanced with an optional editor-context hint. */
@@ -57,10 +73,9 @@ export function enhanceHugoError(
 	if (/partial .* not found/i.test(message)) {
 		hint =
 			"This partial isn't in the bundled template snapshot. Check that it " +
-			"lives under one of the directories in " +
-			"`params.editable_regions.template_dirs` (by default the partials, " +
-			"render hooks, and shortcodes of your configured layout dir) " +
-			"and rebuild the site.";
+			"lives under `layouts/partials/` or `layouts/_partials/` in your " +
+			"site, theme, or a module (or under one of the directories in " +
+			"`params.editable_regions.template_dirs`, if set) and rebuild the site.";
 	} else if (parsed.frames.length > 0) {
 		hint =
 			"The partial errored while rendering in the editor. If the code " +
@@ -68,17 +83,14 @@ export function enhanceHugoError(
 			"`{{ if not site.Params.env_client }}`, " +
 			"or supply an editor-safe version via " +
 			"`params.editable_regions.templates_overrides`.";
-	} else if (/logged \d+ errors/i.test(message)) {
-		hint =
-			"Hugo logged errors during the render — open the browser console " +
-			"for the underlying messages.";
 	}
 
 	const primary =
 		parsed.frames.length > 0 && parsed.call
-			? `${parsed.call}: ${parsed.message}`
+			? `${parsed.prefix ?? ""}${parsed.call}: ${parsed.message}`
 			: parsed.message;
-	const sentence = /[.!?]$/.test(primary) ? primary : `${primary}.`;
+	const sentence =
+		primary.includes("\n") || /[.!?]$/.test(primary) ? primary : `${primary}.`;
 
 	const error = new Error(
 		`Failed to render Hugo component "${componentKey}": ${sentence}`,
@@ -106,7 +118,7 @@ export function missingComponentError(componentKey: string): Error {
 	return new Error(
 		`No Hugo partial found for component "${componentKey}". This partial ` +
 			`isn't captured in the editor's template bundle. Make sure it's a ` +
-			`partial, shortcode, or render hook under your layout tree and ` +
+			`partial under \`layouts/partials/\` or \`layouts/_partials/\` and ` +
 			`rebuild the site.`,
 	);
 }

package/integrations/hugo/hugo-module/layouts/partials/editable-regions/find-template-files.html

@@ -1,5 +1,7 @@
 {{- $files := dict -}}
-{{- $subDirs := slice "partials" "shortcodes" -}}
+{{- /* Legacy and Hugo 0.146+ template dir names. `_markup` matches at any
+   depth, covering `_default/_markup`, `_markup`, and `<section>/_markup`. */ -}}
+{{- $subDirs := slice "partials" "shortcodes" "_partials" "_shortcodes" "_markup" -}}
 
 {{- $deps := .deps -}}
 {{- $exts := .exts -}}
@@ -36,12 +38,6 @@
 
     {{- if in $subDirs $entry.Name -}}
       {{- $files = merge $files (partial "editable-regions/find-files-with-extension.html" (dict "dir" $path "exts" $exts "ignore" $ignore)) -}}
-    {{- else if eq $entry.Name "_default" -}}
-      {{- range $defaultEntry := readDir $path -}}
-        {{- if eq $defaultEntry.Name "_markup" -}}
-          {{- $files = merge $files (partial "editable-regions/find-files-with-extension.html" (dict "dir" (path.Join $path "_markup") "exts" $exts "ignore" $ignore)) -}}
-        {{- end -}}
-      {{- end -}}
     {{- end -}}
 
     {{- $files = merge $files (partial "editable-regions/find-template-files.html" (dict "dir" $path "deps" $deps "exts" $exts "ignore" $ignore)) -}}

package/integrations/hugo/renderer/main.go

@@ -36,9 +36,15 @@ const dispatchView = `{{- with .cc_requests -}}
      key-sorted; the browser demuxes by id, not position. */ -}}
   {{- range $id, $req := . -}}
     {{- $partial := $req.partial -}}
-    {{- $found := templates.Exists (printf "partials/%s" $partial) -}}
-    {{- $found = or $found (templates.Exists (printf "partials/%s.html" $partial)) -}}
-    {{- $found = or $found (templates.Exists (printf "partials/%s.htm" $partial)) -}}
+    {{- /* templates.Exists matches exact paths: Hugo registers legacy
+       partials/ files under both partials/ and _partials/, but files in
+       _partials/ (Hugo 0.146+) only under _partials/. */ -}}
+    {{- $found := false -}}
+    {{- range $dir := slice "_partials" "partials" -}}
+      {{- $found = or $found (templates.Exists (printf "%s/%s" $dir $partial)) -}}
+      {{- $found = or $found (templates.Exists (printf "%s/%s.html" $dir $partial)) -}}
+      {{- $found = or $found (templates.Exists (printf "%s/%s.htm" $dir $partial)) -}}
+    {{- end -}}
     {{- if not $found -}}
       <div data-cc-render="{{ $id }}"><cc-missing-partial data-name="{{ $partial }}"></cc-missing-partial></div>
     {{- else -}}
@@ -61,6 +67,9 @@ type editorSiteBuilder struct {
 	Sites        *hugolib.HugoSites
 	changedFiles []string
 	removedFiles []string
+	// needsFullRebuild forces the next build to be a full rebuild (no change
+	// events), used to recover from a failed build without replaying events.
+	needsFullRebuild bool
 }
 
 func editorFlags() config.Provider {
@@ -134,30 +143,54 @@ func (builder *editorSiteBuilder) createSites() error {
 	return nil
 }
 
+// build clears pending changes even when it fails, as `hugo server` does, so a
+// failed build can't leave the builder permanently dirty and replay the same
+// failing events on every render.
 func (builder *editorSiteBuilder) build() error {
-	var events []fsnotify.Event
+	events := builder.changeEvents()
+	builder.changedFiles = nil
+	builder.removedFiles = nil
+
 	if builder.Sites == nil {
 		if err := builder.createSites(); err != nil {
 			return err
 		}
-	} else {
-		events = builder.changeEvents()
+		events = nil
+	} else if builder.needsFullRebuild {
+		// A previous build failed, which can leave Hugo's incremental state
+		// inconsistent (replaying events has panicked), so recover with a full
+		// rebuild instead of replaying events.
+		events = nil
 	}
+	builder.needsFullRebuild = false
 
 	err := builder.Sites.Build(hugolib.BuildCfg{NoBuildLock: true}, events...)
 	if err != nil {
-		return err
-	}
+		builder.needsFullRebuild = true
 
-	builder.changedFiles = nil
-	builder.removedFiles = nil
-
-	if n := builder.Sites.NumLogErrors(); n > 0 {
-		err = fmt.Errorf("logged %d errors", n)
+		// Logged errors surface only as "logged N error(s)"; include the
+		// messages so the editor's error card shows the cause.
+		if logged := capErrorLines(strings.TrimSpace(builder.Sites.Log.Errors()), 5); logged != "" {
+			err = fmt.Errorf("%w\n\n%s", err, logged)
+		}
 	}
 	return err
 }
 
+// capErrorLines trims s to at most max lines, noting how many were dropped, so
+// the editor's error card stays readable.
+func capErrorLines(s string, max int) string {
+	if s == "" {
+		return ""
+	}
+	lines := strings.Split(s, "\n")
+	if len(lines) <= max {
+		return s
+	}
+	lines = append(lines[:max:max], fmt.Sprintf("… %d more line(s)", len(lines)-max))
+	return strings.Join(lines, "\n")
+}
+
 // buildIfDirty runs the initial build when the site doesn't exist yet, then
 // an incremental build only when files changed since the last build, so
 // renders with nothing pending skip the build entirely.
@@ -170,10 +203,7 @@ func (builder *editorSiteBuilder) buildIfDirty() error {
 		return nil
 	}
 
-	if err := builder.build(); err != nil {
-		return fmt.Errorf("build after pending content changes: %w", err)
-	}
-	return nil
+	return builder.build()
 }
 
 func (builder *editorSiteBuilder) writeFile(filename, content string) {
@@ -334,7 +364,9 @@ func (builder *editorSiteBuilder) targetPage(target string) page.Page {
 				if f == nil {
 					continue
 				}
-				if filepath.Join(builder.Cfg.Base.ContentDir, f.Path()) != target {
+				// `target` is slash-normalized; `filepath.Join` uses the OS
+				// separator, so normalize it too or Windows never matches.
+				if filepath.ToSlash(filepath.Join(builder.Cfg.Base.ContentDir, f.Path())) != target {
 					continue
 				}
 				return p

package/nodes/editable-array-item.ts

@@ -6,6 +6,7 @@ import {
 	isEditableElement,
 } from "../helpers/checks.js";
 import { CloudCannon, realizeAPIValue } from "../helpers/cloudcannon.mjs";
+import { createErrorCard } from "../helpers/error-card.js";
 import type EditableArray from "./editable-array.js";
 import EditableComponent from "./editable-component.js";
 
@@ -39,13 +40,12 @@ export default class EditableArrayItem extends EditableComponent {
 
 		if (!parentElement || !isEditableArray(parentElement)) {
 			this.element.classList.add("errored");
-			const error = document.createElement("editable-region-error-card");
-			error.setAttribute("heading", "Failed to render array item");
-			error.setAttribute(
-				"message",
-				"Array item editable regions must be nested inside an array editable region but this element has no parent editable region. Please check that this element is inside an array editable region.",
+			this.element.replaceChildren(
+				createErrorCard(
+					"Failed to render array item",
+					"Array item editable regions must be nested inside an array editable region but this element has no parent editable region. Please check that this element is inside an array editable region.",
+				),
 			);
-			this.element.replaceChildren(error);
 			return false;
 		}
 

package/nodes/editable-array.ts

@@ -7,6 +7,7 @@ import type EditableArrayItemComponent from "../components/editable-array-item-c
 import type EditableRegionButton from "../components/ui/editable-region-button.js";
 import { isEditableElement } from "../helpers/checks.js";
 import { CloudCannon } from "../helpers/cloudcannon.mjs";
+import { createErrorCard } from "../helpers/error-card.js";
 import Editable, { type EditableListener } from "./editable.js";
 import type EditableArrayItem from "./editable-array-item.js";
 import "../components/ui/editable-region-button.js";
@@ -105,13 +106,12 @@ export default class EditableArray extends Editable {
 		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",
-				"Array editable regions require a 'data-prop' HTML attribute but none was provided. Please check that this element has a valid 'data-prop' attribute.",
+			this.element.replaceChildren(
+				createErrorCard(
+					"Failed to render array editable",
+					"Array editable regions require a 'data-prop' HTML attribute but none was provided. Please check that this element has a valid 'data-prop' attribute.",
+				),
 			);
-			this.element.replaceChildren(error);
 			return false;
 		}
 
@@ -127,24 +127,15 @@ export default class EditableArray extends Editable {
 			!CloudCannon.isAPIFile(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",
-				`Array editable regions expect to receive a value of type "array" but instead received a value of type '${typeof value}'.`,
+			this.element.replaceChildren(
+				createErrorCard(
+					"Failed to render array editable",
+					`Array editable regions expect to receive a value of type "array" but instead received a value of type '${typeof value}'.`,
+					this.contextBase?.fullPath
+						? `This may mean that the 'data-prop' attribute is incorrectly set for this element, the full 'data-prop' path was '${this.contextBase?.fullPath}'.`
+						: `This may mean that the 'data-prop' attribute is incorrectly set for this element.`,
+				),
 			);
-			if (this.contextBase?.fullPath) {
-				error.setAttribute(
-					"hint",
-					`This may mean that the 'data-prop' attribute is incorrectly set for this element, the full 'data-prop' path was '${this.contextBase?.fullPath}'.`,
-				);
-			} else {
-				error.setAttribute(
-					"hint",
-					`This may mean that the 'data-prop' attribute is incorrectly set for this element.`,
-				);
-			}
-			this.element.replaceChildren(error);
 			return;
 		}
 		return value;
@@ -304,16 +295,12 @@ export default class EditableArray extends Editable {
 							editable?: EditableArrayItem;
 						};
 					} else {
-						const error = document.createElement("editable-region-error-card");
-						error.setAttribute(
-							"heading",
-							"Failed to render array editable region",
-						);
-						error.setAttribute(
-							"message",
-							"Array editable region contains an array item that cannot be rendered. Either a 'data-component' attribute or a 'data-component-key' attribute is required to render array items that weren't previously on the page. Please save and rebuild to see your changes or add a 'data-component' or 'data-component-key' attribute to this element.",
+						this.element.replaceChildren(
+							createErrorCard(
+								"Failed to render array editable region",
+								"Array editable region contains an array item that cannot be rendered. Either a 'data-component' attribute or a 'data-component-key' attribute is required to render array items that weren't previously on the page. Please save and rebuild to see your changes or add a 'data-component' or 'data-component-key' attribute to this element.",
+							),
 						);
-						this.element.replaceChildren(error);
 						return;
 					}
 					this.element.appendChild(child);
@@ -431,8 +418,7 @@ export default class EditableArray extends Editable {
 				} else if (clone) {
 					matchingChild = clone.cloneNode(true) as any;
 				} else {
-					const error = document.createElement("editable-region-error-card");
-					error.setAttribute("heading", "Failed to render array item");
+					const error = createErrorCard("Failed to render array item");
 					if (typeof componentKey === "string") {
 						error.setAttribute(
 							"message",

package/nodes/editable-component.ts

@@ -6,6 +6,7 @@ import {
 import Editable, { hasEditable } from "./editable.js";
 import { hasEditableText } from "./editable-text.js";
 import "../components/ui/editable-region-error-card.js";
+import { createErrorCard } from "../helpers/error-card.js";
 import "../components/ui/editable-component-controls.js";
 import type EditableComponentControls from "../components/ui/editable-component-controls.js";
 import {
@@ -44,13 +45,12 @@ export default class EditableComponent extends Editable {
 		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 editable regions require a 'data-component' HTML attribute but none was provided. Please check that this element has a valid 'data-component' attribute.",
+			this.element.replaceChildren(
+				createErrorCard(
+					"Failed to render component",
+					"Component editable regions require a 'data-component' HTML attribute but none was provided. Please check that this element has a valid 'data-component' attribute.",
+				),
 			);
-			this.element.replaceChildren(error);
 			return false;
 		}
 
@@ -107,10 +107,8 @@ export default class EditableComponent extends Editable {
 
 		if (!component) {
 			this.element.classList.add("errored");
-			const error = document.createElement("editable-region-error-card");
-			error.setAttribute("heading", "Failed to render component");
-			error.setAttribute(
-				"message",
+			const error = createErrorCard(
+				"Failed to render component",
 				`Failed to find a registered component with the key "${key}". This may mean that the provided "data-component" attribute is incorrect or that the component hasn't been registered.`,
 			);
 
@@ -146,8 +144,7 @@ export default class EditableComponent extends Editable {
 			rootEl = this.santiseComponentOutput(await component(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}`);
+			const error = createErrorCard(`Failed to render component: ${key}`);
 			error.error = err;
 			this.element.replaceChildren(error);
 			return;

package/nodes/editable-image.ts

@@ -1,4 +1,5 @@
 import { CloudCannon } from "../helpers/cloudcannon.mjs";
+import { createErrorCard } from "../helpers/error-card.js";
 import Editable from "./editable.js";
 
 export default class EditableImage extends Editable {
@@ -14,12 +15,7 @@ export default class EditableImage extends Editable {
 
 	displayError(heading: string, message: string, hint?: string) {
 		this.element.classList.add("errored");
-		const error = document.createElement("editable-region-error-card");
-		error.setAttribute("heading", heading);
-		error.setAttribute("message", message);
-		if (hint) {
-			error.setAttribute("hint", hint);
-		}
+		const error = createErrorCard(heading, message, hint);
 		if (this.imageEl) {
 			this.imageEl?.replaceWith(error);
 		} else {

package/nodes/editable-source.ts

@@ -1,6 +1,7 @@
 import type { CloudCannonVisualEditorAPIV1File } from "@cloudcannon/visual-editor-api";
 import { html as beautifyHtml } from "js-beautify";
 import { CloudCannon } from "../helpers/cloudcannon.mjs";
+import { createErrorCard } from "../helpers/error-card.js";
 import EditableText from "./editable-text.js";
 
 const INDENTATION_REGEX = /^([ \t]+)[^\s]/gm;
@@ -26,6 +27,7 @@ const HTML_VOID_ELEMENT: Record<string, boolean> = {
 
 export default class EditableSource extends EditableText {
 	file?: CloudCannonVisualEditorAPIV1File;
+	inputConfig?: Record<string, unknown>;
 	format = {
 		leading: "",
 		trailing: "",
@@ -60,45 +62,76 @@ export default class EditableSource extends EditableText {
 		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",
-				"Source editable regions require a 'data-path' HTML attribute but none was provided. Please check that this element has a valid 'data-path' attribute.",
+			this.element.replaceChildren(
+				createErrorCard(
+					"Failed to render source editable region",
+					"Source editable regions require a 'data-path' HTML attribute but none was provided. Please check that this element has a valid 'data-path' attribute.",
+				),
 			);
-			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",
-				"Source editable regions require a 'data-key' HTML attribute but none was provided. Please check that this element has a valid 'data-key' attribute.",
+			this.element.replaceChildren(
+				createErrorCard(
+					"Failed to render source editable region",
+					"Source editable regions require a 'data-key' HTML attribute but none was provided. Please check that this element has a valid 'data-key' attribute.",
+				),
 			);
-			this.element.replaceChildren(error);
 			return false;
 		}
+
+		const inlineInputConfig = this.element.dataset.inputConfig;
+		if (typeof inlineInputConfig === "string") {
+			try {
+				const inputConfig = JSON.parse(inlineInputConfig);
+				if (
+					!inputConfig ||
+					typeof inputConfig !== "object" ||
+					Array.isArray(inputConfig)
+				) {
+					const actualType = Array.isArray(inputConfig)
+						? "array"
+						: inputConfig === null
+							? "null"
+							: typeof inputConfig;
+					this.element.classList.add("errored");
+					this.element.replaceChildren(
+						createErrorCard(
+							"Failed to render source editable region",
+							`The value provided for the 'data-input-config' HTML attribute is invalid. The value should be of type "object", but instead was a value of type "${actualType}". Please check that this attribute is a valid JSON object.`,
+						),
+					);
+					return false;
+				}
+				this.inputConfig = inputConfig;
+			} catch (err: unknown) {
+				this.element.classList.add("errored");
+				this.element.replaceChildren(
+					createErrorCard(
+						"Failed to render source editable region",
+						"Failed to parse the value provided for the 'data-input-config' HTML attribute as JSON. Please check that this attribute is a valid JSON object.",
+						err instanceof Error ? err.message : String(err),
+					),
+				);
+				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",
-				"The provided 'data-path' HTML attribute references a file that does not exist. Please check that the file exists and that the 'data-path' attribute on this element is correct.",
-			);
-			error.setAttribute(
-				"hint",
-				`The current value of the "data-path" attribute is "${this.element.dataset.path}"`,
+			this.element.replaceChildren(
+				createErrorCard(
+					"Failed to render source editable region",
+					"The provided 'data-path' HTML attribute references a file that does not exist. Please check that the file exists and that the 'data-path' attribute on this element is correct.",
+					`The current value of the "data-path" attribute is "${this.element.dataset.path}"`,
+				),
 			);
-			this.element.replaceChildren(error);
 			return;
 		}
 
@@ -106,20 +139,13 @@ export default class EditableSource extends EditableText {
 			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 an element matching the provided 'data-key' attribute.",
-				);
-				error.setAttribute(
-					"hint",
-					`This might mean that your 'data-path' attribute is incorrect. The current value of the "data-path" attribute is "${this.element.dataset.path}" and the current value of the "data-key" attribute is "${this.element.dataset.key}".`,
+				this.element.replaceChildren(
+					createErrorCard(
+						"Failed to render source editable region",
+						"Failed to find an element matching the provided 'data-key' attribute.",
+						`This might mean that your 'data-path' attribute is incorrect. The current value of the "data-path" attribute is "${this.element.dataset.path}" and the current value of the "data-key" attribute is "${this.element.dataset.key}".`,
+					),
 				);
-				this.element.replaceChildren(error);
 				return;
 			}
 
@@ -129,20 +155,13 @@ export default class EditableSource extends EditableText {
 			);
 			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",
-					`Source editable regions require that all 'data-key' attributes in the same file have unique values but the current file contains multiple instances of the key '${this.element.dataset.key}'. Please make sure all 'data-key' attributes are unique within the same file.`,
+				this.element.replaceChildren(
+					createErrorCard(
+						"Failed to render source editable region",
+						`Source editable regions require that all 'data-key' attributes in the same file have unique values but the current file contains multiple instances of the key '${this.element.dataset.key}'. Please make sure all 'data-key' attributes are unique within the same file.`,
+						`The current value of the 'data-path' attribute is '${this.element.dataset.path}'.`,
+					),
 				);
-				error.setAttribute(
-					"hint",
-					`The current value of the 'data-path' attribute is '${this.element.dataset.path}'"'.`,
-				);
-				this.element.replaceChildren(error);
 				return;
 			}
 		}
@@ -228,13 +247,22 @@ export default class EditableSource extends EditableText {
 			return this.editor;
 		}
 
+		if (!this.inputConfig && typeof this.element.dataset.input === "string") {
+			this.inputConfig = await this.file?.getInputConfig({
+				slug: this.element.dataset.input,
+			});
+		}
+
 		this.editor = await CloudCannon.createTextEditableRegion(
 			this.element,
 			this.onChange.bind(this),
 			{
 				elementType: this.element.dataset.type,
-				editableType: "content",
-				inputConfig: { type: "html" },
+				editableType: this.inputConfig ? undefined : "content",
+				inputConfig: {
+					...this.inputConfig,
+					type: "html",
+				},
 			},
 		);
 

package/nodes/editable-text.ts

@@ -1,4 +1,5 @@
 import { CloudCannon } from "../helpers/cloudcannon.mjs";
+import { createErrorCard } from "../helpers/error-card.js";
 import Editable from "./editable.js";
 
 type EditableFocusEvent = CustomEvent<number>;
@@ -20,13 +21,12 @@ export default class EditableText extends Editable {
 		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 text editable region");
-			error.setAttribute(
-				"message",
-				"Text editable regions require a 'data-prop' HTML attribute but none was provided. Please check that this element has a valid 'data-prop' attribute.",
+			this.element.replaceChildren(
+				createErrorCard(
+					"Failed to render text editable region",
+					"Text editable regions require a 'data-prop' HTML attribute but none was provided. Please check that this element has a valid 'data-prop' attribute.",
+				),
 			);
-			this.element.replaceChildren(error);
 			return false;
 		}
 
@@ -36,13 +36,12 @@ export default class EditableText extends Editable {
 			!["span", "text", "block"].includes(elementType)
 		) {
 			this.element.classList.add("errored");
-			const error = document.createElement("editable-region-error-card");
-			error.setAttribute("heading", "Failed to render text editable region");
-			error.setAttribute(
-				"message",
-				`Text editable region received an invalid type for the 'data-type' HTML attribute. The provided element type was '${elementType}' but the supported element types are 'span', 'text', and 'block'. Please set the 'data-type' attribute to one of the supported types.`,
+			this.element.replaceChildren(
+				createErrorCard(
+					"Failed to render text editable region",
+					`Text editable region received an invalid type for the 'data-type' HTML attribute. The provided element type was '${elementType}' but the supported element types are 'span', 'text', and 'block'. Please set the 'data-type' attribute to one of the supported types.`,
+				),
 			);
-			this.element.replaceChildren(error);
 			return false;
 		}
 		return true;
@@ -51,24 +50,15 @@ export default class EditableText extends Editable {
 	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 text editable region");
-			error.setAttribute(
-				"message",
-				`Text editable regions expect to receive a value of type "string" but instead received a value of type '${typeof value}'.`,
+			this.element.replaceChildren(
+				createErrorCard(
+					"Failed to render text editable region",
+					`Text editable regions expect to receive a value of type "string" but instead received a value of type '${typeof value}'.`,
+					this.contextBase?.fullPath
+						? `This may mean that the 'data-prop' attribute is incorrectly set for this element, the full 'data-prop' path was '${this.contextBase?.fullPath}'.`
+						: `This may mean that the 'data-prop' attribute is incorrectly set for this element.`,
+				),
 			);
-			if (this.contextBase?.fullPath) {
-				error.setAttribute(
-					"hint",
-					`This may mean that the 'data-prop' attribute is incorrectly set for this element, the full 'data-prop' path was '${this.contextBase?.fullPath}'.`,
-				);
-			} else {
-				error.setAttribute(
-					"hint",
-					`This may mean that the 'data-prop' attribute is incorrectly set for this element.`,
-				);
-			}
-			this.element.replaceChildren(error);
 			return;
 		}
 		return value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudcannon/editable-regions",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "type": "module",
   "description": "Visual Editing for the CloudCannon CMS.",
   "keywords": [
@@ -37,7 +37,8 @@
     "test:build-astro-fixture": "npm --prefix test/unit/_fixtures/astro install --silent && npm --prefix test/unit/_fixtures/astro run build",
     "test:build-eleventy-fixture": "npm --prefix test/unit/_fixtures/eleventy install --silent && npm --prefix test/unit/_fixtures/eleventy run build",
     "test:build-eleventy-plugin-config": "npm --prefix test/unit/_fixtures/eleventy-plugin-config install --silent && npm --prefix test/unit/_fixtures/eleventy-plugin-config run build",
-    "test:build-hugo-fixture": "npm --prefix test/unit/_fixtures/hugo run build"
+    "test:build-hugo-fixture": "npm --prefix test/unit/_fixtures/hugo run build",
+    "test:integration": "npm run build:hugo && bash run-integration-tests.sh"
   },
   "files": [
     "components",
@@ -104,30 +105,30 @@
     "./internal/styles": "./styles/index.js"
   },
   "devDependencies": {
-    "@astrojs/react": "6.0.5",
+    "@astrojs/react": "7.0.1",
     "@astrojs/svelte": "9.0.1",
-    "@astrojs/vue": "7.0.2",
-    "@biomejs/biome": "2.5.13",
+    "@astrojs/vue": "7.0.3",
+    "@biomejs/biome": "2.5.15",
     "@cloudcannon/visual-editor-api": "0.0.20",
     "@sindresorhus/slugify": "3.0.1",
-    "@sveltejs/vite-plugin-svelte": "7.3.0",
+    "@sveltejs/vite-plugin-svelte": "7.3.1",
     "@types/js-beautify": "1.14.3",
-    "@types/node": "26.5.1",
+    "@types/node": "26.6.5",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "@vitejs/plugin-vue": "6.0.8",
-    "astro": "7.3.2",
-    "happy-dom": "20.14.5",
+    "@vitejs/plugin-vue": "6.0.10",
+    "astro": "7.3.8",
+    "happy-dom": "20.14.6",
     "js-beautify": "2.0.3",
-    "liquidjs": "10.29.0",
+    "liquidjs": "10.30.0",
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "slugify": "1.6.9",
-    "svelte": "5.57.0",
+    "svelte": "5.57.2",
     "typescript": "6.0.3",
-    "vitest": "^4.1.11",
-    "vue": "3.5.42",
-    "vue-tsc": "3.3.11"
+    "vitest": "5.0.3",
+    "vue": "3.5.43",
+    "vue-tsc": "3.3.13"
   },
   "dependencies": {
     "esbuild": "0.28.2"