Páginas admin e widgets React

Plugins nativos podem estender o painel admin com páginas React personalizadas, widgets de dashboard, widgets de campo e colunas de lista de conteúdo — plugins sandboxed descrevem sua UI como Block Kit, porque carregar JavaScript de plugin no admin quebraria o isolamento do sandbox.

Se seu plugin precisa apenas de um formulário de configurações, o formulário auto-gerado admin.settingsSchema (veja Seu primeiro plugin nativo) cobre a maioria dos casos sem escrever React.

Ponto de entrada admin

import { SEOSettingsPage } from "./components/SEOSettingsPage";
import { SEODashboardWidget } from "./components/SEODashboardWidget";

export const widgets = { "seo-overview": SEODashboardWidget };
export const pages = { "/settings": SEOSettingsPage };

{ "exports": { ".": "./dist/index.js", "./admin": "./dist/admin.js" } }

definePlugin({
	id: "seo",
	version: "1.0.0",
	admin: {
		entry: "@my-org/plugin-seo/admin",
		pages: [{ path: "/settings", label: "SEO Settings", icon: "settings" }],
		widgets: [{ id: "seo-overview", title: "SEO Overview", size: "half" }],
	},
});

Páginas admin

Páginas admin são componentes React montados em /_emdash/admin/plugins/<plugin-id>/<caminho>. Declare labels em inglês — o admin os passa pela instância compartilhada Lingui antes de renderizar a barra lateral e paleta de comandos, oferecendo navegação localizada gratuitamente.

Hook de API do plugin

usePluginAPI() chama as rotas do seu plugin com o prefixo do id do plugin e o header CSRF X-EmDash-Request: 1 adicionado automaticamente.

Widgets de dashboard

Painéis do editor de conteúdo

Um plugin React confiável pode adicionar seções ao sidebar de configurações para entradas de conteúdo salvas.

import type { ContentEditorPanelContext } from "@emdash-cms/admin";

function ContentInsights({ entry, locale }: ContentEditorPanelContext) {
	return <p>Análise para {entry.slug} em {locale ?? "o locale padrão"}</p>;
}

export const contentEditorPanels = [
	{ id: "content-insights", title: "Insights de conteúdo", component: ContentInsights, collections: ["posts", "pages"], minRole: 40, order: 10 },
];

Colunas de lista de conteúdo

Plugins React confiáveis podem adicionar colunas somente leitura às listas de coleções de conteúdo ativas.

UI de configurações auto-gerada

admin: {
	settingsSchema: {
		apiKey: { type: "secret", label: "API Key" },
		enabled: { type: "boolean", label: "Enabled", default: true },
	},
},

Configuração de build

export default {
	entry: { index: "src/index.ts", admin: "src/admin.tsx" },
	format: "esm", dts: true,
	external: ["react", "react-dom", "emdash", "@emdash-cms/admin"],
};

export default {
	entry: ["src/index.ts", "src/admin.tsx"],
	format: "esm", dts: true,
	external: ["react", "react-dom", "emdash", "@emdash-cms/admin"],
};

Habilitar/desabilitar plugin

Quando um plugin é desabilitado: links da barra lateral são ocultados, widgets não são renderizados, colunas de lista não são renderizadas, páginas admin retornam 404, hooks do backend continuam executando (por segurança dos dados).

const enabled = await ctx.kv.get<boolean>("_emdash:enabled");