# CollaborativeDocumentEditor

**Kind:** Component

**Source:** [`atloria-monorepo/apps/web/src/components/Editor/CollaborativeDocumentEditor.tsx`](https://github.com/sherkety/atloria/blob/main/atloria-monorepo/apps/web/src/components/Editor/CollaborativeDocumentEditor.tsx#L284)

## Props

| Name | Type | Required | Default |
|---|---|---|---|
| `documentId` | `string` | ✓ | - |
| `initialContent` | `string` | - | "" |
| `userId` | `string` | ✓ | - |
| `userName` | `string` | ✓ | - |
| `onChange` | `Function` | - | - |
| `editable` | `boolean` | - | true |
| `serverUrl` | `string` | - | - |
| `className` | `string` | - | "" |
| `showStatusBar` | `boolean` | - | true |
| `showCursors` | `boolean` | - | true |
| `projectId` | `string` | - | - |

## Diagram

```mermaid
graph TD
    component_CollaborativeDocumentEditor_61abc9e0["CollaborativeDocumentEditor"]
    class component_CollaborativeDocumentEditor_61abc9e0 rootComponent
```

## Relationships

- RENDERS → `EditorSkeleton`
- RENDERS → `EditorError`
- RENDERS → `CollaborationStatusBar`
- RENDERS → `UserCursors`
- RENDERS → `MDXEditor`
- RENDERS → `KitchenSinkToolbar`
- RENDERS → `Separator`
- RENDERS → `InsertBlockElement`
- RENDERS → `InsertAudienceButton`
- USES_HOOK → `useRef`
- USES_HOOK → `useState`
- USES_HOOK → `useCollaboration`
- USES_HOOK → `useSession`
- USES_HOOK → `useAudiences`
- USES_HOOK → `useMemo`
- USES_HOOK → `useAPIClient`
- USES_HOOK → `useCallback`
- USES_HOOK → `useEffect`