Content Editing

Status: ✅ Implemented (Phase 0-5 complete, Phase 6 partial) Version: 1.0 Last Updated: 2026-02-03

Overview

The Content Editing feature enables Game Masters to modify generated content directly in the browser with inline editing, version history, and campaign association. Currently implemented for NPCs and Encounters with comprehensive validation and multi-device support.

Key Features

✅ Implemented

1. Inline Field Editing (REQ-1)

• Hover-to-edit: Pencil icon appears on hover over editable fields
• Click-to-edit: Single click enters edit mode with auto-focus
• Save options:
  • Enter key: Quick save
  • Click checkmark: Confirm save
  • Escape key: Cancel changes
• Supported content types: NPCs, Encounters

2. Modal Stat Block Editor (REQ-2)

• Full stat editing: Modal dialog for complex edits (NPC stat blocks)
• Apply/Cancel: Explicit save or discard with confirmation
• Keyboard shortcuts:
  • Cmd/Ctrl+S: Save modal changes
  • Escape: Close with unsaved changes warning

3. Auto-Save & Draft Recovery (REQ-3)

• Auto-save interval: 30 seconds to localStorage
• Draft persistence: 24-hour expiration
• Crash recovery: Restore prompt on page reload
• Privacy: Drafts stored client-side only

4. Version History (REQ-4)

• Automatic versioning: Every save creates new version
• Version metadata: Timestamp, edit type (AI vs Manual), change summary
• Restore capability: Click to restore any previous version with confirmation
• Pagination: 10 versions per page

5. Campaign Association (REQ-5)

• Add to campaign: Dropdown selector with search
• Quick-create: Create new campaign inline
• Campaign badges: Visual indicator of associations
• Remove: Confirmation dialog prevents accidents

6. Keyboard Shortcuts (REQ-6)

• Enter: Save inline field (text/number types)
• Escape: Cancel inline edit or close modal with warning
• Cmd/Ctrl+S: Save modal changes

7. Dirty State Tracking (REQ-7)

• Unsaved changes warning: Browser navigation prompt
• Visual indicators: Modified fields highlighted
• Field-level tracking: Granular dirty state per field

8. Validation & Error Handling (REQ-8)

• D&D 5e validation:
  • Ability scores: 1-30 (errors)
  • Armor Class: 1-30 (errors), 10-25 typical (warnings)
  • Hit Points: 1-999
  • Challenge Rating: 0-30
  • Proficiency Bonus: 2-9
• Error display: Red border, error message, save blocked
• Warning display: Yellow border, warning message, save allowed
• Debounced validation: 300ms delay for real-time feedback

9. Multi-Device Support (REQ-9)

• Touch-friendly: 44x44px minimum button targets (WCAG 2.1 AA)
• Responsive design: Tailwind breakpoints (md: 768px)
• Native keyboards: Mobile number input with inputMode="numeric"
• Full-screen modals: Mobile < 768px

10. Optimistic Updates (REQ-10)

• Immediate feedback: UI updates before API response
• Rollback on error: Reverts to previous value if save fails
• Toast notifications: Success/error feedback

Content Type Coverage

User Guide

Editing an NPC

1. Navigate to NPC Detail Page: /content/npc/[id]

2. Inline Editing:

   • Hover over any field (name, AC, HP, ability scores)
   • Click the pencil icon or field text
   • Edit the value
   • Press Enter or click checkmark to save
   • Press Escape or click X to cancel

3. Modal Stat Block Editing:

   • Click "Edit Stat Block" button
   • Modify ability scores, AC, HP, CR, proficiency in form
   • Click "Apply" or press Cmd/Ctrl+S to save
   • Click "Cancel" or press Escape to discard

4. Version History:

   • Click "Version History" button (opens sidebar)
   • Browse previous versions with timestamps
   • Click "Restore" on desired version
   • Confirm restoration in dialog

5. Campaign Association:

   • Click "Add to Campaign" dropdown
   • Select existing campaign or "Create New Campaign"
   • Confirm association
   • Badge appears showing campaign membership
   • Click badge → "Remove from Campaign" to unassociate

Editing an Encounter

1. Navigate to Encounter Detail Page: /content/encounter/[id]

2. Edit Mode:

   • Click "Edit Encounter" button
   • Inline edit: Name field becomes editable
   • Difficulty: Dropdown selector (Easy/Medium/Hard/Deadly)
   • Enemy counts: Use +/- buttons on each enemy group

3. Enemy Count Adjustment:

   • Click + to add one creature
   • Click - to remove one creature (minimum 1)
   • XP automatically recalculates on save

4. Save/Cancel:

   • Click "Save Changes" to persist
   • Click "Cancel" to discard and exit edit mode

Draft Recovery

If your browser crashes or you accidentally close the tab:

1. Reload the content page you were editing
2. Look for restore prompt: "Restore unsaved changes?"
3. Click "Restore" to recover draft (< 24 hours old)
4. Click "Discard" to start fresh

Validation Rules

NPC Stats (D&D 5e Compliance)

Error behavior: Save button disabled, red border, error message below field.

Warning behavior: Save button enabled, yellow border, warning message with ⚠️ icon.

Encounter Validation

• Difficulty: Must be Easy/Medium/Hard/Deadly
• Enemy Count: Minimum 1 per group
• Total CR: Recalculated automatically

API Endpoints

Content Save

• PATCH /api/content/[id]: Update content fields with versioning
• Payload: { updates: { [field]: value }, changeSummary: string }
• Response: { success: true, version: VersionRecord }

Version History

• GET /api/content/[id]/versions: Fetch version history
• Query: ?page=1&limit=10
• Response: { versions: VersionRecord[], hasMore: boolean }

Campaign Association

• POST /api/campaigns/[id]/content: Add content to campaign
• DELETE /api/campaigns/[id]/content/[contentId]: Remove association

Technical Architecture

Components

• InlineEditableField: Generic inline editing component with validation
• ModalEditor: Radix UI Dialog wrapper with Apply/Cancel
• StatBlockForm: D&D 5e stat editing form
• DirtyStateProvider: React Context for dirty state tracking
• CampaignAssociationButton: Dropdown with campaign selector
• VersionHistoryPanel: Sidebar with version list and restore

Hooks

• useContentEditor: Central state management for edit operations
• useAutoSave: localStorage auto-save with 30s interval
• useVersionHistory: React Query for version fetching
• useCampaignAssociation: Campaign CRUD with optimistic updates

Services

• ContentSaveService: API integration for saving with versioning
• content-validators.ts: D&D 5e validation rules

Database Schema

-- content_versions table
CREATE TABLE content_versions (
  id UUID PRIMARY KEY,
  content_id UUID REFERENCES content(id),
  version_number INTEGER NOT NULL,
  data JSONB NOT NULL,
  change_summary TEXT,
  created_by UUID REFERENCES auth.users(id),
  created_at TIMESTAMPTZ DEFAULT NOW(),
  edit_type VARCHAR(20) CHECK (edit_type IN ('ai_generated', 'manual_edit'))
);

-- campaign_content junction table
CREATE TABLE campaign_content (
  campaign_id UUID REFERENCES campaigns(id) ON DELETE CASCADE,
  content_id UUID REFERENCES content(id) ON DELETE CASCADE,
  added_at TIMESTAMPTZ DEFAULT NOW(),
  PRIMARY KEY (campaign_id, content_id)
);

Performance Metrics

Accessibility (WCAG 2.1 AA)

• Touch targets: 44x44px minimum on mobile
• Keyboard navigation: Full keyboard support
• ARIA labels: All interactive elements labeled
• Error announcements: role="alert" for errors, role="status" for warnings
• Focus management: Auto-focus on edit mode entry

Known Limitations

1. Plot editing: Complex structure (acts, scenes, resolution paths) requires dedicated refactoring
2. Map editing: Metadata editing deferred to visual map editor spec
3. Bulk editing: Not yet implemented (future enhancement)
4. Undo/Redo: Use version history instead
5. Collaborative editing: Not supported (single-user only)

Troubleshooting

Draft won't restore

• Check age: Drafts expire after 24 hours
• Check localStorage: May be full or disabled (privacy mode)
• Clear and retry: Remove draft key manually in DevTools

Validation errors prevent save

• Check error message: Red text below field indicates issue
• Fix value: Must be within D&D 5e rules (see Validation Rules)
• Warnings OK: Yellow warnings allow save

Version history not loading

• Check authentication: Must be logged in
• Check ownership: Content must belong to your account
• Check network: API may be down (check /api/health)

Future Enhancements

• Plot editing with scene flow visual editor
• Map metadata editing
• Bulk edit mode (multi-select)
• Undo/Redo stack
• Change tracking with diff view
• Collaborative editing (WebSockets)
• AI-assisted editing suggestions
• Export edited content to PDF/Markdown

Related Documentation

• API Documentation
• Testing Guide
• Architecture: Content Editing
• E2E Tests

Changelog

Version 1.0 (2026-02-03)

• ✅ Initial release
• ✅ NPC inline editing with validation
• ✅ NPC modal stat block editor
• ✅ Auto-save and draft recovery
• ✅ Version history with restore
• ✅ Campaign association
• ✅ Encounter editing (difficulty + enemy counts)
• ✅ Touch-friendly mobile controls
• ✅ E2E test coverage