Content Composer

When to use

Reach for ContentComposer when you need a multi-step content-authoring surface in a CMS — one shell that composes structured metadata fields (json-form), a rich body (rich-text-editor / Plate or a plaintext fallback), and a captured/edited hero (media-editor). Each content type is one declarative ComposerConfig; adding a type is a JSON file, not a new component. The shell owns step navigation, the blocking gates, autosave, the draft → publish → schedule lifecycle, and the upload.

Basic example

import {
  ContentComposer,
  createNewsComposerConfig,
} from "@/components/content-composer"

const newsConfig = createNewsComposerConfig({
  // async author loader for the author-picker field (optional)
  authorSource: (q) => fetchAuthors(q),
})

export function NewsComposer() {
  return (
    <ContentComposer
      config={newsConfig}
      // the SHELL owns upload — pass a fn (or the uploadUrl shorthand)
      uploader={async (blob, meta) => {
        const url = await uploadToStorage(blob, meta.mimeType)
        return { url }
      }}
      onAutosave={(draft) => persistDraft(draft)}     // debounced (~800ms)
      onSaveDraft={(item) => saveContentItem(item)}   // status: "draft"
      onPublish={(item) => saveContentItem(item)}     // status: "published"
      onSchedule={(item, at) => scheduleItem(item, at)}
    />
  )
}

Re-editing an item

<ContentComposer
  config={newsConfig}
  initialItem={existingArticle}     // drives the inverse adapter
  initialBody={persistedBodyValue}  // body is NOT on NewsCardItem
  uploader={uploader}
  onPublish={(item) => patchContentItem(item)}
/>

On re-publish the adapter omits engagement counts (likeCount, views, …) — it never zeroes them — so your PATCH/merge preserves the real numbers.

Notes

• Configs are data. Two ship: news (single hero via mediaSlot) and post (multi-media viamediaCarouselSlot → carousel-composer — drop/browse N photo+video, reorder, per-item edit). Post authoring is fully live; only its publish path (the post-content-item adapter + multi-blob upload-at-publish) is deferred to the v0.3 post backend. Adding a type is a JSON file, not a new component.
• Upload is lazy. The hero blob is captured when you leave the media step and uploaded only at save/publish/schedule — never stored in the draft JSON. Autosave persists the editor state + the uploaded URL, not the blob.
• Gates are blocking.Forward navigation runs each step's gate; backward is free. Publish/schedule re-run every gate. A referenced slot with no registered substrate renders a degraded fallback (non-blocking) instead.
• Draft state is a controlled triplet (value / defaultValue / onChange) — or stay headless with useComposerState.
• Override or extend substrates via the substrates prop; custom json-form fields ship as tagsFieldRenderer + authorPickerFieldRenderer.