Skip to content
weftGitHub

VersionHistory

Past versions of a document. Preview one, then restore it as a new version.

SourcePackage @weft-js/warp

Preview

tsx
import { state } from '@weft-js/core'import { Text, VersionHistory } from '@weft-js/warp'import type { Version } from '@weft-js/warp'export function Runbook() {  const versions = state(VERSIONS)  const restore = (v: Version) => {    const [now, ...older] = versions.value as [Version, ...Version[]]    versions.value = [{ id: `v${versions.value.length + 1}`, title: 'Current', meta: `Restored from "${v.title}"`, current: true }, { ...now, title: 'Before the restore', current: false }, ...older]  }  return <VersionHistory versions={versions} preview={versionPreview} onRestore={restore} />}const VERSIONS: Version[] = [  { id: 'v5', title: 'Current', meta: 'Jun, Lena, you · now', current: true },  { id: 'v4', title: 'After the d-4819 review', meta: 'Jun · 10:02', named: true },  { id: 'v3', title: 'Autosave', meta: 'You · 09:41' },  { id: 'v2', title: 'Autosave', meta: 'Lena · Yesterday' },  { id: 'v1', title: 'First draft', meta: 'Sam · Mon', named: true },]const PREVIEW_LINES: Record<string, string> = { v4: 'Roll back first, then read the logs.', v3: 'Read the logs, then decide.', v2: 'Ask in #incidents.', v1: 'To be written.' }const versionPreview = (v: Version) => <Text>{PREVIEW_LINES[v.id] ?? v.meta}</Text>

Installation

npm install @weft-js/warp

Usage

tsx
import { VersionHistory } from '@weft-js/warp'

Accessibility

  • This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

PropTypeDefaultDescription
versionsLive<Version[]>—Newest first.
preview((v: Version) => unknown)—Draws a version in the preview dialog.
labelstring'Version history'Names the list.
EventTypeDefaultDescription
onPreview((v: Version) => void)—Called when one is opened.
onRestore(v: Version) => void—Makes a new version from this one.

RelatedSync indicator