Add OG Image field to content editor

[jdevalk]

Summary

• Adds an OG Image picker field next to the Featured Image in the content editor, using the existing MediaPickerModal
• Adds a description prop to ImageFieldRenderer so both image fields show helper text below the image
• Preserves seo.image in SeoPanel.emitChange so sidebar edits don't accidentally clear it

The _emdash_seo table and content API already fully support seo_image — this change exposes it in the admin UI.

Screenshot

Closes #327

Test plan

• Edit a post on a collection with hasSeo enabled
• Verify the OG Image picker appears next to the Featured Image in a 2-column grid
• Select an image via the media picker and save — confirm seo.image is set on the content API response
• Remove the OG image and save — confirm seo.image is cleared
• Edit SEO Title/Description in the sidebar — confirm the OG image is preserved
• Verify the image field does not appear for new (unsaved) posts or collections without hasSeo

🤖 Generated with Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: e30369e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 10 packages

Name	Type
@emdash-cms/admin	Patch
emdash	Patch
@emdash-cms/cloudflare	Patch
@emdash-cms/plugin-ai-moderation	Patch
@emdash-cms/plugin-atproto	Patch
@emdash-cms/plugin-audit-log	Patch
@emdash-cms/plugin-color	Patch
@emdash-cms/plugin-embeds	Patch
@emdash-cms/plugin-forms	Patch
@emdash-cms/plugin-webhook-notifier	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Pull request overview

This PR exposes per-content Open Graph (OG) image selection in the admin content editor for SEO-enabled collections, aligning the UI with existing seo.image support in the API/database.

Changes:

• Adds a new SeoImageField component that reuses MediaPickerModal to set/clear seo.image.
• Updates ContentEditor to render the OG Image picker next to an image field and adds helper-text support to ImageFieldRenderer.
• Updates SeoPanel.emitChange to include seo.image in the emitted SEO payload.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
packages/admin/src/components/SeoPanel.tsx	Includes image when emitting SEO updates from the sidebar.
packages/admin/src/components/SeoImageField.tsx	New OG Image picker field built on MediaPickerModal.
packages/admin/src/components/ContentEditor.tsx	Renders OG Image alongside an image field and adds description support for image fields.

Comments suppressed due to low confidence (1)

packages/admin/src/components/SeoPanel.tsx:44

• emitChange now always includes image: seo?.image || null. Because seo comes from props and is only refreshed after the update mutation + query invalidation, this value can be stale; editing title/description/canonical shortly after changing the OG image can send image: null and clear the newly-selected image on the server. Prefer leaving image undefined unless the panel is actually editing it (let the backend preserve existing values), or lift seo into shared local state so both components read the same up-to-date value before emitting changes.

	const emitChange = (patch: Partial<ContentSeoInput>) => {
		onChange({
			title: title || null,
			description: description || null,
			image: seo?.image || null,
			canonical: canonical || null,
			noIndex,
			...patch,
		});

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[ascorbic]

Thank you!! Could you look at the copilot reviews.

[pkg-pr-new]

Open in StackBlitz

@emdash-cms/admin

npm i https://pkg.pr.new/@emdash-cms/admin@328

@emdash-cms/auth

npm i https://pkg.pr.new/@emdash-cms/auth@328

@emdash-cms/blocks

npm i https://pkg.pr.new/@emdash-cms/blocks@328

@emdash-cms/cloudflare

npm i https://pkg.pr.new/@emdash-cms/cloudflare@328

emdash

npm i https://pkg.pr.new/emdash@328

create-emdash

npm i https://pkg.pr.new/create-emdash@328

@emdash-cms/gutenberg-to-portable-text

npm i https://pkg.pr.new/@emdash-cms/gutenberg-to-portable-text@328

@emdash-cms/x402

npm i https://pkg.pr.new/@emdash-cms/x402@328

@emdash-cms/plugin-ai-moderation

npm i https://pkg.pr.new/@emdash-cms/plugin-ai-moderation@328

@emdash-cms/plugin-atproto

npm i https://pkg.pr.new/@emdash-cms/plugin-atproto@328

@emdash-cms/plugin-audit-log

npm i https://pkg.pr.new/@emdash-cms/plugin-audit-log@328

@emdash-cms/plugin-color

npm i https://pkg.pr.new/@emdash-cms/plugin-color@328

@emdash-cms/plugin-embeds

npm i https://pkg.pr.new/@emdash-cms/plugin-embeds@328

@emdash-cms/plugin-forms

npm i https://pkg.pr.new/@emdash-cms/plugin-forms@328

@emdash-cms/plugin-webhook-notifier

npm i https://pkg.pr.new/@emdash-cms/plugin-webhook-notifier@328

commit: e30369e

[jdevalk]

Thank you!! Could you look at the copilot reviews.

Done.

[nickgraynews]

I'm looking forward to this one! Will be great to have. Thanks @jdevalk for the PR