@goodfellow-cms/admin 0.7.0 → 0.9.0

package/dist/custom-font-faces-DJ2AF2oN.js

@@ -0,0 +1,526 @@
+import { MAX_UPLOAD_BYTES, MEDIA_DIR, addressPatternFor, checkEntrySlug, checkPageAddress, cleanEntryValues, codeFileChanges, collectionFileChange, collectionFileChange as collectionFileChange$1, customCssFileChange, deleteCollectionChanges, deleteSyncedBlockChanges, duplicatePageData, entryFileChange, entryFileChange as entryFileChange$1, entryLanguage, entryPathIn, entryTitle, extensionOf, fileName as fileName$1, itemLinkRemovalChanges, layoutFileChange, linkedItems, 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, syncedBlockFileChange, trimChars, uniqueName, updateSettingsFileChange, uploadName, withoutMediaDetails } 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;
+	}
+	if (field.type === "item") {
+		const names = linkedItems(field, value);
+		if (field.multiple) return Array.isArray(value) ? value : names.length > 0 ? names : void 0;
+		return typeof value === "string" ? value : names[0];
+	}
+	if (field.type === "group" && Array.isArray(value)) {
+		const rows = cleanEntryValues([field], { [name]: value })[name];
+		return JSON.stringify(rows) === JSON.stringify(value) ? value : rows;
+	}
+	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 escaped = url.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	const address = new RegExp(`(?<![\\w.~%/:-])${escaped}(?![\\w~%-]|[./][\\w])`);
+	const uses = (value) => value !== void 0 && address.test(JSON.stringify(value));
+	const used = [];
+	const add = (name, value) => {
+		if (name && !used.includes(name) && uses(value)) used.push(name);
+	};
+	add(names.settings, content.settings);
+	add(names.menus, [content.menus, content.languageMenus]);
+	add(names.header, [content.header, Object.values(content.languageLayouts ?? {}).map((layout) => layout.header)]);
+	add(names.footer, [content.footer, Object.values(content.languageLayouts ?? {}).map((layout) => layout.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));
+	}
+	add(names.css, content.customCss);
+	add(names.code, content.code);
+	add(names.redirects, content.redirects);
+	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
+//#region src/custom-font-faces.ts
+const added = /* @__PURE__ */ new WeakMap();
+function faceKey(family, file) {
+	return [
+		family,
+		file.src,
+		file.weight,
+		file.weightTo ?? "",
+		file.style ?? "normal"
+	].join("|");
+}
+/**
+* Adds the site's own fonts to a document from their bytes, and takes away
+* those no longer among them. A file that can't be read or isn't a font is
+* left out, so text shows in the fallback fonts, as it would on the site.
+*/
+function installCustomFonts(doc, fonts, read) {
+	const FontFaceClass = doc.defaultView?.FontFace;
+	if (!FontFaceClass || !doc.fonts) return;
+	let faces = added.get(doc);
+	if (!faces) {
+		faces = /* @__PURE__ */ new Map();
+		added.set(doc, faces);
+	}
+	const wanted = /* @__PURE__ */ new Set();
+	for (const font of fonts) for (const file of font.files) {
+		const key = faceKey(font.family, file);
+		wanted.add(key);
+		if (faces.has(key)) continue;
+		const placeholder = { loading: true };
+		faces.set(key, placeholder);
+		read(file.src).then(async (bytes) => {
+			if (!bytes || faces?.get(key) !== placeholder) return;
+			const face = new FontFaceClass(font.family, bytes.slice().buffer, {
+				weight: file.weightTo ? `${file.weight} ${file.weightTo}` : String(file.weight),
+				style: file.style ?? "normal",
+				display: "swap"
+			});
+			await face.load();
+			if (faces?.get(key) !== placeholder) return;
+			faces.set(key, face);
+			doc.fonts.add(face);
+		}).catch(() => {});
+	}
+	for (const [key, face] of faces) {
+		if (wanted.has(key)) continue;
+		if (!("loading" in face)) doc.fonts.delete(face);
+		faces.delete(key);
+	}
+}
+//#endregion
+export { formattedHtml as $, duplicatePageData as A, pageFileChange as B, checkPageAddress as C, customCssFileChange as D, collectionSettingsChanges as E, menusFileChange as F, storedCss as G, redirectsFileChange as H, moveEntryChanges as I, syncedBlockFileChange as J, storedData as K, movePageChanges as L, itemLinkRemovalChanges as M, layoutFileChange as N, deleteCollectionChanges as O, mediaFileChange as P, editedMarkdown as Q, newCollectionSettings as R, checkEntrySlug as S, collectionFileChange$1 as T, siteSettingsFileChange as U, pageTitle$1 as V, slugify as W, updateSettingsFileChange as X, uniqueName as Y, withoutMediaDetails as Z, mediaUrl as _, showMediaInPreview as a, uploadName as b, MAX_UPLOAD_BYTES as c, extensionOf as d, fileName$1 as f, mediaPath as g, mediaKind$1 as h, mediaType as i, entryFileChange$1 as j, deleteSyncedBlockChanges as k, MEDIA_URL_PREFIX as l, isStoredMedia as m, PLUGIN_READY_MESSAGE as n, CONNECT_MESSAGE as o, formatSize as p, storedEntryFields as q, createMediaPreviews as r, createChannel as s, installCustomFonts as t, allMedia as u, mediaUsage as v, codeFileChanges as w, addressPatternFor as x, siteImages as y, newPageData as z };