DocumentDeprecated
TipTap-based document viewer with composable annotation features.
Deprecated
Document is deprecated. Use Editor for new document
rendering, editing, and comment workflows.
Overview
Document renders markdown, HTML, or TipTap JSON through a shared read-only viewer. Feature providers such as Document.Annotatable add focused behavior around that viewer while leaving document data, persistence, and backend sync with the consumer.
Usage
import {
Document,
type AnnotatableProps,
type AnnotationData,
type DocumentContentType,
type DocumentProps,
useAnnotatable,
useHasSelection,
} from "@tilt-legal/cubitt-components/document";<Document content={markdownContent}>
<Document.Viewer />
</Document><Document content={markdownContent}>
<Document.Annotatable
annotations={annotations}
onAnnotationCreate={handleCreate}
onAnnotationUpdate={handleUpdate}
onAnnotationDelete={handleDelete}
>
<Document.Viewer />
<Document.Annotation.Sidebar />
<Document.Toolbar.Selection>
<Document.Annotation.AddButton />
</Document.Toolbar.Selection>
</Document.Annotatable>
</Document><Document content={markdownContent}>
<Document.Annotatable
annotations={annotations}
onAnnotationCreate={handleCreate}
onAnnotationUpdate={handleUpdate}
onAnnotationDelete={handleDelete}
>
<Document.Viewer />
<Document.Annotation.Sidebar>
<Document.Annotation.Sidebar.Header />
<Document.Annotation.Sidebar.List>
{annotations.map((annotation) => (
<Document.Annotation.Sidebar.Card
annotation={annotation}
key={annotation.id}
/>
))}
</Document.Annotation.Sidebar.List>
<Document.Annotation.Sidebar.Empty />
</Document.Annotation.Sidebar>
</Document.Annotatable>
</Document>Examples
Viewer
<Document content={markdownContent}>
<Document.Viewer />
</Document>Annotated Sidebar
<Document content={markdownContent}>
<Document.Annotatable
annotations={annotations}
onAnnotationCreate={handleCreate}
onAnnotationUpdate={handleUpdate}
onAnnotationDelete={handleDelete}
>
<Document.Viewer />
<Document.Annotation.Sidebar />
<Document.Toolbar.Selection>
<Document.Annotation.AddButton />
</Document.Toolbar.Selection>
</Document.Annotatable>
</Document>Architecture
Document
├── Document.Viewer
├── Document.Toolbar.Selection
├── Document.Annotatable
│ └── Document.Annotation.*
└── Document.Editable (future)Namespaces
| Namespace | Components |
|---|---|
Document.Toolbar.* | Selection |
Document.Annotation.* | Sidebar, AddButton, hooks |
Sidebar.* | Header, List, Empty, Card |
Sidebar.Card.* | Header, Textarea, Citation, Menu, more |
Props
Document
| Prop | Type | Default | Description |
|---|---|---|---|
content | string | JSONContent | - | Document content |
contentType | "markdown" | "html" | "json" | "markdown" | Format of the content |
extensions | Extension[] | - | Additional TipTap extensions |
editorOptions | Partial<EditorOptions> | - | TipTap editor options |
className | string | - | Layout class for the root container |
Document.Viewer
| Prop | Type | Description |
|---|---|---|
className | string | Layout class for the viewer |