@nuasite/cms-mdx-editor 0.43.0-beta.4

package/src/component-picker.tsx

@@ -0,0 +1,82 @@
+/**
+ * Component picker for inserting an MDX block. A searchable list of the project's
+ * Astro components; selecting one inserts it at the cursor with its props
+ * pre-seeded (defaults where declared), then props/children are edited in the
+ * block-card. Self-contained inline styles.
+ */
+import type { ComponentDefinition } from '@nuasite/cms-types'
+import { useMemo, useState } from 'react'
+
+export interface ComponentPickerProps {
+	open: boolean
+	components: ComponentDefinition[]
+	onInsert: (componentName: string, props: Record<string, string>, children?: string) => void
+	onClose: () => void
+}
+
+function defaultProps(def: ComponentDefinition): Record<string, string> {
+	const props: Record<string, string> = {}
+	for (const p of def.props) props[p.name] = p.defaultValue ?? ''
+	return props
+}
+
+const backdrop: React.CSSProperties = {
+	position: 'fixed',
+	inset: 0,
+	background: 'rgba(0,0,0,0.35)',
+	display: 'flex',
+	alignItems: 'flex-start',
+	justifyContent: 'center',
+	paddingTop: '12vh',
+	zIndex: 1000,
+}
+const modal: React.CSSProperties = {
+	width: 'min(440px, 92vw)',
+	maxHeight: '70vh',
+	display: 'flex',
+	flexDirection: 'column',
+	background: '#fff',
+	border: '1px solid #d4d4d8',
+	borderRadius: 10,
+	boxShadow: '0 12px 32px rgba(0,0,0,0.18)',
+	overflow: 'hidden',
+	fontSize: 13,
+}
+const searchStyle: React.CSSProperties = { border: 'none', borderBottom: '1px solid #ececed', padding: '10px 12px', font: 'inherit', outline: 'none' }
+const itemStyle: React.CSSProperties = { textAlign: 'left', border: 'none', background: 'transparent', padding: '8px 12px', cursor: 'pointer', borderRadius: 0 }
+
+export function ComponentPicker({ open, components, onInsert, onClose }: ComponentPickerProps) {
+	const [query, setQuery] = useState('')
+
+	const filtered = useMemo(() => {
+		const q = query.trim().toLowerCase()
+		return components.filter(c => q === '' || c.name.toLowerCase().includes(q) || (c.description ?? '').toLowerCase().includes(q))
+	}, [components, query])
+
+	if (!open) return null
+
+	return (
+		<div style={backdrop} onMouseDown={onClose}>
+			<div style={modal} onMouseDown={(e) => e.stopPropagation()}>
+				<input style={searchStyle} placeholder="Search components…" autoFocus value={query} onChange={(e) => setQuery(e.target.value)} />
+				<div style={{ overflowY: 'auto' }}>
+					{filtered.length === 0 ? <div style={{ padding: 12, color: '#a1a1aa' }}>No components</div> : null}
+					{filtered.map(def => (
+						<button
+							key={def.name}
+							type="button"
+							style={itemStyle}
+							onClick={() => {
+								onInsert(def.name, defaultProps(def))
+								onClose()
+							}}
+						>
+							<div style={{ fontWeight: 600, fontFamily: 'ui-monospace, monospace', color: '#3f3f46' }}>{def.name}</div>
+							{def.description ? <div style={{ color: '#71717a', fontSize: 12 }}>{def.description}</div> : null}
+						</button>
+					))}
+				</div>
+			</div>
+		</div>
+	)
+}

package/src/format-toolbar.tsx

@@ -0,0 +1,197 @@
+/**
+ * Rich-text toolbar shared by the body editor and the nested slot editor. Reflects
+ * and toggles inline/block formatting on the bound Milkdown editor; optionally
+ * surfaces an image button (opens the media library) and an "insert component"
+ * button (body editor only). The nested slot editor passes neither, matching the
+ * original mini-editor's formatting-only toolbar.
+ */
+import { type Editor, editorViewCtx } from '@milkdown/core'
+import {
+	liftListItemCommand,
+	toggleEmphasisCommand,
+	toggleLinkCommand,
+	toggleStrongCommand,
+	updateLinkCommand,
+	wrapInBlockquoteCommand,
+	wrapInBulletListCommand,
+	wrapInOrderedListCommand,
+} from '@milkdown/preset-commonmark'
+import { toggleStrikethroughCommand } from '@milkdown/preset-gfm'
+import { callCommand } from '@milkdown/utils'
+import { useEffect, useState } from 'react'
+import { LinkPopover } from './link-popover'
+import { MediaLibrary } from './media-library'
+import { type ActiveFormats, defaultActiveFormats, isInListType, removeLinkMark, setupFormatTracking, toggleHeading } from './milkdown-utils'
+import type { MediaContext, MediaSource } from './media-source'
+
+/** Track active formats on the editor, re-attaching when the instance changes. */
+export function useFormatTracking(editor: Editor | null): ActiveFormats {
+	const [formats, setFormats] = useState<ActiveFormats>(defaultActiveFormats)
+	useEffect(() => {
+		if (!editor) {
+			setFormats(defaultActiveFormats)
+			return
+		}
+		return setupFormatTracking(editor, setFormats)
+	}, [editor])
+	return formats
+}
+
+function doHeading(editor: Editor, level: number) {
+	toggleHeading(editor.ctx.get(editorViewCtx), level)
+}
+
+function toggleList(editor: Editor, type: 'bullet' | 'ordered') {
+	const view = editor.ctx.get(editorViewCtx)
+	const listType = type === 'bullet' ? 'bullet_list' : 'ordered_list'
+	if (isInListType(view, listType)) {
+		editor.action(callCommand(liftListItemCommand.key))
+	} else {
+		editor.action(callCommand(type === 'bullet' ? wrapInBulletListCommand.key : wrapInOrderedListCommand.key))
+	}
+}
+
+function insertImage(editor: Editor, src: string, alt: string) {
+	editor.action((ctx) => {
+		const view = ctx.get(editorViewCtx)
+		const imageType = view.state.schema.nodes.image
+		if (!imageType) return
+		view.focus()
+		view.dispatch(view.state.tr.replaceSelectionWith(imageType.create({ src, alt })).scrollIntoView())
+	})
+}
+
+export interface FormatToolbarProps {
+	editor: Editor | null
+	media?: MediaSource
+	mediaContext?: MediaContext
+	/** Upload field the image is filed under (e.g. 'body'). */
+	field?: string
+	onInsertComponent?: () => void
+}
+
+const bar: React.CSSProperties = {
+	display: 'flex',
+	flexWrap: 'wrap',
+	alignItems: 'center',
+	gap: 3,
+	padding: '4px 6px',
+	borderBottom: '1px solid #ececed',
+	background: '#fafafa',
+}
+const sep: React.CSSProperties = { width: 1, height: 18, background: '#e4e4e7', margin: '0 3px' }
+const baseBtn: React.CSSProperties = {
+	border: '1px solid transparent',
+	background: 'transparent',
+	borderRadius: 4,
+	padding: '2px 7px',
+	font: 'inherit',
+	fontSize: 12,
+	lineHeight: 1.4,
+	cursor: 'pointer',
+	color: '#52525b',
+}
+const activeBtn: React.CSSProperties = { ...baseBtn, background: '#2563eb', borderColor: '#2563eb', color: '#fff' }
+
+function Btn({ active, title, onClick, style, children }: {
+	active?: boolean
+	title: string
+	onClick: () => void
+	style?: React.CSSProperties
+	children: React.ReactNode
+}) {
+	return (
+		<button
+			type="button"
+			title={title}
+			data-mdx-action="format"
+			onMouseDown={e => e.preventDefault()}
+			onClick={onClick}
+			style={{ ...(active ? activeBtn : baseBtn), ...style }}
+		>
+			{children}
+		</button>
+	)
+}
+
+export function FormatToolbar({ editor, media, mediaContext, field, onInsertComponent }: FormatToolbarProps) {
+	const formats = useFormatTracking(editor)
+	const [linkOpen, setLinkOpen] = useState(false)
+	const [mediaOpen, setMediaOpen] = useState(false)
+	const disabled = editor === null
+
+	const applyLink = (url: string) => {
+		setLinkOpen(false)
+		if (!editor) return
+		const view = editor.ctx.get(editorViewCtx)
+		view.focus()
+		editor.action(callCommand(formats.link ? updateLinkCommand.key : toggleLinkCommand.key, { href: url }))
+	}
+
+	const removeLink = () => {
+		setLinkOpen(false)
+		if (!editor) return
+		const view = editor.ctx.get(editorViewCtx)
+		view.focus()
+		removeLinkMark(view)
+	}
+
+	return (
+		<div>
+			<div style={bar}>
+				<Btn active={formats.bold} title="Bold" onClick={() => editor?.action(callCommand(toggleStrongCommand.key))} style={{ fontWeight: 700 }}>B</Btn>
+				<Btn active={formats.italic} title="Italic" onClick={() => editor?.action(callCommand(toggleEmphasisCommand.key))} style={{ fontStyle: 'italic' }}>I</Btn>
+				<Btn active={formats.strikethrough} title="Strikethrough" onClick={() => editor?.action(callCommand(toggleStrikethroughCommand.key))} style={{ textDecoration: 'line-through' }}>S</Btn>
+				<span style={sep} />
+				<Btn active={formats.heading === 2} title="Heading 2" onClick={() => editor && doHeading(editor, 2)}>H2</Btn>
+				<Btn active={formats.heading === 3} title="Heading 3" onClick={() => editor && doHeading(editor, 3)}>H3</Btn>
+				<Btn active={formats.heading === 4} title="Heading 4" onClick={() => editor && doHeading(editor, 4)}>H4</Btn>
+				<span style={sep} />
+				<Btn active={formats.bulletList} title="Bullet list" onClick={() => editor && toggleList(editor, 'bullet')}>• List</Btn>
+				<Btn active={formats.orderedList} title="Numbered list" onClick={() => editor && toggleList(editor, 'ordered')}>1. List</Btn>
+				<Btn active={formats.blockquote} title="Quote" onClick={() => editor?.action(callCommand(wrapInBlockquoteCommand.key))}>❝</Btn>
+				<span style={sep} />
+				<Btn active={formats.link || linkOpen} title="Link" onClick={() => !disabled && setLinkOpen(v => !v)}>🔗 Link</Btn>
+				{media ? <Btn title="Insert image" onClick={() => !disabled && setMediaOpen(true)}>🖼 Image</Btn> : null}
+				{onInsertComponent
+					? (
+						<>
+							<span style={{ flex: 1 }} />
+							<Btn title="Insert component block" onClick={() => !disabled && onInsertComponent()} style={{ border: '1px solid #d4d4d8', color: '#3f3f46' }}>+ Component</Btn>
+						</>
+					)
+					: null}
+			</div>
+
+			{linkOpen
+				? (
+					<div style={{ padding: '0 6px' }}>
+						<LinkPopover
+							initialUrl={formats.linkHref ?? 'https://'}
+							isEdit={formats.link}
+							onApply={applyLink}
+							onRemove={formats.link ? removeLink : undefined}
+							onClose={() => setLinkOpen(false)}
+						/>
+					</div>
+				)
+				: null}
+
+			{mediaOpen && media
+				? (
+					<MediaLibrary
+						media={media}
+						context={mediaContext}
+						field={field}
+						accept="image/*"
+						onSelect={(url, alt) => {
+							setMediaOpen(false)
+							if (editor) insertImage(editor, url, alt ?? '')
+						}}
+						onClose={() => setMediaOpen(false)}
+					/>
+				)
+				: null}
+		</div>
+	)
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+/**
+ * `@nuasite/cms-mdx-editor` — React MDX body editor (Milkdown) for Nua CMS
+ * collection entries. Round-trips component blocks (props, children, expression
+ * props, imports) through the editor; rich-text toolbar, nested WYSIWYG slot
+ * editing, and a media library for image props and prose images. String in / out.
+ *
+ * Mount `<MdxBodyEditor value onChange components={…} media={client} mediaContext={…} />`;
+ * feed `components` from `cmsClient.getComponents()` and `media` is the host's
+ * `CmsClient` (it satisfies `MediaSource`). Consumed by `@nuasite/collections-admin`
+ * and the webmaster collections tab.
+ */
+export { ComponentPicker, type ComponentPickerProps } from './component-picker'
+export { FormatToolbar, type FormatToolbarProps, useFormatTracking } from './format-toolbar'
+export { LinkPopover, type LinkPopoverProps } from './link-popover'
+export { MediaLibrary, type MediaLibraryProps } from './media-library'
+export { isMediaUnavailableError, type MediaContext, type MediaSource, type MediaUploadContext } from './media-source'
+export { MdxBlockCard, type MdxBlockCardProps } from './mdx-block-card'
+export { MdxBodyEditor, type MdxBodyEditorProps } from './mdx-body-editor'
+export { type InsertMdxComponentPayload, MDX_EXPR_PREFIX } from './mdx-plugin'
+export { SlotEditor } from './slot-editor'

package/src/link-popover.tsx

@@ -0,0 +1,64 @@
+/**
+ * Small link editor popover used by the toolbar: type/edit a URL, apply, or remove
+ * an existing link. Self-contained inline styles. (The original's page-path
+ * autocomplete is intentionally dropped — the headless editor has no page manifest;
+ * a plain URL covers link parity.)
+ */
+import { useState } from 'react'
+
+export interface LinkPopoverProps {
+	initialUrl: string
+	isEdit: boolean
+	onApply: (url: string) => void
+	onRemove?: () => void
+	onClose: () => void
+}
+
+const wrap: React.CSSProperties = {
+	display: 'flex',
+	gap: 6,
+	alignItems: 'center',
+	padding: 6,
+	border: '1px solid #d4d4d8',
+	borderRadius: 6,
+	background: '#fff',
+	boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
+	marginTop: 6,
+}
+const input: React.CSSProperties = { flex: 1, border: '1px solid #d4d4d8', borderRadius: 4, padding: '4px 8px', font: 'inherit', outline: 'none', minWidth: 0 }
+const btn: React.CSSProperties = { border: '1px solid #d4d4d8', background: '#fff', borderRadius: 4, padding: '4px 8px', font: 'inherit', fontSize: 12, cursor: 'pointer', color: '#3f3f46', whiteSpace: 'nowrap' }
+
+export function LinkPopover({ initialUrl, isEdit, onApply, onRemove, onClose }: LinkPopoverProps) {
+	const [url, setUrl] = useState(initialUrl)
+
+	const apply = () => {
+		const trimmed = url.trim()
+		if (trimmed !== '') onApply(trimmed)
+	}
+
+	return (
+		<div style={wrap} data-mdx-action="link" onMouseDown={e => e.stopPropagation()}>
+			<input
+				style={input}
+				autoFocus
+				placeholder="https://…"
+				value={url}
+				onChange={e => setUrl(e.target.value)}
+				onKeyDown={e => {
+					if (e.key === 'Enter') {
+						e.preventDefault()
+						apply()
+					}
+					if (e.key === 'Escape') onClose()
+				}}
+			/>
+			<button type="button" style={{ ...btn, background: '#2563eb', borderColor: '#2563eb', color: '#fff' }} onMouseDown={e => e.preventDefault()} onClick={apply}>
+				{isEdit ? 'Update' : 'Add'}
+			</button>
+			{isEdit && onRemove
+				? <button type="button" style={{ ...btn, color: '#dc2626' }} onMouseDown={e => e.preventDefault()} onClick={onRemove}>Remove</button>
+				: null}
+			<button type="button" style={btn} onMouseDown={e => e.preventDefault()} onClick={onClose}>Cancel</button>
+		</div>
+	)
+}

package/src/mdx-block-card.tsx

@@ -0,0 +1,227 @@
+/**
+ * Block-card view for an MDX component node (React port of the in-iframe preact
+ * `MdxBlockCard`). Renders a non-live card with feature parity to the original:
+ *  - typed prop widgets (boolean / color / image / number / url / date / text);
+ *  - `image` props open the media library to browse + upload (when `media` given);
+ *  - the default slot (`children`) is a nested WYSIWYG editor (`SlotEditor`);
+ *  - expression props (`prop={expr}`) stay read-only.
+ * Self-contained inline styles so it renders in any host without a stylesheet.
+ */
+import type { ComponentDefinition, ComponentProp } from '@nuasite/cms-types'
+import { useMemo, useState } from 'react'
+import { MediaLibrary } from './media-library'
+import type { MediaContext, MediaSource } from './media-source'
+import { MDX_EXPR_PREFIX } from './mdx-plugin'
+import { SlotEditor } from './slot-editor'
+
+export interface MdxBlockCardProps {
+	componentName: string
+	props: Record<string, string>
+	hasExpressions: boolean
+	slotContent: string
+	definition?: ComponentDefinition
+	/** Media source — enables image-prop browse/upload. Absent → image props are URL-only. */
+	media?: MediaSource
+	mediaContext?: MediaContext
+	onRemove: () => void
+	/** Set when the component has a default slot — edits the markdown children. */
+	onSlotContentChange?: (content: string) => void
+	/** Set when there are no expression props — static props are editable. */
+	onPropsChange?: (props: Record<string, string>) => void
+}
+
+const HTML_INPUT_TYPES: Record<string, string> = {
+	number: 'number',
+	url: 'url',
+	date: 'date',
+	datetime: 'datetime-local',
+	time: 'time',
+	email: 'email',
+	tel: 'tel',
+}
+
+function looksLikeUrl(value: string): boolean {
+	return value !== '' && /^(https?:\/\/|\/|\.\/)/.test(value)
+}
+
+const card: React.CSSProperties = { border: '1px solid #d4d4d8', borderRadius: 8, background: '#fafafa', margin: '8px 0', fontSize: 13 }
+const header: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'space-between',
+	gap: 8,
+	padding: '6px 10px',
+	borderBottom: '1px solid #ececed',
+	background: '#f1f1f3',
+	borderTopLeftRadius: 8,
+	borderTopRightRadius: 8,
+}
+const nameStyle: React.CSSProperties = { fontWeight: 600, fontFamily: 'ui-monospace, monospace', color: '#3f3f46' }
+const body: React.CSSProperties = { padding: '8px 10px', display: 'flex', flexDirection: 'column', gap: 8 }
+const rowLabel: React.CSSProperties = { fontSize: 11, color: '#71717a', marginBottom: 2 }
+const inputStyle: React.CSSProperties = { width: '100%', boxSizing: 'border-box', border: '1px solid #d4d4d8', borderRadius: 4, padding: '4px 6px', font: 'inherit', background: '#fff' }
+const roInput: React.CSSProperties = { ...inputStyle, background: '#f4f4f5', color: '#71717a' }
+const exprBadge: React.CSSProperties = { fontSize: 10, color: '#a16207', background: '#fef9c3', borderRadius: 3, padding: '0 4px', marginLeft: 6 }
+const removeBtn: React.CSSProperties = { border: 'none', background: 'transparent', color: '#a1a1aa', cursor: 'pointer', fontSize: 16, lineHeight: 1, padding: 2 }
+const browseBtn: React.CSSProperties = { border: '1px solid #d4d4d8', background: '#fff', borderRadius: 4, padding: '4px 8px', font: 'inherit', fontSize: 12, cursor: 'pointer', color: '#3f3f46', whiteSpace: 'nowrap' }
+
+// ---- typed prop field ----
+
+function PropField({ name, value, propType, editable, hasMedia, onChange, onBrowse }: {
+	name: string
+	value: string
+	propType: string
+	editable: boolean
+	hasMedia: boolean
+	onChange: (value: string) => void
+	onBrowse: () => void
+}) {
+	if (propType === 'boolean') {
+		return (
+			<label style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+				<input type="checkbox" checked={value === 'true'} disabled={!editable} onChange={e => onChange(e.target.checked ? 'true' : 'false')} />
+				<span style={{ color: '#52525b' }}>{value === 'true' ? 'Yes' : 'No'}</span>
+			</label>
+		)
+	}
+
+	if (propType === 'image') {
+		return (
+			<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+				{looksLikeUrl(value) ? <img src={value} alt="" style={{ maxHeight: 96, maxWidth: '100%', objectFit: 'contain', borderRadius: 4, alignSelf: 'flex-start' }} /> : null}
+				<div style={{ display: 'flex', gap: 6 }}>
+					<input
+						style={editable ? inputStyle : roInput}
+						value={value}
+						readOnly={!editable}
+						placeholder="Image URL or path"
+						onChange={editable ? e => onChange(e.target.value) : undefined}
+					/>
+					{editable && hasMedia ? <button type="button" style={browseBtn} data-mdx-action="props" onClick={onBrowse}>Browse</button> : null}
+				</div>
+			</div>
+		)
+	}
+
+	if (propType === 'color') {
+		return (
+			<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+				<input type="color" value={value || '#000000'} disabled={!editable} onChange={e => onChange(e.target.value)} style={{ width: 30, height: 28, padding: 0, border: '1px solid #d4d4d8', borderRadius: 4, background: 'transparent', cursor: editable ? 'pointer' : 'default' }} />
+				<input style={editable ? inputStyle : roInput} value={value} readOnly={!editable} placeholder="#000000" onChange={editable ? e => onChange(e.target.value) : undefined} />
+			</div>
+		)
+	}
+
+	const htmlType = HTML_INPUT_TYPES[propType] ?? 'text'
+	return (
+		<input
+			type={htmlType}
+			style={editable ? inputStyle : roInput}
+			value={value}
+			readOnly={!editable}
+			placeholder={`Enter ${name}…`}
+			onChange={editable ? e => onChange(e.target.value) : undefined}
+		/>
+	)
+}
+
+export function MdxBlockCard({
+	componentName,
+	props,
+	hasExpressions,
+	slotContent,
+	definition,
+	media,
+	mediaContext,
+	onRemove,
+	onSlotContentChange,
+	onPropsChange,
+}: MdxBlockCardProps) {
+	const hasDefaultSlot = definition?.slots?.includes('default') ?? Boolean(onSlotContentChange)
+	const entries = Object.entries(props)
+	const [browseField, setBrowseField] = useState<string | null>(null)
+
+	const propTypes = useMemo(() => {
+		const map = new Map<string, ComponentProp>()
+		for (const p of definition?.props ?? []) map.set(p.name, p)
+		return map
+	}, [definition])
+
+	const setProp = (name: string, value: string) => {
+		if (!onPropsChange) return
+		onPropsChange({ ...props, [name]: value })
+	}
+
+	return (
+		<div style={card} data-cms-ui="" contentEditable={false}>
+			<div style={header}>
+				<span style={nameStyle}>
+					{`<${componentName} />`}
+					{hasExpressions ? <span style={exprBadge}>expr · read-only</span> : null}
+				</span>
+				<button type="button" style={removeBtn} title="Remove block" data-mdx-action="remove" onClick={onRemove}>×</button>
+			</div>
+			<div style={body}>
+				{hasDefaultSlot
+					? (
+						<div data-mdx-action="children">
+							<div style={rowLabel}>Content</div>
+							{onSlotContentChange
+								? <SlotEditor value={slotContent} onChange={onSlotContentChange} />
+								: <div style={{ ...roInput, whiteSpace: 'pre-wrap', minHeight: 40 }}>{slotContent}</div>}
+						</div>
+					)
+					: null}
+
+				{entries.length === 0 && !hasDefaultSlot ? <div style={{ color: '#a1a1aa', fontSize: 12 }}>No props</div> : null}
+
+				{entries.map(([name, value]) => {
+					const isExpr = value.startsWith(MDX_EXPR_PREFIX)
+					const editable = Boolean(onPropsChange) && !isExpr
+					const def = propTypes.get(name)
+					const propType = (def?.type ?? '').toLowerCase()
+					return (
+						// A plain div (not a <label>): the boolean field renders its own <label>
+						// around the checkbox, and nested <label>s double-fire the toggle click.
+						<div key={name} style={{ display: 'block' }} data-mdx-action="props">
+							<div style={rowLabel}>
+								{name}
+								{def?.required ? <span style={{ color: '#dc2626' }}> *</span> : null}
+								{isExpr ? <span style={exprBadge}>expression</span> : null}
+							</div>
+							{isExpr
+								? <input style={roInput} value={`{${value.slice(MDX_EXPR_PREFIX.length)}}`} readOnly />
+								: (
+									<PropField
+										name={name}
+										value={value}
+										propType={propType}
+										editable={editable}
+										hasMedia={Boolean(media)}
+										onChange={v => setProp(name, v)}
+										onBrowse={() => setBrowseField(name)}
+									/>
+								)}
+						</div>
+					)
+				})}
+			</div>
+
+			{browseField !== null && media
+				? (
+					<MediaLibrary
+						media={media}
+						context={mediaContext}
+						field={browseField}
+						accept="image/*"
+						onSelect={(url) => {
+							setProp(browseField, url)
+							setBrowseField(null)
+						}}
+						onClose={() => setBrowseField(null)}
+					/>
+				)
+				: null}
+		</div>
+	)
+}