AdvancedComposer

Location: src/components/AdvancedComposer.jsx

Overview

AdvancedComposer is the full-page post creation experience at the /compose route. It extends CreatePost with four editor types (simple, longform, drawing, magnetic poetry), a comprehensive style customization system (surface, typography, effects), draft management (both local auto-save and database-backed drafts), style presets, and a confirmation gate before publishing.

Users typically arrive here from CreatePost via the "Open full editor" button, with their in-progress content and selected intent passed through location.state.

Relevant Invariants

• Invariant #4: "Intent Precedes Interpretation" -- Intent selection carries over from CreatePost or can be chosen here.
• Invariant #10: "Expressive Freedom Is Spatially Contained" -- Rich style customization is contained to the author own posts.
• Invariant #19: "Complexity Must Be Earned" -- Advanced features are one step removed from the basic CreatePost flow.

Props

Prop	Type	Required	Default	Description
session	object	Yes	--	Supabase auth session

Editor Types

ID	Label	Description
simple	Quick Post	Plain text post
longform	Article	Rich text with formatting
drawing	Drawing	Canvas-based drawing
magnetic_poetry	Word Art	Drag-and-drop word tiles

Style System

The style panel has three tabs:

Appearance (Surface)

• light, dark, warm, cool

Typography (Font + Emphasis)

• Font options loaded from FONT_OPTIONS constant
• Emphasis: subtle, normal, strong

Effects (Texture)

• flat (clean and minimal), paper (subtle texture), soft-card (gentle shadows), ghost (translucent blur)

Key Behaviors

• Dual Draft System: useAutoSave persists to IndexedDB (commonplace_drafts database) on every change; useDrafts saves to the composer_drafts Supabase table for cross-device access.
• Style Presets: Users can save and load style configurations from the style_presets table.
• PostConfirmationGate: Before publishing, a modal asks the user to confirm their intent and review the post.
• Navigation State: Receives content, intent, images, audience, selectedCircleIds, sharingAllowed, contentNote, clipData, and clipId from CreatePost via useLocation().state. Note: voiceData is not passed from CreatePost; it is initialized as null and set via the VoiceRecorder component.
• Live Preview: Real-time preview panel shows how the post will look with current style settings.
• Content Note: Optional content note input for sensitive content.
• External Clips: Can attach external content cards (URLs) to posts.

Constants

Constant	Value	Description
MAX_FILE_SIZE	5242880 (5 MB)	Maximum image file size
MAX_IMAGES	10	Maximum images per post
ALLOWED_TYPES	[image/jpeg, image/png, image/gif, image/webp]	Accepted image MIME types

Usage

// Typically navigated to, not rendered directly
import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
navigate('/compose', {
  state: {
    intent: 'thinking_out_loud',
    content: 'Draft text...',
    images: [],
    audience: 'public',
    selectedCircleIds: [],
    sharingAllowed: true,
    contentNote: '',
    clipData: null,
    clipId: null
  }
});

Related

• CreatePost -- Simplified entry point that links to AdvancedComposer
• Post -- Displays the styled post output
• VoiceRecorder -- Voice recording integration

---

Last updated: 2026-02-07