React 管理ページとウィジェット

ネイティブプラグインは、カスタム React ページ、ダッシュボードウィジェット、フィールドウィジェット、コンテンツリスト列で管理パネルを拡張できます。サンドボックスプラグインは代わりに Block Kit として UI を記述します。プラグインの JavaScript を管理パネルに読み込むとサンドボックスの分離が壊れるためです。

プラグインに設定フォームのみ必要な場合、自動生成される admin.settingsSchema フォーム（最初のネイティブプラグインを参照）で React を書かずにほとんどのケースに対応できます。

管理エントリーポイント

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" }],
	},
});

管理ページ

管理ページは /_emdash/admin/plugins/<plugin-id>/<パス> にマウントされる React コンポーネントです。ラベルは英語で宣言します。管理パネルはレンダリング前に共有 Lingui インスタンスを通して処理するため、メッセージカタログを読み込むプラグインは無料でローカライズされたナビゲーションを取得できます。

プラグイン API フック

usePluginAPI() はプラグイン ID プレフィックスと X-EmDash-Request: 1 CSRF ヘッダーを自動的に追加してプラグインルートを呼び出します。

ダッシュボードウィジェット

コンテンツエディターパネル

信頼された React プラグインは、保存されたコンテンツエントリの設定サイドバーにホストフレーム付きセクションを追加できます。

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

function ContentInsights({ entry, locale }: ContentEditorPanelContext) {
	return <p>{entry.slug} の分析（{locale ?? "デフォルトロケール"}）</p>;
}

export const contentEditorPanels = [
	{ id: "content-insights", title: "コンテンツインサイト", component: ContentInsights, collections: ["posts", "pages"], minRole: 40, order: 10 },
];

コンテンツリスト列

信頼された React プラグインは、アクティブなコンテンツコレクションリストに読み取り専用の列を追加できます。

自動生成設定 UI

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

ビルド設定

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"],
};

プラグインの有効化/無効化

プラグインが管理パネルで無効化されると：サイドバーリンクが非表示、ダッシュボードウィジェットがレンダリングされない、コンテンツリスト列がレンダリングされない、管理ページが404を返す、バックエンドフックは引き続き実行（データ安全のため）。

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