feat(admin): add media_picker BlockKit element

.changeset/blockkit-media-picker.md

@@ -0,0 +1,7 @@
+---
+"emdash": minor
+"@emdash-cms/admin": minor
+"@emdash-cms/blocks": minor
+---
+
+Adds a `media_picker` Block Kit element: a thumbnail preview with a modal library picker and mime-type filter. Usable in plugin block forms and in Block Kit field widgets. The stored value is the selected asset's URL string, so it is value-compatible with a plain `text_input` — existing content continues to work after swapping. The `mime_type_filter` is restricted to image MIME types (`image/` or `image/<subtype>`); wildcards and non-image types are rejected.

packages/admin/src/components/BlockKitFieldWidget.tsx

@@ -2,6 +2,8 @@ import { Input, Switch } from "@cloudflare/kumo";
 import type { Element } from "@emdash-cms/blocks";
 import * as React from "react";
 
+import { BlockKitMediaPickerField } from "./BlockKitMediaPickerField";
+
 interface BlockKitFieldWidgetProps {
 	label: string;
 	elements: Element[];
@@ -113,6 +115,17 @@ function BlockKitFieldElement({
 				</div>
 			);
 		}
+		case "media_picker":
+			return (
+				<BlockKitMediaPickerField
+					actionId={element.action_id}
+					label={element.label}
+					placeholder={element.placeholder}
+					mimeTypeFilter={element.mime_type_filter}
+					value={value}
+					onChange={onChange}
+				/>
+			);
 		default:
 			return (
 				<div className="text-sm text-kumo-subtle">

packages/admin/src/components/BlockKitMediaPickerField.tsx

@@ -0,0 +1,122 @@
+import { Button } from "@cloudflare/kumo";
+import { useLingui } from "@lingui/react/macro";
+import { Image as ImageIcon, X } from "@phosphor-icons/react";
+import * as React from "react";
+
+import type { MediaItem } from "../lib/api";
+import { isSafeUrl } from "../lib/url";
+import { MediaPickerModal } from "./MediaPickerModal";
+
+export interface BlockKitMediaPickerFieldProps {
+	actionId: string;
+	label: string;
+	placeholder?: string;
+	mimeTypeFilter?: string;
+	value: unknown;
+	onChange: (actionId: string, value: unknown) => void;
+}
+
+/**
+ * Shared media_picker BlockKit element renderer used by `BlockKitFieldWidget`
+ * (sandboxed plugin field widgets) and the `BlockKitField` switch inside
+ * `PortableTextEditor` (plugin block forms).
+ *
+ * The stored value is the asset URL string, so values are interchangeable
+ * with `text_input`. Existing arbitrary URLs are tolerated but only previewed
+ * when they pass scheme/path safety checks.
+ */
+export function BlockKitMediaPickerField({
+	actionId,
+	label,
+	placeholder,
+	mimeTypeFilter,
+	value,
+	onChange,
+}: BlockKitMediaPickerFieldProps) {
+	const { t } = useLingui();
+	const [pickerOpen, setPickerOpen] = React.useState(false);
+	const url = typeof value === "string" && value.length > 0 ? value : "";
+	const filter = mimeTypeFilter ?? "image/";
+	const canPreview = isSafePreviewUrl(url);
+
+	const handleSelect = (item: MediaItem) => {
+		// `MediaPickerModal` returns URL-inserted items with `id: ""` and no
+		// `provider`/`storageKey`, so we cannot infer "local" from absence of
+		// `provider` alone — that would rewrite the external URL to a broken
+		// `/_emdash/api/media/file/` path. Detect local explicitly.
+		const isLocalMedia = item.provider === "local" || !!item.storageKey;
+		const localKey = item.storageKey || item.id;
+		const nextUrl = isLocalMedia && localKey ? `/_emdash/api/media/file/${localKey}` : item.url;
+		if (!nextUrl) return;
+		onChange(actionId, nextUrl);
+	};
+
+	return (
+		<div>
+			<label className="text-sm font-medium mb-1.5 block">{label}</label>
+			{canPreview ? (
+				<div className="relative group">
+					<img
+						src={url}
+						alt=""
+						className="max-h-40 w-full rounded-md border border-kumo-line object-contain bg-kumo-muted"
+						referrerPolicy="no-referrer"
+						loading="lazy"
+					/>
+					<div className="absolute top-2 end-2 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto transition-opacity flex gap-1">
+						<Button type="button" size="sm" variant="secondary" onClick={() => setPickerOpen(true)}>
+							{t`Change`}
+						</Button>
+						<Button
+							type="button"
+							shape="square"
+							variant="destructive"
+							className="h-8 w-8"
+							onClick={() => onChange(actionId, "")}
+							aria-label={t`Remove`}
+						>
+							<X className="h-4 w-4" />
+						</Button>
+					</div>
+				</div>
+			) : (
+				<Button
+					type="button"
+					variant="outline"
+					className="w-full h-24 border-dashed"
+					onClick={() => setPickerOpen(true)}
+				>
+					<div className="flex flex-col items-center gap-1.5 text-kumo-subtle">
+						<ImageIcon className="h-6 w-6" />
+						<span className="text-sm">{placeholder ?? t`Select media`}</span>
+					</div>
+				</Button>
+			)}
+			<MediaPickerModal
+				open={pickerOpen}
+				onOpenChange={setPickerOpen}
+				onSelect={handleSelect}
+				mimeTypeFilter={filter}
+				title={t`Select ${label}`}
+			/>
+		</div>
+	);
+}
+
+const HAS_SCHEME_RE = /^[a-z][a-z0-9+.-]*:/i;
+
+/**
+ * Returns true when `url` is safe to preview via `<img src={url}>`:
+ * - Same-origin relative path starting with `/` (but not `//`)
+ * - External `http://` or `https://` URL
+ *
+ * Rejects `javascript:`, `data:`, protocol-relative `//host`, and other
+ * schemes whose preview could leak credentials or trigger surprises.
+ */
+function isSafePreviewUrl(url: string): boolean {
+	if (!url) return false;
+	if (HAS_SCHEME_RE.test(url)) {
+		return isSafeUrl(url);
+	}
+	return url.startsWith("/") && !url.startsWith("//");
+}

packages/admin/src/components/PortableTextEditor.tsx

@@ -83,6 +83,7 @@ import type { MediaItem } from "../lib/api";
 import type { Section } from "../lib/api";
 import { cn } from "../lib/utils";
 import { CaretNext } from "./ArrowIcons.js";
+import { BlockKitMediaPickerField } from "./BlockKitMediaPickerField";
 import { DragHandleWrapper } from "./editor/DragHandleWrapper";
 import { ImageExtension } from "./editor/ImageNode";
 import { MarkdownLinkExtension } from "./editor/MarkdownLinkExtension";
@@ -1231,6 +1232,18 @@ function BlockKitField({
 				<BlockKitRepeater field={field} pluginId={pluginId} value={value} onChange={onChange} />
 			);
 		}
+		case "media_picker": {
+			return (
+				<BlockKitMediaPickerField
+					actionId={field.action_id}
+					label={field.label}
+					placeholder={field.placeholder}
+					mimeTypeFilter={field.mime_type_filter}
+					value={value}
+					onChange={onChange}
+				/>
+			);
+		}
 		default:
 			return <div className="text-sm text-kumo-subtle">Unknown field type: {field.type}</div>;
 	}