`Document` is deprecated. Use [`Editor`](/components/editor) for new document rendering, editing, and comment workflows. ## Overview [#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 [#usage] ```tsx import { Document, type AnnotatableProps, type AnnotationData, type DocumentContentType, type DocumentProps, useAnnotatable, useHasSelection, } from "@tilt-legal/cubitt-components/document"; ``` ```tsx ``` ```tsx ``` ```tsx {annotations.map((annotation) => ( ))} ``` ## Examples [#examples] ### Viewer [#viewer] ```tsx ``` ### Annotated Sidebar [#annotated-sidebar] ```tsx ``` ## Architecture [#architecture] ```text Document ├── Document.Viewer ├── Document.Toolbar.Selection ├── Document.Annotatable │ └── Document.Annotation.* └── Document.Editable (future) ``` ### Namespaces [#namespaces] | Namespace | Components | | ----------------------- | ---------------------------------------------- | | `Document.Toolbar.*` | `Selection` | | `Document.Annotation.*` | `Sidebar`, `AddButton`, hooks | | `Sidebar.*` | `Header`, `List`, `Empty`, `Card` | | `Sidebar.Card.*` | `Header`, `Textarea`, `Citation`, `Menu`, more | ## Props [#props] ### Document [#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` | - | TipTap editor options | | `className` | `string` | - | Layout class for the root container | ### Document.Viewer [#documentviewer] | Prop | Type | Description | | ----------- | -------- | --------------------------- | | `className` | `string` | Layout class for the viewer |