@tideworthy/tidysites-platform 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.5.1
+
+- Editor: a record region nested inside a section (a service card in the services grid) gets its own "Edit details" chip; clicking it edits the record instead of following the card's link, and leaving it hands the chip back to the section.
+
 ## 0.5.0
 
 - Editor: image picker over the site's media library with upload, for block fields whose id names an image URL (`imageUrl`, `photoUrl`, …) and for record fields of kind image.

package/README.md

@@ -55,7 +55,7 @@ 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 publishes every entry saved in the session. A text field whose id ends in `imageUrl` (or `photoUrl`, `logoUrl`) gets an image picker over the media library with upload. Records: wrap a region in `data-tidy-record="services" data-tidy-record-id="…" data-tidy-record-label="Service details"` and pass `records` to the component; the form comes from EmDash's manifest and saves publish at once. Pass the business record in `records` and it is always one click away in the pill. On these pages EmDash's toolbar is hidden and its inline editing is off; article bodies keep EmDash's inline editor by passing the original array and not mounting this component.
+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 publishes every entry saved in the session. A text field whose id ends in `imageUrl` (or `photoUrl`, `logoUrl`) gets an image picker over the media library with upload. Records: wrap a region in `data-tidy-record="services" data-tidy-record-id="…" data-tidy-record-label="Service details"` and pass `records` to the component; the form comes from EmDash's manifest and saves publish at once. Pass the business record in `records` and it is always one click away in the pill. A section that lists records (a services grid) wraps each card in the same `data-tidy-record` attributes, so the card edits its record and the section's chip edits the section. On these pages EmDash's toolbar is hidden and its inline editing is off; article bodies keep EmDash's inline editor by passing the original array and not mounting this component.
 
 ## Bindings the routes read
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tideworthy/tidysites-platform",
-	"version": "0.5.0",
+	"version": "0.5.1",
 	"description": "The Tidysites platform integration for EmDash sites: bootstrap, sessions, maintenance, health, and publish hooks under /_tidy/*.",
 	"license": "MIT",
 	"type": "module",

package/src/editor/runtime.ts

@@ -202,6 +202,8 @@ export function start(config: Config): void {
 	for (const f of frames()) {
 		f.addEventListener("mouseenter", () => showBlockChip(f));
 		f.addEventListener("click", (e) => {
+			// A record listed inside the section (a service card) handles its own click.
+			if ((e.target as HTMLElement).closest("[data-tidy-record]")) return;
 			if (isInteractive(e.target)) return;
 			e.preventDefault();
 			showBlockChip(f);
@@ -209,14 +211,21 @@ export function start(config: Config): void {
 		});
 	}
 	for (const r of Array.from(document.querySelectorAll<HTMLElement>("[data-tidy-record]"))) {
+		const frame = r.parentElement?.closest<HTMLElement>("[data-tidy-block]") ?? null;
 		r.addEventListener("mouseenter", () => showRecordChip(r));
+		// Leaving a card inside a section hands the chip back to the section.
+		if (frame) r.addEventListener("mouseleave", () => showBlockChip(frame));
 		r.addEventListener("click", (e) => {
-			if (isInteractive(e.target)) return;
+			// Cards are often links; in edit mode a click edits instead of navigating.
+			if ((e.target as HTMLElement).closest("button,input,select,textarea,label")) return;
 			e.preventDefault();
+			e.stopPropagation();
 			showRecordChip(r);
 			void openRecord({ collection: r.dataset.tidyRecord ?? "", id: r.dataset.tidyRecordId ?? "", label: r.dataset.tidyRecordLabel ?? "" });
 		});
 	}
+	// The chip sits outside every frame; hovering it must not count as leaving.
+	chip.addEventListener("mouseenter", () => current?.classList.add("tidy-active"));
 	bEdit.addEventListener("click", () => {
 		if (!current) return;
 		if (current.dataset.tidyBlock) openBlock(current.dataset.tidyBlock);

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.5.0";
+export const VERSION = "0.5.1";
 export const PLUGIN_ID = "tidy-platform";