@goodfellow-cms/admin 0.7.0 → 0.9.0

package/dist/plugin.js

@@ -1,5 +1,13 @@
-import { r as createChannel, t as PLUGIN_READY_MESSAGE } from "./plugin-protocol-DkvBDqsF.js";
+import { _ as mediaUrl, a as showMediaInPreview, n as PLUGIN_READY_MESSAGE, r as createMediaPreviews, s as createChannel, t as installCustomFonts } from "./custom-font-faces-DJ2AF2oN.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,21 @@ 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")
+		fields: (block) => channel.call("editor.fields", { block }),
+		styles: async () => {
+			const styles = await channel.call("editor.styles");
+			installCustomFonts(document, styles.customFonts ?? [], async (url) => await channel.call("media.bytes", url) ?? void 0);
+			return 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",