@goodfellow-cms/admin 0.7.0 → 0.8.0

package/dist/editor.js

@@ -1,11 +1,11 @@
-import { Bt as editedMarkdown, It as storedData, Lt as storedEntryFields, R as createMediaPreviews, Vt as formattedHtml, a as AdminContext, at as useStrings, b as MediaChooser, f as useDarkMode, h as ScheduleFields, i as usePreviewStyles, l as useSiteContent, nt as StringsProvider, q as READY_MESSAGE, s as useAdmin, st as findPage, t as SCHEDULE_PROP, u as setThemeChoice, ut as mediaUrl, w as SETTINGS_SECTIONS, y as MediaChoiceContext, z as showMediaInPreview } from "./entry-values-DO01xZ9L.js";
-import { r as createChannel } from "./plugin-protocol-DkvBDqsF.js";
-import { COLOR_SCHEME_ATTRIBUTE, DEFAULT_THEME_COLORS, DRAWN_SLOT_ELEMENT, FONT_SIZES, MEDIA_DIR, MINIMUM_CONTRAST, RADII, SIDES, SPACING_STEPS, TEXT_ALIGNS, THEME_COLORS, WEEKDAYS, allPages, canFormatMarkdown, cleanEventValue, colorSlug, contentInLanguage, contrastRatio, customLength, datePart, escapeStyleText, findEntry, formatDate, formatOccurrence, getPageHead, googleFontsUrl, hasLanguages, isAllDay, isCustomColor, isEventLike, languageHome, languageLinks, mainLanguage, neverIndexed, pageLinks, pageView, pathLanguage, readBlockStyle, renderedProblems, shownOccurrence, sitePages, themeColorOf, themeToCss, todayIn, wallClock, weekdayName, weekdayOf, withBlockStyle } from "@goodfellow-cms/core";
+import { J as editedMarkdown, U as storedData, W as storedEntryFields, Y as formattedHtml, g as mediaUrl, i as showMediaInPreview, n as createMediaPreviews, o as createChannel } from "./plugin-protocol-BgYL9WSm.js";
+import { J as EditorTextContext, T as SETTINGS_SECTIONS, Y as useEditorText, a as AdminContext, b as MediaChoiceContext, d as setThemeChoice, g as ScheduleFields, i as usePreviewStyles, it as StringsProvider, l as useSiteContent, lt as findPage, p as useDarkMode, q as READY_MESSAGE, s as useAdmin, st as useStrings, t as SCHEDULE_PROP, x as MediaChooser } from "./entry-values-Bu8ljnoX.js";
+import { COLOR_SCHEME_ATTRIBUTE, DEFAULT_THEME_COLORS, DRAWN_SLOT_ELEMENT, FONT_SIZES, MEDIA_DIR, MINIMUM_CONTRAST, RADII, SCREEN_SIZES, SIDES, SPACING_STEPS, TEXT_ALIGNS, THEME_COLORS, WEEKDAYS, allPages, canFormatMarkdown, cleanEventValue, colorSlug, contentInLanguage, contrastRatio, customLength, datePart, escapeStyleText, findEntry, formatDate, formatOccurrence, getPageHead, googleFontsUrl, hasLanguages, isAllDay, isCustomColor, isEventLike, isOwnersOnlyField, languageHome, languageLinks, mainLanguage, neverIndexed, pageLinks, pageView, pathLanguage, readBlockStyle, renderedProblems, shownOccurrence, sitePages, themeColorOf, themeToCss, todayIn, wallClock, weekdayName, weekdayOf, withBlockStyle } from "@goodfellow-cms/core";
+import { Box } from "lucide-react";
 import { createContext, createElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { PageBody, PageContent, SiteProvider, adminSite, applyEntry, blockIcon, blockKeywords, createPuckConfig, createPuckConfigs, cx, isStyleField, isTableField, mediaFieldKind, preparePage, siteMetadata, tableCells } from "@goodfellow-cms/react";
-import { Box } from "lucide-react";
 import { AutoField, Drawer, FieldLabel, Puck, Render, RichTextMenu, createUsePuck, legacySideBarPlugin, migrate, registerOverlayPortal, resolveAllData, useGetPuck } from "@puckeditor/core";
 import { createPortal, flushSync } from "react-dom";
 const CANVAS = `.gf-canvas`;
@@ -1354,17 +1354,24 @@ function FrameProviders({ config, client, init, site, children }) {
 		kind,
 		value
 	}), [client]);
+	const text = useMemo(() => ({
+		puck: init.puck ?? {},
+		labels: init.labels ?? {}
+	}), [init.puck, init.labels]);
 	return /* @__PURE__ */ jsx(StringsProvider, {
 		strings: init.strings,
-		children: /* @__PURE__ */ jsx(AdminClientContext.Provider, {
-			value: client,
-			children: /* @__PURE__ */ jsx(FrameCodeContext.Provider, {
-				value: code,
-				children: /* @__PURE__ */ jsx(AdminContext.Provider, {
-					value: admin,
-					children: /* @__PURE__ */ jsx(MediaChoiceContext.Provider, {
-						value: chooseMedia,
-						children
+		children: /* @__PURE__ */ jsx(EditorTextContext.Provider, {
+			value: text,
+			children: /* @__PURE__ */ jsx(AdminClientContext.Provider, {
+				value: client,
+				children: /* @__PURE__ */ jsx(FrameCodeContext.Provider, {
+					value: code,
+					children: /* @__PURE__ */ jsx(AdminContext.Provider, {
+						value: admin,
+						children: /* @__PURE__ */ jsx(MediaChoiceContext.Provider, {
+							value: chooseMedia,
+							children
+						})
 					})
 				})
 			})
@@ -1372,6 +1379,121 @@ function FrameProviders({ config, client, init, site, children }) {
 	});
 }
 //#endregion
+//#region src/frame/labels.ts
+/** A label in the admin panel's language, or as it is where the table has none. */
+function translated(labels, text) {
+	return text === void 0 ? text : labels[text] ?? text;
+}
+function withFieldLabels(field, labels) {
+	return {
+		...field,
+		...field.label !== void 0 && { label: translated(labels, field.label) },
+		...typeof field.placeholder === "string" && { placeholder: translated(labels, field.placeholder) },
+		...Array.isArray(field.options) && { options: field.options.map((option) => ({
+			...option,
+			label: translated(labels, option.label) ?? option.label
+		})) },
+		...field.arrayFields && { arrayFields: withFieldsLabels(field.arrayFields, labels) },
+		...field.objectFields && { objectFields: withFieldsLabels(field.objectFields, labels) }
+	};
+}
+function withFieldsLabels(fields, labels) {
+	return Object.fromEntries(Object.entries(fields).map(([name, field]) => [name, withFieldLabels(field, labels)]));
+}
+function withComponentLabels(component, labels) {
+	if (!component) return component;
+	const { resolveFields, label } = component;
+	return {
+		...component,
+		...label !== void 0 && { label: translated(labels, label) },
+		...component.fields && { fields: withFieldsLabels(component.fields, labels) },
+		...resolveFields && { resolveFields: async (...args) => withFieldsLabels(await resolveFields(...args), labels) }
+	};
+}
+/**
+* The config with blocks' names, groups and settings' labels, choices and
+* placeholders in the admin panel's language, looked up by their English
+* wording, so a site's own blocks that word theirs the same way are
+* translated too. Only what the editor shows changes: props, choices' values
+* and what blocks render stay as they are.
+*/
+function withLabels(config, labels) {
+	if (Object.keys(labels).length === 0) return config;
+	const components = Object.fromEntries(Object.entries(config.components).map(([name, component]) => [name, withComponentLabels(component, labels)]));
+	const categories = config.categories && Object.fromEntries(Object.entries(config.categories).map(([name, category]) => [name, {
+		...category,
+		...category.title !== void 0 && { title: translated(labels, category.title) }
+	}]));
+	return {
+		...config,
+		components,
+		...categories && { categories },
+		...config.root && { root: withComponentLabels(config.root, labels) }
+	};
+}
+//#endregion
+//#region src/frame/owners-only.tsx
+/**
+* Block settings only owners may change (`metadata: { owners: true }`, such as
+* Custom HTML used exactly as written), shown to editors on full-stack sites
+* as they are, without a way to change them. Their server refuses such a
+* change anyway (`ownersOnlyChanges()`); this only says so up front.
+*/
+function valueLabel(field, value) {
+	const option = ("options" in field && Array.isArray(field.options) ? field.options : []).find((choice) => JSON.stringify(choice.value) === JSON.stringify(value));
+	if (option) return String(option.label);
+	return value === void 0 || value === null ? "" : String(value);
+}
+function LockedField({ field, value }) {
+	const t = useStrings();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gfa-locked-field",
+		children: [
+			field.label && /* @__PURE__ */ jsx("div", {
+				className: "gfa-locked-field-label",
+				children: field.label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "gfa-locked-field-value",
+				children: valueLabel(field, value)
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "gfa-locked-field-note",
+				children: t("owners.only")
+			})
+		]
+	});
+}
+function locked(fields) {
+	return Object.fromEntries(Object.entries(fields).map(([name, field]) => {
+		if (!isOwnersOnlyField(field)) return [name, field];
+		return [name, {
+			type: "custom",
+			...field.label !== void 0 && { label: field.label },
+			...field.metadata !== void 0 && { metadata: field.metadata },
+			render: ({ value }) => /* @__PURE__ */ jsx(LockedField, {
+				field,
+				value
+			})
+		}];
+	}));
+}
+/** The config with owners-only settings shown but not changeable, for editors who aren't owners. */
+function withOwnersOnlyLocked(config) {
+	const components = Object.fromEntries(Object.entries(config.components).map(([name, component]) => {
+		const fields = component.fields ?? {};
+		if (!Object.values(fields).some(isOwnersOnlyField)) return [name, component];
+		return [name, {
+			...component,
+			fields: locked(fields)
+		}];
+	}));
+	return {
+		...config,
+		components
+	};
+}
+//#endregion
 //#region src/frame/page-settings.ts
 /** For pages and templates, whose settings include `noIndex`; `path` is the page's, for pages. */
 function shownSettings(original, path) {
@@ -1432,8 +1554,8 @@ function shownSettings(original, path) {
 /**
 * A block's Style field (`classNameField` in `@goodfellow-cms/react`), which
 * Puck's editor shows as controls for its look in place of a box of classes:
-* text alignment, size and color, background, space inside and around it and
-* rounded corners, written into its `className` as Tailwind classes
+* text alignment, size and color, background, space inside and around it,
+* rounded corners and the sizes of screen it's hidden on, written into its `className` as Tailwind classes
 * (`withBlockStyle()` in `@goodfellow-cms/core`), with any other classes kept.
 */
 /** A color's value to show and compare: a theme color's, or the editor's own. */
@@ -1627,6 +1749,36 @@ function ColorChoice({ label, value, colors, readOnly, onChange }) {
 		})]
 	});
 }
+/** The sizes of screen a block is hidden on, a box for each. */
+function HiddenOnChoice({ hiddenOn, readOnly, onChange }) {
+	const t = useStrings();
+	const hidden = new Set(hiddenOn);
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: "gfa-style-group",
+		children: [
+			/* @__PURE__ */ jsx("legend", {
+				className: "gfa-style-label",
+				children: t("style.hiddenOn")
+			}),
+			SCREEN_SIZES.map((size) => /* @__PURE__ */ jsxs("label", {
+				className: "gfa-style-check",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: hidden.has(size),
+					disabled: readOnly,
+					onChange: (event) => {
+						const next = SCREEN_SIZES.filter((candidate) => candidate === size ? event.target.checked : hidden.has(candidate));
+						onChange(next.length > 0 ? next : void 0);
+					}
+				}), t(`style.hiddenOn.${size}`)]
+			}, size)),
+			hidden.size > 0 && /* @__PURE__ */ jsx("p", {
+				className: "gfa-hint",
+				children: t(hidden.size === SCREEN_SIZES.length ? "style.hiddenOnAll" : "style.hiddenOnHint")
+			})
+		]
+	});
+}
 /** Other classes, kept as typed while the box has focus, so a class isn't taken into the controls halfway. */
 function OtherClasses({ other, readOnly, onChange }) {
 	const t = useStrings();
@@ -1665,7 +1817,7 @@ function OtherClasses({ other, readOnly, onChange }) {
 		]
 	});
 }
-function StyleControls({ value, colors, readOnly, label, ownAlign, onChange }) {
+function StyleControls({ value, colors, readOnly, label, ownAlign, block, onChange }) {
 	const t = useStrings();
 	const { style, other } = readBlockStyle(value);
 	const set = (next) => onChange(withBlockStyle(other, next));
@@ -1750,6 +1902,11 @@ function StyleControls({ value, colors, readOnly, label, ownAlign, onChange }) {
 				readOnly,
 				onChange: (radius) => change("radius", radius)
 			}),
+			(block || style.hiddenOn) && /* @__PURE__ */ jsx(HiddenOnChoice, {
+				hiddenOn: style.hiddenOn,
+				readOnly,
+				onChange: (hiddenOn) => change("hiddenOn", hiddenOn)
+			}),
 			/* @__PURE__ */ jsx(OtherClasses, {
 				other,
 				readOnly,
@@ -1765,7 +1922,7 @@ function StyleControls({ value, colors, readOnly, label, ownAlign, onChange }) {
 		]
 	});
 }
-function withStyleField(field, colors, ownAlign) {
+function withStyleField(field, colors, ownAlign, block) {
 	if (field.type !== "text" || !isStyleField(field)) return field;
 	const render = ({ value, onChange, readOnly }) => /* @__PURE__ */ jsx(StyleControls, {
 		value,
@@ -1773,6 +1930,7 @@ function withStyleField(field, colors, ownAlign) {
 		readOnly,
 		label: field.label,
 		ownAlign,
+		block,
 		onChange
 	});
 	return {
@@ -1782,27 +1940,27 @@ function withStyleField(field, colors, ownAlign) {
 		render
 	};
 }
-function withStyleFieldsIn(fields, colors) {
+function withStyleFieldsIn(fields, colors, block) {
 	if (!fields) return fields;
 	const ownAlign = "align" in fields;
-	return Object.fromEntries(Object.entries(fields).map(([name, field]) => [name, withStyleField(field, colors, ownAlign)]));
+	return Object.fromEntries(Object.entries(fields).map(([name, field]) => [name, withStyleField(field, colors, ownAlign, block)]));
 }
-function withStyleComponent(component, colors) {
+function withStyleComponent(component, colors, block) {
 	if (!component) return component;
 	const { resolveFields } = component;
 	return {
 		...component,
-		...component.fields && { fields: withStyleFieldsIn(component.fields, colors) },
-		...resolveFields && { resolveFields: async (...args) => withStyleFieldsIn(await resolveFields(...args), colors) }
+		...component.fields && { fields: withStyleFieldsIn(component.fields, colors, block) },
+		...resolveFields && { resolveFields: async (...args) => withStyleFieldsIn(await resolveFields(...args), colors, block) }
 	};
 }
 /** The config with every block's Style field, and the page's, drawn as a style's controls. */
 function withStyleFields(config, colors) {
-	const components = Object.fromEntries(Object.entries(config.components).map(([name, component]) => [name, withStyleComponent(component, colors)]));
+	const components = Object.fromEntries(Object.entries(config.components).map(([name, component]) => [name, withStyleComponent(component, colors, true)]));
 	return {
 		...config,
 		components,
-		...config.root && { root: withStyleComponent(config.root, colors) }
+		...config.root && { root: withStyleComponent(config.root, colors, false) }
 	};
 }
 //#endregion
@@ -1932,7 +2090,8 @@ const ADMIN_PLACES = {
 	"contact-settings": `#/settings/general?section=${SETTINGS_SECTIONS.contact}`,
 	"forms-settings": `#/settings/general?section=${SETTINGS_SECTIONS.forms}`,
 	"theme-settings": "#/settings/theme",
-	"language-settings": "#/settings/languages"
+	"language-settings": "#/settings/languages",
+	"comments-settings": "#/settings/comments"
 };
 /** Puck's text field, with the media library's chooser below it for fields that hold a media address. */
 function TextFieldWithMedia({ field, value, onChange, readOnly, children }) {
@@ -2226,15 +2385,16 @@ function FrameEditor({ open, onOpened }) {
 		callPlugin
 	]);
 	const entry = kind === "entry" && collection && open.entry ? findEntry(loaded, collection.id, open.entry) : void 0;
+	const { puck: dictionary, labels } = useEditorText();
 	const config = useMemo(() => {
 		if (kind === "entry") {
 			if (!collection || !entry) throw new Error("The item isn't in the site.");
-			return entryConfig(collection, entry.entry, content, {
+			return withLabels(entryConfig(collection, entry.entry, content, {
 				templateConfig,
 				layoutConfig
-			});
+			}), labels);
 		}
-		return withTableFields(canvasConfig(kind, kind === "page" ? pageConfig : kind === "template" ? templateConfig : layoutConfig, layoutConfig, content.header.data, content.footer.data, site));
+		return withLabels(withTableFields(canvasConfig(kind, kind === "page" ? pageConfig : kind === "template" ? templateConfig : layoutConfig, layoutConfig, content.header.data, content.footer.data, site)), labels);
 	}, [
 		kind,
 		collection,
@@ -2243,13 +2403,18 @@ function FrameEditor({ open, onOpened }) {
 		templateConfig,
 		layoutConfig,
 		content,
-		site
+		site,
+		labels
 	]);
 	const described = useMemo(() => describeConfig(config), [config]);
-	const puckConfig = useMemo(() => kind === "entry" ? config : withStyleFields(config, content.settings.theme.colors), [
+	const puckConfig = useMemo(() => {
+		const styled = kind === "entry" ? config : withStyleFields(config, content.settings.theme.colors);
+		return open.ownersOnlyLocked ? withOwnersOnlyLocked(styled) : styled;
+	}, [
 		kind,
 		config,
-		content.settings.theme.colors
+		content.settings.theme.colors,
+		open.ownersOnlyLocked
 	]);
 	const told = useRef(void 0);
 	useEffect(() => {
@@ -2307,6 +2472,7 @@ function FrameEditor({ open, onOpened }) {
 				data: initialData,
 				metadata: siteMetadata(site),
 				headerTitle: title,
+				dictionary,
 				height: "100%",
 				iframe: { enabled: false },
 				ui,
@@ -2429,7 +2595,8 @@ function editorKey(open) {
 		open.path,
 		open.collection,
 		open.entry,
-		open.language
+		open.language,
+		open.reopened
 	]);
 }
 /** Opens an editor when the admin panel's page asks, and tells it Puck's config once it's open. */