@goodfellow-cms/admin 0.6.0 → 0.8.0

package/dist/plugin-protocol-BgYL9WSm.js

@@ -0,0 +1,458 @@
+import { MAX_UPLOAD_BYTES, MEDIA_DIR, addressPatternFor, checkEntrySlug, checkPageAddress, codeFileChanges, collectionFileChange, collectionFileChange as collectionFileChange$1, customCssFileChange, deleteCollectionChanges, duplicatePageData, entryFileChange, entryFileChange as entryFileChange$1, entryLanguage, entryPathIn, entryTitle, extensionOf, fileName as fileName$1, layoutFileChange, markdownToHtml, mediaFileChange, mediaKind, mediaKind as mediaKind$1, menusFileChange, moveEntryChanges, movePageChanges, newCollectionSettings, newPageData, pageFileChange, pageTitle as pageTitle$1, redirectsFileChange, relinkSite, relinkedChanges, siteSettingsFileChange, slugify, storedCss, storedData, storedEntryFields, storedMediaUrl, trimChars, uniqueName, updateSettingsFileChange, uploadName, withoutCredits } from "@goodfellow-cms/core";
+import TurndownService from "turndown";
+import { gfm } from "turndown-plugin-gfm";
+//#region src/markdown-text.ts
+let service;
+/** Converts the formatted editor's HTML to Markdown, in the style most Markdown is written in. */
+function htmlToMarkdown(html) {
+	if (!service) {
+		service = new TurndownService({
+			headingStyle: "atx",
+			bulletListMarker: "-",
+			codeBlockStyle: "fenced",
+			emDelimiter: "*",
+			strongDelimiter: "**",
+			hr: "---"
+		});
+		service.use(gfm);
+		service.addRule("underline", {
+			filter: ["u"],
+			replacement: (content) => content
+		});
+		service.addRule("strikethrough", {
+			filter: ["del", "s"],
+			replacement: (content) => `~~${content}~~`
+		});
+		service.addRule("listItem", {
+			filter: "li",
+			replacement(content, node) {
+				const parent = node.parentNode;
+				let marker = "- ";
+				if (parent?.nodeName === "OL") marker = `${Number(parent.getAttribute("start") ?? "1") + Array.prototype.indexOf.call(parent.children, node)}. `;
+				const indent = " ".repeat(marker.length);
+				const text = content.replace(/^\n+/, "").replace(/\n+$/, "").replace(/\n/g, `\n${indent}`);
+				return `${marker}${text}${node.nextSibling ? "\n" : ""}`;
+			}
+		});
+	}
+	return service.turndown(html).replace(/[ \t]+$/gm, "").trim();
+}
+/** The HTML the formatted editor starts from for some Markdown. */
+function formattedHtml(markdown) {
+	return markdownToHtml(markdown);
+}
+/**
+* The Markdown to save after the formatted editor changed `html`. If the text
+* is the same as `original`'s, only written differently (the formatted editor
+* tidies what it loads), `original` is kept, so the file isn't rewritten.
+*/
+function editedMarkdown(original, html) {
+	const edited = htmlToMarkdown(html);
+	return edited === htmlToMarkdown(formattedHtml(original)) ? original : edited;
+}
+//#endregion
+//#region src/changes.ts
+/**
+* The file changes the admin panel saves. Most are built by core's helpers,
+* which the Claude connector shares; converting a collection's items between
+* Markdown and formatted text needs the browser's HTML handling, so it's here.
+*/
+/**
+* A stored value as it fits its collection's field now, or `undefined` if it
+* doesn't: the field must exist, and a choice must still be offered. Tags
+* keep the ones that still are.
+*/
+function keptValue(fields, name, value) {
+	const field = fields.get(name);
+	if (!field) return void 0;
+	const offered = (choice) => field.options?.some((option) => option.value === choice) === true;
+	if (field.type === "select") return offered(value) ? value : void 0;
+	if (field.type === "tags" && Array.isArray(value)) {
+		const tags = value.filter(offered);
+		if (tags.length === value.length) return value;
+		return tags.length > 0 ? tags : void 0;
+	}
+	return value;
+}
+/** Where each item's page goes when its collection's address patterns change, in each of the site's languages. */
+function movedEntryPages(site, collection, settings) {
+	if (!collection.settings.path || !settings.path) return [];
+	return collection.entries.flatMap((entry) => {
+		const to = entryPathIn(site, settings, entry.slug, entryLanguage(site, entry));
+		return entry.path && to && to !== entry.path ? [{
+			from: entry.path,
+			to
+		}] : [];
+	});
+}
+/**
+* Saves a collection's new settings. Values of fields that were removed, and
+* choices that are no longer offered, are removed from every entry in the
+* same save, so a field added later with the same name starts empty. Given
+* the `site`, a new address pattern points every link to an item's page at
+* its new address, in the same save.
+*/
+function collectionSettingsChanges(collection, settings, site) {
+	const relinked = site ? relinkSite({
+		...site.content,
+		collections: site.content.collections.map((candidate) => candidate.id === collection.id ? {
+			...collection,
+			settings: {
+				...collection.settings,
+				template: settings.template
+			}
+		} : candidate)
+	}, movedEntryPages(site.content.settings, collection, settings), site.blocks) : void 0;
+	const current = relinked?.content.collections.find((candidate) => candidate.id === collection.id) ?? collection;
+	const relinkedFiles = new Set(relinked?.files);
+	const fields = new Map(settings.fields.map((field) => [field.name, field]));
+	const changes = [collectionFileChange(collection.id, {
+		...settings,
+		template: current.settings.template
+	})];
+	const before = collection.settings.markdown?.body;
+	const after = settings.markdown?.body;
+	const reformat = before !== after;
+	for (const entry of current.entries) {
+		const values = Object.entries(entry.content.fields);
+		const remaining = values.flatMap(([name, value]) => {
+			const kept = keptValue(fields, name, value);
+			return kept === void 0 ? [] : [[name, kept]];
+		});
+		if (!(remaining.length !== values.length || remaining.some(([name, value]) => value !== entry.content.fields[name])) && !reformat && !relinkedFiles.has(entry.file)) continue;
+		const kept = Object.fromEntries(remaining);
+		if (reformat) {
+			if (before !== void 0 && typeof kept[before] === "string") kept[before] = formattedHtml(kept[before]);
+			if (after !== void 0 && typeof kept[after] === "string") kept[after] = htmlToMarkdown(kept[after]);
+		}
+		const change = entryFileChange({
+			id: collection.id,
+			settings
+		}, entry.slug, kept, entry.content);
+		if (change.path !== entry.file) changes.push({
+			path: entry.file,
+			delete: true
+		});
+		changes.push(change);
+	}
+	if (relinked) changes.push(...relinkedChanges(relinked, [collection.file, ...collection.entries.map((entry) => entry.file)]));
+	return changes;
+}
+//#endregion
+//#region src/media.ts
+/** Files in `public/media/` are served from `/media/` on the site. */
+const MEDIA_URL_PREFIX = "/media/";
+/** `public/media/photo.jpg` → `/media/photo.jpg`. */
+function mediaUrl(path) {
+	return `${MEDIA_URL_PREFIX}${path.slice(MEDIA_DIR.length + 1)}`;
+}
+/** `/media/photo.jpg` → `public/media/photo.jpg`, or `undefined` for addresses outside the media folder. */
+function mediaPath(url) {
+	if (!url.startsWith("/media/")) return void 0;
+	let rest;
+	try {
+		rest = decodeURIComponent(url.slice(7).split(/[?#]/)[0] ?? "");
+	} catch {
+		return;
+	}
+	if (!rest || rest.split(/[/\\]/).some((part) => part === "" || part === "." || part === "..")) return void 0;
+	return `${MEDIA_DIR}/${rest}`;
+}
+/** A file size in words: `2.4 MB`. */
+function formatSize(bytes) {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1048576) return `${Math.round(bytes / 1024)} KB`;
+	return `${(bytes / 1048576).toFixed(1)} MB`;
+}
+/** Where a media file is used, by name, so editors know what deleting or replacing it affects. */
+function mediaUsage(content, url, names) {
+	const uses = (value) => JSON.stringify(value).includes(url);
+	const used = [];
+	if (uses(content.settings)) used.push(names.settings);
+	if (uses(content.header)) used.push(names.header);
+	if (uses(content.footer)) used.push(names.footer);
+	for (const page of content.pages) if (uses(page.content)) used.push(pageTitle$1(page));
+	for (const collection of content.collections) {
+		if (uses(collection.settings)) used.push(collection.settings.name);
+		for (const entry of collection.entries) if (uses(entry.content)) used.push(entryTitle(entry));
+	}
+	if (content.customCss.includes(url)) used.push(names.css);
+	return used;
+}
+/** The addresses of the site's uploaded images, such as `/media/photo.jpg`. */
+function siteImages(media) {
+	return media.filter((path) => mediaKind(path) === "image").map(mediaUrl);
+}
+/**
+* Every media file the site has, as `public/media/…` paths: those in the
+* site's own files and those a plugin keeps outside them
+* (`content/media-storage.json`), which content refers to the same way.
+*/
+function allMedia(content, media) {
+	const stored = Object.keys(content.mediaStorage?.files ?? {}).flatMap((url) => mediaPath(url) ?? []);
+	return [.../* @__PURE__ */ new Set([...media, ...stored])];
+}
+/** Whether a plugin keeps a media file outside the site's own files. */
+function isStoredMedia(content, url) {
+	return Object.hasOwn(content.mediaStorage?.files ?? {}, url);
+}
+//#endregion
+//#region src/frame/channel.ts
+/**
+* Requests and events between the admin panel and a frame running the site's
+* code, over one `MessagePort`. The admin panel's side treats everything a
+* frame sends as untrusted: the site's blocks run there, and could send anything.
+*/
+/** The message the admin panel's page sends a frame once it has loaded, with the port to talk on. */
+const CONNECT_MESSAGE = "goodfellow:connect";
+/** A request the other side refused or couldn't answer. */
+var ChannelError = class extends Error {
+	name = "ChannelError";
+};
+function isMessage(data) {
+	if (typeof data !== "object" || data === null) return false;
+	const type = data.type;
+	return type === "request" || type === "response" || type === "event";
+}
+/** What an error says, as text: errors can't cross the port as they are. */
+function errorText(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+function createChannel(port, handlers = {}) {
+	const own = { ...handlers };
+	const pending = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Map();
+	let next = 1;
+	let closed = false;
+	port.onmessage = async (event) => {
+		const message = event.data;
+		if (!isMessage(message)) return;
+		if (message.type === "response") {
+			const waiting = pending.get(message.id);
+			if (!waiting) return;
+			pending.delete(message.id);
+			if (message.ok) waiting.resolve(message.result);
+			else waiting.reject(new ChannelError(message.error));
+			return;
+		}
+		if (message.type === "event") {
+			for (const listener of listeners.get(message.name) ?? []) listener(message.payload);
+			return;
+		}
+		const handler = typeof message.method === "string" ? Object.hasOwn(own, message.method) && own[message.method] : void 0;
+		if (!handler) {
+			port.postMessage({
+				type: "response",
+				id: message.id,
+				ok: false,
+				error: `No such request: ${message.method}`
+			});
+			return;
+		}
+		try {
+			const result = await handler(message.params);
+			if (!closed) port.postMessage({
+				type: "response",
+				id: message.id,
+				ok: true,
+				result
+			});
+		} catch (error) {
+			if (!closed) port.postMessage({
+				type: "response",
+				id: message.id,
+				ok: false,
+				error: errorText(error)
+			});
+		}
+	};
+	return {
+		call(method, params, transfer = []) {
+			if (closed) return Promise.reject(new ChannelError("The frame has closed."));
+			const id = next++;
+			return new Promise((resolve, reject) => {
+				pending.set(id, {
+					resolve,
+					reject
+				});
+				port.postMessage({
+					type: "request",
+					id,
+					method,
+					params
+				}, transfer);
+			});
+		},
+		emit(name, payload) {
+			if (!closed) port.postMessage({
+				type: "event",
+				name,
+				payload
+			});
+		},
+		on(name, listener) {
+			const set = listeners.get(name) ?? /* @__PURE__ */ new Set();
+			listeners.set(name, set);
+			set.add(listener);
+			return () => set.delete(listener);
+		},
+		handle(method, handler) {
+			own[method] = handler;
+			return () => {
+				if (own[method] === handler) delete own[method];
+			};
+		},
+		close() {
+			closed = true;
+			port.close();
+			for (const waiting of pending.values()) waiting.reject(new ChannelError("The frame has closed."));
+			pending.clear();
+		}
+	};
+}
+//#endregion
+//#region src/media-previews.ts
+const TYPES = {
+	jpg: "image/jpeg",
+	jpeg: "image/jpeg",
+	png: "image/png",
+	gif: "image/gif",
+	webp: "image/webp",
+	avif: "image/avif",
+	svg: "image/svg+xml",
+	ico: "image/x-icon",
+	pdf: "application/pdf",
+	mp3: "audio/mpeg",
+	m4a: "audio/mp4",
+	mp4: "video/mp4",
+	webm: "video/webm",
+	vtt: "text/vtt"
+};
+/** The type to show a file as, from its name. Needed so browsers display SVGs from memory. */
+function mediaType(name) {
+	return TYPES[extensionOf(name)] ?? "application/octet-stream";
+}
+function createMediaPreviews(store, siteUrl, storage = () => void 0) {
+	const local = /* @__PURE__ */ new Map();
+	const remembered = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Set();
+	const loading = /* @__PURE__ */ new Map();
+	const base = trimChars(siteUrl, "/", { start: false });
+	const remember = (url, bytes) => {
+		const previous = local.get(url);
+		if (previous) URL.revokeObjectURL(previous);
+		remembered.set(url, bytes);
+		for (const listener of listeners) listener(url, bytes);
+		local.set(url, URL.createObjectURL(new Blob([new Uint8Array(bytes)], { type: mediaType(url) })));
+	};
+	return {
+		resolve(url) {
+			if (!url.startsWith("/media/")) return url;
+			const end = url.search(/[?#]/);
+			const stored = local.has(url) ? void 0 : storedMediaUrl(storage(), end < 0 ? url : url.slice(0, end));
+			return stored ? `${stored}${end < 0 ? "" : url.slice(end)}` : local.get(url) ?? `${base}${url}`;
+		},
+		remember,
+		onRemember(listener) {
+			for (const [url, bytes] of remembered) listener(url, bytes);
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		async bytes(url) {
+			const known = remembered.get(url);
+			if (known) return known;
+			const path = mediaPath(url);
+			return path ? await store.readBytes(path).catch(() => void 0) : void 0;
+		},
+		load(url) {
+			const known = local.get(url);
+			if (known) return Promise.resolve(known);
+			const path = mediaPath(url);
+			if (!path) return Promise.resolve(void 0);
+			let pending = loading.get(url);
+			if (!pending) {
+				pending = store.readBytes(path).then((bytes) => {
+					if (!bytes) return void 0;
+					remember(url, bytes);
+					return local.get(url);
+				}).catch(() => void 0);
+				loading.set(url, pending);
+			}
+			return pending;
+		}
+	};
+}
+const URL_ATTRIBUTES = [
+	"src",
+	"href",
+	"poster"
+];
+const MEDIA_IN_STYLE = /url\((['"]?)(\/media\/[^'")]+)\1\)/g;
+/**
+* Keeps media in a preview document showing: rewrites `/media/…` addresses in
+* images, links and inline styles as the preview changes, and if an image
+* still doesn't load, reads it from the repository instead. Elements inside
+* `keep` (a selector) are left as they are, such as text edited in place,
+* whose HTML is read back into content.
+*/
+function showMediaInPreview(doc, previews, { keep } = {}) {
+	const fix = (element) => {
+		if (keep && element.closest(keep)) return;
+		for (const attribute of URL_ATTRIBUTES) {
+			const value = element.getAttribute(attribute);
+			if (!value?.startsWith("/media/")) continue;
+			const resolved = previews.resolve(value);
+			if (resolved !== value) {
+				element.setAttribute(`data-gf-${attribute}`, value);
+				element.setAttribute(attribute, resolved);
+			}
+		}
+		const style = element.getAttribute("style");
+		if (style?.includes("/media/")) {
+			const resolved = style.replace(MEDIA_IN_STYLE, (_match, quote, url) => `url(${quote}${previews.resolve(url)}${quote})`);
+			if (resolved !== style) element.setAttribute("style", resolved);
+		}
+	};
+	const fixTree = (root) => {
+		fix(root);
+		for (const element of root.querySelectorAll("[src], [href], [poster], [style]")) fix(element);
+	};
+	const observer = new MutationObserver((records) => {
+		for (const record of records) {
+			if (record.type === "attributes" && record.target.nodeType === 1) fix(record.target);
+			for (const node of record.addedNodes) if (node.nodeType === 1) fixTree(node);
+		}
+	});
+	observer.observe(doc.documentElement, {
+		subtree: true,
+		childList: true,
+		attributes: true,
+		attributeFilter: [...URL_ATTRIBUTES, "style"]
+	});
+	fixTree(doc.documentElement);
+	const onError = (event) => {
+		const image = event.target;
+		if (image?.tagName !== "IMG") return;
+		const original = image.getAttribute("data-gf-src") ?? image.getAttribute("src") ?? "";
+		if (!original.startsWith("/media/") || image.hasAttribute("data-gf-loaded")) return;
+		if (keep && image.closest(keep)) return;
+		image.setAttribute("data-gf-loaded", "");
+		previews.load(original).then((url) => {
+			if (url) {
+				image.setAttribute("data-gf-src", original);
+				image.setAttribute("src", url);
+			}
+		});
+	};
+	doc.addEventListener("error", onError, true);
+	return () => {
+		observer.disconnect();
+		doc.removeEventListener("error", onError, true);
+	};
+}
+//#endregion
+//#region src/frame/plugin-protocol.ts
+/** A plugin's frame sends this to the admin panel's page once it's listening, and the page answers with a port. */
+const PLUGIN_READY_MESSAGE = "goodfellow:plugin-ready";
+//#endregion
+export { layoutFileChange as A, siteSettingsFileChange as B, codeFileChanges as C, deleteCollectionChanges as D, customCssFileChange as E, newCollectionSettings as F, uniqueName as G, storedCss as H, newPageData as I, editedMarkdown as J, updateSettingsFileChange as K, pageFileChange as L, menusFileChange as M, moveEntryChanges as N, duplicatePageData as O, movePageChanges as P, pageTitle$1 as R, checkPageAddress as S, collectionSettingsChanges as T, storedData as U, slugify as V, storedEntryFields as W, formattedHtml as Y, mediaUsage as _, CONNECT_MESSAGE as a, addressPatternFor as b, MEDIA_URL_PREFIX as c, fileName$1 as d, formatSize as f, mediaUrl as g, mediaPath as h, showMediaInPreview as i, mediaFileChange as j, entryFileChange$1 as k, allMedia as l, mediaKind$1 as m, createMediaPreviews as n, createChannel as o, isStoredMedia as p, withoutCredits as q, mediaType as r, MAX_UPLOAD_BYTES as s, PLUGIN_READY_MESSAGE as t, extensionOf as u, siteImages as v, collectionFileChange$1 as w, checkEntrySlug as x, uploadName as y, redirectsFileChange as z };

package/dist/plugin.js

@@ -1,5 +1,13 @@
-import { r as createChannel, t as PLUGIN_READY_MESSAGE } from "./plugin-protocol-DkvBDqsF.js";
+import { g as mediaUrl, i as showMediaInPreview, n as createMediaPreviews, o as createChannel, t as PLUGIN_READY_MESSAGE } from "./plugin-protocol-BgYL9WSm.js";
+import { MEDIA_DIR } from "@goodfellow-cms/core";
 //#region src/plugin.ts
+/**
+* A plugin's admin frame: runs the plugin's admin module, sandboxed away from
+* the admin panel's own page, and answers for it. Builds bundle each plugin's
+* admin module with this into a page of its own (`pluginFrameEntry()` in
+* `@goodfellow-cms/core`), whose Content Security Policy reaches only the
+* addresses the plugin declared.
+*/
 /** Shows the admin panel's light or dark choice, as the admin panel's stylesheet reads it. */
 function applyTheme(choice) {
 	const root = document.documentElement;
@@ -34,6 +42,28 @@ function adminApi(channel, init) {
 		}
 	};
 }
+/**
+* Shows the site's media in an editor's frame as Puck's frame does: `/media/…`
+* addresses from the site's folder, from memory for uploads the live site
+* doesn't have yet (which the page sends, or reads from the repository when
+* an image doesn't load), or from the storage a plugin keeps them in. Text
+* edited in place keeps its addresses, since editors read its HTML back into
+* content.
+*/
+function showEditorMedia(channel, init) {
+	let storage = init.mediaStorage;
+	const previews = createMediaPreviews({ readBytes: async (path) => {
+		if (!path.startsWith(`${MEDIA_DIR}/`)) return void 0;
+		return await channel.call("media.bytes", mediaUrl(path)) ?? void 0;
+	} }, init.siteUrl, () => storage);
+	channel.handle("media.remember", (file) => {
+		if (typeof file?.url === "string" && file.bytes instanceof Uint8Array) previews.remember(file.url, file.bytes);
+	});
+	channel.handle("media.storage", (given) => {
+		storage = given ?? void 0;
+	});
+	return showMediaInPreview(document, previews, { keep: "[contenteditable]:not([contenteditable=\"false\"])" });
+}
 /** Opens an editor plugin's editor in the frame, giving the admin panel's page what it can do. */
 async function openEditor(admin, channel, init, element, api) {
 	const open = init.editor;
@@ -54,11 +84,16 @@ async function openEditor(admin, channel, init, element, api) {
 		}),
 		sharePreview: (root) => channel.call("editor.sharePreview", { root }),
 		draw: (block) => channel.call("editor.draw", { block }),
-		styles: () => channel.call("editor.styles")
+		styles: () => channel.call("editor.styles"),
+		showsMedia: true
 	};
 	document.documentElement.classList.add("gfa-plugin-editor");
+	const stopShowingMedia = showEditorMedia(channel, init);
 	const controls = await admin.editor.mount(element, session, api) ?? {};
-	window.addEventListener("pagehide", () => controls.destroy?.());
+	window.addEventListener("pagehide", () => {
+		controls.destroy?.();
+		stopShowingMedia();
+	});
 	return {
 		opened: {
 			set: typeof controls.set === "function",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodfellow-cms/admin",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Goodfellow's admin panel: a visual editor for a site's pages, layout and settings.",
   "keywords": [
     "goodfellow",
@@ -56,10 +56,10 @@
     "@codemirror/state": "6.7.6",
     "@codemirror/theme-one-dark": "6.1.3",
     "@codemirror/view": "6.43.14",
-    "@goodfellow-cms/ai": "0.6.0",
-    "@goodfellow-cms/core": "0.6.0",
-    "@goodfellow-cms/react": "0.6.0",
-    "@goodfellow-cms/registry": "0.6.0",
+    "@goodfellow-cms/ai": "0.8.0",
+    "@goodfellow-cms/core": "0.8.0",
+    "@goodfellow-cms/react": "0.8.0",
+    "@goodfellow-cms/registry": "0.8.0",
     "codemirror": "6.0.2",
     "lucide-react": "1.52.0",
     "turndown": "7.2.4",
@@ -71,6 +71,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@goodfellow-cms/blocks": "0.8.0",
     "@puckeditor/core": "0.23.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",