Draft vs Published Diff View

Compare draft changes against published content before publishing.

Overview

The diff view feature helps editors see exactly what will change when they publish. It reduces publishing anxiety and helps translators identify content changes.

How It Works

Field-Level Indicators

When editing a tour or stop, fields that have changed since the last publish show a colored indicator next to the label:

• Amber dot — Field has changed from the published version
• Green dot — Field is new (locale was never published)

Compare Changes Button

In the form header, a "Compare Changes" button shows when there are unpublished changes:

• Click to toggle diff view mode
• Shows count of changed fields (e.g., "2 changes")
• Keyboard shortcut: Cmd/Ctrl + D

Inline Diff Display

When diff view is enabled:

• Changed text fields show word-level differences
• Additions in green
• Deletions in red with strikethrough
• The diff replaces the input field (read-only while viewing diff)

State Persistence

The diff view preference is saved to localStorage, so it persists across sessions.

Supported Fields

Tour Editor

• Title
• Description

Stop Editor

• Title
• Description
• Transcription (data available, UI not yet rendered)

Edge Cases

Technical Details

Server Functions

// Tour locale diff
compareTourLocaleDiffFn({ data: { nanoId, locale } })
// Returns: { hasChanges, changedFields, fieldDiffs, publishedAt }

// Stop locale diff  
compareStopLocaleDiffFn({ data: { nanoId, locale } })
// Returns: { hasChanges, changedFields, fieldDiffs, publishedAt }

React Hook

const { 
  diffEnabled,      // boolean - is diff mode active
  setDiffEnabled,   // toggle diff mode
  changedCount,     // number of changed fields
  getFieldDiff,     // get diff data for a specific field
  publishedAt,      // when locale was last published
} = useDiffView({ type: 'tour', nanoId, locale })

Components

Related Documentation

• Publishing Overview Architecture
• Publishing