diff --git a/packages/admin/src/components/SortableContentSettingsSections.tsx b/packages/admin/src/components/SortableContentSettingsSections.tsx
index dabd3dc030..be65d543e3 100644
--- a/packages/admin/src/components/SortableContentSettingsSections.tsx
+++ b/packages/admin/src/components/SortableContentSettingsSections.tsx
@@ -90,7 +90,6 @@ export function SortableContentSettingsSections({
setStoredLayout(readStoredLayout(storageKey));
}, [storageKey]);
- const layout = React.useMemo(() => resolveContentSettingsLayout(storedLayout), [storedLayout]);
const sectionsById = React.useMemo(() => {
const sections = React.Children.toArray(children).filter(
(child): child is React.ReactElement
=>
@@ -98,6 +97,11 @@ export function SortableContentSettingsSections({
);
return new Map(sections.map((section) => [section.props.id, section]));
}, [children]);
+ const sectionIds = React.useMemo(() => Array.from(sectionsById.keys()), [sectionsById]);
+ const layout = React.useMemo(
+ () => resolveContentSettingsLayout(storedLayout, sectionIds),
+ [sectionIds, storedLayout],
+ );
const visibleIds = React.useMemo(
() => layout.order.filter((id) => sectionsById.has(id)),
[layout.order, sectionsById],
@@ -127,7 +131,7 @@ export function SortableContentSettingsSections({
const overId = String(event.over.id) as ContentSettingsSectionId;
setStoredLayout((current) => {
const next = reorderContentSettingsLayout(
- resolveContentSettingsLayout(current),
+ resolveContentSettingsLayout(current, sectionIds),
movedId,
overId,
);
@@ -136,7 +140,7 @@ export function SortableContentSettingsSections({
});
}
},
- [onSortingChange, storageKey],
+ [onSortingChange, sectionIds, storageKey],
);
return (
diff --git a/packages/admin/src/index.ts b/packages/admin/src/index.ts
index 08b943ba2a..2af80a5a52 100644
--- a/packages/admin/src/index.ts
+++ b/packages/admin/src/index.ts
@@ -13,6 +13,11 @@ export * from "./lib/api";
// Utilities
export { cn } from "./lib/utils";
+export {
+ type ContentEditorPanelContext,
+ type ContentEditorPanelExtension,
+} from "./lib/content-editor-panels";
+
// Plugin admin context (for accessing plugin components)
export {
PluginAdminProvider,
diff --git a/packages/admin/src/lib/content-editor-panels.tsx b/packages/admin/src/lib/content-editor-panels.tsx
new file mode 100644
index 0000000000..8d1acebe65
--- /dev/null
+++ b/packages/admin/src/lib/content-editor-panels.tsx
@@ -0,0 +1,203 @@
+import { Trans } from "@lingui/react/macro";
+import * as React from "react";
+
+import type { AdminManifest, ContentItem } from "./api";
+
+export interface ContentEditorPanelContext {
+ collection: string;
+ entry: ContentItem;
+ locale?: string;
+}
+
+export interface ContentEditorPanelExtension {
+ /** Stable identifier, unique within this plugin's editor panels. */
+ id: string;
+ /** Host-rendered section heading. */
+ title: string;
+ component: React.ComponentType;
+ /** Restrict this panel to selected collections. Omit to support every collection. */
+ collections?: readonly string[] | ((collection: string) => boolean);
+ /** Minimum numeric admin role required to see this panel. */
+ minRole?: number;
+ /** Lower values render first among contributed panels. */
+ order?: number;
+}
+
+export interface ResolvedContentEditorPanel {
+ pluginId: string;
+ extension: ContentEditorPanelExtension;
+}
+
+type ContentEditorPanelRegistry = Record<
+ string,
+ { contentEditorPanels?: readonly ContentEditorPanelExtension[] } | undefined
+>;
+
+function isRecord(value: unknown): value is Record {
+ return typeof value === "object" && value !== null;
+}
+
+function warn(pluginId: string, message: string): void {
+ console.warn(`[content-editor-panels] Plugin "${pluginId}": ${message}`);
+}
+
+function isValidCollections(value: unknown): boolean {
+ return (
+ value === undefined ||
+ typeof value === "function" ||
+ (Array.isArray(value) && value.every((collection) => typeof collection === "string"))
+ );
+}
+
+function isValidPanel(value: unknown, pluginId: string): value is ContentEditorPanelExtension {
+ if (!isRecord(value)) {
+ warn(pluginId, "ignored a panel that is not an object.");
+ return false;
+ }
+ if (typeof value.id !== "string" || value.id.trim() === "") {
+ warn(pluginId, "ignored a panel without a non-empty id.");
+ return false;
+ }
+ if (typeof value.title !== "string" || value.title.trim() === "") {
+ warn(pluginId, `ignored panel "${value.id}" because its title is invalid.`);
+ return false;
+ }
+ if (typeof value.component !== "function") {
+ warn(pluginId, `ignored panel "${value.id}" because its component is invalid.`);
+ return false;
+ }
+ if (!isValidCollections(value.collections)) {
+ warn(
+ pluginId,
+ `ignored panel "${value.id}" because collections must be an array of strings or a predicate.`,
+ );
+ return false;
+ }
+ if (value.minRole !== undefined && !Number.isFinite(value.minRole)) {
+ warn(pluginId, `ignored panel "${value.id}" because minRole must be finite.`);
+ return false;
+ }
+ if (value.order !== undefined && !Number.isFinite(value.order)) {
+ warn(pluginId, `ignored panel "${value.id}" because order must be finite.`);
+ return false;
+ }
+ return true;
+}
+
+function appliesToCollection(
+ pluginId: string,
+ panel: ContentEditorPanelExtension,
+ collection: string,
+): boolean {
+ if (panel.collections === undefined) return true;
+ if (typeof panel.collections !== "function") {
+ return panel.collections.includes(collection);
+ }
+
+ try {
+ return panel.collections(collection);
+ } catch (error) {
+ console.error(
+ `Plugin "${pluginId}" failed while checking content editor panel "${panel.id}".`,
+ error,
+ );
+ return false;
+ }
+}
+
+/**
+ * Select valid trusted-plugin panels for one saved content editor.
+ * Invalid, disabled, unauthorized, and inapplicable contributions are omitted
+ * so the host settings sidebar remains usable.
+ */
+export function resolveContentEditorPanels(
+ pluginAdmins: ContentEditorPanelRegistry,
+ collection: string,
+ userRole: number,
+ pluginStates?: AdminManifest["plugins"],
+): ResolvedContentEditorPanel[] {
+ const resolved: ResolvedContentEditorPanel[] = [];
+ const seen = new Set();
+
+ for (const pluginId of Object.keys(pluginAdmins).toSorted()) {
+ const pluginState = pluginStates?.[pluginId];
+ if (pluginStates && (!pluginState || pluginState.enabled === false)) continue;
+
+ const panels: unknown = pluginAdmins[pluginId]?.contentEditorPanels;
+ if (panels === undefined) continue;
+ if (!Array.isArray(panels)) {
+ warn(pluginId, "ignored contentEditorPanels because it is not an array.");
+ continue;
+ }
+
+ for (const candidate of panels) {
+ if (!isValidPanel(candidate, pluginId)) continue;
+ const identity = `${pluginId}:${candidate.id}`;
+ if (seen.has(identity)) {
+ warn(pluginId, `ignored duplicate panel id "${candidate.id}".`);
+ continue;
+ }
+ seen.add(identity);
+
+ if (!appliesToCollection(pluginId, candidate, collection)) continue;
+ if (candidate.minRole !== undefined && userRole < candidate.minRole) continue;
+ resolved.push({ pluginId, extension: candidate });
+ }
+ }
+
+ return resolved.toSorted(
+ (a, b) =>
+ (a.extension.order ?? 0) - (b.extension.order ?? 0) ||
+ a.pluginId.localeCompare(b.pluginId) ||
+ a.extension.id.localeCompare(b.extension.id),
+ );
+}
+
+interface ContentEditorPanelBoundaryProps {
+ pluginId: string;
+ panelId: string;
+ children: React.ReactNode;
+}
+
+interface ContentEditorPanelBoundaryState {
+ hasError: boolean;
+}
+
+/** Prevents one faulty trusted panel from unmounting the content editor. */
+export class ContentEditorPanelBoundary extends React.Component<
+ ContentEditorPanelBoundaryProps,
+ ContentEditorPanelBoundaryState
+> {
+ override state: ContentEditorPanelBoundaryState = { hasError: false };
+
+ static getDerivedStateFromError(): ContentEditorPanelBoundaryState {
+ return { hasError: true };
+ }
+
+ override componentDidCatch(error: Error, info: React.ErrorInfo): void {
+ console.error(
+ `Plugin "${this.props.pluginId}" failed while rendering content editor panel "${this.props.panelId}".`,
+ error,
+ info,
+ );
+ }
+
+ override render(): React.ReactNode {
+ if (!this.state.hasError) return this.props.children;
+
+ return (
+
+
+ Plugin panel unavailable.
+
+
+
+ Insights for {entry.slug} ({locale})
+
+ );
+}
+
+function pluginWrapper(pluginAdmins: PluginAdmins) {
+ return function PluginWrapper({ children }: React.PropsWithChildren) {
+ return {children};
+ };
+}
+
function makePanelProps(
overrides: Partial = {},
): ContentSettingsPanelProps {
@@ -120,6 +143,9 @@ describe("ContentSettingsPanel", () => {
beforeEach(() => {
vi.clearAllMocks();
});
+ afterEach(() => {
+ vi.restoreAllMocks();
+ });
it("renders all eight sections when every capability is enabled", async () => {
const screen = await render();
@@ -173,6 +199,92 @@ describe("ContentSettingsPanel", () => {
expect(statusRow.querySelector("svg")).toBeNull();
});
+ it("renders applicable trusted plugin panels in host-owned sections", async () => {
+ const pluginAdmins: PluginAdmins = {
+ insights: {
+ contentEditorPanels: [
+ {
+ id: "summary",
+ title: "Content insights",
+ component: InsightsPanel,
+ collections: ["posts"],
+ },
+ ],
+ },
+ };
+ const screen = await render(
+ ,
+ { wrapper: pluginWrapper(pluginAdmins) },
+ );
+
+ await expect
+ .element(screen.getByRole("heading", { name: "Content insights" }))
+ .toBeInTheDocument();
+ await expect
+ .element(screen.getByTestId("insights-panel"))
+ .toHaveTextContent("Insights for my-post (en)");
+ });
+
+ it("omits panels when their plugin is disabled or the entry is new", async () => {
+ const pluginAdmins: PluginAdmins = {
+ insights: {
+ contentEditorPanels: [
+ { id: "summary", title: "Content insights", component: InsightsPanel },
+ ],
+ },
+ };
+ const disabledManifest: AdminManifest = {
+ ...TEST_MANIFEST,
+ plugins: { insights: { enabled: false } },
+ };
+ const disabledScreen = await render(
+ ,
+ { wrapper: pluginWrapper(pluginAdmins) },
+ );
+ expect(disabledScreen.container.querySelector('[data-testid="insights-panel"]')).toBeNull();
+
+ const newScreen = await render(
+ ,
+ { wrapper: pluginWrapper(pluginAdmins) },
+ );
+ expect(newScreen.container.querySelector('[data-testid="insights-panel"]')).toBeNull();
+ });
+
+ it("contains plugin panel render failures", async () => {
+ const errorSpy = vi.spyOn(console, "error").mockImplementation(() => undefined);
+ function BrokenPanel(): React.ReactNode {
+ throw new Error("render failed");
+ }
+ function HealthyPanel(): React.ReactNode {
+ return Healthy panel
;
+ }
+ const pluginAdmins: PluginAdmins = {
+ insights: {
+ contentEditorPanels: [
+ { id: "broken", title: "Broken insights", component: BrokenPanel },
+ { id: "healthy", title: "Healthy insights", component: HealthyPanel },
+ ],
+ },
+ };
+ const screen = await render(
+ ,
+ { wrapper: pluginWrapper(pluginAdmins) },
+ );
+
+ await expect.element(screen.getByRole("alert")).toHaveTextContent("Plugin panel unavailable.");
+ await expect.element(screen.getByRole("button", { name: "Retry" })).toBeInTheDocument();
+ await expect.element(screen.getByTestId("healthy-panel")).toHaveTextContent("Healthy panel");
+ await expect.element(screen.getByTestId("doc-outline")).toBeInTheDocument();
+ expect(errorSpy).toHaveBeenCalled();
+ });
+
it("hides Ownership and Bylines for users below the editor role", async () => {
const screen = await render(
,
diff --git a/packages/admin/tests/lib/content-editor-panels.test.tsx b/packages/admin/tests/lib/content-editor-panels.test.tsx
new file mode 100644
index 0000000000..9ea35d7c50
--- /dev/null
+++ b/packages/admin/tests/lib/content-editor-panels.test.tsx
@@ -0,0 +1,126 @@
+import * as React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import {
+ resolveContentEditorPanels,
+ type ContentEditorPanelContext,
+} from "../../src/lib/content-editor-panels";
+import type { PluginAdmins } from "../../src/lib/plugin-context";
+
+function Panel(_props: ContentEditorPanelContext) {
+ return Panel
;
+}
+
+afterEach(() => {
+ vi.restoreAllMocks();
+});
+
+describe("resolveContentEditorPanels", () => {
+ it("selects enabled panels by collection and role", () => {
+ const pluginAdmins: PluginAdmins = {
+ insights: {
+ contentEditorPanels: [
+ { id: "summary", title: "Summary", component: Panel, collections: ["posts"] },
+ { id: "pages", title: "Pages", component: Panel, collections: ["pages"] },
+ { id: "admin", title: "Admin", component: Panel, minRole: 50 },
+ ],
+ },
+ };
+
+ expect(
+ resolveContentEditorPanels(pluginAdmins, "posts", 40, {
+ insights: { enabled: true },
+ }),
+ ).toEqual([
+ expect.objectContaining({
+ pluginId: "insights",
+ extension: expect.objectContaining({ id: "summary" }),
+ }),
+ ]);
+ });
+
+ it("ignores disabled and stale registry modules", () => {
+ const pluginAdmins: PluginAdmins = {
+ enabled: {
+ contentEditorPanels: [{ id: "kept", title: "Kept", component: Panel }],
+ },
+ disabled: {
+ contentEditorPanels: [{ id: "disabled", title: "Disabled", component: Panel }],
+ },
+ stale: {
+ contentEditorPanels: [{ id: "stale", title: "Stale", component: Panel }],
+ },
+ };
+
+ expect(
+ resolveContentEditorPanels(pluginAdmins, "posts", 50, {
+ enabled: { enabled: true },
+ disabled: { enabled: false },
+ }),
+ ).toEqual([
+ expect.objectContaining({
+ pluginId: "enabled",
+ extension: expect.objectContaining({ id: "kept" }),
+ }),
+ ]);
+ });
+
+ it("orders panels deterministically and ignores duplicate ids per plugin", () => {
+ const warningSpy = vi.spyOn(console, "warn").mockImplementation(() => undefined);
+ const pluginAdmins: PluginAdmins = {
+ zeta: {
+ contentEditorPanels: [{ id: "later", title: "Later", component: Panel, order: 5 }],
+ },
+ alpha: {
+ contentEditorPanels: [
+ { id: "first", title: "First", component: Panel, order: -1 },
+ { id: "first", title: "Duplicate", component: Panel, order: -2 },
+ ],
+ },
+ };
+
+ expect(resolveContentEditorPanels(pluginAdmins, "posts", 50)).toMatchObject([
+ { pluginId: "alpha", extension: { id: "first" } },
+ { pluginId: "zeta", extension: { id: "later" } },
+ ]);
+ expect(warningSpy).toHaveBeenCalledOnce();
+ });
+
+ it("contains collection predicate failures", () => {
+ const errorSpy = vi.spyOn(console, "error").mockImplementation(() => undefined);
+ const pluginAdmins: PluginAdmins = {
+ broken: {
+ contentEditorPanels: [
+ {
+ id: "broken",
+ title: "Broken",
+ component: Panel,
+ collections: () => {
+ throw new Error("predicate failed");
+ },
+ },
+ ],
+ },
+ };
+
+ expect(resolveContentEditorPanels(pluginAdmins, "posts", 50)).toEqual([]);
+ expect(errorSpy).toHaveBeenCalledOnce();
+ });
+
+ it("ignores malformed panel exports without throwing", () => {
+ const warningSpy = vi.spyOn(console, "warn").mockImplementation(() => undefined);
+ const pluginAdmins = {
+ broken: {
+ contentEditorPanels: [
+ { id: "", title: "Missing id", component: Panel },
+ { id: "title", title: "", component: Panel },
+ { id: "component", title: "Component" },
+ { id: "order", title: "Order", component: Panel, order: Number.NaN },
+ ],
+ },
+ } as unknown as PluginAdmins;
+
+ expect(resolveContentEditorPanels(pluginAdmins, "posts", 50)).toEqual([]);
+ expect(warningSpy).toHaveBeenCalledTimes(4);
+ });
+});
diff --git a/packages/admin/tests/lib/content-settings-layout.test.ts b/packages/admin/tests/lib/content-settings-layout.test.ts
index 1b685b3ad0..83b7252801 100644
--- a/packages/admin/tests/lib/content-settings-layout.test.ts
+++ b/packages/admin/tests/lib/content-settings-layout.test.ts
@@ -36,4 +36,18 @@ describe("content settings layout", () => {
expect(next.order.indexOf("seo")).toBe(next.order.indexOf("ownership") - 1);
expect(layout.order).toEqual(DEFAULT_CONTENT_SETTINGS_SECTION_ORDER);
});
+
+ it("preserves and reorders dynamically registered sections", () => {
+ const pluginSection = "plugin:example:insights";
+ const available = [...DEFAULT_CONTENT_SETTINGS_SECTION_ORDER, pluginSection];
+ const stored = parseContentSettingsLayout(
+ JSON.stringify({ version: 1, order: [pluginSection, "seo"] }),
+ );
+ const layout = resolveContentSettingsLayout(stored, available);
+
+ expect(layout.order.slice(0, 2)).toEqual([pluginSection, "seo"]);
+
+ const next = reorderContentSettingsLayout(layout, pluginSection, "ownership");
+ expect(next.order.indexOf(pluginSection)).toBe(next.order.indexOf("ownership") - 1);
+ });
});
diff --git a/packages/core/src/virtual-modules.d.ts b/packages/core/src/virtual-modules.d.ts
index 9ce6519842..3041c2b326 100644
--- a/packages/core/src/virtual-modules.d.ts
+++ b/packages/core/src/virtual-modules.d.ts
@@ -189,6 +189,7 @@ declare module "virtual:emdash/admin-registry" {
* - pages: Record
* - widgets: Record
* - fields: Record (field widget renderers)
+ * - contentEditorPanels: Trusted content editor sidebar panels
*/
export const pluginAdmins: Record<
string,
@@ -196,6 +197,7 @@ declare module "virtual:emdash/admin-registry" {
pages?: Record;
widgets?: Record;
fields?: Record;
+ contentEditorPanels?: readonly unknown[];
}
>;
}
From 5ad53b7513c3ae1ca19ee71ea31ced233c1f2d9a Mon Sep 17 00:00:00 2001
From: logelog <194732487+logelog@users.noreply.github.com>
Date: Wed, 22 Jul 2026 01:54:25 +0200
Subject: [PATCH 2/4] fix(admin): use Kumo button in panel fallback
---
packages/admin/src/lib/content-editor-panels.tsx | 9 ++++++---
1 file changed, 6 insertions(+), 3 deletions(-)
diff --git a/packages/admin/src/lib/content-editor-panels.tsx b/packages/admin/src/lib/content-editor-panels.tsx
index 8d1acebe65..8b09c0e40b 100644
--- a/packages/admin/src/lib/content-editor-panels.tsx
+++ b/packages/admin/src/lib/content-editor-panels.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@cloudflare/kumo";
import { Trans } from "@lingui/react/macro";
import * as React from "react";
@@ -190,13 +191,15 @@ export class ContentEditorPanelBoundary extends React.Component<
Plugin panel unavailable.
-
+