Content Composer

Install it

Source

1"use client";
2 
3import * as React from "react";
4import type {
5  ComposerCtx,
6  ComposerDraft,
7  ComposerStepCtx,
8  ComposerStepValue,
9  NewsCardItem,
10  ContentComposerHandle,
11  ContentComposerProps,
12  ExportMetadata,
13  GateResult,
14  MediaSlotValue,
15  SlotHandle,
16  SlotKind,
17  SlotValueFor,
18} from "./types";
19import { makeEmptyDraft } from "./lib/reducer";
20import { DEFAULT_SUBSTRATES } from "./lib/substrates";
21import { evaluateStep } from "./lib/gates";
22import { resolveUploader } from "./lib/upload";
23import { resolvePublishCtaArms } from "./lib/publish-cta";
24import { getAdapter } from "./adapters/adapter-registry";
25import { useComposerState } from "./hooks/use-composer-state";
26import { useSlotHandles } from "./hooks/use-slot-handles";
27import { useAutosave } from "./hooks/use-autosave";
28import { ComposerContext, ComposerStepContext } from "./hooks/use-composer-context";
29import { ComposerShell } from "./parts/composer-shell";
30import { ComposerDialog } from "./parts/composer-dialog";
31import { SlotMount } from "./parts/slot-mount";
32import { MediaSourceBlobCacheContext } from "./parts/media-substrate";
33import {
34  CarouselLiveCacheContext,
35  carouselDisplacedUrls,
36} from "./parts/media-carousel-substrate";
37import type { MediaCarouselItem } from "@/registry/components/media/carousel-composer/carousel-composer";
38import { PublishBar } from "./parts/publish-bar";
39 
40function errorMessage(e: unknown): string {
41  return e instanceof Error ? e.message : String(e);
42}
43 
44/**
45 * content-composer — the multi-step content-authoring SHELL.
46 *
47 * One JSON `ComposerConfig` per content type drives the steps; each step's slot
48 * is rendered by a substrate (json-form / rich-text-editor / media-editor).
49 * The shell owns step navigation + the blocking gates, autosave (draft-level
50 * dirty), the draft → publish → schedule FSM, lazy upload-on-publish, and the
51 * per-content-type adapter to the backend `NewsCardItem`.
52 */
53export const ContentComposer = React.forwardRef<
54  ContentComposerHandle,
55  ContentComposerProps
56>(function ContentComposer(props, ref) {
57  const { config } = props;
58 
59  // ── Seed (T1): controlled value wins; else defaultValue; else inverse-adapter
60  //    from initialItem; the body always re-seeds via the separate initialBody leg.
61  const [initialDraft] = React.useState<ComposerDraft>(() => {
62    const base = props.defaultValue ?? makeEmptyDraft(config.id);
63    let seeded = base;
64    if (!props.defaultValue && props.initialItem) {
65// … truncated

What it pulls in

npm packages

• lucide-react

Other registry items

• @ilinxa/json-form
• @ilinxa/rich-text-editor
• @ilinxa/media-editor
• @ilinxa/media-editor-capture
• @ilinxa/carousel-composer
• @ilinxa/news-card
• badge
• button
• command
• dialog
• input
• popover
• separator
• textarea

Files it writes

• src/registry/components/media/content-composer/content-composer.tsx
• src/registry/components/media/content-composer/index.ts
• src/registry/components/media/content-composer/types.ts
• src/registry/components/media/content-composer/adapters/adapter-registry.ts
• src/registry/components/media/content-composer/configs/news-composer.config.ts
• src/registry/components/media/content-composer/configs/post-composer.config.ts
• src/registry/components/media/content-composer/hooks/use-autosave.ts
• src/registry/components/media/content-composer/hooks/use-body-dirty.ts
• src/registry/components/media/content-composer/hooks/use-composer-context.ts
• src/registry/components/media/content-composer/hooks/use-composer-state.ts
• src/registry/components/media/content-composer/hooks/use-slot-handles.ts
• src/registry/components/media/content-composer/lib/assign-ref.ts
• src/registry/components/media/content-composer/lib/clamp-media-sources.ts
• src/registry/components/media/content-composer/lib/gates.ts
• src/registry/components/media/content-composer/lib/hydration.ts
• src/registry/components/media/content-composer/lib/phase-reducer.ts
• src/registry/components/media/content-composer/lib/publish-cta.ts
• src/registry/components/media/content-composer/lib/reducer.ts
• src/registry/components/media/content-composer/lib/substrates.tsx
• src/registry/components/media/content-composer/lib/upload.ts
• src/registry/components/media/content-composer/parts/body-substrate-plaintext.tsx
• src/registry/components/media/content-composer/parts/body-substrate-plate.tsx
• src/registry/components/media/content-composer/parts/body-substrate.tsx
• src/registry/components/media/content-composer/parts/composer-dialog.tsx
• src/registry/components/media/content-composer/parts/composer-shell.tsx
• src/registry/components/media/content-composer/parts/field-author-picker.tsx
• src/registry/components/media/content-composer/parts/field-tags.tsx
• src/registry/components/media/content-composer/parts/json-form-substrate.tsx
• src/registry/components/media/content-composer/parts/media-substrate.tsx
• src/registry/components/media/content-composer/parts/media-carousel-substrate.tsx
• src/registry/components/media/content-composer/parts/missing-substrate.tsx
• src/registry/components/media/content-composer/parts/publish-bar.tsx
• src/registry/components/media/content-composer/parts/slot-mount.tsx
• src/registry/components/media/content-composer/parts/step-indicator.tsx