@tideworthy/tidysites-platform 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.4.0
+
+- The Tideworthy on-site editor: `@tideworthy/tidysites-platform/editor` is an Astro component a template renders in edit mode with the page's block schemas and block list. Every framed block (`data-tidy-block`, `data-tidy-type`, list in `data-tidy-blocks`) gets a hover chip with Edit, move up, move down, add a section below, and remove; Edit opens a side panel whose form comes from the block's Block Kit field schema (text, multiline, number, toggle, select, repeater). Saves go through EmDash's `PUT /_emdash/api/content/:collection/:id` as a draft with the editor's session; Publish is EmDash's publish call. Exists because EmDash's inline editor renders custom blocks as "edit in admin" placeholders. Pure block operations in `@tideworthy/tidysites-platform/editor/ops`.
+
 ## 0.3.0
 
 - `tidyPlatform()` registers a middleware: with a `TIDY_FRAME_ANCESTORS` variable on the site (space-separated https origins), responses carry `Content-Security-Policy: frame-ancestors 'self' <origins>` in place of EmDash's `X-Frame-Options: SAMEORIGIN`, so the platform can embed the staging preview. Inert without the variable. New export `@tideworthy/tidysites-platform/middleware`.

package/README.md

@@ -43,6 +43,20 @@ export { default, PluginBridge } from "@emdash-cms/cloudflare/worker";
 
 EmDash answers every page with `X-Frame-Options: SAMEORIGIN` unless a Content-Security-Policy is present. `tidyPlatform()` registers a middleware that, when the site carries a `TIDY_FRAME_ANCESTORS` variable (space-separated https origins), replaces that header with `Content-Security-Policy: frame-ancestors 'self' <origins>` so the platform's website page can embed the site. Without the variable nothing changes.
 
+## The on-site editor
+
+EmDash's inline editor edits plain rich text; a Block Kit block inside a Portable Text field renders as an "edit in admin" placeholder. Templates built from blocks use the Tideworthy editor instead:
+
+```astro
+---
+import TidyEditor from "@tideworthy/tidysites-platform/editor";
+const editMode = Astro.cookies.get("emdash-edit-mode")?.value === "true";
+---
+{editMode && <TidyEditor collection="pages" id={page.data.id} blocks={blockSchema} value={content} />}
+```
+
+The template renders the block list inside `<div data-tidy-blocks>` and each custom block inside `<div data-tidy-block={_key} data-tidy-type={_type}>`, and passes `PortableText` a copy of the array (`[...blocks]`) so EmDash's inline editor does not mount on it. `blocks` is the plugin definition's `portableTextBlocks`. Hovering a block shows a chip (Edit, move, add below, remove); Edit opens a panel built from the block's fields; Save writes a draft through EmDash's content API with the signed-in editor's session and reloads; Publish calls EmDash's publish. Article bodies keep EmDash's inline editor by passing the original array.
+
 ## Bindings the routes read
 
 | Binding | Type | Purpose |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tideworthy/tidysites-platform",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"description": "The Tidysites platform integration for EmDash sites: bootstrap, sessions, maintenance, health, and publish hooks under /_tidy/*.",
 	"license": "MIT",
 	"type": "module",
@@ -19,6 +19,8 @@
 		".": "./src/index.ts",
 		"./plugin": "./src/plugin.ts",
 		"./middleware": "./src/middleware.ts",
+		"./editor": "./src/editor/TidyEditor.astro",
+		"./editor/ops": "./src/editor/ops.ts",
 		"./client": "./src/client.ts",
 		"./routes/bootstrap": "./src/routes/bootstrap.ts",
 		"./routes/session": "./src/routes/session.ts",
@@ -29,7 +31,7 @@
 		"./routes/maintenance": "./src/routes/maintenance.ts"
 	},
 	"scripts": {
-		"typecheck": "tsc --noEmit",
+		"typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.editor.json",
 		"test": "vitest run",
 		"check": "npm run typecheck && npm run test"
 	},

package/src/editor/TidyEditor.astro

@@ -0,0 +1,60 @@
+---
+/**
+ * The Tideworthy on-site editor for block-built pages. Render it from the
+ * layout when the page is in edit mode, with the entry the page shows, the
+ * block schemas the template declares, and the block list as rendered. The
+ * template frames each custom block with `data-tidy-block` (its key) and
+ * `data-tidy-type`, and wraps the list in `data-tidy-blocks`.
+ */
+import type { Block, BlockSchema } from "./ops";
+
+interface Props {
+	collection: string;
+	id: string;
+	field?: string;
+	blocks: BlockSchema[];
+	value: Block[];
+	/** The entry's status as rendered: "draft" shows the Publish control at once. */
+	status?: string;
+}
+const { collection, id, field = "content", blocks, value, status } = Astro.props;
+const config = JSON.stringify({ collection, id, field, blocks, value, status });
+---
+<script type="application/json" id="tidy-editor-config" set:html={config.replace(/</g, "\\u003c")} />
+<script src="./runtime.ts"></script>
+<style is:global>
+	[data-tidy-block] { position: relative; outline: 2px dashed transparent; outline-offset: -2px; transition: outline-color 120ms; cursor: pointer; }
+	[data-tidy-block]:hover, [data-tidy-block].tidy-active { outline-color: #2b7fd1; }
+	.tidy-chip { position: absolute; z-index: 2147483000; display: flex; gap: 4px; align-items: center; padding: 4px 6px; background: #17211c; color: #fff; border-radius: 8px; font: 500 13px/1.2 system-ui, sans-serif; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
+	.tidy-chip[hidden], .tidy-panel[hidden], .tidy-status[hidden] { display: none; }
+	.tidy-chip-label { padding: 0 6px 0 4px; opacity: .85; }
+	.tidy-btn { appearance: none; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: inherit; border-radius: 6px; padding: 4px 8px; font: inherit; cursor: pointer; }
+	.tidy-btn:hover { background: rgba(255,255,255,.18); }
+	.tidy-btn:disabled { opacity: .35; cursor: default; }
+	.tidy-btn-primary { background: #2b7fd1; border-color: #2b7fd1; color: #fff; }
+	.tidy-btn-primary:hover { background: #2470bd; }
+	.tidy-btn-danger:hover { background: #b3261e; border-color: #b3261e; }
+	.tidy-btn-sm { padding: 3px 8px; font-size: 12px; }
+	.tidy-add-end { display: block; width: calc(100% - 32px); margin: 16px; padding: 14px; border: 2px dashed #2b7fd1; border-radius: 10px; background: rgba(43,127,209,.06); color: #2b7fd1; font: 600 14px system-ui, sans-serif; cursor: pointer; }
+	.tidy-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 2147483001; overflow: auto; background: #fff; color: #17211c; border-left: 1px solid #d3dcd6; box-shadow: -12px 0 40px rgba(0,0,0,.18); padding: 20px; font: 14px/1.45 system-ui, sans-serif; }
+	.tidy-panel-head h2 { margin: 0 0 4px; font-size: 18px; }
+	.tidy-panel-head p { margin: 0 0 16px; color: #4a5851; }
+	.tidy-form { display: grid; gap: 14px; }
+	.tidy-field { display: grid; gap: 6px; }
+	.tidy-field-label { font-weight: 600; font-size: 13px; }
+	.tidy-field input[type="text"], .tidy-field input[type="number"], .tidy-field textarea, .tidy-field select { width: 100%; box-sizing: border-box; border: 1px solid #c9d2cc; border-radius: 6px; padding: 8px 10px; font: inherit; background: #fff; color: inherit; }
+	.tidy-field textarea { resize: vertical; min-height: 88px; }
+	.tidy-field-toggle { display: flex; align-items: center; gap: 10px; }
+	.tidy-repeater { border: 1px solid #d3dcd6; border-radius: 8px; padding: 12px; display: grid; gap: 12px; }
+	.tidy-repeater legend { font-weight: 600; padding: 0 6px; }
+	.tidy-repeater-item { display: grid; gap: 10px; padding: 12px; background: #f6f7f5; border-radius: 6px; }
+	.tidy-panel .tidy-btn { color: #17211c; border-color: #c9d2cc; background: #fff; }
+	.tidy-panel .tidy-btn-primary { color: #fff; background: #2b7fd1; border-color: #2b7fd1; }
+	.tidy-panel .tidy-btn-danger { color: #b3261e; }
+	.tidy-panel-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; border-top: 1px solid #e6ede8; }
+	.tidy-add-list { display: grid; gap: 8px; margin-bottom: 16px; }
+	.tidy-add-item { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid #d3dcd6; border-radius: 8px; background: #fff; cursor: pointer; font: inherit; }
+	.tidy-add-item:hover { border-color: #2b7fd1; background: rgba(43,127,209,.06); }
+	.tidy-add-item span { color: #4a5851; font-size: 13px; }
+	.tidy-status { position: fixed; left: 16px; bottom: 16px; z-index: 2147483000; display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: #17211c; color: #fff; border-radius: 999px; font: 500 13px system-ui, sans-serif; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
+</style>

package/src/editor/ops.ts

@@ -0,0 +1,94 @@
+/**
+ * Pure operations on a page's block list (a Portable Text array whose custom
+ * blocks carry `_type` and `_key`). The editor runtime calls these; the tests
+ * cover them without a browser.
+ */
+export type Block = { _type: string; _key?: string } & Record<string, unknown>;
+
+export interface FieldSchema {
+	type: "text_input" | "number_input" | "toggle" | "select" | "repeater" | string;
+	action_id: string;
+	label: string;
+	multiline?: boolean;
+	options?: Array<{ label: string; value: string }>;
+	fields?: FieldSchema[];
+	item_label?: string;
+	min_items?: number;
+	max_items?: number;
+}
+
+export interface BlockSchema {
+	type: string;
+	label: string;
+	category?: string;
+	description?: string;
+	fields: FieldSchema[];
+}
+
+export function newKey(random: () => number = Math.random): string {
+	let s = "";
+	for (let i = 0; i < 12; i++) s += "abcdefghijklmnopqrstuvwxyz0123456789"[Math.floor(random() * 36)];
+	return s;
+}
+
+export function findBlock(blocks: Block[], key: string): Block | undefined {
+	return blocks.find((b) => b._key === key);
+}
+
+/** The block with `key` gets `data` merged over it; `_type` and `_key` never change. */
+export function updateBlock(blocks: Block[], key: string, data: Record<string, unknown>): Block[] {
+	return blocks.map((b) => (b._key === key ? { ...b, ...data, _type: b._type, _key: b._key } : b));
+}
+
+export function moveBlock(blocks: Block[], key: string, direction: -1 | 1): Block[] {
+	const i = blocks.findIndex((b) => b._key === key);
+	const j = i + direction;
+	if (i < 0 || j < 0 || j >= blocks.length) return blocks;
+	const out = blocks.slice();
+	const a = out[i] as Block;
+	out[i] = out[j] as Block;
+	out[j] = a;
+	return out;
+}
+
+export function removeBlock(blocks: Block[], key: string): Block[] {
+	return blocks.filter((b) => b._key !== key);
+}
+
+/** Insert a new block of `type` after the block with `afterKey` (or at the end). */
+export function insertBlock(blocks: Block[], type: string, afterKey: string | null, data: Record<string, unknown>, key = newKey()): Block[] {
+	const block: Block = { ...data, _type: type, _key: key };
+	const i = afterKey ? blocks.findIndex((b) => b._key === afterKey) : -1;
+	if (i < 0) return [...blocks, block];
+	return [...blocks.slice(0, i + 1), block, ...blocks.slice(i + 1)];
+}
+
+/** Empty values for every field in a schema, so a new block renders without holes. */
+export function defaultsFor(schema: BlockSchema): Record<string, unknown> {
+	const out: Record<string, unknown> = {};
+	for (const f of schema.fields) {
+		if (f.type === "toggle") out[f.action_id] = false;
+		else if (f.type === "number_input") out[f.action_id] = null;
+		else if (f.type === "select") out[f.action_id] = f.options?.[0]?.value ?? "";
+		else if (f.type === "repeater") out[f.action_id] = [];
+		else out[f.action_id] = "";
+	}
+	return out;
+}
+
+/** Coerce a raw form value into the field's stored type. */
+export function coerce(field: FieldSchema, raw: unknown): unknown {
+	switch (field.type) {
+		case "toggle":
+			return raw === true || raw === "on" || raw === "true";
+		case "number_input": {
+			if (raw === "" || raw === null || raw === undefined) return null;
+			const n = Number(raw);
+			return Number.isFinite(n) ? n : null;
+		}
+		case "repeater":
+			return Array.isArray(raw) ? raw : [];
+		default:
+			return typeof raw === "string" ? raw : raw === null || raw === undefined ? "" : String(raw);
+	}
+}

package/src/editor/runtime.ts

@@ -0,0 +1,273 @@
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+/**
+ * The Tideworthy on-site editor. Runs on a page rendered in edit mode. Every
+ * custom block on the page sits in a frame (`[data-tidy-block]`, rendered by
+ * the template); hovering a frame shows a chip with Edit, Up, Down, Remove,
+ * and Add; Edit opens a panel whose form comes from the block's field schema.
+ * Saves go through EmDash's own content API with the editor's session, as a
+ * draft; Publish is the same call EmDash's toolbar makes.
+ */
+import { coerce, defaultsFor, insertBlock, moveBlock, removeBlock, updateBlock, type Block, type BlockSchema, type FieldSchema } from "./ops";
+
+interface Config {
+	collection: string;
+	id: string;
+	field: string;
+	blocks: BlockSchema[];
+	value: Block[];
+	status?: string;
+}
+
+const API = "/_emdash/api";
+const CSRF = { "X-EmDash-Request": "1" };
+
+function el<K extends keyof HTMLElementTagNameMap>(tag: K, attrs: Record<string, string> = {}, children: Array<Node | string> = []): HTMLElementTagNameMap[K] {
+	const e = document.createElement(tag);
+	for (const [k, v] of Object.entries(attrs)) {
+		if (k === "class") e.className = v;
+		else if (k === "text") e.textContent = v;
+		else e.setAttribute(k, v);
+	}
+	for (const c of children) e.append(c);
+	return e;
+}
+
+export function start(config: Config): void {
+	let value: Block[] = config.value;
+	const schemaOf = (type: string) => config.blocks.find((b) => b.type === type);
+	const frames = () => Array.from(document.querySelectorAll<HTMLElement>("[data-tidy-block]"));
+
+	// --- status pill -------------------------------------------------------
+	const status = el("div", { class: "tidy-status", hidden: "" });
+	const statusText = el("span");
+	const publishBtn = el("button", { type: "button", class: "tidy-btn tidy-btn-primary", text: "Publish" });
+	status.append(statusText, publishBtn);
+	document.body.append(status);
+	function setStatus(text: string, showPublish: boolean) {
+		statusText.textContent = text;
+		publishBtn.hidden = !showPublish;
+		status.hidden = false;
+	}
+	publishBtn.addEventListener("click", async () => {
+		publishBtn.disabled = true;
+		setStatus("Publishing", true);
+		const r = await fetch(`${API}/content/${encodeURIComponent(config.collection)}/${encodeURIComponent(config.id)}/publish`, { method: "POST", credentials: "same-origin", headers: CSRF });
+		if (r.ok) location.reload();
+		else {
+			publishBtn.disabled = false;
+			setStatus(`Publish failed (${r.status})`, true);
+		}
+	});
+	// Saves make a draft; Publish is the same call EmDash's toolbar makes and is always at hand.
+	setStatus(config.status === "draft" ? "Unpublished changes" : "Editing", true);
+
+	async function save(next: Block[]): Promise<void> {
+		setStatus("Saving", false);
+		const r = await fetch(`${API}/content/${encodeURIComponent(config.collection)}/${encodeURIComponent(config.id)}`, {
+			method: "PUT",
+			credentials: "same-origin",
+			headers: { ...CSRF, "content-type": "application/json" },
+			body: JSON.stringify({ data: { [config.field]: next } })
+		});
+		if (!r.ok) {
+			setStatus(`Save failed (${r.status})`, false);
+			return;
+		}
+		value = next;
+		setStatus("Saved. Reloading", false);
+		location.reload();
+	}
+
+	// --- chip on the hovered frame ------------------------------------------
+	const chip = el("div", { class: "tidy-chip", hidden: "" });
+	const chipLabel = el("span", { class: "tidy-chip-label" });
+	const bEdit = el("button", { type: "button", class: "tidy-btn", text: "Edit" });
+	const bUp = el("button", { type: "button", class: "tidy-btn", title: "Move up", text: "↑" });
+	const bDown = el("button", { type: "button", class: "tidy-btn", title: "Move down", text: "↓" });
+	const bAdd = el("button", { type: "button", class: "tidy-btn", title: "Add a section below", text: "+" });
+	const bRemove = el("button", { type: "button", class: "tidy-btn tidy-btn-danger", title: "Remove this section", text: "Remove" });
+	chip.append(chipLabel, bEdit, bUp, bDown, bAdd, bRemove);
+	document.body.append(chip);
+	let current: HTMLElement | null = null;
+
+	function showChip(frame: HTMLElement) {
+		current = frame;
+		const key = frame.dataset.tidyBlock ?? "";
+		const type = frame.dataset.tidyType ?? "";
+		chipLabel.textContent = schemaOf(type)?.label ?? type;
+		const r = frame.getBoundingClientRect();
+		chip.style.top = `${Math.max(8, r.top + window.scrollY - 2)}px`;
+		chip.style.left = `${Math.max(8, r.left + window.scrollX + 8)}px`;
+		const i = value.findIndex((b) => b._key === key);
+		bUp.disabled = i <= 0;
+		bDown.disabled = i < 0 || i >= value.length - 1;
+		chip.hidden = false;
+		frames().forEach((f) => f.classList.toggle("tidy-active", f === frame));
+	}
+	for (const f of frames()) {
+		f.addEventListener("mouseenter", () => showChip(f));
+		f.addEventListener("click", (e) => {
+			// Links and buttons inside a section keep working; clicking anything else edits it.
+			if ((e.target as HTMLElement).closest("a,button,input,select,textarea,label")) return;
+			e.preventDefault();
+			showChip(f);
+			openPanel(f.dataset.tidyBlock ?? "");
+		});
+	}
+	chip.addEventListener("mouseenter", () => { if (current) current.classList.add("tidy-active"); });
+	bEdit.addEventListener("click", () => current && openPanel(current.dataset.tidyBlock ?? ""));
+	bUp.addEventListener("click", () => current && confirmSave(moveBlock(value, current.dataset.tidyBlock ?? "", -1)));
+	bDown.addEventListener("click", () => current && confirmSave(moveBlock(value, current.dataset.tidyBlock ?? "", 1)));
+	bRemove.addEventListener("click", () => {
+		if (!current) return;
+		if (confirm(`Remove this ${chipLabel.textContent} section?`)) void save(removeBlock(value, current.dataset.tidyBlock ?? ""));
+	});
+	bAdd.addEventListener("click", () => current && openAdd(current.dataset.tidyBlock ?? null));
+	function confirmSave(next: Block[]) {
+		if (next !== value) void save(next);
+	}
+
+	// "Add a section" at the end of the block list.
+	const list = document.querySelector<HTMLElement>("[data-tidy-blocks]");
+	if (list) {
+		const add = el("button", { type: "button", class: "tidy-add-end", text: "+ Add a section" });
+		add.addEventListener("click", () => openAdd(null));
+		list.after(add);
+	}
+
+	// --- panel ---------------------------------------------------------------
+	const panel = el("aside", { class: "tidy-panel", hidden: "" });
+	document.body.append(panel);
+	function closePanel() {
+		panel.hidden = true;
+		panel.replaceChildren();
+	}
+
+	function fieldInput(f: FieldSchema, v: unknown, name: string): HTMLElement {
+		const wrap = el("label", { class: "tidy-field" }, [el("span", { class: "tidy-field-label", text: f.label })]);
+		if (f.type === "toggle") {
+			const cb = el("input", { type: "checkbox", name });
+			cb.checked = v === true;
+			wrap.className = "tidy-field tidy-field-toggle";
+			wrap.prepend(cb);
+		} else if (f.type === "select") {
+			const s = el("select", { name });
+			for (const o of f.options ?? []) {
+				const opt = el("option", { value: o.value, text: o.label });
+				if (o.value === v) opt.selected = true;
+				s.append(opt);
+			}
+			wrap.append(s);
+		} else if (f.type === "number_input") {
+			const i = el("input", { type: "number", name });
+			i.value = typeof v === "number" ? String(v) : "";
+			wrap.append(i);
+		} else if (f.multiline) {
+			const t = el("textarea", { name, rows: "4" });
+			t.value = typeof v === "string" ? v : "";
+			wrap.append(t);
+		} else {
+			const i = el("input", { type: "text", name });
+			i.value = typeof v === "string" ? v : v === null || v === undefined ? "" : String(v);
+			wrap.append(i);
+		}
+		return wrap;
+	}
+
+	/** Builds the form for a block; returns a reader that yields the block's data from the inputs. */
+	function buildForm(schema: BlockSchema, data: Record<string, unknown>): { form: HTMLFormElement; read: () => Record<string, unknown> } {
+		const form = el("form", { class: "tidy-form" });
+		const repeaters = new Map<string, { field: FieldSchema; items: HTMLElement }>();
+		for (const f of schema.fields) {
+			if (f.type === "repeater") {
+				const box = el("fieldset", { class: "tidy-repeater" }, [el("legend", { text: f.label })]);
+				const items = el("div", { class: "tidy-repeater-items" });
+				const rows = Array.isArray(data[f.action_id]) ? (data[f.action_id] as Record<string, unknown>[]) : [];
+				const addItem = (row: Record<string, unknown>) => {
+					const item = el("div", { class: "tidy-repeater-item" });
+					for (const sub of f.fields ?? []) item.append(fieldInput(sub, row[sub.action_id], sub.action_id));
+					const rm = el("button", { type: "button", class: "tidy-btn tidy-btn-danger tidy-btn-sm", text: `Remove ${f.item_label ?? "item"}` });
+					rm.addEventListener("click", () => item.remove());
+					item.append(rm);
+					items.append(item);
+				};
+				rows.forEach(addItem);
+				const add = el("button", { type: "button", class: "tidy-btn tidy-btn-sm", text: `Add ${f.item_label ?? "item"}` });
+				add.addEventListener("click", () => addItem({}));
+				box.append(items, add);
+				form.append(box);
+				repeaters.set(f.action_id, { field: f, items });
+			} else form.append(fieldInput(f, data[f.action_id], f.action_id));
+		}
+		const read = (): Record<string, unknown> => {
+			const out: Record<string, unknown> = {};
+			for (const f of schema.fields) {
+				if (f.type === "repeater") {
+					const rep = repeaters.get(f.action_id)!;
+					out[f.action_id] = Array.from(rep.items.children).map((item) => {
+						const row: Record<string, unknown> = {};
+						for (const sub of f.fields ?? []) {
+							const input = item.querySelector<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>(`[name="${sub.action_id}"]`);
+							row[sub.action_id] = coerce(sub, sub.type === "toggle" ? (input as HTMLInputElement | null)?.checked : input?.value);
+						}
+						return row;
+					});
+					continue;
+				}
+				const input = form.querySelector<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>(`:scope > .tidy-field [name="${f.action_id}"]`);
+				out[f.action_id] = coerce(f, f.type === "toggle" ? (input as HTMLInputElement | null)?.checked : input?.value);
+			}
+			return out;
+		};
+		return { form, read };
+	}
+
+	function openPanel(key: string) {
+		const block = value.find((b) => b._key === key);
+		const schema = block ? schemaOf(block._type) : undefined;
+		if (!block || !schema) return;
+		panel.replaceChildren();
+		const { form, read } = buildForm(schema, block);
+		const saveBtn = el("button", { type: "submit", class: "tidy-btn tidy-btn-primary", text: "Save" });
+		const cancel = el("button", { type: "button", class: "tidy-btn", text: "Cancel" });
+		cancel.addEventListener("click", closePanel);
+		form.addEventListener("submit", (e) => {
+			e.preventDefault();
+			saveBtn.disabled = true;
+			void save(updateBlock(value, key, read()));
+		});
+		form.append(el("div", { class: "tidy-panel-actions" }, [saveBtn, cancel]));
+		panel.append(el("header", { class: "tidy-panel-head" }, [el("h2", { text: schema.label }), ...(schema.description ? [el("p", { text: schema.description })] : [])]), form);
+		panel.hidden = false;
+		(form.querySelector("input,textarea,select") as HTMLElement | null)?.focus();
+	}
+
+	function openAdd(afterKey: string | null) {
+		panel.replaceChildren();
+		const head = el("header", { class: "tidy-panel-head" }, [el("h2", { text: "Add a section" })]);
+		const listEl = el("div", { class: "tidy-add-list" });
+		for (const s of config.blocks.filter((b) => b.category !== "Inline")) {
+			const b = el("button", { type: "button", class: "tidy-add-item" }, [el("strong", { text: s.label }), el("span", { text: s.description ?? "" })]);
+			b.addEventListener("click", () => void save(insertBlock(value, s.type, afterKey, defaultsFor(s))));
+			listEl.append(b);
+		}
+		const cancel = el("button", { type: "button", class: "tidy-btn", text: "Cancel" });
+		cancel.addEventListener("click", closePanel);
+		panel.append(head, listEl, el("div", { class: "tidy-panel-actions" }, [cancel]));
+		panel.hidden = false;
+	}
+
+	document.addEventListener("keydown", (e) => {
+		if (e.key === "Escape" && !panel.hidden) closePanel();
+	});
+}
+
+const cfgEl = document.getElementById("tidy-editor-config");
+if (cfgEl?.textContent) {
+	try {
+		start(JSON.parse(cfgEl.textContent) as Config);
+	} catch (err) {
+		console.error("[tidy-editor]", err);
+	}
+}

package/src/version.ts

@@ -1,3 +1,3 @@
 /** Kept in step with package.json by the release checklist in MAINTAINING.md. */
-export const VERSION = "0.3.0";
+export const VERSION = "0.4.0";
 export const PLUGIN_ID = "tidy-platform";