@goodfellow-cms/admin 0.5.0 → 0.6.0

package/README.md

@@ -4,7 +4,7 @@ The admin panel: the visual editor for a site's pages, collections, media, heade
 
 Its editor is built with each site's own config, so it always has the site's blocks, and runs them in frames sandboxed away from the admin panel's page, which signs in and publishes: `goodfellow build` adds the page at `/admin` and the editor at `/admin/editor/`, and Next.js sites render `GoodfellowAdmin` and `GoodfellowEditor` from `@goodfellow-cms/next` there.
 
-[Goodfellow](https://github.com/goodfellow-cms/goodfellow-cms) is a website builder for people who aren't developers, with no server or database: pages are files in your own GitHub or GitLab repository, edited in a visual editor built on [Puck](https://puckeditor.com). To start a new site, run `npm create goodfellow@latest my-site`. See the [documentation](https://goodfellow-cms.github.io/goodfellow-cms/) for everything else.
+[Goodfellow](https://github.com/goodfellow-cms/goodfellow-cms) is a website builder for people who aren't developers, with no server or database: pages are files in your own GitHub, GitLab or Bitbucket repository, edited in a visual editor built on [Puck](https://puckeditor.com). To start a new site, run `npm create goodfellow@latest my-site`. See the [documentation](https://goodfellow-cms.github.io/goodfellow-cms/) for everything else.
 
 More in the docs: [Edit pages](https://goodfellow-cms.github.io/goodfellow-cms/docs/edit-pages).
 

package/dist/dev.d.ts

@@ -1,8 +1,10 @@
-import { ContentStore } from "@goodfellow-cms/core";
+import { ContentStore, PluginTasks } from "@goodfellow-cms/core";
 //#region src/dev.d.ts
 /**
  * A content store that reads and writes the site's files through
  * `goodfellow dev`. For local development only: it is never part of a built site.
  */
-export declare function localStore(apiBase?: string): ContentStore;
+export declare function localStore(apiBase?: string): ContentStore & {
+  tasks: PluginTasks;
+};
 //#endregion

package/dist/dev.js

@@ -1,4 +1,4 @@
-import { ConflictError, decodeBase64, encodeBase64Bytes } from "@goodfellow-cms/core";
+import { ConflictError, PluginTaskError, decodeBase64, encodeBase64Bytes } from "@goodfellow-cms/core";
 //#region src/dev.ts
 /**
 * A content store that reads and writes the site's files through
@@ -53,6 +53,26 @@ function localStore(apiBase = "/__goodfellow/api") {
 					expectedRevision
 				})
 			})).json();
+		},
+		tasks: {
+			async supported() {
+				const response = await request("task", {}, true).catch(() => void 0);
+				return response?.ok === true && (await response.json()).supported === true;
+			},
+			async secretsPlace() {
+				const response = await request("task", {}, true).catch(() => void 0);
+				if (!response?.ok) return void 0;
+				return (await response.json()).place;
+			},
+			async run(task) {
+				return (await (await request("task", {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify(task)
+				}).catch((error) => {
+					throw new PluginTaskError("failed", error.message);
+				})).json()).result;
+			}
 		}
 	};
 }

package/dist/editor.js

@@ -1,9 +1,10 @@
-import { A as MediaChoiceContext, Ft as editedMarkdown, It as formattedHtml, Mt as storedEntryFields, O as createMediaPreviews, Q as StringsProvider, U as createChannel, V as READY_MESSAGE, a as AdminContext, at as mediaUrl, f as useDarkMode, h as ScheduleFields, i as usePreviewStyles, j as MediaChooser, jt as storedData, k as showMediaInPreview, l as useSiteContent, rt as findPage, s as useAdmin, t as SCHEDULE_PROP, tt as useStrings, u as setThemeChoice, y as SETTINGS_SECTIONS } from "./entry-values-ocbalc9U.js";
-import { COLOR_SCHEME_ATTRIBUTE, MEDIA_DIR, WEEKDAYS, allPages, canFormatMarkdown, cleanEventValue, contentInLanguage, datePart, escapeStyleText, findEntry, formatDate, formatOccurrence, getPageHead, googleFontsUrl, hasLanguages, isAllDay, isEventLike, languageHome, languageLinks, mainLanguage, neverIndexed, pageView, pathLanguage, renderedProblems, shownOccurrence, sitePages, themeToCss, todayIn, wallClock, weekdayName, weekdayOf } from "@goodfellow-cms/core";
+import { Ft as storedEntryFields, G as READY_MESSAGE, Pt as storedData, R as createMediaPreviews, Rt as editedMarkdown, a as AdminContext, at as findPage, b as MediaChooser, ct as mediaUrl, et as StringsProvider, f as useDarkMode, h as ScheduleFields, i as usePreviewStyles, l as useSiteContent, rt as useStrings, s as useAdmin, t as SCHEDULE_PROP, u as setThemeChoice, w as SETTINGS_SECTIONS, y as MediaChoiceContext, z as showMediaInPreview, zt as formattedHtml } from "./entry-values-BrY3L0Ai.js";
+import { r as createChannel } from "./plugin-protocol-DkvBDqsF.js";
+import { COLOR_SCHEME_ATTRIBUTE, DRAWN_SLOT_ELEMENT, MEDIA_DIR, WEEKDAYS, allPages, canFormatMarkdown, cleanEventValue, contentInLanguage, datePart, escapeStyleText, findEntry, formatDate, formatOccurrence, getPageHead, googleFontsUrl, hasLanguages, isAllDay, isEventLike, languageHome, languageLinks, mainLanguage, neverIndexed, pageLinks, pageView, pathLanguage, renderedProblems, shownOccurrence, sitePages, themeToCss, todayIn, wallClock, weekdayName, weekdayOf } from "@goodfellow-cms/core";
 import { createContext, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { PageBody, SiteProvider, adminSite, applyEntry, createPuckConfig, createPuckConfigs, cx, mediaFieldKind, preparePage, siteMetadata } from "@goodfellow-cms/react";
+import { PageBody, PageContent, SiteProvider, adminSite, applyEntry, createPuckConfig, createPuckConfigs, cx, isTableField, mediaFieldKind, preparePage, siteMetadata, tableCells } from "@goodfellow-cms/react";
 import { AutoField, FieldLabel, Puck, Render, RichTextMenu, createUsePuck, legacySideBarPlugin, migrate, registerOverlayPortal, resolveAllData, useGetPuck } from "@puckeditor/core";
 import { createPortal, flushSync } from "react-dom";
 const CANVAS = `.gf-canvas`;
@@ -907,6 +908,7 @@ function EntryPreview({ collection, entry, content, templateConfig, layoutConfig
 		menus: content.menus,
 		path: entry.path ?? "/",
 		collections: content.collections,
+		pages: pageLinks(content),
 		collection,
 		entry: current
 	}), [
@@ -999,9 +1001,76 @@ function entryConfig(collection, entry, content, configs) {
 * The site's code, run in the page that has loaded it: the frame that runs
 * it for the admin panel, or tests. Never imported by the admin panel's own page.
 */
+/** The block drawn in each slot's place, which only drawing has: its name can't be one of a site's. */
+const DRAWN_SLOT_BLOCK = "__goodfellow_drawn_slot__";
+/** A block that draws nothing but an empty `DRAWN_SLOT_ELEMENT` with its slot's name. */
+const drawnSlot = {
+	fields: { slot: { type: "text" } },
+	render: ({ slot }) => createElement(DRAWN_SLOT_ELEMENT, { "data-slot": String(slot ?? "") })
+};
+/** The block as it's drawn: each of its slots holding only the block that marks its place. */
+function withSlotPlaces(block, config) {
+	const fields = config?.fields ?? {};
+	const places = Object.entries(fields).filter(([, field]) => field.type === "slot").map(([slot]) => [slot, [{
+		type: DRAWN_SLOT_BLOCK,
+		props: {
+			id: `${String(block.props.id)}:${slot}`,
+			slot
+		}
+	}]]);
+	return {
+		...block,
+		props: {
+			...block.props,
+			...Object.fromEntries(places)
+		}
+	};
+}
+/** One block drawn as the site draws it, in the page at its address, as `drawBlock()` describes. */
+async function drawBlock(configs, content, { kind, path, block }) {
+	const layout = kind === "header" || kind === "footer";
+	const config = layout ? configs.layout : kind === "template" ? configs.template : configs.page;
+	if (!config.components[block.type]) throw new Error(`The site has no block called ${block.type} here.`);
+	const found = allPages(content).find((page) => page.path === path);
+	const root = layout ? (kind === "header" ? content.header : content.footer).data.root : found?.content.data.root;
+	const page = {
+		path,
+		file: found?.file ?? "",
+		content: {
+			...found?.content,
+			version: found?.content.version ?? 1,
+			data: {
+				root: root ?? { props: {} },
+				content: [withSlotPlaces(block, config.components[block.type])]
+			}
+		}
+	};
+	const prepared = await preparePage({
+		...configs,
+		page: config
+	}, content, page);
+	const container = document.createElement("div");
+	const reactRoot = createRoot(container);
+	try {
+		flushSync(() => reactRoot.render(createElement(PageContent, {
+			site: {
+				...prepared.site,
+				credits: []
+			},
+			pageConfig: prepared.pageConfig,
+			page: prepared.data
+		})));
+		const main = container.querySelector("main");
+		const zone = main?.children.length === 1 ? main.firstElementChild : null;
+		return (zone?.tagName === "DIV" && zone.attributes.length === 0 ? zone : main)?.innerHTML ?? "";
+	} finally {
+		reactRoot.unmount();
+	}
+}
 /** The site's code run here, in the page that has loaded it: the frame, or tests. */
 function localSiteCode(config) {
 	const configs = createPuckConfigs(config);
+	let drawing;
 	return {
 		async sitePages(content, today) {
 			return sitePages(content, today, config.blocks);
@@ -1039,6 +1108,17 @@ function localSiteCode(config) {
 				root.unmount();
 			}
 			return problems;
+		},
+		async drawBlock(content, target) {
+			if (typeof document === "undefined") throw new Error("Blocks are drawn only in a browser.");
+			drawing ??= createPuckConfigs({
+				...config,
+				blocks: {
+					...config.blocks,
+					[DRAWN_SLOT_BLOCK]: drawnSlot
+				}
+			});
+			return drawBlock(drawing, content, target);
 		}
 	};
 }
@@ -1070,11 +1150,11 @@ function useAdminClient() {
 	return value;
 }
 /** Media from the admin panel's page, which reads files the live site doesn't have yet from the repository. */
-function frameMediaPreviews(client, siteUrl) {
+function frameMediaPreviews(client, siteUrl, storage = () => void 0) {
 	return createMediaPreviews({ readBytes: async (path) => {
 		if (!path.startsWith(`${MEDIA_DIR}/`)) return void 0;
 		return await client.call("media.bytes", mediaUrl(path)) ?? void 0;
-	} }, siteUrl);
+	} }, siteUrl, storage);
 }
 function refused() {
 	throw new Error("The site's frame can't do this.");
@@ -1089,7 +1169,9 @@ function FrameProviders({ config, client, init, site, children }) {
 		code: localSiteCode(config)
 	}), [config]);
 	const described = useMemo(() => adminSite(config), [config]);
-	const mediaPreviews = useMemo(() => frameMediaPreviews(client, init.siteUrl), [client, init.siteUrl]);
+	const storage = useRef(site.content.mediaStorage);
+	storage.current = site.content.mediaStorage;
+	const mediaPreviews = useMemo(() => frameMediaPreviews(client, init.siteUrl, () => storage.current), [client, init.siteUrl]);
 	useEffect(() => client.channel.handle("media.remember", (file) => {
 		if (typeof file?.url === "string" && file.bytes instanceof Uint8Array) mediaPreviews.remember(file.url, file.bytes);
 	}), [client, mediaPreviews]);
@@ -1124,6 +1206,7 @@ function FrameProviders({ config, client, init, site, children }) {
 		},
 		readFile: async () => refused(),
 		listFiles: async () => refused(),
+		readBytes: async () => refused(),
 		registries: {},
 		outOfReach: false,
 		contentOnly: false,
@@ -1221,6 +1304,119 @@ function shownSettings(original, path) {
 	};
 }
 //#endregion
+//#region src/frame/table-field.tsx
+/**
+* The grid of cells a table's field is edited in (`tableField()` in
+* `@goodfellow-cms/react`), which Puck's editor shows in place of the field's
+* own render, since blocks can't bring their own editing code.
+*/
+const MAX_ROWS = 100;
+const MAX_COLUMNS = 12;
+function TableCellsField({ value, onChange, readOnly, label }) {
+	const t = useStrings();
+	const rows = tableCells(value);
+	const width = rows[0]?.length ?? 1;
+	const set = (row, column, text) => onChange(rows.map((cells, r) => r === row ? cells.map((cell, c) => c === column ? text : cell) : cells));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gfa-table-field",
+		children: [
+			label && /* @__PURE__ */ jsx("div", {
+				className: "gfa-table-field-label",
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "gfa-table-field-grid",
+				style: { gridTemplateColumns: `repeat(${width}, minmax(6rem, 1fr)) auto` },
+				children: [rows.map((cells, row) => /* @__PURE__ */ jsxs("div", {
+					className: "gfa-table-field-row",
+					children: [cells.map((cell, column) => /* @__PURE__ */ jsx("input", {
+						className: "gfa-input gfa-table-field-cell",
+						value: cell,
+						readOnly,
+						"aria-label": t("table.cell", {
+							row: String(row + 1),
+							column: String(column + 1)
+						}),
+						onChange: (event) => set(row, column, event.target.value)
+					}, column)), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "gfa-table-field-remove",
+						disabled: readOnly || rows.length <= 1,
+						title: t("table.removeRow"),
+						"aria-label": t("table.removeRowNumber", { row: String(row + 1) }),
+						onClick: () => onChange(rows.filter((_, r) => r !== row)),
+						children: "×"
+					})]
+				}, row)), /* @__PURE__ */ jsx("div", {
+					className: "gfa-table-field-row",
+					children: Array.from({ length: width }, (_, column) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "gfa-table-field-remove",
+						disabled: readOnly || width <= 1,
+						title: t("table.removeColumn"),
+						"aria-label": t("table.removeColumnNumber", { column: String(column + 1) }),
+						onClick: () => onChange(rows.map((cells) => cells.filter((_, c) => c !== column))),
+						children: "×"
+					}, column))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "gfa-table-field-actions",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "gfa-button gfa-button-secondary",
+					disabled: readOnly || rows.length >= MAX_ROWS,
+					onClick: () => onChange([...rows, Array(width).fill("")]),
+					children: t("table.addRow")
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "gfa-button gfa-button-secondary",
+					disabled: readOnly || width >= MAX_COLUMNS,
+					onClick: () => onChange(rows.map((cells) => [...cells, ""])),
+					children: t("table.addColumn")
+				})]
+			})
+		]
+	});
+}
+function withTableField(field) {
+	if (field.type === "custom" && isTableField(field)) {
+		const render = ({ value, onChange, readOnly, field: own }) => /* @__PURE__ */ jsx(TableCellsField, {
+			value,
+			onChange,
+			readOnly,
+			label: own.label
+		});
+		return {
+			...field,
+			render
+		};
+	}
+	if (field.type === "array") return {
+		...field,
+		arrayFields: withTableFieldsIn(field.arrayFields)
+	};
+	if (field.type === "object") return {
+		...field,
+		objectFields: withTableFieldsIn(field.objectFields)
+	};
+	return field;
+}
+function withTableFieldsIn(fields) {
+	return Object.fromEntries(Object.entries(fields ?? {}).map(([name, field]) => [name, withTableField(field)]));
+}
+/** The config with every table's field edited as a grid of cells. */
+function withTableFields(config) {
+	const components = Object.fromEntries(Object.entries(config.components).map(([name, component]) => [name, component.fields ? {
+		...component,
+		fields: withTableFieldsIn(component.fields)
+	} : component]));
+	return {
+		...config,
+		components
+	};
+}
+//#endregion
 //#region src/frame/editor.tsx
 /**
 * Puck in the site's frame, for one page, header, footer, template or item.
@@ -1489,18 +1685,25 @@ function FrameEditor({ open, onOpened }) {
 			}
 		};
 	}, [client]);
+	const callPlugin = useCallback((plugin, method, ...args) => client.call("plugin.call", {
+		plugin,
+		method,
+		args
+	}), [client]);
 	const site = useMemo(() => ({
 		settings: content.settings,
 		menus: content.menus,
 		path,
 		collections: content.collections,
+		pages: pageLinks(content),
 		collection,
 		...view && { view },
 		...languages && {
 			languages,
 			home: languageHome(loaded, language)
 		},
-		adminLink
+		adminLink,
+		callPlugin
 	}), [
 		content,
 		loaded,
@@ -1509,7 +1712,8 @@ function FrameEditor({ open, onOpened }) {
 		collection,
 		view,
 		languages,
-		adminLink
+		adminLink,
+		callPlugin
 	]);
 	const entry = kind === "entry" && collection && open.entry ? findEntry(loaded, collection.id, open.entry) : void 0;
 	const config = useMemo(() => {
@@ -1520,7 +1724,7 @@ function FrameEditor({ open, onOpened }) {
 				layoutConfig
 			});
 		}
-		return canvasConfig(kind, kind === "page" ? pageConfig : kind === "template" ? templateConfig : layoutConfig, layoutConfig, content.header.data, content.footer.data, site);
+		return withTableFields(canvasConfig(kind, kind === "page" ? pageConfig : kind === "template" ? templateConfig : layoutConfig, layoutConfig, content.header.data, content.footer.data, site));
 	}, [
 		kind,
 		collection,
@@ -1676,7 +1880,8 @@ function CodeService({ channel }) {
 		const stops = [
 			channel.handle("code.sitePages", ({ content, today }) => code.sitePages(content, today)),
 			channel.handle("code.pageView", async ({ page, content, today }) => await code.pageView(page, content, today) ?? null),
-			channel.handle("code.renderedProblems", ({ content, targets, today }) => code.renderedProblems(content, targets, today))
+			channel.handle("code.renderedProblems", ({ content, targets, today }) => code.renderedProblems(content, targets, today)),
+			channel.handle("code.drawBlock", ({ content, target }) => code.drawBlock(content, target))
 		];
 		return () => {
 			for (const stop of stops) stop();