Version history components for collaborative document editing.
Provides a timeline of document versions, diff views, restore dialogs, and save-state indicators for TipTap-based collaborative editors.
Components
| Component | Purpose |
|---|---|
version_summary/1 | Single version entry in the timeline |
version_list/1 | Timeline of versions grouped by day |
version_diff/1 | Diff view between two document versions |
version_restore_dialog/1 | Confirmation dialog for restoring a version |
version_panel/1 | Full version history side panel |
version_badge/1 | "Saved N seconds ago" indicator |
Version map shape
Components that accept a :version map expect:
%{
id: "v-1",
author_name: "Alice Adams",
author_color: "#3B82F6",
author_avatar_url: "/avatars/alice.jpg", # optional
created_at: ~U[2026-03-19 10:00:00Z],
word_count: 1250,
word_count_delta: "+42", # optional
label: "Auto-save" # optional
}Summary
Functions
Renders a save-state indicator badge.
Renders a diff view between two document versions.
Renders a timeline of versions grouped by day with date headers.
Renders a full version history side panel.
Renders a confirmation dialog for restoring a previous version.
Renders a single version entry in the timeline.
Functions
Renders a save-state indicator badge.
Shows "Saved X ago" when changes are saved, or "Unsaved changes" with a warning style when there are pending unsaved modifications.
Example
<.version_badge
id="save-badge"
last_saved_at={~U[2026-03-19 10:00:00Z]}
has_unsaved={false}
/>Attributes
id(:string) (required)last_saved_at(:any) - Defaults tonil.has_unsaved(:boolean) - Defaults tofalse.class(:string) - Defaults tonil.
Renders a diff view between two document versions.
Additions are highlighted in green, removals in red, and modifications
show both the old and new content. Supports :inline and :side_by_side
display modes.
Example
<.version_diff
id="diff-view"
changes={[%{type: :added, path: [0], content: %{"type" => "paragraph"}}]}
mode={:inline}
/>Attributes
id(:string) (required)changes(:list) - Defaults to[].mode(:atom) - Defaults to:inline. Must be one of:inline, or:side_by_side.class(:string) - Defaults tonil.
Renders a timeline of versions grouped by day with date headers.
Each day group has a sticky date header and a list of version summaries.
Example
<.version_list
id="version-timeline"
versions={@versions}
active_version_id={@active_version_id}
/>Attributes
id(:string) (required)versions(:list) - Defaults to[].active_version_id(:string) - Defaults tonil.on_select(:string) - Defaults to"collab:version:select".class(:string) - Defaults tonil.
Renders a full version history side panel.
Contains a header with title and close button, the version list timeline, and a diff view for the currently selected version.
Example
<.version_panel
id="version-panel"
versions={@versions}
active_version_id={@active_version_id}
changes={@changes}
/>Attributes
id(:string) (required)versions(:list) - Defaults to[].active_version_id(:string) - Defaults tonil.changes(:list) - Defaults to[].on_close(:string) - Defaults to"collab:version:panel:close".class(:string) - Defaults tonil.
Renders a confirmation dialog for restoring a previous version.
Shows a modal overlay with version details, a warning message, and confirm/cancel buttons.
Example
<.version_restore_dialog
id="restore-dialog"
version={%{id: "v-1", author_name: "Alice", created_at: ~U[2026-03-19T10:00:00Z]}}
open={true}
/>Attributes
id(:string) (required)version(:map) - Defaults tonil.open(:boolean) - Defaults tofalse.on_confirm(:string) - Defaults to"collab:version:restore".on_cancel(:string) - Defaults to"collab:version:restore:cancel".class(:string) - Defaults tonil.
Renders a single version entry in the timeline.
Shows a colored dot on a vertical timeline line, author avatar, formatted time, an optional label, and a word count delta badge.
Example
<.version_summary
id="v-1"
version={%{id: "v-1", author_name: "Alice", author_color: "#3B82F6", created_at: ~U[2026-03-19T10:00:00Z], word_count: 1250, word_count_delta: "+42"}}
active={false}
/>Attributes
id(:string) (required)version(:map) (required)active(:boolean) - Defaults tofalse.on_select(:string) - Defaults to"collab:version:select".class(:string) - Defaults tonil.